import { Component, Input, output } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import { InsightsCardComponent } from '../insights-card/insights-card.component';
import { SVGFactoryDirective } from '@seniorsistemas/angular-components/common';
import { TranslatePipe } from '@ngx-translate/core';
import * as i0 from "@angular/core";
export class InsightsSidebarComponent {
    insights = [];
    hasPermission = false;
    introText;
    introTemplate = null;
    emptyText;
    emptyTemplate = null;
    noPermissionText;
    noPermissionTemplate = null;
    closedSidebar = output();
    openedSidebar = output();
    opened = false;
    toggle() {
        const newState = !this.opened;
        if (newState) {
            this.open();
        }
        else {
            this.close();
        }
    }
    open() {
        this.opened = true;
        this.openedSidebar.emit();
    }
    close() {
        this.opened = false;
        this.closedSidebar.emit();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InsightsSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: InsightsSidebarComponent, isStandalone: true, selector: "s-insights-sidebar", inputs: { insights: "insights", hasPermission: "hasPermission", introText: "introText", introTemplate: "introTemplate", emptyText: "emptyText", emptyTemplate: "emptyTemplate", noPermissionText: "noPermissionText", noPermissionTemplate: "noPermissionTemplate" }, outputs: { closedSidebar: "closedSidebar", openedSidebar: "openedSidebar" }, ngImport: i0, template: "<div\r\n    class=\"sidebar\"\r\n    [class.opened]=\"opened\"\r\n>\r\n    <div class=\"header\">\r\n        <button\r\n            (click)=\"close()\"\r\n            class=\"option\"\r\n        >\r\n            <span class=\"far fa-chevron-double-right\"></span>\r\n        </button>\r\n        <div class=\"title\">\r\n            <span><ng-container [ngTemplateOutlet]=\"iassistIcon\"></ng-container></span>\r\n            <span>IAssist Insights</span>\r\n        </div>\r\n    </div>\r\n    <div class=\"intro\">\r\n        @if (hasPermission) {\r\n            @if (insights.length) {\r\n                @if (introTemplate) {\r\n                    <ng-container *ngTemplateOutlet=\"introTemplate\"></ng-container>\r\n                } @else {\r\n                    <span class=\"text\">{{ introText || 'platform.angular_components.insight_intro' | translate }}</span>\r\n                }\r\n            } @else {\r\n                @if (emptyTemplate) {\r\n                    <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\r\n                } @else {\r\n                    <span class=\"text\">{{ emptyText || 'platform.angular_components.insight_empty' | translate }}</span>\r\n                }\r\n            }\r\n        } @else {\r\n            @if (noPermissionTemplate) {\r\n                <ng-container *ngTemplateOutlet=\"noPermissionTemplate\"></ng-container>\r\n            } @else {\r\n                <span>{{ noPermissionText || 'platform.angular_components.insight_no_permission' | translate }}</span>\r\n            }\r\n        }\r\n    </div>\r\n    <div class=\"insights\">\r\n        @if (insights.length) {\r\n            @for (insight of insights; track insight) {\r\n                <s-insights-card [insight]=\"insight\"> </s-insights-card>\r\n            }\r\n        }\r\n    </div>\r\n</div>\r\n\r\n<ng-template #iassistIcon>\r\n    <div style=\"width: 28px; height: 28px\">\r\n        <span *sSVGFactory=\"'iassist'\"></span>\r\n    </div>\r\n</ng-template>\r\n", styles: [".sidebar{background-color:#fff;border-left:1px solid #dedce5;height:100%;overflow-x:hidden;position:fixed;right:-25%;transition:.5s;top:0;width:25%;z-index:1002}.sidebar .header{border-bottom:1px solid #dedce5;display:flex;gap:16px;padding:12px 20px}.sidebar .header .option{background-color:transparent;border:none;color:#428bca;cursor:pointer;font-size:16px;padding:12px}.sidebar .header .title{align-items:center;color:#212533;display:flex;font-family:Open Sans,sans-serif;font-size:16px;gap:16px;line-height:1;-webkit-user-select:none;user-select:none}.sidebar .intro{margin:8px 40px}.sidebar .intro .text{color:#212533;display:flex;font-family:Open Sans,sans-serif;font-size:14px;justify-content:center;line-height:1.5;text-align:center;-webkit-user-select:none;user-select:none}.sidebar.opened{right:0}.sidebar.opened .insights{padding:12px}.insights{display:flex;flex-direction:column;gap:12px}@media (max-width: 1366px){.sidebar{right:-50%;width:50%}}@media (max-width: 768px){.sidebar{right:-75%;width:75%}}@media (max-width: 600px){.sidebar{right:-100%;width:100%}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InsightsCardComponent, selector: "s-insights-card", inputs: ["insight"] }, { kind: "directive", type: SVGFactoryDirective, selector: "[sSVGFactory]", inputs: ["sSVGFactory"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InsightsSidebarComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-insights-sidebar', standalone: true, imports: [NgTemplateOutlet, InsightsCardComponent, SVGFactoryDirective, TranslatePipe], template: "<div\r\n    class=\"sidebar\"\r\n    [class.opened]=\"opened\"\r\n>\r\n    <div class=\"header\">\r\n        <button\r\n            (click)=\"close()\"\r\n            class=\"option\"\r\n        >\r\n            <span class=\"far fa-chevron-double-right\"></span>\r\n        </button>\r\n        <div class=\"title\">\r\n            <span><ng-container [ngTemplateOutlet]=\"iassistIcon\"></ng-container></span>\r\n            <span>IAssist Insights</span>\r\n        </div>\r\n    </div>\r\n    <div class=\"intro\">\r\n        @if (hasPermission) {\r\n            @if (insights.length) {\r\n                @if (introTemplate) {\r\n                    <ng-container *ngTemplateOutlet=\"introTemplate\"></ng-container>\r\n                } @else {\r\n                    <span class=\"text\">{{ introText || 'platform.angular_components.insight_intro' | translate }}</span>\r\n                }\r\n            } @else {\r\n                @if (emptyTemplate) {\r\n                    <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\r\n                } @else {\r\n                    <span class=\"text\">{{ emptyText || 'platform.angular_components.insight_empty' | translate }}</span>\r\n                }\r\n            }\r\n        } @else {\r\n            @if (noPermissionTemplate) {\r\n                <ng-container *ngTemplateOutlet=\"noPermissionTemplate\"></ng-container>\r\n            } @else {\r\n                <span>{{ noPermissionText || 'platform.angular_components.insight_no_permission' | translate }}</span>\r\n            }\r\n        }\r\n    </div>\r\n    <div class=\"insights\">\r\n        @if (insights.length) {\r\n            @for (insight of insights; track insight) {\r\n                <s-insights-card [insight]=\"insight\"> </s-insights-card>\r\n            }\r\n        }\r\n    </div>\r\n</div>\r\n\r\n<ng-template #iassistIcon>\r\n    <div style=\"width: 28px; height: 28px\">\r\n        <span *sSVGFactory=\"'iassist'\"></span>\r\n    </div>\r\n</ng-template>\r\n", styles: [".sidebar{background-color:#fff;border-left:1px solid #dedce5;height:100%;overflow-x:hidden;position:fixed;right:-25%;transition:.5s;top:0;width:25%;z-index:1002}.sidebar .header{border-bottom:1px solid #dedce5;display:flex;gap:16px;padding:12px 20px}.sidebar .header .option{background-color:transparent;border:none;color:#428bca;cursor:pointer;font-size:16px;padding:12px}.sidebar .header .title{align-items:center;color:#212533;display:flex;font-family:Open Sans,sans-serif;font-size:16px;gap:16px;line-height:1;-webkit-user-select:none;user-select:none}.sidebar .intro{margin:8px 40px}.sidebar .intro .text{color:#212533;display:flex;font-family:Open Sans,sans-serif;font-size:14px;justify-content:center;line-height:1.5;text-align:center;-webkit-user-select:none;user-select:none}.sidebar.opened{right:0}.sidebar.opened .insights{padding:12px}.insights{display:flex;flex-direction:column;gap:12px}@media (max-width: 1366px){.sidebar{right:-50%;width:50%}}@media (max-width: 768px){.sidebar{right:-75%;width:75%}}@media (max-width: 600px){.sidebar{right:-100%;width:100%}}\n"] }]
        }], propDecorators: { insights: [{
                type: Input
            }], hasPermission: [{
                type: Input
            }], introText: [{
                type: Input
            }], introTemplate: [{
                type: Input
            }], emptyText: [{
                type: Input
            }], emptyTemplate: [{
                type: Input
            }], noPermissionText: [{
                type: Input
            }], noPermissionTemplate: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 