@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
68 lines (65 loc) • 11.3 kB
JavaScript
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