@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
61 lines (58 loc) • 8.81 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 i5 from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import * as i2 from '@c8y/ngx-components';
import { CoreModule, C8yTranslatePipe } from '@c8y/ngx-components';
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: "19.2.14", ngImport: i0, type: DashboardAppearanceSettingsComponent, deps: [{ token: ContextDashboardService }, { token: DashboardDetailService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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 translate>Widget titles</label>\n <label\n class=\"c8y-checkbox\"\n title=\"{{ 'Translate if possible' | translate }}\"\n >\n <input\n name=\"translateWidgetTitle\"\n type=\"checkbox\"\n formControlName=\"translateWidgetTitle\"\n />\n <span></span>\n <span>{{ 'Translate if possible' | 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: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CoreModule }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { 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"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardAppearanceSettingsComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-dashboard-appearance-settings', standalone: true, imports: [ReactiveFormsModule, CoreModule, AppearanceSettingsComponent, C8yTranslatePipe], 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 translate>Widget titles</label>\n <label\n class=\"c8y-checkbox\"\n title=\"{{ 'Translate if possible' | translate }}\"\n >\n <input\n name=\"translateWidgetTitle\"\n type=\"checkbox\"\n formControlName=\"translateWidgetTitle\"\n />\n <span></span>\n <span>{{ 'Translate if possible' | 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-C-JLbcn5.mjs.map