import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, ViewChildren, HostBinding, HostListener, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';

class WorkspaceSwitchComponent {
    eRef;
    changeDetectorRef;
    workspaces = [];
    footerButtonLabel = 'Adicionar';
    showFooterButton = true;
    disabled = false;
    footerButtonClicked = new EventEmitter();
    selected = new EventEmitter();
    listItems = null;
    get open() {
        return this._open;
    }
    set open(open) {
        this._open = open;
        this.changeDetectorRef.detectChanges();
        if (open) {
            this._calculateListMaxHeight();
        }
    }
    height = 0;
    selectedItemIndex = 0;
    currentItemIndex = 0;
    _open = false;
    constructor(eRef, changeDetectorRef) {
        this.eRef = eRef;
        this.changeDetectorRef = changeDetectorRef;
    }
    tabindex = 0;
    onClickout(event) {
        if (!this.eRef.nativeElement.contains(event.target)) {
            this.open = false;
        }
    }
    onKeydown(event) {
        if (event.key === 'Enter' || event.key === ' ') {
            if (this.open) {
                const workspace = this.workspaces[this.selectedItemIndex];
                if (workspace.disabled) {
                    return;
                }
                this.selectedItemIndex = this.currentItemIndex;
                this.selected.emit(this.workspaces[this.selectedItemIndex]);
            }
            this.open = !this.open;
        }
        else if (event.key === 'Escape') {
            this.open = false;
        }
        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();
            }
        }
    }
    ngOnInit() {
        if (this.disabled) {
            this.tabindex = -1;
        }
    }
    validations() {
        if (!this.workspaces.length) {
            throw new Error('Workspaces list is empty.');
        }
    }
    buttonOnBlur() {
        this.open = false;
        this.currentItemIndex = this.selectedItemIndex;
    }
    onSelectItem(workspace) {
        if (workspace.disabled) {
            return;
        }
        this.open = false;
        this.selectedItemIndex = this.workspaces.indexOf(workspace);
        this.currentItemIndex = this.selectedItemIndex;
        this.selected.emit(workspace);
    }
    onFooterButtonClick() {
        this.open = false;
        this.footerButtonClicked.emit();
    }
    _calculateListMaxHeight() {
        const workspaceListRef = this.eRef.nativeElement.querySelector('#workspace-list');
        const { top } = workspaceListRef.getBoundingClientRect();
        this.height = window.innerHeight - top - 20 - (this.showFooterButton ? 64 : 0);
        this.changeDetectorRef.detectChanges();
    }
    _scrollToCurrentItem() {
        const currentItem = this.listItems?.toArray()[this.currentItemIndex];
        if (currentItem) {
            currentItem.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkspaceSwitchComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WorkspaceSwitchComponent, selector: "s-workspace-switch", inputs: { workspaces: "workspaces", footerButtonLabel: "footerButtonLabel", showFooterButton: "showFooterButton", disabled: "disabled" }, outputs: { footerButtonClicked: "footerButtonClicked", selected: "selected" }, host: { listeners: { "document:click": "onClickout($event)", "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "this.tabindex" } }, viewQueries: [{ propertyName: "listItems", predicate: ["listItem"], descendants: true }], ngImport: i0, template: "<div\n    class=\"workspace-switch\"\n    [ngClass]=\"{ 'workspace-switch--disabled': disabled }\"\n    (blur)=\"buttonOnBlur()\"\n>\n    <div\n        class=\"button\"\n        (click)=\"open = !open\"\n    >\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\n        *ngIf=\"!disabled && open\"\n        class=\"drop-panel\"\n    >\n        <ul\n            id=\"workspace-list\"\n            class=\"workspace-list\"\n            [ngStyle]=\"{ 'max-height': height + 'px' }\"\n        >\n\n            @for(workspace of workspaces; track workspace.id; let i = $index) {\n               <li\n                   #listItem\n                   class=\"workspace\"\n                   [ngClass]=\"{\n                       'workspace--focused': i === currentItemIndex && !workspace.disabled,\n                       'workspace--disabled': workspace.disabled,\n                   }\"\n                   (click)=\"onSelectItem(workspace)\"\n               >\n                   <div class=\"item\">\n                       <span class=\"title\">{{ workspace.title }}</span>\n                       <span class=\"subtitle\">{{ workspace.subtitle }}</span>\n                   </div>\n\n                   @if (i === selectedItemIndex) {\n                      <span class=\"active-icon fas fa-check\"></span>\n                   }\n               </li>\n            }\n\n        </ul>\n        <div\n            *ngIf=\"showFooterButton\"\n            class=\"footer\"\n        >\n            <div\n                class=\"footer__button\"\n                (click)=\"onFooterButtonClick()\"\n            >\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>\n", styles: [".workspace-switch{border-radius:4px;border:1px solid transparent;width:324px}.workspace-switch .button{align-items:center;background-color:#fff;border:none;border-radius:3px;cursor:pointer;display:flex;justify-content:space-between;-webkit-user-select:none;user-select:none;width:100%}.workspace-switch .button .icons{display:flex;flex-direction:column;justify-content:space-between;margin:0 12px}.workspace-switch .drop-panel{background-color:#fff;border-radius:4px;box-shadow:0 1px 5px #00000040;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{align-items:center;display:flex;justify-content:space-between;-webkit-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 .title,.workspace-switch .drop-panel .workspace-list .workspace--disabled .item .subtitle{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{align-items:center;border:1px solid #d8d8d8;border-radius:4px;padding:8px 12px;-webkit-user-select:none;user-select:none;display:flex;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{align-items:flex-start;display:flex;flex-direction:column;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 .title,.workspace-switch--disabled .item .subtitle{color:#ccc}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkspaceSwitchComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-workspace-switch', template: "<div\n    class=\"workspace-switch\"\n    [ngClass]=\"{ 'workspace-switch--disabled': disabled }\"\n    (blur)=\"buttonOnBlur()\"\n>\n    <div\n        class=\"button\"\n        (click)=\"open = !open\"\n    >\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\n        *ngIf=\"!disabled && open\"\n        class=\"drop-panel\"\n    >\n        <ul\n            id=\"workspace-list\"\n            class=\"workspace-list\"\n            [ngStyle]=\"{ 'max-height': height + 'px' }\"\n        >\n\n            @for(workspace of workspaces; track workspace.id; let i = $index) {\n               <li\n                   #listItem\n                   class=\"workspace\"\n                   [ngClass]=\"{\n                       'workspace--focused': i === currentItemIndex && !workspace.disabled,\n                       'workspace--disabled': workspace.disabled,\n                   }\"\n                   (click)=\"onSelectItem(workspace)\"\n               >\n                   <div class=\"item\">\n                       <span class=\"title\">{{ workspace.title }}</span>\n                       <span class=\"subtitle\">{{ workspace.subtitle }}</span>\n                   </div>\n\n                   @if (i === selectedItemIndex) {\n                      <span class=\"active-icon fas fa-check\"></span>\n                   }\n               </li>\n            }\n\n        </ul>\n        <div\n            *ngIf=\"showFooterButton\"\n            class=\"footer\"\n        >\n            <div\n                class=\"footer__button\"\n                (click)=\"onFooterButtonClick()\"\n            >\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>\n", styles: [".workspace-switch{border-radius:4px;border:1px solid transparent;width:324px}.workspace-switch .button{align-items:center;background-color:#fff;border:none;border-radius:3px;cursor:pointer;display:flex;justify-content:space-between;-webkit-user-select:none;user-select:none;width:100%}.workspace-switch .button .icons{display:flex;flex-direction:column;justify-content:space-between;margin:0 12px}.workspace-switch .drop-panel{background-color:#fff;border-radius:4px;box-shadow:0 1px 5px #00000040;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{align-items:center;display:flex;justify-content:space-between;-webkit-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 .title,.workspace-switch .drop-panel .workspace-list .workspace--disabled .item .subtitle{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{align-items:center;border:1px solid #d8d8d8;border-radius:4px;padding:8px 12px;-webkit-user-select:none;user-select:none;display:flex;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{align-items:flex-start;display:flex;flex-direction:column;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 .title,.workspace-switch--disabled .item .subtitle{color:#ccc}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { workspaces: [{
                type: Input,
                args: [{ required: true }]
            }], footerButtonLabel: [{
                type: Input
            }], showFooterButton: [{
                type: Input
            }], disabled: [{
                type: Input
            }], footerButtonClicked: [{
                type: Output
            }], selected: [{
                type: Output
            }], listItems: [{
                type: ViewChildren,
                args: ['listItem']
            }], tabindex: [{
                type: HostBinding,
                args: ['attr.tabindex']
            }], onClickout: [{
                type: HostListener,
                args: ['document:click', ['$event']]
            }], onKeydown: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }] } });

class WorkspaceSwitchModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkspaceSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: WorkspaceSwitchModule, declarations: [WorkspaceSwitchComponent], imports: [CommonModule], exports: [WorkspaceSwitchComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkspaceSwitchModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WorkspaceSwitchModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule],
                    declarations: [WorkspaceSwitchComponent],
                    exports: [WorkspaceSwitchComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { WorkspaceSwitchComponent, WorkspaceSwitchModule };
//# sourceMappingURL=seniorsistemas-angular-components-workspace-switch.mjs.map
