@masterteam/brand-display 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,1102 @@
|
|
|
1
|
+
import { CommonModule, DOCUMENT } from '@angular/common';
|
|
2
|
+
import * as i0 from '@angular/core';
|
|
3
|
+
import { inject, Injectable, computed, signal, Component, effect, untracked } from '@angular/core';
|
|
4
|
+
import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
|
|
5
|
+
import { TranslocoService, TranslocoDirective } from '@jsverse/transloco';
|
|
6
|
+
import { Breadcrumb } from '@masterteam/components/breadcrumb';
|
|
7
|
+
import { Button } from '@masterteam/components/button';
|
|
8
|
+
import { Action, Selector, State, Store, select } from '@ngxs/store';
|
|
9
|
+
import { HttpClient } from '@angular/common/http';
|
|
10
|
+
import { CrudStateBase, handleApiRequest, changePrimaryColor, changeTextColor, changeBackgroundColor, getLightColor, UploadFileFieldConfig, ColorPickerFieldConfig, ToggleFieldConfig } from '@masterteam/components';
|
|
11
|
+
import * as i1 from 'primeng/skeleton';
|
|
12
|
+
import { SkeletonModule } from 'primeng/skeleton';
|
|
13
|
+
import { Page } from '@masterteam/components/page';
|
|
14
|
+
import { Tabs } from '@masterteam/components/tabs';
|
|
15
|
+
import { Icon } from '@masterteam/icons';
|
|
16
|
+
import { SecureImagePipe } from '@masterteam/components/upload-field';
|
|
17
|
+
import { map, merge } from 'rxjs';
|
|
18
|
+
import * as i1$1 from '@angular/forms';
|
|
19
|
+
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
20
|
+
import { Card } from '@masterteam/components/card';
|
|
21
|
+
import { DynamicForm } from '@masterteam/forms/dynamic-form';
|
|
22
|
+
import { FileUploadModule } from 'primeng/fileupload';
|
|
23
|
+
|
|
24
|
+
class GetBrandDisplay {
|
|
25
|
+
static type = '[BrandDisplay] Get Brand Display';
|
|
26
|
+
}
|
|
27
|
+
class UpdateBrandDisplayData {
|
|
28
|
+
static type = '[BrandDisplay] Update Brand Display Data';
|
|
29
|
+
}
|
|
30
|
+
class UpdateBrandDisplayDataLocally {
|
|
31
|
+
changes;
|
|
32
|
+
static type = '[BrandDisplay] Update Brand Display Data Locally';
|
|
33
|
+
constructor(changes) {
|
|
34
|
+
this.changes = changes;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
var BrandDisplayActionKey;
|
|
39
|
+
(function (BrandDisplayActionKey) {
|
|
40
|
+
BrandDisplayActionKey["GetBrandDisplay"] = "getBrandDisplay";
|
|
41
|
+
BrandDisplayActionKey["UpdateBrandDisplay"] = "updateBrandDisplay";
|
|
42
|
+
})(BrandDisplayActionKey || (BrandDisplayActionKey = {}));
|
|
43
|
+
|
|
44
|
+
const defaultBrandDisplayData = {
|
|
45
|
+
main: {
|
|
46
|
+
productName: { en: 'Project Plus', ar: 'نظام ادارة المشاريع' },
|
|
47
|
+
productTagline: {
|
|
48
|
+
en: 'PMO Multi Platform Digital Solution',
|
|
49
|
+
ar: 'نظام رقمي متعدد المنصات',
|
|
50
|
+
},
|
|
51
|
+
colorSettings: {
|
|
52
|
+
primaryColor: '#2AAEC0',
|
|
53
|
+
secondaryColor: '#6c757d',
|
|
54
|
+
textColor: '#000000',
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
sidebar: {
|
|
58
|
+
backgroundColor: '#F5F5F5',
|
|
59
|
+
iconColor: '#535862',
|
|
60
|
+
repeated: false,
|
|
61
|
+
},
|
|
62
|
+
header: {
|
|
63
|
+
backgroundColor: '#2AAEC0',
|
|
64
|
+
fontColor: '#ffffffff',
|
|
65
|
+
repeated: false,
|
|
66
|
+
},
|
|
67
|
+
contentArea: {
|
|
68
|
+
backgroundColor: '#F8F9FC',
|
|
69
|
+
repeated: false,
|
|
70
|
+
},
|
|
71
|
+
login: {
|
|
72
|
+
backgroundColor: '#125bbb',
|
|
73
|
+
repeated: false,
|
|
74
|
+
formWizardPosition: 'start',
|
|
75
|
+
},
|
|
76
|
+
loginLogo: 'pplus.svg',
|
|
77
|
+
brandLogoWhite: 'pplus-white.svg',
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
81
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
82
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
83
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
84
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
85
|
+
};
|
|
86
|
+
let BrandDisplayState = class BrandDisplayState extends CrudStateBase {
|
|
87
|
+
http = inject(HttpClient);
|
|
88
|
+
// ============================================================================
|
|
89
|
+
// Data Selectors - Fine-grained reactivity
|
|
90
|
+
// ============================================================================
|
|
91
|
+
static getBrandDisplayData(state) {
|
|
92
|
+
return state.brandDisplayData;
|
|
93
|
+
}
|
|
94
|
+
static getDefaultBrandDisplayData(state) {
|
|
95
|
+
return state.defaultBrandDisplayData;
|
|
96
|
+
}
|
|
97
|
+
static getDraftBrandDisplayData(state) {
|
|
98
|
+
return state.draftBrandDisplayData;
|
|
99
|
+
}
|
|
100
|
+
// ============================================================================
|
|
101
|
+
// Loading/Error Slice Selectors - Required for facade
|
|
102
|
+
// ============================================================================
|
|
103
|
+
static getLoadingActive(state) {
|
|
104
|
+
return state.loadingActive;
|
|
105
|
+
}
|
|
106
|
+
static getErrors(state) {
|
|
107
|
+
return state.errors;
|
|
108
|
+
}
|
|
109
|
+
// ============================================================================
|
|
110
|
+
// Actions
|
|
111
|
+
// ============================================================================
|
|
112
|
+
updateBrandDisplayDataLocally(ctx, { changes }) {
|
|
113
|
+
const state = ctx.getState();
|
|
114
|
+
ctx.patchState({
|
|
115
|
+
draftBrandDisplayData: { ...state.draftBrandDisplayData, ...changes },
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
getBrandDisplay(ctx) {
|
|
119
|
+
const req$ = this.http.get('Settings/general');
|
|
120
|
+
return handleApiRequest({
|
|
121
|
+
ctx,
|
|
122
|
+
key: BrandDisplayActionKey.GetBrandDisplay,
|
|
123
|
+
request$: req$,
|
|
124
|
+
onSuccess: (response, state) => {
|
|
125
|
+
const Identity = response?.data?.find((v) => v.key === 'Identity')?.value;
|
|
126
|
+
if (Identity) {
|
|
127
|
+
// Ensure formWizardPosition always has a valid value
|
|
128
|
+
const brandDisplayData = {
|
|
129
|
+
...Identity,
|
|
130
|
+
login: {
|
|
131
|
+
...Identity.login,
|
|
132
|
+
formWizardPosition: Identity.login?.formWizardPosition ||
|
|
133
|
+
state.defaultBrandDisplayData?.login?.formWizardPosition,
|
|
134
|
+
},
|
|
135
|
+
};
|
|
136
|
+
return {
|
|
137
|
+
brandDisplayData,
|
|
138
|
+
draftBrandDisplayData: brandDisplayData,
|
|
139
|
+
};
|
|
140
|
+
}
|
|
141
|
+
return {};
|
|
142
|
+
},
|
|
143
|
+
onError: (_error, state) => ({
|
|
144
|
+
brandDisplayData: state.defaultBrandDisplayData,
|
|
145
|
+
draftBrandDisplayData: state.defaultBrandDisplayData,
|
|
146
|
+
}),
|
|
147
|
+
errorMessage: 'Failed to load brand display',
|
|
148
|
+
});
|
|
149
|
+
}
|
|
150
|
+
updateBrandDisplayData(ctx) {
|
|
151
|
+
const state = ctx.getState();
|
|
152
|
+
const req$ = this.http.put('Settings/UpdateSystemSettings', { values: [{ key: 'identity', value: state.draftBrandDisplayData }] });
|
|
153
|
+
return handleApiRequest({
|
|
154
|
+
ctx,
|
|
155
|
+
key: BrandDisplayActionKey.UpdateBrandDisplay,
|
|
156
|
+
request$: req$,
|
|
157
|
+
onSuccess: (_response, state) => ({
|
|
158
|
+
brandDisplayData: JSON.parse(JSON.stringify(state.draftBrandDisplayData)),
|
|
159
|
+
}),
|
|
160
|
+
onError: () => {
|
|
161
|
+
// Re-fetch on error
|
|
162
|
+
ctx.dispatch(new GetBrandDisplay());
|
|
163
|
+
return {};
|
|
164
|
+
},
|
|
165
|
+
errorMessage: 'Failed to update brand display',
|
|
166
|
+
});
|
|
167
|
+
}
|
|
168
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BrandDisplayState, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
169
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BrandDisplayState });
|
|
170
|
+
};
|
|
171
|
+
__decorate([
|
|
172
|
+
Action(UpdateBrandDisplayDataLocally)
|
|
173
|
+
], BrandDisplayState.prototype, "updateBrandDisplayDataLocally", null);
|
|
174
|
+
__decorate([
|
|
175
|
+
Action(GetBrandDisplay)
|
|
176
|
+
], BrandDisplayState.prototype, "getBrandDisplay", null);
|
|
177
|
+
__decorate([
|
|
178
|
+
Action(UpdateBrandDisplayData)
|
|
179
|
+
], BrandDisplayState.prototype, "updateBrandDisplayData", null);
|
|
180
|
+
__decorate([
|
|
181
|
+
Selector()
|
|
182
|
+
], BrandDisplayState, "getBrandDisplayData", null);
|
|
183
|
+
__decorate([
|
|
184
|
+
Selector()
|
|
185
|
+
], BrandDisplayState, "getDefaultBrandDisplayData", null);
|
|
186
|
+
__decorate([
|
|
187
|
+
Selector()
|
|
188
|
+
], BrandDisplayState, "getDraftBrandDisplayData", null);
|
|
189
|
+
__decorate([
|
|
190
|
+
Selector()
|
|
191
|
+
], BrandDisplayState, "getLoadingActive", null);
|
|
192
|
+
__decorate([
|
|
193
|
+
Selector()
|
|
194
|
+
], BrandDisplayState, "getErrors", null);
|
|
195
|
+
BrandDisplayState = __decorate([
|
|
196
|
+
State({
|
|
197
|
+
name: 'brandDisplay',
|
|
198
|
+
defaults: {
|
|
199
|
+
brandDisplayData: {},
|
|
200
|
+
draftBrandDisplayData: {},
|
|
201
|
+
defaultBrandDisplayData: defaultBrandDisplayData,
|
|
202
|
+
loadingActive: [],
|
|
203
|
+
errors: {},
|
|
204
|
+
},
|
|
205
|
+
})
|
|
206
|
+
], BrandDisplayState);
|
|
207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BrandDisplayState, decorators: [{
|
|
208
|
+
type: Injectable
|
|
209
|
+
}], propDecorators: { updateBrandDisplayDataLocally: [], getBrandDisplay: [], updateBrandDisplayData: [] } });
|
|
210
|
+
|
|
211
|
+
class BrandDisplayFacade {
|
|
212
|
+
store = inject(Store);
|
|
213
|
+
// ============================================================================
|
|
214
|
+
// Data Selectors - Memoized by NGXS (fine-grained reactivity)
|
|
215
|
+
// ============================================================================
|
|
216
|
+
brandDisplayData = select(BrandDisplayState.getBrandDisplayData);
|
|
217
|
+
draftBrandDisplayData = select(BrandDisplayState.getDraftBrandDisplayData);
|
|
218
|
+
defaultBrandDisplayData = select(BrandDisplayState.getDefaultBrandDisplayData);
|
|
219
|
+
// ============================================================================
|
|
220
|
+
// Loading/Error Slices - Memoized by NGXS
|
|
221
|
+
// ============================================================================
|
|
222
|
+
loadingActive = select(BrandDisplayState.getLoadingActive);
|
|
223
|
+
errors = select(BrandDisplayState.getErrors);
|
|
224
|
+
// ============================================================================
|
|
225
|
+
// Loading Signals - Computed from slice (minimal reactivity)
|
|
226
|
+
// ============================================================================
|
|
227
|
+
isLoadingBrandDisplay = computed(() => this.loadingActive().includes(BrandDisplayActionKey.GetBrandDisplay), ...(ngDevMode ? [{ debugName: "isLoadingBrandDisplay" }] : []));
|
|
228
|
+
isUpdatingBrandDisplay = computed(() => this.loadingActive().includes(BrandDisplayActionKey.UpdateBrandDisplay), ...(ngDevMode ? [{ debugName: "isUpdatingBrandDisplay" }] : []));
|
|
229
|
+
// ============================================================================
|
|
230
|
+
// Error Signals - Computed from slice (minimal reactivity)
|
|
231
|
+
// ============================================================================
|
|
232
|
+
brandDisplayError = computed(() => this.errors()[BrandDisplayActionKey.GetBrandDisplay] ?? null, ...(ngDevMode ? [{ debugName: "brandDisplayError" }] : []));
|
|
233
|
+
updateBrandDisplayError = computed(() => this.errors()[BrandDisplayActionKey.UpdateBrandDisplay] ?? null, ...(ngDevMode ? [{ debugName: "updateBrandDisplayError" }] : []));
|
|
234
|
+
// ============================================================================
|
|
235
|
+
// Action Dispatchers
|
|
236
|
+
// ============================================================================
|
|
237
|
+
getBrandDisplay() {
|
|
238
|
+
return this.store.dispatch(new GetBrandDisplay());
|
|
239
|
+
}
|
|
240
|
+
updateBrandDisplayDataLocally(changes) {
|
|
241
|
+
return this.store.dispatch(new UpdateBrandDisplayDataLocally(changes));
|
|
242
|
+
}
|
|
243
|
+
updateBrandDisplayData() {
|
|
244
|
+
return this.store.dispatch(new UpdateBrandDisplayData());
|
|
245
|
+
}
|
|
246
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BrandDisplayFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
247
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BrandDisplayFacade, providedIn: 'root' });
|
|
248
|
+
}
|
|
249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BrandDisplayFacade, decorators: [{
|
|
250
|
+
type: Injectable,
|
|
251
|
+
args: [{ providedIn: 'root' }]
|
|
252
|
+
}] });
|
|
253
|
+
|
|
254
|
+
class BrandDisplay {
|
|
255
|
+
facade = inject(BrandDisplayFacade);
|
|
256
|
+
route = inject(ActivatedRoute);
|
|
257
|
+
router = inject(Router);
|
|
258
|
+
translocoService = inject(TranslocoService);
|
|
259
|
+
selectedTab = signal('users', ...(ngDevMode ? [{ debugName: "selectedTab" }] : []));
|
|
260
|
+
loading = this.facade.isLoadingBrandDisplay;
|
|
261
|
+
updateLoading = this.facade.isUpdatingBrandDisplay;
|
|
262
|
+
tabsList = [
|
|
263
|
+
{
|
|
264
|
+
label: this.translocoService.translate('brand-display.white-label'),
|
|
265
|
+
value: 'white-label',
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
label: this.translocoService.translate('brand-display.login-display'),
|
|
269
|
+
value: 'login-display',
|
|
270
|
+
},
|
|
271
|
+
];
|
|
272
|
+
breadcrumbItems = [
|
|
273
|
+
{
|
|
274
|
+
label: '',
|
|
275
|
+
icon: 'general.home-line',
|
|
276
|
+
routerLink: '/control-panel/workspaces',
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
label: this.translocoService.translate('brand-settings.brand-settings'),
|
|
280
|
+
routerLink: '/control-panel/brand-settings',
|
|
281
|
+
},
|
|
282
|
+
{ label: this.translocoService.translate('brand-display.brand-display') },
|
|
283
|
+
];
|
|
284
|
+
ngOnInit() {
|
|
285
|
+
const selectedTab = this.route.snapshot.firstChild?.data['componentType'];
|
|
286
|
+
this.selectedTab.set(selectedTab || 'white-label');
|
|
287
|
+
this.facade.getBrandDisplay();
|
|
288
|
+
}
|
|
289
|
+
goBack() {
|
|
290
|
+
this.router.navigate(['control-panel/brand-settings']);
|
|
291
|
+
}
|
|
292
|
+
onTabChange(event) {
|
|
293
|
+
if (event) {
|
|
294
|
+
this.router.navigate([event], { relativeTo: this.route });
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
onSave() {
|
|
298
|
+
this.facade.updateBrandDisplayData();
|
|
299
|
+
}
|
|
300
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BrandDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
301
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: BrandDisplay, isStandalone: true, selector: "mt-brand-display", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'brand-display'\">\r\n <mt-page\r\n [title]=\"t('brand-display')\"\r\n [avatarIcon]=\"'editor.colors'\"\r\n [avatarStyle]=\"{\r\n '--p-avatar-background': 'var(--p-violet-50)',\r\n '--p-avatar-color': 'var(--p-violet-700)',\r\n }\"\r\n [tabs]=\"tabsList\"\r\n [activeTab]=\"selectedTab()\"\r\n (tabChange)=\"onTabChange($event)\"\r\n (backButtonClick)=\"goBack()\"\r\n backButton\r\n >\r\n <div class=\"flex justify-between items-end\">\r\n <div>\r\n <h3 class=\"font-bold text-lg\">{{ t(\"brand-display\") }}</h3>\r\n <mt-breadcrumb\r\n [items]=\"breadcrumbItems\"\r\n [styleClass]=\"'flex justify-start mx-1'\"\r\n ></mt-breadcrumb>\r\n </div>\r\n <mt-button\r\n [label]=\"t('save')\"\r\n icon=\"general.check\"\r\n (click)=\"onSave()\"\r\n [loading]=\"updateLoading()\"\r\n [disabled]=\"false\"\r\n />\r\n </div>\r\n @if (!loading()) {\r\n <router-outlet />\r\n } @else {\r\n <p-skeleton class=\"mt-8\" width=\"30rem\" height=\"3rem\" />\r\n <div class=\"flex mt-4 gap-5\">\r\n <p-skeleton height=\"25rem\" />\r\n <p-skeleton width=\"70rem\" height=\"25rem\" />\r\n </div>\r\n }\r\n </mt-page>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
|
|
302
|
+
}
|
|
303
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BrandDisplay, decorators: [{
|
|
304
|
+
type: Component,
|
|
305
|
+
args: [{ selector: 'mt-brand-display', standalone: true, imports: [
|
|
306
|
+
CommonModule,
|
|
307
|
+
Page,
|
|
308
|
+
Breadcrumb,
|
|
309
|
+
Button,
|
|
310
|
+
RouterOutlet,
|
|
311
|
+
TranslocoDirective,
|
|
312
|
+
SkeletonModule,
|
|
313
|
+
], template: "<ng-container *transloco=\"let t; prefix: 'brand-display'\">\r\n <mt-page\r\n [title]=\"t('brand-display')\"\r\n [avatarIcon]=\"'editor.colors'\"\r\n [avatarStyle]=\"{\r\n '--p-avatar-background': 'var(--p-violet-50)',\r\n '--p-avatar-color': 'var(--p-violet-700)',\r\n }\"\r\n [tabs]=\"tabsList\"\r\n [activeTab]=\"selectedTab()\"\r\n (tabChange)=\"onTabChange($event)\"\r\n (backButtonClick)=\"goBack()\"\r\n backButton\r\n >\r\n <div class=\"flex justify-between items-end\">\r\n <div>\r\n <h3 class=\"font-bold text-lg\">{{ t(\"brand-display\") }}</h3>\r\n <mt-breadcrumb\r\n [items]=\"breadcrumbItems\"\r\n [styleClass]=\"'flex justify-start mx-1'\"\r\n ></mt-breadcrumb>\r\n </div>\r\n <mt-button\r\n [label]=\"t('save')\"\r\n icon=\"general.check\"\r\n (click)=\"onSave()\"\r\n [loading]=\"updateLoading()\"\r\n [disabled]=\"false\"\r\n />\r\n </div>\r\n @if (!loading()) {\r\n <router-outlet />\r\n } @else {\r\n <p-skeleton class=\"mt-8\" width=\"30rem\" height=\"3rem\" />\r\n <div class=\"flex mt-4 gap-5\">\r\n <p-skeleton height=\"25rem\" />\r\n <p-skeleton width=\"70rem\" height=\"25rem\" />\r\n </div>\r\n }\r\n </mt-page>\r\n</ng-container>\r\n" }]
|
|
314
|
+
}] });
|
|
315
|
+
|
|
316
|
+
class FaviconService {
|
|
317
|
+
document = inject(DOCUMENT);
|
|
318
|
+
httpClient = inject(HttpClient);
|
|
319
|
+
faviconLink = this.document.querySelector("link[rel*='icon']");
|
|
320
|
+
setFavicon(faviconDataUrl) {
|
|
321
|
+
this.updateFaviconFromUrl(faviconDataUrl);
|
|
322
|
+
}
|
|
323
|
+
resetFavicon(defaultPath = '/pplus.svg') {
|
|
324
|
+
this.faviconLink.href = defaultPath;
|
|
325
|
+
}
|
|
326
|
+
updateFaviconFromUrl(imagePath) {
|
|
327
|
+
this.httpClient
|
|
328
|
+
.get('uploader/' + imagePath, {
|
|
329
|
+
observe: 'response',
|
|
330
|
+
responseType: 'blob',
|
|
331
|
+
})
|
|
332
|
+
.pipe(map((response) => URL.createObjectURL(response.body)))
|
|
333
|
+
.subscribe((url) => {
|
|
334
|
+
this.faviconLink.href = url;
|
|
335
|
+
});
|
|
336
|
+
}
|
|
337
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FaviconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
338
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FaviconService, providedIn: 'root' });
|
|
339
|
+
}
|
|
340
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FaviconService, decorators: [{
|
|
341
|
+
type: Injectable,
|
|
342
|
+
args: [{
|
|
343
|
+
providedIn: 'root',
|
|
344
|
+
}]
|
|
345
|
+
}] });
|
|
346
|
+
|
|
347
|
+
class ManageBrndingService {
|
|
348
|
+
brandDisplay = inject(BrandDisplayFacade);
|
|
349
|
+
faviconService = inject(FaviconService);
|
|
350
|
+
DEFAULT_DISPLAY_DATA = this.brandDisplay.defaultBrandDisplayData;
|
|
351
|
+
brandDisplayData = this.brandDisplay.brandDisplayData;
|
|
352
|
+
draftBrandDisplayData = this.brandDisplay.draftBrandDisplayData;
|
|
353
|
+
mainData = computed(() => this.brandDisplayData()?.main, ...(ngDevMode ? [{ debugName: "mainData" }] : []));
|
|
354
|
+
headerData = computed(() => this.brandDisplayData()?.header, ...(ngDevMode ? [{ debugName: "headerData" }] : []));
|
|
355
|
+
sidebarData = computed(() => this.brandDisplayData()?.sidebar, ...(ngDevMode ? [{ debugName: "sidebarData" }] : []));
|
|
356
|
+
contentAreaData = computed(() => this.brandDisplayData()?.contentArea, ...(ngDevMode ? [{ debugName: "contentAreaData" }] : []));
|
|
357
|
+
loginData = computed(() => this.brandDisplayData()?.login, ...(ngDevMode ? [{ debugName: "loginData" }] : []));
|
|
358
|
+
// Draft data computed signals for preview components
|
|
359
|
+
draftMainData = computed(() => this.draftBrandDisplayData()?.main, ...(ngDevMode ? [{ debugName: "draftMainData" }] : []));
|
|
360
|
+
draftHeaderData = computed(() => this.draftBrandDisplayData()?.header, ...(ngDevMode ? [{ debugName: "draftHeaderData" }] : []));
|
|
361
|
+
draftSidebarData = computed(() => this.draftBrandDisplayData()?.sidebar, ...(ngDevMode ? [{ debugName: "draftSidebarData" }] : []));
|
|
362
|
+
draftContentAreaData = computed(() => this.draftBrandDisplayData()?.contentArea, ...(ngDevMode ? [{ debugName: "draftContentAreaData" }] : []));
|
|
363
|
+
draftLoginData = computed(() => this.draftBrandDisplayData()?.login, ...(ngDevMode ? [{ debugName: "draftLoginData" }] : []));
|
|
364
|
+
// Images for main brandDisplayData
|
|
365
|
+
productBrandLogo = computed(() => {
|
|
366
|
+
return this.mainData()?.logoSettings?.productBrandImage?.fileName;
|
|
367
|
+
}, ...(ngDevMode ? [{ debugName: "productBrandLogo" }] : []));
|
|
368
|
+
headerBackgroundImage = computed(() => {
|
|
369
|
+
return this.headerData()?.backgroundImage?.fileName;
|
|
370
|
+
}, ...(ngDevMode ? [{ debugName: "headerBackgroundImage" }] : []));
|
|
371
|
+
sidebarBackgroundImage = computed(() => {
|
|
372
|
+
return this.sidebarData()?.backgroundImage?.fileName;
|
|
373
|
+
}, ...(ngDevMode ? [{ debugName: "sidebarBackgroundImage" }] : []));
|
|
374
|
+
contentAreaBackgroundImage = computed(() => {
|
|
375
|
+
return this.contentAreaData()?.backgroundImage?.fileName;
|
|
376
|
+
}, ...(ngDevMode ? [{ debugName: "contentAreaBackgroundImage" }] : []));
|
|
377
|
+
loginBackgroundImage = computed(() => {
|
|
378
|
+
return this.loginData()?.backgroundImage?.fileName;
|
|
379
|
+
}, ...(ngDevMode ? [{ debugName: "loginBackgroundImage" }] : []));
|
|
380
|
+
// Images for draft data (preview)
|
|
381
|
+
draftProductBrandLogo = computed(() => {
|
|
382
|
+
return this.draftMainData()?.logoSettings?.productBrandImage?.fileName;
|
|
383
|
+
}, ...(ngDevMode ? [{ debugName: "draftProductBrandLogo" }] : []));
|
|
384
|
+
draftHeaderBackgroundImage = computed(() => {
|
|
385
|
+
return this.draftHeaderData()?.backgroundImage?.fileName;
|
|
386
|
+
}, ...(ngDevMode ? [{ debugName: "draftHeaderBackgroundImage" }] : []));
|
|
387
|
+
draftSidebarBackgroundImage = computed(() => {
|
|
388
|
+
return this.draftSidebarData()?.backgroundImage?.fileName;
|
|
389
|
+
}, ...(ngDevMode ? [{ debugName: "draftSidebarBackgroundImage" }] : []));
|
|
390
|
+
draftContentAreaBackgroundImage = computed(() => {
|
|
391
|
+
return this.draftContentAreaData()?.backgroundImage?.fileName;
|
|
392
|
+
}, ...(ngDevMode ? [{ debugName: "draftContentAreaBackgroundImage" }] : []));
|
|
393
|
+
draftLoginBackgroundImage = computed(() => {
|
|
394
|
+
return this.draftLoginData()?.backgroundImage?.fileName;
|
|
395
|
+
}, ...(ngDevMode ? [{ debugName: "draftLoginBackgroundImage" }] : []));
|
|
396
|
+
primaryColor = computed(() => this.mainData()?.colorSettings?.primaryColor ||
|
|
397
|
+
this.DEFAULT_DISPLAY_DATA()?.main?.colorSettings?.primaryColor, ...(ngDevMode ? [{ debugName: "primaryColor" }] : []));
|
|
398
|
+
textColor = computed(() => this.mainData()?.colorSettings?.textColor ||
|
|
399
|
+
this.DEFAULT_DISPLAY_DATA()?.main?.colorSettings?.textColor, ...(ngDevMode ? [{ debugName: "textColor" }] : []));
|
|
400
|
+
backgroundColor = computed(() => this.contentAreaData()?.backgroundColor ||
|
|
401
|
+
this.DEFAULT_DISPLAY_DATA()?.contentArea?.backgroundColor, ...(ngDevMode ? [{ debugName: "backgroundColor" }] : []));
|
|
402
|
+
headerFontColor = computed(() => {
|
|
403
|
+
return (this.headerData()?.fontColor ||
|
|
404
|
+
this.DEFAULT_DISPLAY_DATA()?.header?.fontColor);
|
|
405
|
+
}, ...(ngDevMode ? [{ debugName: "headerFontColor" }] : []));
|
|
406
|
+
sidebarIconColor = computed(() => {
|
|
407
|
+
return (this.sidebarData()?.iconColor ||
|
|
408
|
+
this.DEFAULT_DISPLAY_DATA()?.sidebar?.iconColor);
|
|
409
|
+
}, ...(ngDevMode ? [{ debugName: "sidebarIconColor" }] : []));
|
|
410
|
+
contentAreaBodyColor = computed(() => this.mainData()?.colorSettings?.textColor ||
|
|
411
|
+
this.DEFAULT_DISPLAY_DATA()?.main?.colorSettings?.textColor, ...(ngDevMode ? [{ debugName: "contentAreaBodyColor" }] : []));
|
|
412
|
+
// Colors and styles for draft data (preview)
|
|
413
|
+
draftPrimaryColor = computed(() => this.draftMainData()?.colorSettings?.primaryColor ||
|
|
414
|
+
this.DEFAULT_DISPLAY_DATA()?.main?.colorSettings?.primaryColor, ...(ngDevMode ? [{ debugName: "draftPrimaryColor" }] : []));
|
|
415
|
+
draftHeaderFontColor = computed(() => {
|
|
416
|
+
return (this.draftHeaderData()?.fontColor ||
|
|
417
|
+
this.DEFAULT_DISPLAY_DATA()?.header?.fontColor);
|
|
418
|
+
}, ...(ngDevMode ? [{ debugName: "draftHeaderFontColor" }] : []));
|
|
419
|
+
draftSidebarIconColor = computed(() => {
|
|
420
|
+
return (this.draftSidebarData()?.iconColor ||
|
|
421
|
+
this.DEFAULT_DISPLAY_DATA()?.sidebar?.iconColor);
|
|
422
|
+
}, ...(ngDevMode ? [{ debugName: "draftSidebarIconColor" }] : []));
|
|
423
|
+
draftContentAreaBodyColor = computed(() => this.draftMainData()?.colorSettings?.textColor ||
|
|
424
|
+
this.DEFAULT_DISPLAY_DATA()?.main?.colorSettings?.textColor, ...(ngDevMode ? [{ debugName: "draftContentAreaBodyColor" }] : []));
|
|
425
|
+
constructor() {
|
|
426
|
+
effect(() => {
|
|
427
|
+
const favicon = this.mainData()?.logoSettings?.faviconsImage?.fileName;
|
|
428
|
+
if (favicon) {
|
|
429
|
+
this.faviconService.setFavicon(favicon);
|
|
430
|
+
}
|
|
431
|
+
else {
|
|
432
|
+
this.faviconService.resetFavicon();
|
|
433
|
+
}
|
|
434
|
+
});
|
|
435
|
+
effect(() => {
|
|
436
|
+
const primaryColor = this.primaryColor();
|
|
437
|
+
const textColor = this.textColor();
|
|
438
|
+
const backgroundColor = this.backgroundColor();
|
|
439
|
+
untracked(() => {
|
|
440
|
+
if (primaryColor) {
|
|
441
|
+
changePrimaryColor(primaryColor);
|
|
442
|
+
}
|
|
443
|
+
if (textColor) {
|
|
444
|
+
changeTextColor(textColor);
|
|
445
|
+
}
|
|
446
|
+
if (backgroundColor) {
|
|
447
|
+
changeBackgroundColor(backgroundColor);
|
|
448
|
+
}
|
|
449
|
+
});
|
|
450
|
+
});
|
|
451
|
+
}
|
|
452
|
+
buildBackgroundStyles(data, defaultBgColor) {
|
|
453
|
+
const styles = {};
|
|
454
|
+
if (defaultBgColor && !data?.backgroundColor) {
|
|
455
|
+
styles['background-color'] = defaultBgColor;
|
|
456
|
+
}
|
|
457
|
+
if (data?.backgroundColor) {
|
|
458
|
+
styles['background-color'] = data.backgroundColor;
|
|
459
|
+
}
|
|
460
|
+
if (data?.backgroundImage) {
|
|
461
|
+
if (data.repeated) {
|
|
462
|
+
styles['background-repeat'] = 'repeat';
|
|
463
|
+
styles['background-size'] = 'auto';
|
|
464
|
+
}
|
|
465
|
+
else {
|
|
466
|
+
styles['background-repeat'] = 'no-repeat';
|
|
467
|
+
styles['background-size'] = 'cover';
|
|
468
|
+
styles['background-position'] = 'center';
|
|
469
|
+
}
|
|
470
|
+
}
|
|
471
|
+
return styles;
|
|
472
|
+
}
|
|
473
|
+
getProductName(lang) {
|
|
474
|
+
const name = this.mainData()?.productName;
|
|
475
|
+
return (name?.[lang] || this.DEFAULT_DISPLAY_DATA()?.main?.productName?.[lang]);
|
|
476
|
+
}
|
|
477
|
+
getProductTagline(lang) {
|
|
478
|
+
const name = this.mainData()?.productTagline;
|
|
479
|
+
return (name?.[lang] || this.DEFAULT_DISPLAY_DATA()?.main?.productTagline?.[lang]);
|
|
480
|
+
}
|
|
481
|
+
// Draft versions for preview components
|
|
482
|
+
getDraftProductName(lang) {
|
|
483
|
+
const name = this.draftMainData()?.productName;
|
|
484
|
+
return (name?.[lang] || this.DEFAULT_DISPLAY_DATA()?.main?.productName?.[lang]);
|
|
485
|
+
}
|
|
486
|
+
getDraftProductTagline(lang) {
|
|
487
|
+
const name = this.draftMainData()?.productTagline;
|
|
488
|
+
return (name?.[lang] || this.DEFAULT_DISPLAY_DATA()?.main?.productTagline?.[lang]);
|
|
489
|
+
}
|
|
490
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ManageBrndingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
491
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ManageBrndingService, providedIn: 'root' });
|
|
492
|
+
}
|
|
493
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ManageBrndingService, decorators: [{
|
|
494
|
+
type: Injectable,
|
|
495
|
+
args: [{
|
|
496
|
+
providedIn: 'root',
|
|
497
|
+
}]
|
|
498
|
+
}], ctorParameters: () => [] });
|
|
499
|
+
|
|
500
|
+
class PreviewBrand {
|
|
501
|
+
facade = inject(BrandDisplayFacade);
|
|
502
|
+
translocoService = inject(TranslocoService);
|
|
503
|
+
manageBrnding = inject(ManageBrndingService);
|
|
504
|
+
ActiveLang = this.translocoService.getActiveLang();
|
|
505
|
+
DEFAULT_DISPLAY_DATA = this.facade.defaultBrandDisplayData;
|
|
506
|
+
productBrandLogo = this.manageBrnding.draftProductBrandLogo;
|
|
507
|
+
headerBackgroundImage = this.manageBrnding.draftHeaderBackgroundImage;
|
|
508
|
+
sidebarBackgroundImage = this.manageBrnding.draftSidebarBackgroundImage;
|
|
509
|
+
contentAreaBackgroundImage = this.manageBrnding.draftContentAreaBackgroundImage;
|
|
510
|
+
headerStyles = computed(() => {
|
|
511
|
+
const defaultBg = this.manageBrnding.draftHeaderData()?.backgroundColor ||
|
|
512
|
+
this.manageBrnding.draftHeaderData()?.backgroundImage
|
|
513
|
+
? undefined
|
|
514
|
+
: this.DEFAULT_DISPLAY_DATA()?.header?.backgroundColor;
|
|
515
|
+
return this.manageBrnding.buildBackgroundStyles(this.manageBrnding.draftHeaderData(), defaultBg);
|
|
516
|
+
}, ...(ngDevMode ? [{ debugName: "headerStyles" }] : []));
|
|
517
|
+
sidebarStyles = computed(() => {
|
|
518
|
+
const defaultBg = this.manageBrnding.draftSidebarData()?.backgroundColor ||
|
|
519
|
+
this.manageBrnding.draftSidebarData()?.backgroundImage
|
|
520
|
+
? undefined
|
|
521
|
+
: this.DEFAULT_DISPLAY_DATA()?.sidebar?.backgroundColor;
|
|
522
|
+
return this.manageBrnding.buildBackgroundStyles(this.manageBrnding.draftSidebarData(), defaultBg);
|
|
523
|
+
}, ...(ngDevMode ? [{ debugName: "sidebarStyles" }] : []));
|
|
524
|
+
contentAreaStyles = computed(() => {
|
|
525
|
+
const defaultBg = this.manageBrnding.draftContentAreaData()?.backgroundColor ||
|
|
526
|
+
this.manageBrnding.draftContentAreaData()?.backgroundImage
|
|
527
|
+
? undefined
|
|
528
|
+
: this.DEFAULT_DISPLAY_DATA()?.contentArea?.backgroundColor;
|
|
529
|
+
return this.manageBrnding.buildBackgroundStyles(this.manageBrnding.draftContentAreaData(), defaultBg);
|
|
530
|
+
}, ...(ngDevMode ? [{ debugName: "contentAreaStyles" }] : []));
|
|
531
|
+
contentAreaBodyColor = this.manageBrnding.draftContentAreaBodyColor;
|
|
532
|
+
primaryColor = this.manageBrnding.draftPrimaryColor;
|
|
533
|
+
lightPrimaryColor = computed(() => getLightColor(this.primaryColor()), ...(ngDevMode ? [{ debugName: "lightPrimaryColor" }] : []));
|
|
534
|
+
headerFontColor = this.manageBrnding.draftHeaderFontColor;
|
|
535
|
+
productName = computed(() => {
|
|
536
|
+
const lang = this.ActiveLang;
|
|
537
|
+
return this.manageBrnding.getDraftProductName(lang);
|
|
538
|
+
}, ...(ngDevMode ? [{ debugName: "productName" }] : []));
|
|
539
|
+
productTagline = computed(() => {
|
|
540
|
+
const lang = this.ActiveLang;
|
|
541
|
+
return this.manageBrnding.getDraftProductTagline(lang);
|
|
542
|
+
}, ...(ngDevMode ? [{ debugName: "productTagline" }] : []));
|
|
543
|
+
pages = [
|
|
544
|
+
{
|
|
545
|
+
title: 'Workspaces',
|
|
546
|
+
icon: 'custom.layer-6',
|
|
547
|
+
path: '/control-panel/workspaces',
|
|
548
|
+
},
|
|
549
|
+
{
|
|
550
|
+
title: 'Product Settings',
|
|
551
|
+
icon: 'media.monitor-01',
|
|
552
|
+
path: '/control-panel/product-settings',
|
|
553
|
+
},
|
|
554
|
+
{
|
|
555
|
+
title: 'Brand Settings',
|
|
556
|
+
icon: 'image.colors',
|
|
557
|
+
path: '/control-panel/brand-settings',
|
|
558
|
+
},
|
|
559
|
+
{
|
|
560
|
+
title: 'Others',
|
|
561
|
+
icon: 'general.dots-grid',
|
|
562
|
+
path: '/others',
|
|
563
|
+
},
|
|
564
|
+
];
|
|
565
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PreviewBrand, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
566
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: PreviewBrand, isStandalone: true, selector: "mt-preview-brand", ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <div class=\"border rounded-2xl border-surface-300\">\r\n <div\r\n class=\"flex justify-between rounded-t-2xl align-center p-4 h-[calc(var(--header-height))] bg-cover bg-center\"\r\n [style]=\"headerStyles()\"\r\n [style.backgroundImage]=\"\r\n headerBackgroundImage() ? (headerBackgroundImage() | secureImage) : null\r\n \"\r\n >\r\n <div class=\"flex gap-4 items-center\">\r\n <img\r\n [src]=\"\r\n productBrandLogo()\r\n ? (productBrandLogo() | secureImage: true)\r\n : DEFAULT_DISPLAY_DATA()?.brandLogoWhite\r\n \"\r\n alt=\"Logo\"\r\n class=\"h-12 w-12\"\r\n />\r\n <div\r\n class=\"h-3/4 w-[1px]\"\r\n [style.background-color]=\"headerFontColor()\"\r\n ></div>\r\n <div class=\"flex flex-col gap-1\">\r\n <h2 class=\"text-xl font-semibold\" [style.color]=\"headerFontColor()\">\r\n {{ productName() }}\r\n </h2>\r\n <span class=\"text-sm font-semibold\" [style.color]=\"headerFontColor()\">\r\n {{ productTagline() }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"flex gap-2 items-center\">\r\n <mt-button\r\n icon=\"alert.bell-01\"\r\n size=\"large\"\r\n [style.color]=\"headerFontColor()\"\r\n ></mt-button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex bg-white overflow-clip\">\r\n <div\r\n class=\"w-16 h-full flex flex-col gap-3 border-e-1 border-surface-300 px-2 py-8 rounded-ss-2xl bg-cover bg-center\"\r\n [style]=\"sidebarStyles()\"\r\n [style.backgroundImage]=\"\r\n sidebarBackgroundImage()\r\n ? (sidebarBackgroundImage() | secureImage)\r\n : null\r\n \"\r\n >\r\n @for (page of pages; track page.title; let first = $first) {\r\n <a\r\n [style.background-color]=\"first ? lightPrimaryColor() : null\"\r\n class=\"flex items-center justify-center size-[47px] hover:bg-surface-100 transition-colors rounded-xl\"\r\n >\r\n <mt-icon\r\n [icon]=\"page.icon\"\r\n [style.color]=\"\r\n first ? primaryColor() : manageBrnding.draftSidebarIconColor()\r\n \"\r\n />\r\n </a>\r\n }\r\n </div>\r\n\r\n <div\r\n [style]=\"contentAreaStyles()\"\r\n [style.color]=\"contentAreaBodyColor()\"\r\n [style.backgroundImage]=\"\r\n contentAreaBackgroundImage()\r\n ? (contentAreaBackgroundImage() | secureImage)\r\n : null\r\n \"\r\n class=\"size-full h-[288px] overflow-y-auto overscroll-y-auto p-4 bg-cover bg-center\"\r\n >\r\n <p class=\"text-sm\">{{ t(\"preview-content\") }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }] });
|
|
567
|
+
}
|
|
568
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PreviewBrand, decorators: [{
|
|
569
|
+
type: Component,
|
|
570
|
+
args: [{ selector: 'mt-preview-brand', standalone: true, imports: [CommonModule, Button, Icon, TranslocoDirective, SecureImagePipe], template: "<ng-container *transloco=\"let t\">\r\n <div class=\"border rounded-2xl border-surface-300\">\r\n <div\r\n class=\"flex justify-between rounded-t-2xl align-center p-4 h-[calc(var(--header-height))] bg-cover bg-center\"\r\n [style]=\"headerStyles()\"\r\n [style.backgroundImage]=\"\r\n headerBackgroundImage() ? (headerBackgroundImage() | secureImage) : null\r\n \"\r\n >\r\n <div class=\"flex gap-4 items-center\">\r\n <img\r\n [src]=\"\r\n productBrandLogo()\r\n ? (productBrandLogo() | secureImage: true)\r\n : DEFAULT_DISPLAY_DATA()?.brandLogoWhite\r\n \"\r\n alt=\"Logo\"\r\n class=\"h-12 w-12\"\r\n />\r\n <div\r\n class=\"h-3/4 w-[1px]\"\r\n [style.background-color]=\"headerFontColor()\"\r\n ></div>\r\n <div class=\"flex flex-col gap-1\">\r\n <h2 class=\"text-xl font-semibold\" [style.color]=\"headerFontColor()\">\r\n {{ productName() }}\r\n </h2>\r\n <span class=\"text-sm font-semibold\" [style.color]=\"headerFontColor()\">\r\n {{ productTagline() }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"flex gap-2 items-center\">\r\n <mt-button\r\n icon=\"alert.bell-01\"\r\n size=\"large\"\r\n [style.color]=\"headerFontColor()\"\r\n ></mt-button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex bg-white overflow-clip\">\r\n <div\r\n class=\"w-16 h-full flex flex-col gap-3 border-e-1 border-surface-300 px-2 py-8 rounded-ss-2xl bg-cover bg-center\"\r\n [style]=\"sidebarStyles()\"\r\n [style.backgroundImage]=\"\r\n sidebarBackgroundImage()\r\n ? (sidebarBackgroundImage() | secureImage)\r\n : null\r\n \"\r\n >\r\n @for (page of pages; track page.title; let first = $first) {\r\n <a\r\n [style.background-color]=\"first ? lightPrimaryColor() : null\"\r\n class=\"flex items-center justify-center size-[47px] hover:bg-surface-100 transition-colors rounded-xl\"\r\n >\r\n <mt-icon\r\n [icon]=\"page.icon\"\r\n [style.color]=\"\r\n first ? primaryColor() : manageBrnding.draftSidebarIconColor()\r\n \"\r\n />\r\n </a>\r\n }\r\n </div>\r\n\r\n <div\r\n [style]=\"contentAreaStyles()\"\r\n [style.color]=\"contentAreaBodyColor()\"\r\n [style.backgroundImage]=\"\r\n contentAreaBackgroundImage()\r\n ? (contentAreaBackgroundImage() | secureImage)\r\n : null\r\n \"\r\n class=\"size-full h-[288px] overflow-y-auto overscroll-y-auto p-4 bg-cover bg-center\"\r\n >\r\n <p class=\"text-sm\">{{ t(\"preview-content\") }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-container>\r\n" }]
|
|
571
|
+
}] });
|
|
572
|
+
|
|
573
|
+
class WhiteLabel {
|
|
574
|
+
translocoService = inject(TranslocoService);
|
|
575
|
+
router = inject(Router);
|
|
576
|
+
route = inject(ActivatedRoute);
|
|
577
|
+
selectedTab = signal('', ...(ngDevMode ? [{ debugName: "selectedTab" }] : []));
|
|
578
|
+
ngOnInit() {
|
|
579
|
+
const selectedTab = this.route.snapshot.firstChild?.data['componentType'];
|
|
580
|
+
this.selectedTab.set(selectedTab || 'main');
|
|
581
|
+
}
|
|
582
|
+
tabsList = [
|
|
583
|
+
{
|
|
584
|
+
label: this.translocoService.translate('brand-display.main'),
|
|
585
|
+
value: 'main',
|
|
586
|
+
},
|
|
587
|
+
{
|
|
588
|
+
label: this.translocoService.translate('brand-display.header'),
|
|
589
|
+
value: 'header',
|
|
590
|
+
},
|
|
591
|
+
{
|
|
592
|
+
label: this.translocoService.translate('brand-display.side-bar'),
|
|
593
|
+
value: 'sidebar',
|
|
594
|
+
},
|
|
595
|
+
{
|
|
596
|
+
label: this.translocoService.translate('brand-display.content-area'),
|
|
597
|
+
value: 'content-area',
|
|
598
|
+
},
|
|
599
|
+
];
|
|
600
|
+
onTabChange(event) {
|
|
601
|
+
if (event) {
|
|
602
|
+
this.router.navigate([event], { relativeTo: this.route });
|
|
603
|
+
}
|
|
604
|
+
}
|
|
605
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WhiteLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
606
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: WhiteLabel, isStandalone: true, selector: "mt-white-label", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'brand-display'\">\r\n <div class=\"mt-7\">\r\n <mt-tabs\r\n [(active)]=\"selectedTab\"\r\n [options]=\"tabsList\"\r\n size=\"large\"\r\n (onChange)=\"onTabChange($event)\"\r\n />\r\n </div>\r\n <div class=\"flex gap-10 mt-4\">\r\n <div class=\"w-3/5\">\r\n <router-outlet />\r\n </div>\r\n <div class=\"w-2/5\">\r\n <h3 class=\"text-sm font-medium mb-3\">{{ t(\"preview\") }}</h3>\r\n <mt-preview-brand></mt-preview-brand>\r\n </div>\r\n </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: PreviewBrand, selector: "mt-preview-brand" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
|
|
607
|
+
}
|
|
608
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WhiteLabel, decorators: [{
|
|
609
|
+
type: Component,
|
|
610
|
+
args: [{ selector: 'mt-white-label', standalone: true, imports: [CommonModule, Tabs, RouterOutlet, PreviewBrand, TranslocoDirective], template: "<ng-container *transloco=\"let t; prefix: 'brand-display'\">\r\n <div class=\"mt-7\">\r\n <mt-tabs\r\n [(active)]=\"selectedTab\"\r\n [options]=\"tabsList\"\r\n size=\"large\"\r\n (onChange)=\"onTabChange($event)\"\r\n />\r\n </div>\r\n <div class=\"flex gap-10 mt-4\">\r\n <div class=\"w-3/5\">\r\n <router-outlet />\r\n </div>\r\n <div class=\"w-2/5\">\r\n <h3 class=\"text-sm font-medium mb-3\">{{ t(\"preview\") }}</h3>\r\n <mt-preview-brand></mt-preview-brand>\r\n </div>\r\n </div>\r\n</ng-container>\r\n" }]
|
|
611
|
+
}] });
|
|
612
|
+
|
|
613
|
+
class MainDisplay {
|
|
614
|
+
translocoService = inject(TranslocoService);
|
|
615
|
+
facade = inject(BrandDisplayFacade);
|
|
616
|
+
DEFAULT_DISPLAY_DATA = this.facade.defaultBrandDisplayData;
|
|
617
|
+
brandNameFormControl = new FormControl({
|
|
618
|
+
productName: this.DEFAULT_DISPLAY_DATA()?.main?.productName,
|
|
619
|
+
productTagline: this.DEFAULT_DISPLAY_DATA()?.main?.productTagline,
|
|
620
|
+
});
|
|
621
|
+
logoFormControl = new FormControl({});
|
|
622
|
+
colorsFormControl = new FormControl({
|
|
623
|
+
primaryColor: this.DEFAULT_DISPLAY_DATA()?.main?.colorSettings?.primaryColor,
|
|
624
|
+
secondaryColor: this.DEFAULT_DISPLAY_DATA()?.main?.colorSettings?.secondaryColor,
|
|
625
|
+
textColor: this.DEFAULT_DISPLAY_DATA()?.main?.colorSettings?.textColor,
|
|
626
|
+
});
|
|
627
|
+
brandNameConfig = signal({
|
|
628
|
+
sections: [
|
|
629
|
+
{
|
|
630
|
+
key: 'brandNameFormConfig',
|
|
631
|
+
type: 'header',
|
|
632
|
+
order: 1,
|
|
633
|
+
fields: [
|
|
634
|
+
{
|
|
635
|
+
key: 'productName.en',
|
|
636
|
+
label: this.translocoService.translate('brand-display.product-name-en'),
|
|
637
|
+
placeholder: this.translocoService.translate('brand-display.product-name-en'),
|
|
638
|
+
order: 1,
|
|
639
|
+
colSpan: 6,
|
|
640
|
+
},
|
|
641
|
+
{
|
|
642
|
+
key: 'productName.ar',
|
|
643
|
+
label: this.translocoService.translate('brand-display.product-name-ar'),
|
|
644
|
+
placeholder: this.translocoService.translate('brand-display.product-name-ar'),
|
|
645
|
+
order: 1,
|
|
646
|
+
colSpan: 6,
|
|
647
|
+
},
|
|
648
|
+
{
|
|
649
|
+
key: 'productTagline.en',
|
|
650
|
+
label: this.translocoService.translate('brand-display.product-tagline-en'),
|
|
651
|
+
placeholder: this.translocoService.translate('brand-display.product-tagline-en'),
|
|
652
|
+
order: 1,
|
|
653
|
+
colSpan: 6,
|
|
654
|
+
},
|
|
655
|
+
{
|
|
656
|
+
key: 'productTagline.ar',
|
|
657
|
+
label: this.translocoService.translate('brand-display.product-tagline-ar'),
|
|
658
|
+
placeholder: this.translocoService.translate('brand-display.product-tagline-ar'),
|
|
659
|
+
order: 1,
|
|
660
|
+
colSpan: 6,
|
|
661
|
+
},
|
|
662
|
+
],
|
|
663
|
+
},
|
|
664
|
+
],
|
|
665
|
+
}, ...(ngDevMode ? [{ debugName: "brandNameConfig" }] : []));
|
|
666
|
+
logoConfig = signal({
|
|
667
|
+
sections: [
|
|
668
|
+
{
|
|
669
|
+
key: 'logoSettingsConfig',
|
|
670
|
+
type: 'none',
|
|
671
|
+
fields: [
|
|
672
|
+
new UploadFileFieldConfig({
|
|
673
|
+
key: 'productBrandImage',
|
|
674
|
+
label: this.translocoService.translate('brand-display.product-brand'),
|
|
675
|
+
shape: 'circle',
|
|
676
|
+
order: 1,
|
|
677
|
+
colSpan: 4,
|
|
678
|
+
}),
|
|
679
|
+
new UploadFileFieldConfig({
|
|
680
|
+
key: 'faviconsImage',
|
|
681
|
+
label: this.translocoService.translate('brand-display.favicon'),
|
|
682
|
+
shape: 'circle',
|
|
683
|
+
order: 1,
|
|
684
|
+
colSpan: 4,
|
|
685
|
+
}),
|
|
686
|
+
],
|
|
687
|
+
},
|
|
688
|
+
],
|
|
689
|
+
}, ...(ngDevMode ? [{ debugName: "logoConfig" }] : []));
|
|
690
|
+
colorsConfig = signal({
|
|
691
|
+
sections: [
|
|
692
|
+
{
|
|
693
|
+
key: 'colorSettingsConfig',
|
|
694
|
+
type: 'none',
|
|
695
|
+
order: 1,
|
|
696
|
+
fields: [
|
|
697
|
+
new ColorPickerFieldConfig({
|
|
698
|
+
key: 'primaryColor',
|
|
699
|
+
label: this.translocoService.translate('brand-display.primary-color'),
|
|
700
|
+
validators: [],
|
|
701
|
+
order: 1,
|
|
702
|
+
colSpan: 6,
|
|
703
|
+
}),
|
|
704
|
+
// new ColorPickerFieldConfig({
|
|
705
|
+
// key: 'secondaryColor',
|
|
706
|
+
// label: this.translocoService.translate(
|
|
707
|
+
// 'brand-display.secondary-color'
|
|
708
|
+
// ),
|
|
709
|
+
// validators: [],
|
|
710
|
+
// order: 2,
|
|
711
|
+
// colSpan: 6,
|
|
712
|
+
// }),
|
|
713
|
+
new ColorPickerFieldConfig({
|
|
714
|
+
key: 'textColor',
|
|
715
|
+
label: this.translocoService.translate('brand-display.text-color'),
|
|
716
|
+
validators: [],
|
|
717
|
+
order: 3,
|
|
718
|
+
colSpan: 6,
|
|
719
|
+
}),
|
|
720
|
+
],
|
|
721
|
+
},
|
|
722
|
+
],
|
|
723
|
+
}, ...(ngDevMode ? [{ debugName: "colorsConfig" }] : []));
|
|
724
|
+
brandDisplayData = this.facade.draftBrandDisplayData;
|
|
725
|
+
ngOnInit() {
|
|
726
|
+
merge(this.brandNameFormControl.valueChanges, this.colorsFormControl.valueChanges, this.logoFormControl.valueChanges).subscribe(() => {
|
|
727
|
+
this.updateBrandDisplayLocally();
|
|
728
|
+
});
|
|
729
|
+
this.brandNameFormControl.patchValue({ ...this.brandNameFormControl.value, ...this.brandDisplayData()?.main }, {
|
|
730
|
+
emitEvent: false,
|
|
731
|
+
});
|
|
732
|
+
this.colorsFormControl.patchValue({
|
|
733
|
+
...this.colorsFormControl.value,
|
|
734
|
+
...(this.brandDisplayData()?.main?.colorSettings || {}),
|
|
735
|
+
}, {
|
|
736
|
+
emitEvent: false,
|
|
737
|
+
});
|
|
738
|
+
this.logoFormControl.patchValue({
|
|
739
|
+
...this.logoFormControl.value,
|
|
740
|
+
...(this.brandDisplayData()?.main?.logoSettings || {}),
|
|
741
|
+
}, {
|
|
742
|
+
emitEvent: false,
|
|
743
|
+
});
|
|
744
|
+
}
|
|
745
|
+
updateBrandDisplayLocally() {
|
|
746
|
+
const brandNameFormControlValue = this.brandNameFormControl.value;
|
|
747
|
+
const colorsFormControlValue = this.colorsFormControl.value;
|
|
748
|
+
const logoFormControlValue = this.logoFormControl.value;
|
|
749
|
+
this.facade.updateBrandDisplayDataLocally({
|
|
750
|
+
main: {
|
|
751
|
+
productName: brandNameFormControlValue.productName,
|
|
752
|
+
productTagline: brandNameFormControlValue.productTagline,
|
|
753
|
+
colorSettings: {
|
|
754
|
+
primaryColor: colorsFormControlValue.primaryColor,
|
|
755
|
+
// secondaryColor: formValue.secondaryColor,
|
|
756
|
+
textColor: colorsFormControlValue.textColor,
|
|
757
|
+
},
|
|
758
|
+
logoSettings: {
|
|
759
|
+
productBrandImage: logoFormControlValue.productBrandImage,
|
|
760
|
+
faviconsImage: logoFormControlValue.faviconsImage,
|
|
761
|
+
},
|
|
762
|
+
},
|
|
763
|
+
});
|
|
764
|
+
}
|
|
765
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MainDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
766
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MainDisplay, isStandalone: true, selector: "mt-main-display", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'brand-display'\">\r\n <mt-card id=\"brand-name\" [title]=\"t('brand-name')\">\r\n <form class=\"col-span-1 p-2\">\r\n <mt-dynamic-form\r\n [formConfig]=\"brandNameConfig()\"\r\n [formControl]=\"brandNameFormControl\"\r\n />\r\n </form>\r\n </mt-card>\r\n\r\n <mt-card class=\"mt-5\" id=\"logo-settings\" [title]=\"t('logo-settings')\">\r\n <form class=\"col-span-1 p-2\">\r\n <mt-dynamic-form\r\n [formConfig]=\"logoConfig()\"\r\n [formControl]=\"logoFormControl\"\r\n />\r\n </form>\r\n </mt-card>\r\n\r\n <mt-card class=\"mt-5\" id=\"colors\" [title]=\"t('colors')\">\r\n <form class=\"col-span-1 p-2\">\r\n <mt-dynamic-form\r\n [formConfig]=\"colorsConfig()\"\r\n [formControl]=\"colorsFormControl\"\r\n />\r\n </form>\r\n </mt-card>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
767
|
+
}
|
|
768
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MainDisplay, decorators: [{
|
|
769
|
+
type: Component,
|
|
770
|
+
args: [{ selector: 'mt-main-display', standalone: true, imports: [
|
|
771
|
+
CommonModule,
|
|
772
|
+
Card,
|
|
773
|
+
TranslocoDirective,
|
|
774
|
+
DynamicForm,
|
|
775
|
+
ReactiveFormsModule,
|
|
776
|
+
], template: "<ng-container *transloco=\"let t; prefix: 'brand-display'\">\r\n <mt-card id=\"brand-name\" [title]=\"t('brand-name')\">\r\n <form class=\"col-span-1 p-2\">\r\n <mt-dynamic-form\r\n [formConfig]=\"brandNameConfig()\"\r\n [formControl]=\"brandNameFormControl\"\r\n />\r\n </form>\r\n </mt-card>\r\n\r\n <mt-card class=\"mt-5\" id=\"logo-settings\" [title]=\"t('logo-settings')\">\r\n <form class=\"col-span-1 p-2\">\r\n <mt-dynamic-form\r\n [formConfig]=\"logoConfig()\"\r\n [formControl]=\"logoFormControl\"\r\n />\r\n </form>\r\n </mt-card>\r\n\r\n <mt-card class=\"mt-5\" id=\"colors\" [title]=\"t('colors')\">\r\n <form class=\"col-span-1 p-2\">\r\n <mt-dynamic-form\r\n [formConfig]=\"colorsConfig()\"\r\n [formControl]=\"colorsFormControl\"\r\n />\r\n </form>\r\n </mt-card>\r\n</ng-container>\r\n" }]
|
|
777
|
+
}] });
|
|
778
|
+
|
|
779
|
+
class HeaderSidebarDisplay {
|
|
780
|
+
translocoService = inject(TranslocoService);
|
|
781
|
+
route = inject(ActivatedRoute);
|
|
782
|
+
componentType = signal('header', ...(ngDevMode ? [{ debugName: "componentType" }] : []));
|
|
783
|
+
isHeader = signal(true, ...(ngDevMode ? [{ debugName: "isHeader" }] : []));
|
|
784
|
+
facade = inject(BrandDisplayFacade);
|
|
785
|
+
brandDisplayData = this.facade.draftBrandDisplayData;
|
|
786
|
+
headerSidebarFormControl;
|
|
787
|
+
headerConfig = signal({ sections: [] }, ...(ngDevMode ? [{ debugName: "headerConfig" }] : []));
|
|
788
|
+
DEFAULT_DISPLAY_DATA = this.facade.defaultBrandDisplayData;
|
|
789
|
+
ngOnInit() {
|
|
790
|
+
this.componentType.set(this.route.snapshot.data['componentType']);
|
|
791
|
+
this.isHeader.set(this.componentType() === 'header');
|
|
792
|
+
this.headerSidebarFormControl = new FormControl({
|
|
793
|
+
fontColor: this.DEFAULT_DISPLAY_DATA()?.[this.componentType()]?.fontColor,
|
|
794
|
+
iconColor: this.DEFAULT_DISPLAY_DATA()?.[this.componentType()]?.iconColor,
|
|
795
|
+
repeated: this.DEFAULT_DISPLAY_DATA()?.[this.componentType()]?.repeated,
|
|
796
|
+
backgroundColor: this.DEFAULT_DISPLAY_DATA()?.[this.componentType()]?.backgroundColor,
|
|
797
|
+
});
|
|
798
|
+
this.headerConfig.set({
|
|
799
|
+
sections: [
|
|
800
|
+
{
|
|
801
|
+
key: 'brandNameFormConfig',
|
|
802
|
+
type: 'header',
|
|
803
|
+
order: 1,
|
|
804
|
+
fields: [
|
|
805
|
+
new ColorPickerFieldConfig({
|
|
806
|
+
key: 'backgroundColor',
|
|
807
|
+
label: this.translocoService.translate('brand-display.background-color'),
|
|
808
|
+
order: 1,
|
|
809
|
+
colSpan: 6,
|
|
810
|
+
}),
|
|
811
|
+
new ColorPickerFieldConfig({
|
|
812
|
+
key: 'fontColor',
|
|
813
|
+
label: this.translocoService.translate('brand-display.font-color'),
|
|
814
|
+
order: 3,
|
|
815
|
+
hidden: !this.isHeader(),
|
|
816
|
+
colSpan: 6,
|
|
817
|
+
}),
|
|
818
|
+
new ColorPickerFieldConfig({
|
|
819
|
+
key: 'iconColor',
|
|
820
|
+
label: this.translocoService.translate('brand-display.icon-color'),
|
|
821
|
+
order: 4,
|
|
822
|
+
hidden: this.isHeader(),
|
|
823
|
+
colSpan: 6,
|
|
824
|
+
}),
|
|
825
|
+
new UploadFileFieldConfig({
|
|
826
|
+
key: 'backgroundImage',
|
|
827
|
+
label: this.translocoService.translate('brand-display.background-image'),
|
|
828
|
+
order: 5,
|
|
829
|
+
colSpan: 6,
|
|
830
|
+
}),
|
|
831
|
+
new ToggleFieldConfig({
|
|
832
|
+
key: 'repeated',
|
|
833
|
+
label: this.translocoService.translate('brand-display.repeated'),
|
|
834
|
+
cssClass: 'mt-12',
|
|
835
|
+
order: 6,
|
|
836
|
+
colSpan: 6,
|
|
837
|
+
}),
|
|
838
|
+
],
|
|
839
|
+
},
|
|
840
|
+
],
|
|
841
|
+
});
|
|
842
|
+
const localFormData = {
|
|
843
|
+
...this.headerSidebarFormControl.value,
|
|
844
|
+
...this.brandDisplayData()?.[this.componentType()],
|
|
845
|
+
};
|
|
846
|
+
this.headerSidebarFormControl.patchValue(localFormData, {
|
|
847
|
+
emitEvent: false,
|
|
848
|
+
});
|
|
849
|
+
this.headerSidebarFormControl.valueChanges.subscribe((value) => {
|
|
850
|
+
this.facade.updateBrandDisplayDataLocally({
|
|
851
|
+
[this.componentType()]: value,
|
|
852
|
+
});
|
|
853
|
+
});
|
|
854
|
+
}
|
|
855
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: HeaderSidebarDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
856
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: HeaderSidebarDisplay, isStandalone: true, selector: "mt-header-sidebar-display", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'brand-display'\">\r\n <mt-card id=\"header\" [title]=\"isHeader() ? t('header') : t('side-bar')\">\r\n <form class=\"col-span-1 p-2\">\r\n <mt-dynamic-form\r\n [formConfig]=\"headerConfig()\"\r\n [formControl]=\"headerSidebarFormControl\"\r\n />\r\n </form>\r\n </mt-card>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
857
|
+
}
|
|
858
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: HeaderSidebarDisplay, decorators: [{
|
|
859
|
+
type: Component,
|
|
860
|
+
args: [{ selector: 'mt-header-sidebar-display', standalone: true, imports: [
|
|
861
|
+
CommonModule,
|
|
862
|
+
Card,
|
|
863
|
+
TranslocoDirective,
|
|
864
|
+
DynamicForm,
|
|
865
|
+
ReactiveFormsModule,
|
|
866
|
+
], template: "<ng-container *transloco=\"let t; prefix: 'brand-display'\">\r\n <mt-card id=\"header\" [title]=\"isHeader() ? t('header') : t('side-bar')\">\r\n <form class=\"col-span-1 p-2\">\r\n <mt-dynamic-form\r\n [formConfig]=\"headerConfig()\"\r\n [formControl]=\"headerSidebarFormControl\"\r\n />\r\n </form>\r\n </mt-card>\r\n</ng-container>\r\n" }]
|
|
867
|
+
}] });
|
|
868
|
+
|
|
869
|
+
class ContentArea {
|
|
870
|
+
translocoService = inject(TranslocoService);
|
|
871
|
+
facade = inject(BrandDisplayFacade);
|
|
872
|
+
DEFAULT_DISPLAY_DATA = this.facade.defaultBrandDisplayData;
|
|
873
|
+
brandDisplayData = this.facade.draftBrandDisplayData;
|
|
874
|
+
contentAreaFormControl = new FormControl({
|
|
875
|
+
backgroundColor: this.DEFAULT_DISPLAY_DATA()?.contentArea?.backgroundColor,
|
|
876
|
+
repeated: this.DEFAULT_DISPLAY_DATA()?.contentArea?.repeated,
|
|
877
|
+
});
|
|
878
|
+
ngOnInit() {
|
|
879
|
+
const localFormData = {
|
|
880
|
+
...this.contentAreaFormControl.value,
|
|
881
|
+
...this.brandDisplayData()?.contentArea,
|
|
882
|
+
};
|
|
883
|
+
this.contentAreaFormControl.patchValue(localFormData, {
|
|
884
|
+
emitEvent: false,
|
|
885
|
+
});
|
|
886
|
+
this.contentAreaFormControl.valueChanges.subscribe((value) => {
|
|
887
|
+
this.facade.updateBrandDisplayDataLocally({
|
|
888
|
+
contentArea: {
|
|
889
|
+
backgroundColor: value.backgroundColor,
|
|
890
|
+
repeated: value.repeated,
|
|
891
|
+
backgroundImage: value?.backgroundImage,
|
|
892
|
+
},
|
|
893
|
+
});
|
|
894
|
+
});
|
|
895
|
+
}
|
|
896
|
+
contentAreaConfig = signal({
|
|
897
|
+
sections: [
|
|
898
|
+
{
|
|
899
|
+
key: 'contentAreaConfig',
|
|
900
|
+
type: 'none',
|
|
901
|
+
order: 1,
|
|
902
|
+
fields: [
|
|
903
|
+
new UploadFileFieldConfig({
|
|
904
|
+
key: 'backgroundImage',
|
|
905
|
+
label: this.translocoService.translate('brand-display.background-image'),
|
|
906
|
+
order: 1,
|
|
907
|
+
colSpan: 6,
|
|
908
|
+
}),
|
|
909
|
+
new ToggleFieldConfig({
|
|
910
|
+
key: 'repeated',
|
|
911
|
+
label: this.translocoService.translate('brand-display.repeated'),
|
|
912
|
+
order: 2,
|
|
913
|
+
cssClass: 'mt-12',
|
|
914
|
+
colSpan: 6,
|
|
915
|
+
}),
|
|
916
|
+
new ColorPickerFieldConfig({
|
|
917
|
+
key: 'backgroundColor',
|
|
918
|
+
label: this.translocoService.translate('brand-display.background-color'),
|
|
919
|
+
order: 3,
|
|
920
|
+
colSpan: 6,
|
|
921
|
+
}),
|
|
922
|
+
],
|
|
923
|
+
},
|
|
924
|
+
],
|
|
925
|
+
}, ...(ngDevMode ? [{ debugName: "contentAreaConfig" }] : []));
|
|
926
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ContentArea, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
927
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: ContentArea, isStandalone: true, selector: "mt-content-area", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'brand-display'\">\r\n <mt-card id=\"header\" [title]=\"t('content-area')\">\r\n <form class=\"col-span-1 p-2\">\r\n <mt-dynamic-form\r\n [formConfig]=\"contentAreaConfig()\"\r\n [formControl]=\"contentAreaFormControl\"\r\n />\r\n </form>\r\n </mt-card>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
928
|
+
}
|
|
929
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ContentArea, decorators: [{
|
|
930
|
+
type: Component,
|
|
931
|
+
args: [{ selector: 'mt-content-area', standalone: true, imports: [
|
|
932
|
+
CommonModule,
|
|
933
|
+
Card,
|
|
934
|
+
TranslocoDirective,
|
|
935
|
+
DynamicForm,
|
|
936
|
+
ReactiveFormsModule,
|
|
937
|
+
], template: "<ng-container *transloco=\"let t; prefix: 'brand-display'\">\r\n <mt-card id=\"header\" [title]=\"t('content-area')\">\r\n <form class=\"col-span-1 p-2\">\r\n <mt-dynamic-form\r\n [formConfig]=\"contentAreaConfig()\"\r\n [formControl]=\"contentAreaFormControl\"\r\n />\r\n </form>\r\n </mt-card>\r\n</ng-container>\r\n" }]
|
|
938
|
+
}] });
|
|
939
|
+
|
|
940
|
+
class PreviewLogin {
|
|
941
|
+
facade = inject(BrandDisplayFacade);
|
|
942
|
+
manageBrnding = inject(ManageBrndingService);
|
|
943
|
+
DEFAULT_DISPLAY_DATA = this.facade.defaultBrandDisplayData;
|
|
944
|
+
previewBackgroundColor = computed(() => {
|
|
945
|
+
const value = this.manageBrnding.draftLoginData();
|
|
946
|
+
return (value?.backgroundColor ||
|
|
947
|
+
this.DEFAULT_DISPLAY_DATA()?.login?.backgroundColor);
|
|
948
|
+
}, ...(ngDevMode ? [{ debugName: "previewBackgroundColor" }] : []));
|
|
949
|
+
repeated = computed(() => {
|
|
950
|
+
const v = this.manageBrnding.draftLoginData();
|
|
951
|
+
return v?.repeated || this.DEFAULT_DISPLAY_DATA()?.login?.repeated;
|
|
952
|
+
}, ...(ngDevMode ? [{ debugName: "repeated" }] : []));
|
|
953
|
+
previewFormPosition = computed(() => {
|
|
954
|
+
const value = this.manageBrnding.draftLoginData();
|
|
955
|
+
return (value?.formWizardPosition ||
|
|
956
|
+
this.DEFAULT_DISPLAY_DATA()?.login?.formWizardPosition);
|
|
957
|
+
}, ...(ngDevMode ? [{ debugName: "previewFormPosition" }] : []));
|
|
958
|
+
previewLogoSrc = computed(() => {
|
|
959
|
+
const value = this.manageBrnding.draftLoginData();
|
|
960
|
+
return value?.loginBrandImage?.fileName || null;
|
|
961
|
+
}, ...(ngDevMode ? [{ debugName: "previewLogoSrc" }] : []));
|
|
962
|
+
backgroundImage = this.manageBrnding.draftLoginBackgroundImage;
|
|
963
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PreviewLogin, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
964
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: PreviewLogin, isStandalone: true, selector: "mt-preview-login", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'login'\">\r\n <div class=\"sticky top-4\">\r\n <h3 class=\"text-sm font-medium mb-3\">{{ t(\"preview\") }}</h3>\r\n <div\r\n class=\"rounded-lg overflow-hidden aspect-[16/10] relative\"\r\n [style]=\"{\r\n 'background-color': previewBackgroundColor(),\r\n 'background-size': repeated() ? 'auto' : 'cover',\r\n 'background-repeat': repeated() ? 'repeat' : 'no-repeat',\r\n 'background-position': 'center',\r\n }\"\r\n [style.backgroundImage]=\"\r\n backgroundImage() ? (backgroundImage() | secureImage) : null\r\n \"\r\n >\r\n <div class=\"absolute inset-0 flex items-center p-8\">\r\n @if (previewFormPosition() !== \"center\") {\r\n <div\r\n class=\"logo flex flex-col items-center gap-2 flex-1\"\r\n [class]=\"{\r\n 'order-2': previewFormPosition() === 'start',\r\n 'order-1': previewFormPosition() === 'end',\r\n }\"\r\n >\r\n <img\r\n [src]=\"\r\n previewLogoSrc()\r\n ? (previewLogoSrc() | secureImage: true)\r\n : DEFAULT_DISPLAY_DATA()?.loginLogo\r\n \"\r\n alt=\"Logo\"\r\n class=\"h-12 w-12\"\r\n />\r\n <div class=\"text-white text-lg text-center\">\r\n {{ t(\"project-management-system\") }}\r\n </div>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"flex-shrink-0\"\r\n [class]=\"{\r\n 'order-1': previewFormPosition() === 'start',\r\n 'order-2': previewFormPosition() === 'end',\r\n 'mx-auto': previewFormPosition() === 'center',\r\n }\"\r\n >\r\n @if (previewFormPosition() === \"center\") {\r\n <div class=\"logo flex flex-col items-center gap-2 mb-4\">\r\n <img\r\n [src]=\"\r\n previewLogoSrc()\r\n ? (previewLogoSrc() | secureImage: true)\r\n : DEFAULT_DISPLAY_DATA()?.loginLogo\r\n \"\r\n alt=\"Logo\"\r\n class=\"h-12 w-12\"\r\n />\r\n <div class=\"text-white text-lg\">\r\n {{ t(\"portfolio-management-system\") }}\r\n </div>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"bg-white rounded-lg shadow-xl px-6 py-3 w-60 relative z-10\"\r\n >\r\n <div class=\"text-center mb-3 mt-4\">\r\n <h4 class=\"text-[14px] font-bold mb-1\">{{ t(\"signin\") }}</h4>\r\n <p class=\"text-[8px] text-gray-500\">{{ t(\"info-msg\") }}</p>\r\n </div>\r\n\r\n <div class=\"space-y-3\">\r\n <div>\r\n <label class=\"text-[8px] block text-xs text-gray-600 mb-1\">{{\r\n t(\"username\")\r\n }}</label>\r\n <div\r\n class=\"text-[8px] border border-gray-300 rounded px-3 py-2 text-gray-400\"\r\n >\r\n {{ t(\"username\") }}\r\n </div>\r\n </div>\r\n <div>\r\n <label class=\"text-[8px] block text-gray-600 mb-1\">{{\r\n t(\"password\")\r\n }}</label>\r\n <div\r\n class=\"text-[8px] border border-gray-300 rounded px-3 py-2 text-gray-400\"\r\n >\r\n {{ t(\"password\") }}\r\n </div>\r\n </div>\r\n <button\r\n class=\"w-full mb-1 bg-primary text-white rounded py-2 text-[9px] font-medium\"\r\n >\r\n {{ t(\"sign-in\") }}\r\n </button>\r\n <div class=\"text-center\">\r\n <a class=\"text-[11px] text-primary\"> English </a>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-center mt-3 text-[8px] text-gray-400\">\r\n {{ t(\"tagline\") }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }] });
|
|
965
|
+
}
|
|
966
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PreviewLogin, decorators: [{
|
|
967
|
+
type: Component,
|
|
968
|
+
args: [{ selector: 'mt-preview-login', standalone: true, imports: [CommonModule, TranslocoDirective, SecureImagePipe], template: "<ng-container *transloco=\"let t; prefix: 'login'\">\r\n <div class=\"sticky top-4\">\r\n <h3 class=\"text-sm font-medium mb-3\">{{ t(\"preview\") }}</h3>\r\n <div\r\n class=\"rounded-lg overflow-hidden aspect-[16/10] relative\"\r\n [style]=\"{\r\n 'background-color': previewBackgroundColor(),\r\n 'background-size': repeated() ? 'auto' : 'cover',\r\n 'background-repeat': repeated() ? 'repeat' : 'no-repeat',\r\n 'background-position': 'center',\r\n }\"\r\n [style.backgroundImage]=\"\r\n backgroundImage() ? (backgroundImage() | secureImage) : null\r\n \"\r\n >\r\n <div class=\"absolute inset-0 flex items-center p-8\">\r\n @if (previewFormPosition() !== \"center\") {\r\n <div\r\n class=\"logo flex flex-col items-center gap-2 flex-1\"\r\n [class]=\"{\r\n 'order-2': previewFormPosition() === 'start',\r\n 'order-1': previewFormPosition() === 'end',\r\n }\"\r\n >\r\n <img\r\n [src]=\"\r\n previewLogoSrc()\r\n ? (previewLogoSrc() | secureImage: true)\r\n : DEFAULT_DISPLAY_DATA()?.loginLogo\r\n \"\r\n alt=\"Logo\"\r\n class=\"h-12 w-12\"\r\n />\r\n <div class=\"text-white text-lg text-center\">\r\n {{ t(\"project-management-system\") }}\r\n </div>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"flex-shrink-0\"\r\n [class]=\"{\r\n 'order-1': previewFormPosition() === 'start',\r\n 'order-2': previewFormPosition() === 'end',\r\n 'mx-auto': previewFormPosition() === 'center',\r\n }\"\r\n >\r\n @if (previewFormPosition() === \"center\") {\r\n <div class=\"logo flex flex-col items-center gap-2 mb-4\">\r\n <img\r\n [src]=\"\r\n previewLogoSrc()\r\n ? (previewLogoSrc() | secureImage: true)\r\n : DEFAULT_DISPLAY_DATA()?.loginLogo\r\n \"\r\n alt=\"Logo\"\r\n class=\"h-12 w-12\"\r\n />\r\n <div class=\"text-white text-lg\">\r\n {{ t(\"portfolio-management-system\") }}\r\n </div>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"bg-white rounded-lg shadow-xl px-6 py-3 w-60 relative z-10\"\r\n >\r\n <div class=\"text-center mb-3 mt-4\">\r\n <h4 class=\"text-[14px] font-bold mb-1\">{{ t(\"signin\") }}</h4>\r\n <p class=\"text-[8px] text-gray-500\">{{ t(\"info-msg\") }}</p>\r\n </div>\r\n\r\n <div class=\"space-y-3\">\r\n <div>\r\n <label class=\"text-[8px] block text-xs text-gray-600 mb-1\">{{\r\n t(\"username\")\r\n }}</label>\r\n <div\r\n class=\"text-[8px] border border-gray-300 rounded px-3 py-2 text-gray-400\"\r\n >\r\n {{ t(\"username\") }}\r\n </div>\r\n </div>\r\n <div>\r\n <label class=\"text-[8px] block text-gray-600 mb-1\">{{\r\n t(\"password\")\r\n }}</label>\r\n <div\r\n class=\"text-[8px] border border-gray-300 rounded px-3 py-2 text-gray-400\"\r\n >\r\n {{ t(\"password\") }}\r\n </div>\r\n </div>\r\n <button\r\n class=\"w-full mb-1 bg-primary text-white rounded py-2 text-[9px] font-medium\"\r\n >\r\n {{ t(\"sign-in\") }}\r\n </button>\r\n <div class=\"text-center\">\r\n <a class=\"text-[11px] text-primary\"> English </a>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-center mt-3 text-[8px] text-gray-400\">\r\n {{ t(\"tagline\") }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-container>\r\n" }]
|
|
969
|
+
}] });
|
|
970
|
+
|
|
971
|
+
class LoginDisplay {
|
|
972
|
+
translocoService = inject(TranslocoService);
|
|
973
|
+
facade = inject(BrandDisplayFacade);
|
|
974
|
+
DEFAULT_DISPLAY_DATA = this.facade.defaultBrandDisplayData;
|
|
975
|
+
loginFormControl = new FormControl({
|
|
976
|
+
backgroundColor: this.DEFAULT_DISPLAY_DATA()?.login?.backgroundColor,
|
|
977
|
+
repeated: this.DEFAULT_DISPLAY_DATA()?.login?.repeated,
|
|
978
|
+
formWizardPosition: this.DEFAULT_DISPLAY_DATA()?.login?.formWizardPosition,
|
|
979
|
+
});
|
|
980
|
+
loginFormConfig = signal({
|
|
981
|
+
sections: [
|
|
982
|
+
{
|
|
983
|
+
key: 'loginBrandImageSection',
|
|
984
|
+
type: 'none',
|
|
985
|
+
order: 1,
|
|
986
|
+
fields: [
|
|
987
|
+
new UploadFileFieldConfig({
|
|
988
|
+
key: 'loginBrandImage',
|
|
989
|
+
label: this.translocoService.translate('brand-display.login-brand'),
|
|
990
|
+
shape: 'circle',
|
|
991
|
+
order: 1,
|
|
992
|
+
}),
|
|
993
|
+
],
|
|
994
|
+
},
|
|
995
|
+
{
|
|
996
|
+
key: 'backgroundSection',
|
|
997
|
+
type: 'none',
|
|
998
|
+
order: 2,
|
|
999
|
+
fields: [
|
|
1000
|
+
{
|
|
1001
|
+
key: 'backgroundColor',
|
|
1002
|
+
type: 'color-picker',
|
|
1003
|
+
label: this.translocoService.translate('brand-display.background-color'),
|
|
1004
|
+
order: 3,
|
|
1005
|
+
colSpan: 6,
|
|
1006
|
+
},
|
|
1007
|
+
new UploadFileFieldConfig({
|
|
1008
|
+
key: 'backgroundImage',
|
|
1009
|
+
label: this.translocoService.translate('brand-display.background-image'),
|
|
1010
|
+
order: 1,
|
|
1011
|
+
colSpan: 6,
|
|
1012
|
+
}),
|
|
1013
|
+
new ToggleFieldConfig({
|
|
1014
|
+
key: 'repeated',
|
|
1015
|
+
label: this.translocoService.translate('brand-display.repeated'),
|
|
1016
|
+
cssClass: 'mt-12',
|
|
1017
|
+
order: 2,
|
|
1018
|
+
colSpan: 6,
|
|
1019
|
+
}),
|
|
1020
|
+
],
|
|
1021
|
+
},
|
|
1022
|
+
{
|
|
1023
|
+
key: 'positionSection',
|
|
1024
|
+
type: 'none',
|
|
1025
|
+
bodyClass: 'mt-2 p-4 border-t border-dashed border-surface',
|
|
1026
|
+
order: 3,
|
|
1027
|
+
fields: [
|
|
1028
|
+
{
|
|
1029
|
+
key: 'formWizardPosition',
|
|
1030
|
+
type: 'radio-button',
|
|
1031
|
+
label: this.translocoService.translate('brand-display.form-wizard-position'),
|
|
1032
|
+
hint: this.translocoService.translate('brand-display.change-language-direction'),
|
|
1033
|
+
cssClass: 'flex gap-4',
|
|
1034
|
+
options: [
|
|
1035
|
+
{
|
|
1036
|
+
label: this.translocoService.translate('brand-display.start'),
|
|
1037
|
+
value: 'start',
|
|
1038
|
+
},
|
|
1039
|
+
{
|
|
1040
|
+
label: this.translocoService.translate('brand-display.end'),
|
|
1041
|
+
value: 'end',
|
|
1042
|
+
},
|
|
1043
|
+
{
|
|
1044
|
+
label: this.translocoService.translate('brand-display.center'),
|
|
1045
|
+
value: 'center',
|
|
1046
|
+
},
|
|
1047
|
+
],
|
|
1048
|
+
optionLabel: 'label',
|
|
1049
|
+
optionValue: 'value',
|
|
1050
|
+
order: 1,
|
|
1051
|
+
},
|
|
1052
|
+
],
|
|
1053
|
+
},
|
|
1054
|
+
],
|
|
1055
|
+
}, ...(ngDevMode ? [{ debugName: "loginFormConfig" }] : []));
|
|
1056
|
+
brandDisplayLocalData = this.facade.draftBrandDisplayData;
|
|
1057
|
+
loginData = computed(() => {
|
|
1058
|
+
return this.brandDisplayLocalData()?.login;
|
|
1059
|
+
}, ...(ngDevMode ? [{ debugName: "loginData" }] : []));
|
|
1060
|
+
constructor() {
|
|
1061
|
+
this.loginFormControl.valueChanges.subscribe((partial) => {
|
|
1062
|
+
this.updateLoginDisplayLocally(partial ?? {});
|
|
1063
|
+
});
|
|
1064
|
+
}
|
|
1065
|
+
ngOnInit() {
|
|
1066
|
+
const existingData = {
|
|
1067
|
+
...this.loginFormControl.value,
|
|
1068
|
+
...this.loginData(),
|
|
1069
|
+
};
|
|
1070
|
+
if (existingData) {
|
|
1071
|
+
this.loginFormControl.patchValue(existingData, { emitEvent: false });
|
|
1072
|
+
}
|
|
1073
|
+
}
|
|
1074
|
+
updateLoginDisplayLocally(value) {
|
|
1075
|
+
const existingLogin = this.brandDisplayLocalData()?.login ?? {};
|
|
1076
|
+
const merged = { ...existingLogin, ...value };
|
|
1077
|
+
this.facade.updateBrandDisplayDataLocally({
|
|
1078
|
+
login: merged,
|
|
1079
|
+
});
|
|
1080
|
+
}
|
|
1081
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LoginDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1082
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: LoginDisplay, isStandalone: true, selector: "mt-login-display", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'brand-display'\">\r\n <div class=\"flex gap-10 mt-6\">\r\n <!-- Left Side - Login Settings -->\r\n <div class=\"w-3/5\">\r\n <mt-card id=\"login-settings\" [title]=\"t('login-settings')\">\r\n <form class=\"col-span-1 p-2\">\r\n <mt-dynamic-form\r\n [formConfig]=\"loginFormConfig()\"\r\n [formControl]=\"loginFormControl\"\r\n />\r\n </form>\r\n </mt-card>\r\n </div>\r\n\r\n <!-- Right Side - Preview -->\r\n <div class=\"w-2/5\">\r\n <mt-preview-login></mt-preview-login>\r\n </div>\r\n </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: PreviewLogin, selector: "mt-preview-login" }] });
|
|
1083
|
+
}
|
|
1084
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LoginDisplay, decorators: [{
|
|
1085
|
+
type: Component,
|
|
1086
|
+
args: [{ selector: 'mt-login-display', standalone: true, imports: [
|
|
1087
|
+
CommonModule,
|
|
1088
|
+
Card,
|
|
1089
|
+
TranslocoDirective,
|
|
1090
|
+
DynamicForm,
|
|
1091
|
+
ReactiveFormsModule,
|
|
1092
|
+
FileUploadModule,
|
|
1093
|
+
PreviewLogin,
|
|
1094
|
+
], template: "<ng-container *transloco=\"let t; prefix: 'brand-display'\">\r\n <div class=\"flex gap-10 mt-6\">\r\n <!-- Left Side - Login Settings -->\r\n <div class=\"w-3/5\">\r\n <mt-card id=\"login-settings\" [title]=\"t('login-settings')\">\r\n <form class=\"col-span-1 p-2\">\r\n <mt-dynamic-form\r\n [formConfig]=\"loginFormConfig()\"\r\n [formControl]=\"loginFormControl\"\r\n />\r\n </form>\r\n </mt-card>\r\n </div>\r\n\r\n <!-- Right Side - Preview -->\r\n <div class=\"w-2/5\">\r\n <mt-preview-login></mt-preview-login>\r\n </div>\r\n </div>\r\n</ng-container>\r\n" }]
|
|
1095
|
+
}], ctorParameters: () => [] });
|
|
1096
|
+
|
|
1097
|
+
/**
|
|
1098
|
+
* Generated bundle index. Do not edit.
|
|
1099
|
+
*/
|
|
1100
|
+
|
|
1101
|
+
export { BrandDisplay, BrandDisplayActionKey, BrandDisplayFacade, BrandDisplayState, ContentArea, FaviconService, GetBrandDisplay, HeaderSidebarDisplay, LoginDisplay, MainDisplay, ManageBrndingService, PreviewBrand, PreviewLogin, UpdateBrandDisplayData, UpdateBrandDisplayDataLocally, WhiteLabel };
|
|
1102
|
+
//# sourceMappingURL=masterteam-brand-display.mjs.map
|