98 lines
3.9 KiB
TypeScript
98 lines
3.9 KiB
TypeScript
import { Component, computed, inject } from '@angular/core';
|
|
import { RouterOutlet } from '@angular/router';
|
|
|
|
import { TenantService } from './core/services/tenant.service';
|
|
import { DEFAULT_TENANT_BRANDING } from './core/services/tenant-ssr-cache.store';
|
|
import { GlobalLoadingComponent } from './shared/components/global-loading/global-loading.component';
|
|
import { ModalHostComponent } from './shared/components/modal-host/modal-host.component';
|
|
import { ToastContainerComponent } from './shared/components/toast-container/toast-container.component';
|
|
|
|
function hexToRgb(hex: string): string {
|
|
const cleanHex = hex.replace('#', '').trim();
|
|
let r = 0, g = 0, b = 0;
|
|
if (cleanHex.length === 3) {
|
|
r = parseInt(cleanHex[0] + cleanHex[0], 16);
|
|
g = parseInt(cleanHex[1] + cleanHex[1], 16);
|
|
b = parseInt(cleanHex[2] + cleanHex[2], 16);
|
|
} else if (cleanHex.length >= 6) {
|
|
r = parseInt(cleanHex.slice(0, 2), 16);
|
|
g = parseInt(cleanHex.slice(2, 4), 16);
|
|
b = parseInt(cleanHex.slice(4, 6), 16);
|
|
}
|
|
return `${r}, ${g}, ${b}`;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'app-root',
|
|
imports: [
|
|
RouterOutlet,
|
|
ToastContainerComponent,
|
|
ModalHostComponent,
|
|
GlobalLoadingComponent
|
|
],
|
|
templateUrl: './app.html',
|
|
styleUrl: './app.scss',
|
|
host: {
|
|
'[style.--tenant-primary]': 'tenantPrimaryColor()',
|
|
'[style.--tenant-secondary]': 'tenantSecondaryColor()',
|
|
'[style.--tenant-danger]': 'tenantDangerColor()',
|
|
'[style.--tenant-success]': 'tenantSuccessColor()',
|
|
'[style.--color-primary]': 'tenantPrimaryColor()',
|
|
'[style.--color-secondary]': 'tenantSecondaryColor()',
|
|
'[style.--color-danger]': 'tenantDangerColor()',
|
|
'[style.--color-success]': 'tenantSuccessColor()',
|
|
'[style.--tenant-primary-rgb]': 'tenantPrimaryColorRgb()',
|
|
'[style.--tenant-secondary-rgb]': 'tenantSecondaryColorRgb()',
|
|
'[style.--tenant-danger-rgb]': 'tenantDangerColorRgb()',
|
|
'[style.--tenant-success-rgb]': 'tenantSuccessColorRgb()',
|
|
'[style.--color-primary-rgb]': 'tenantPrimaryColorRgb()',
|
|
'[style.--color-secondary-rgb]': 'tenantSecondaryColorRgb()',
|
|
'[style.--color-danger-rgb]': 'tenantDangerColorRgb()',
|
|
'[style.--color-success-rgb]': 'tenantSuccessColorRgb()',
|
|
'[style.--tenant-header-bg]': 'tenantHeaderBgColor()',
|
|
'[style.--tenant-footer-bg]': 'tenantFooterBgColor()',
|
|
'[style.--color-header-bg]': 'tenantHeaderBgColor()',
|
|
'[style.--color-footer-bg]': 'tenantFooterBgColor()'
|
|
}
|
|
})
|
|
export class App {
|
|
private readonly tenantService = inject(TenantService);
|
|
|
|
protected readonly status = this.tenantService.status;
|
|
|
|
protected readonly tenantPrimaryColor = computed(
|
|
() => this.tenantService.tenant()?.primary_color ?? DEFAULT_TENANT_BRANDING.primaryColor
|
|
);
|
|
protected readonly tenantSecondaryColor = computed(
|
|
() => this.tenantService.tenant()?.secondary_color ?? DEFAULT_TENANT_BRANDING.secondaryColor
|
|
);
|
|
protected readonly tenantDangerColor = computed(
|
|
() => this.tenantService.tenant()?.danger_color ?? DEFAULT_TENANT_BRANDING.dangerColor
|
|
);
|
|
protected readonly tenantSuccessColor = computed(
|
|
() => this.tenantService.tenant()?.success_color ?? DEFAULT_TENANT_BRANDING.successColor
|
|
);
|
|
protected readonly tenantPrimaryColorRgb = computed(() =>
|
|
hexToRgb(this.tenantPrimaryColor())
|
|
);
|
|
protected readonly tenantSecondaryColorRgb = computed(() =>
|
|
hexToRgb(this.tenantSecondaryColor())
|
|
);
|
|
protected readonly tenantDangerColorRgb = computed(() =>
|
|
hexToRgb(this.tenantDangerColor())
|
|
);
|
|
protected readonly tenantSuccessColorRgb = computed(() =>
|
|
hexToRgb(this.tenantSuccessColor())
|
|
);
|
|
protected readonly tenantHeaderBgColor = computed(
|
|
() =>
|
|
this.tenantService.tenant()?.header_bg_color ??
|
|
DEFAULT_TENANT_BRANDING.headerBgColor
|
|
);
|
|
protected readonly tenantFooterBgColor = computed(
|
|
() =>
|
|
this.tenantService.tenant()?.footer_bg_color ??
|
|
DEFAULT_TENANT_BRANDING.footerBgColor
|
|
);
|
|
}
|