import * as i0 from '@angular/core';
import { Component } from '@angular/core';
import { DASHBOARD_THEME_CLASSES, WIDGET_HEADER_CLASSES, ContextDashboardService, DashboardDetailService, AppearanceSettingsComponent } from './c8y-ngx-components-context-dashboard.mjs';
import * as i1 from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import * as i2 from '@c8y/ngx-components';
import { CoreModule, C8yTranslatePipe } from '@c8y/ngx-components';
import { PopoverDirective } from 'ngx-bootstrap/popover';

class DashboardAppearanceSettingsComponent {
    constructor(contextDashboardService, dashboardDetailService) {
        this.contextDashboardService = contextDashboardService;
        this.dashboardDetailService = dashboardDetailService;
        this.styling = {
            themeClass: 'dashboard-theme-light',
            headerClass: 'panel-title-regular'
        };
        this.DEFAULT_DASHBOARD_MARGIN = 12;
    }
    ngOnInit() {
        this.dashboard = this.dashboardDetailService.details.dashboard;
        this.appearanceSettingsForm = this.dashboardDetailService.appearanceSettingsForm;
        if (this.dashboard) {
            this.setDashboardStyle();
        }
    }
    changeThemeClass(themeClass) {
        this.styling.themeClass = themeClass;
        this.appearanceSettingsForm.get('classes').setValue({ [this.styling.themeClass]: true });
        this.dashboardDetailService.previewChangedFn({ classes: { [this.styling.themeClass]: true } });
        this.appearanceSettingsForm.markAsDirty();
    }
    changeHeaderClass(headerClass) {
        this.styling.headerClass = headerClass;
        this.appearanceSettingsForm.get('widgetClasses').setValue({ [this.styling.headerClass]: true });
        this.dashboardDetailService.previewChangedFn({
            widgetClasses: { [this.styling.headerClass]: true }
        });
        this.appearanceSettingsForm.markAsDirty();
    }
    setDashboardStyle() {
        const allClasses = {
            ...this.appearanceSettingsForm.get('classes').value,
            ...this.appearanceSettingsForm.get('widgetClasses').value
        };
        const styles = Object.keys(allClasses).map(c => c.split('-').pop());
        styles.forEach(styleName => {
            this.styling.themeClass = this.contextDashboardService.getStyling(DASHBOARD_THEME_CLASSES, styleName, this.styling.themeClass);
            this.styling.headerClass = this.contextDashboardService.getStyling(WIDGET_HEADER_CLASSES, styleName, this.styling.headerClass);
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DashboardAppearanceSettingsComponent, deps: [{ token: ContextDashboardService }, { token: DashboardDetailService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: DashboardAppearanceSettingsComponent, isStandalone: true, selector: "c8y-dashboard-appearance-settings", ngImport: i0, template: "<div [formGroup]=\"appearanceSettingsForm\">\n  <c8y-appearance-settings\n    [themeClass]=\"styling.themeClass\"\n    [headerClass]=\"styling.headerClass\"\n    (themeClassChange)=\"changeThemeClass($event)\"\n    (headerClassChange)=\"changeHeaderClass($event)\"\n    [dashboardSettings]=\"true\"\n    [columns]=\"3\"\n  >\n    <div class=\"col-md-4\">\n      <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n        <legend translate>Misc</legend>\n        <c8y-form-group>\n          <label for=\"margin\">{{ 'Widget margin' | translate }}</label>\n          <div class=\"input-group\">\n            <input\n              class=\"form-control\"\n              id=\"margin\"\n              placeholder=\"{{ DEFAULT_DASHBOARD_MARGIN }}\"\n              name=\"margin\"\n              type=\"number\"\n              formControlName=\"widgetMargin\"\n            />\n            <span class=\"input-group-addon\">px</span>\n          </div>\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <label>\n            {{ 'Translate if possible' | translate }}\n            <button\n              class=\"btn-help btn-help--sm\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{\n                'Translates dashboard or widget titles if they are written in English and their translations are available in the loaded standard or custom translation resources.'\n                  | translate\n              }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              type=\"button\"\n            ></button>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            title=\"{{ 'Translate dashboard title if possible' | translate }}\"\n          >\n            <input\n              name=\"translateDashboardTitle\"\n              type=\"checkbox\"\n              formControlName=\"translateDashboardTitle\"\n            />\n            <span></span>\n            <span>{{ 'Dashboard title' | translate }}</span>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            title=\"{{ 'Translate widget titles if possible' | translate }}\"\n          >\n            <input\n              name=\"translateWidgetTitle\"\n              type=\"checkbox\"\n              formControlName=\"translateWidgetTitle\"\n            />\n            <span></span>\n            <span>{{ 'Widget titles' | translate }}</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n    </div>\n  </c8y-appearance-settings>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "dashboardSettings", "possibleStylingTheme", "possibleStylingHeader", "columns"], outputs: ["themeClassChange", "headerClassChange", "onChange"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DashboardAppearanceSettingsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-dashboard-appearance-settings', standalone: true, imports: [
                        ReactiveFormsModule,
                        CoreModule,
                        AppearanceSettingsComponent,
                        C8yTranslatePipe,
                        PopoverDirective
                    ], template: "<div [formGroup]=\"appearanceSettingsForm\">\n  <c8y-appearance-settings\n    [themeClass]=\"styling.themeClass\"\n    [headerClass]=\"styling.headerClass\"\n    (themeClassChange)=\"changeThemeClass($event)\"\n    (headerClassChange)=\"changeHeaderClass($event)\"\n    [dashboardSettings]=\"true\"\n    [columns]=\"3\"\n  >\n    <div class=\"col-md-4\">\n      <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n        <legend translate>Misc</legend>\n        <c8y-form-group>\n          <label for=\"margin\">{{ 'Widget margin' | translate }}</label>\n          <div class=\"input-group\">\n            <input\n              class=\"form-control\"\n              id=\"margin\"\n              placeholder=\"{{ DEFAULT_DASHBOARD_MARGIN }}\"\n              name=\"margin\"\n              type=\"number\"\n              formControlName=\"widgetMargin\"\n            />\n            <span class=\"input-group-addon\">px</span>\n          </div>\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <label>\n            {{ 'Translate if possible' | translate }}\n            <button\n              class=\"btn-help btn-help--sm\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{\n                'Translates dashboard or widget titles if they are written in English and their translations are available in the loaded standard or custom translation resources.'\n                  | translate\n              }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              type=\"button\"\n            ></button>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            title=\"{{ 'Translate dashboard title if possible' | translate }}\"\n          >\n            <input\n              name=\"translateDashboardTitle\"\n              type=\"checkbox\"\n              formControlName=\"translateDashboardTitle\"\n            />\n            <span></span>\n            <span>{{ 'Dashboard title' | translate }}</span>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            title=\"{{ 'Translate widget titles if possible' | translate }}\"\n          >\n            <input\n              name=\"translateWidgetTitle\"\n              type=\"checkbox\"\n              formControlName=\"translateWidgetTitle\"\n            />\n            <span></span>\n            <span>{{ 'Widget titles' | translate }}</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n    </div>\n  </c8y-appearance-settings>\n</div>\n" }]
        }], ctorParameters: () => [{ type: ContextDashboardService }, { type: DashboardDetailService }] });

export { DashboardAppearanceSettingsComponent };
//# sourceMappingURL=c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-BkwPfkeK.mjs.map
