import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "angular-svg-icon";
import * as i3 from "@angular/material/button";
import * as i4 from "@angular/material/tooltip";
import * as i5 from "@angular/material/card";
import * as i6 from "@angular/material/progress-spinner";
import * as i7 from "../directives/material-elevation.directive";
export class GroupBoxComponent {
    constructor() {
        this.noBackgroundHeader = false;
        this.isLoadingData = false;
        this.loadingText = "Loading ...";
        this.hasErrors = false;
        this.errorCaption = "Error";
        this.errorText = "";
        this.enableRetryOnError = true;
        this.editAllowed = false;
        this.inEditMode = false;
        this.Edit_Click = new EventEmitter();
        this.Save_Click = new EventEmitter();
        this.CancelEdit_Click = new EventEmitter();
        this.Retry_Click = new EventEmitter();
        this.width = 400;
        this.contentheight = 400;
        this.title = "General";
    }
    set width(w) {
        var s = w.toString();
        if (!s.endsWith('%')) {
            var n = Number(s.replace('px', ''));
            if (n > (window.screen.width - 47)) {
                n = window.screen.width - 47;
            }
            this._width = n + "px";
        }
        else {
            this._width = w;
        }
    }
    get width() {
        return this._width;
    }
    set contentheight(w) {
        const s = w.toString();
        if (!s.endsWith('px') && !s.endsWith('%')) {
            this._contentheight = s + "px";
        }
        else {
            this._contentheight = w;
        }
    }
    get contentheight() {
        return this._contentheight;
    }
    ngOnInit() {
    }
    onEditClick() {
        this.Edit_Click.emit();
    }
    onSaveClick() {
        this.Save_Click.emit();
    }
    onCancelEditClick() {
        this.CancelEdit_Click.emit();
    }
    onRetryClick() {
        this.Retry_Click.emit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GroupBoxComponent, selector: "mobicloud-group-box", inputs: { width: "width", contentheight: "contentheight", noBackgroundHeader: "noBackgroundHeader", title: "title", isLoadingData: "isLoadingData", loadingText: "loadingText", hasErrors: "hasErrors", errorCaption: "errorCaption", errorText: "errorText", enableRetryOnError: "enableRetryOnError", editAllowed: "editAllowed", inEditMode: "inEditMode" }, outputs: { Edit_Click: "Edit_Click", Save_Click: "Save_Click", CancelEdit_Click: "CancelEdit_Click", Retry_Click: "Retry_Click" }, ngImport: i0, template: "\n<mat-card class=\"groupbox-card flex flex-col\" appMaterialElevation defaultElevation=\"1\" [ngStyle]=\"{width: _width,'min-height': _contentheight}\">\n  <mat-card-header class=\"groupbox-card-header justify-start\" [class.groupbox-card-header-nobg]=\"noBackgroundHeader\">\n    <mat-card-title class=\"groupbox-card-title\">{{title}}</mat-card-title>\n    <div class=\"groupbox-toolbar-divider\"></div>\n    <button mat-raised-button appMaterialElevation matTooltip=\"Edit\" i18n-matTooltip=\"@@Action-Edit\" aria-label=\"Edit\" i18n-aria-label=\"@@Action-Edit\" class=\"groupbox-toolbar-button\" *ngIf=\"editAllowed && !inEditMode && !hasErrors\" (click)=\"onEditClick()\" [disabled]=\"isLoadingData\">\n      <svg-icon name=\"mobicloud_edit\" svgClass=\"groupbox-toolbar-button-icon\"></svg-icon>\n    </button>\n    <button mat-raised-button appMaterialElevation matTooltip=\"Save changes\" i18n-matTooltip=\"@@Action-SaveChanges\" aria-label=\"Save changes\" i18n-aria-label=\"@@Action-SaveChanges\" class=\"groupbox-toolbar-button\" *ngIf=\"editAllowed && inEditMode && !hasErrors\" (click)=\"onSaveClick()\" [disabled]=\"isLoadingData\">\n      <svg-icon name=\"mobicloud_check_mark\" svgClass=\"groupbox-toolbar-button-icon\"></svg-icon>\n    </button>\n    <button mat-raised-button appMaterialElevation matTooltip=\"Cancel edit\" i18n-matTooltip=\"@@Action-CancelEdit\" aria-label=\"Cancel edit\" i18n-aria-label=\"@@Action-CancelEdit\" class=\"groupbox-toolbar-button\" *ngIf=\"editAllowed && inEditMode && !hasErrors\" (click)=\"onCancelEditClick()\" [disabled]=\"isLoadingData\">\n      <svg-icon name=\"mobicloud_close\" svgClass=\"groupbox-toolbar-button-icon\"></svg-icon>\n    </button>               \n  </mat-card-header>\n  <mat-card-content class=\"groupbox-card-content\"  [ngStyle]=\"{'min-height': _contentheight}\">\n    <div class=\"loading-wrapper\">\n      <div class=\"loading-overlay\" *ngIf=\"isLoadingData || hasErrors\" [class.loading-overlay-error]=\"!isLoadingData && hasErrors\">\n        <div class=\"loading-spinner-wrapper\">\n          <mat-spinner diameter=\"50\" *ngIf=\"isLoadingData\"></mat-spinner>\n        </div>\n        <div class=\"loading-spinner-text\" *ngIf=\"isLoadingData\">{{loadingText}}</div>\n        <div class=\"error-info\">\n          <div class=\"error-caption\" *ngIf=\"hasErrors && !isLoadingData && errorCaption!=''\">\n            {{errorCaption}}\n          </div>                    \n          <div class=\"error-text\" *ngIf=\"hasErrors && !isLoadingData && errorText!=''\">\n            {{errorText}}\n          </div>\n          <button class=\"error-retry-button\" mat-button color=\"primary\" (click)=\"onRetryClick()\" *ngIf=\"!isLoadingData && enableRetryOnError\" i18n=\"@@Button-Retry\">retry</button>\n        </div>          \n      </div>      \n      <div class=\"loaded-content\" [class.blurred]=\"isLoadingData || hasErrors\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>", styles: [".groupbox-card{background-color:var(--default-groupbox-content-background);padding:0 0 10px;border-top-left-radius:7px;border-top-right-radius:7px}.groupbox-card-header{background-color:var(--default-navmenu1-buttoncolor-active);color:var(--default-groupbox-header-textcolor);border-top-left-radius:6px;border-top-right-radius:6px;height:38px;padding:0 0 0 16px}.groupbox-card-header-nobg{background-color:var(--default-groupbox-content-background);color:var(--default-navmenu1-buttoncolor-active);border-top-left-radius:6px;border-top-right-radius:6px;height:38px;padding:0 0 0 16px}::ng-deep .groupbox-card .mat-mdc-card-header-text{padding-top:2px!important}.groupbox-card-title{height:100%;font-size:medium;font-weight:600}.groupbox-toolbar-divider{flex:1 1 auto}.groupbox-toolbar-button{background-color:var(--default-groupbox-header-iconbackground)!important;width:26px!important;height:26px!important;min-width:unset!important;padding:0!important;margin-right:8px!important;margin-top:6px!important}.groupbox-toolbar-button-icon{pointer-events:none;fill:var(--default-groupbox-header-iconcolor);width:12px;height:12px}.groupbox-card-content{padding-top:12px;padding-left:10px;padding-right:10px;background-color:var(--default-groupbox-content-background)}.groupbox-loadingdata-shade{background:var(--default-background-loading-shade);position:relative;height:100%;z-index:1;display:flex;align-items:center;justify-content:center}.loading-wrapper{width:100%;height:100%}.loading-overlay{position:absolute;z-index:1002;top:38px;left:0;background-color:var(--default-background-overlay);width:100%;height:calc(100% - 38px);justify-content:center;justify-items:center;display:flex;flex-direction:column}.loading-overlay-error{background-color:var(--default-background-error)}.loading-spinner-wrapper{display:flex;justify-content:center;justify-items:center;margin-top:20px}.loading-spinner-text{font-weight:600;font-size:large;text-align:center;margin-top:20px;color:var(--default-textcolor-loading)}.error-info{text-align:center;margin-top:20px}.error-caption{font-weight:600;font-size:medium;color:var(--default-textcolor-loading)}.error-text{font-size:medium;margin-top:10px;color:var(--default-textcolor-loading)}.error-retry-button{margin-top:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i5.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i5.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i7.MaterialElevationDirective, selector: "[appMaterialElevation]", inputs: ["defaultElevation", "raisedElevation"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupBoxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'mobicloud-group-box', template: "\n<mat-card class=\"groupbox-card flex flex-col\" appMaterialElevation defaultElevation=\"1\" [ngStyle]=\"{width: _width,'min-height': _contentheight}\">\n  <mat-card-header class=\"groupbox-card-header justify-start\" [class.groupbox-card-header-nobg]=\"noBackgroundHeader\">\n    <mat-card-title class=\"groupbox-card-title\">{{title}}</mat-card-title>\n    <div class=\"groupbox-toolbar-divider\"></div>\n    <button mat-raised-button appMaterialElevation matTooltip=\"Edit\" i18n-matTooltip=\"@@Action-Edit\" aria-label=\"Edit\" i18n-aria-label=\"@@Action-Edit\" class=\"groupbox-toolbar-button\" *ngIf=\"editAllowed && !inEditMode && !hasErrors\" (click)=\"onEditClick()\" [disabled]=\"isLoadingData\">\n      <svg-icon name=\"mobicloud_edit\" svgClass=\"groupbox-toolbar-button-icon\"></svg-icon>\n    </button>\n    <button mat-raised-button appMaterialElevation matTooltip=\"Save changes\" i18n-matTooltip=\"@@Action-SaveChanges\" aria-label=\"Save changes\" i18n-aria-label=\"@@Action-SaveChanges\" class=\"groupbox-toolbar-button\" *ngIf=\"editAllowed && inEditMode && !hasErrors\" (click)=\"onSaveClick()\" [disabled]=\"isLoadingData\">\n      <svg-icon name=\"mobicloud_check_mark\" svgClass=\"groupbox-toolbar-button-icon\"></svg-icon>\n    </button>\n    <button mat-raised-button appMaterialElevation matTooltip=\"Cancel edit\" i18n-matTooltip=\"@@Action-CancelEdit\" aria-label=\"Cancel edit\" i18n-aria-label=\"@@Action-CancelEdit\" class=\"groupbox-toolbar-button\" *ngIf=\"editAllowed && inEditMode && !hasErrors\" (click)=\"onCancelEditClick()\" [disabled]=\"isLoadingData\">\n      <svg-icon name=\"mobicloud_close\" svgClass=\"groupbox-toolbar-button-icon\"></svg-icon>\n    </button>               \n  </mat-card-header>\n  <mat-card-content class=\"groupbox-card-content\"  [ngStyle]=\"{'min-height': _contentheight}\">\n    <div class=\"loading-wrapper\">\n      <div class=\"loading-overlay\" *ngIf=\"isLoadingData || hasErrors\" [class.loading-overlay-error]=\"!isLoadingData && hasErrors\">\n        <div class=\"loading-spinner-wrapper\">\n          <mat-spinner diameter=\"50\" *ngIf=\"isLoadingData\"></mat-spinner>\n        </div>\n        <div class=\"loading-spinner-text\" *ngIf=\"isLoadingData\">{{loadingText}}</div>\n        <div class=\"error-info\">\n          <div class=\"error-caption\" *ngIf=\"hasErrors && !isLoadingData && errorCaption!=''\">\n            {{errorCaption}}\n          </div>                    \n          <div class=\"error-text\" *ngIf=\"hasErrors && !isLoadingData && errorText!=''\">\n            {{errorText}}\n          </div>\n          <button class=\"error-retry-button\" mat-button color=\"primary\" (click)=\"onRetryClick()\" *ngIf=\"!isLoadingData && enableRetryOnError\" i18n=\"@@Button-Retry\">retry</button>\n        </div>          \n      </div>      \n      <div class=\"loaded-content\" [class.blurred]=\"isLoadingData || hasErrors\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>", styles: [".groupbox-card{background-color:var(--default-groupbox-content-background);padding:0 0 10px;border-top-left-radius:7px;border-top-right-radius:7px}.groupbox-card-header{background-color:var(--default-navmenu1-buttoncolor-active);color:var(--default-groupbox-header-textcolor);border-top-left-radius:6px;border-top-right-radius:6px;height:38px;padding:0 0 0 16px}.groupbox-card-header-nobg{background-color:var(--default-groupbox-content-background);color:var(--default-navmenu1-buttoncolor-active);border-top-left-radius:6px;border-top-right-radius:6px;height:38px;padding:0 0 0 16px}::ng-deep .groupbox-card .mat-mdc-card-header-text{padding-top:2px!important}.groupbox-card-title{height:100%;font-size:medium;font-weight:600}.groupbox-toolbar-divider{flex:1 1 auto}.groupbox-toolbar-button{background-color:var(--default-groupbox-header-iconbackground)!important;width:26px!important;height:26px!important;min-width:unset!important;padding:0!important;margin-right:8px!important;margin-top:6px!important}.groupbox-toolbar-button-icon{pointer-events:none;fill:var(--default-groupbox-header-iconcolor);width:12px;height:12px}.groupbox-card-content{padding-top:12px;padding-left:10px;padding-right:10px;background-color:var(--default-groupbox-content-background)}.groupbox-loadingdata-shade{background:var(--default-background-loading-shade);position:relative;height:100%;z-index:1;display:flex;align-items:center;justify-content:center}.loading-wrapper{width:100%;height:100%}.loading-overlay{position:absolute;z-index:1002;top:38px;left:0;background-color:var(--default-background-overlay);width:100%;height:calc(100% - 38px);justify-content:center;justify-items:center;display:flex;flex-direction:column}.loading-overlay-error{background-color:var(--default-background-error)}.loading-spinner-wrapper{display:flex;justify-content:center;justify-items:center;margin-top:20px}.loading-spinner-text{font-weight:600;font-size:large;text-align:center;margin-top:20px;color:var(--default-textcolor-loading)}.error-info{text-align:center;margin-top:20px}.error-caption{font-weight:600;font-size:medium;color:var(--default-textcolor-loading)}.error-text{font-size:medium;margin-top:10px;color:var(--default-textcolor-loading)}.error-retry-button{margin-top:20px}\n"] }]
        }], ctorParameters: () => [], propDecorators: { width: [{
                type: Input,
                args: ['width']
            }], contentheight: [{
                type: Input,
                args: ['contentheight']
            }], noBackgroundHeader: [{
                type: Input
            }], title: [{
                type: Input
            }], isLoadingData: [{
                type: Input
            }], loadingText: [{
                type: Input
            }], hasErrors: [{
                type: Input
            }], errorCaption: [{
                type: Input
            }], errorText: [{
                type: Input
            }], enableRetryOnError: [{
                type: Input
            }], editAllowed: [{
                type: Input
            }], inEditMode: [{
                type: Input
            }], Edit_Click: [{
                type: Output
            }], Save_Click: [{
                type: Output
            }], CancelEdit_Click: [{
                type: Output
            }], Retry_Click: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 