valtech-components 2.0.65 → 2.0.67
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.
- package/esm2022/lib/components/templates/simple/simple.component.mjs +20 -9
- package/esm2022/lib/components/templates/simple/types.mjs +1 -1
- package/esm2022/lib/services/theme.service.mjs +4 -1
- package/fesm2022/valtech-components.mjs +129 -116
- package/fesm2022/valtech-components.mjs.map +1 -1
- package/lib/components/templates/simple/simple.component.d.ts +2 -0
- package/lib/components/templates/simple/types.d.ts +1 -0
- package/lib/services/theme.service.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
3
|
-
import { IonContent, IonHeader,
|
|
1
|
+
import { NgStyle } from '@angular/common';
|
|
2
|
+
import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
|
|
3
|
+
import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
|
|
4
|
+
import { ThemeService } from '../../../services/theme.service';
|
|
4
5
|
import { DividerComponent } from '../../atoms/divider/divider.component';
|
|
5
6
|
import { ExpandableTextComponent } from '../../molecules/expandable-text/expandable-text.component';
|
|
6
7
|
import { LinkComponent } from '../../molecules/link/link.component';
|
|
@@ -10,6 +11,7 @@ import * as i0 from "@angular/core";
|
|
|
10
11
|
export class SimpleComponent {
|
|
11
12
|
constructor() {
|
|
12
13
|
this.onClick = new EventEmitter();
|
|
14
|
+
this.theme = inject(ThemeService);
|
|
13
15
|
}
|
|
14
16
|
onClickHandler(token) {
|
|
15
17
|
this.onClick.emit(token);
|
|
@@ -18,7 +20,12 @@ export class SimpleComponent {
|
|
|
18
20
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SimpleComponent, isStandalone: true, selector: "val-simple", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
|
|
19
21
|
<val-header [props]="props.header" />
|
|
20
22
|
|
|
21
|
-
<ion-content
|
|
23
|
+
<ion-content
|
|
24
|
+
[fullscreen]="true"
|
|
25
|
+
[ngStyle]="{
|
|
26
|
+
'--background': theme.IsDark ? 'var(--ion-background-color)' : props.background,
|
|
27
|
+
}"
|
|
28
|
+
>
|
|
22
29
|
<ion-header collapse="condense">
|
|
23
30
|
<ion-toolbar style="--background: transparent;">
|
|
24
31
|
<ion-title style="padding: 0;" size="large">{{ props.pageTitle }}</ion-title>
|
|
@@ -46,16 +53,15 @@ export class SimpleComponent {
|
|
|
46
53
|
<ng-content></ng-content>
|
|
47
54
|
</val-layout>
|
|
48
55
|
</ion-content>
|
|
49
|
-
`, isInline: true, styles: [".description-container{padding:0 16px}\n"], dependencies: [{ kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: HeaderComponent, selector: "val-header", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: LayoutComponent, selector: "val-layout" }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: LinkComponent, selector: "val-link", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ExpandableTextComponent, selector: "val-expandable-text", inputs: ["props"] }] }); }
|
|
56
|
+
`, isInline: true, styles: [".description-container{padding:0 16px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: HeaderComponent, selector: "val-header", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: LayoutComponent, selector: "val-layout" }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: LinkComponent, selector: "val-link", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ExpandableTextComponent, selector: "val-expandable-text", inputs: ["props"] }] }); }
|
|
50
57
|
}
|
|
51
58
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleComponent, decorators: [{
|
|
52
59
|
type: Component,
|
|
53
60
|
args: [{ selector: 'val-simple', standalone: true, imports: [
|
|
54
|
-
|
|
61
|
+
NgStyle,
|
|
55
62
|
IonHeader,
|
|
56
63
|
IonToolbar,
|
|
57
64
|
IonTitle,
|
|
58
|
-
IonText,
|
|
59
65
|
IonContent,
|
|
60
66
|
HeaderComponent,
|
|
61
67
|
LayoutComponent,
|
|
@@ -65,7 +71,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
65
71
|
], template: `
|
|
66
72
|
<val-header [props]="props.header" />
|
|
67
73
|
|
|
68
|
-
<ion-content
|
|
74
|
+
<ion-content
|
|
75
|
+
[fullscreen]="true"
|
|
76
|
+
[ngStyle]="{
|
|
77
|
+
'--background': theme.IsDark ? 'var(--ion-background-color)' : props.background,
|
|
78
|
+
}"
|
|
79
|
+
>
|
|
69
80
|
<ion-header collapse="condense">
|
|
70
81
|
<ion-toolbar style="--background: transparent;">
|
|
71
82
|
<ion-title style="padding: 0;" size="large">{{ props.pageTitle }}</ion-title>
|
|
@@ -99,4 +110,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
99
110
|
}], onClick: [{
|
|
100
111
|
type: Output
|
|
101
112
|
}] } });
|
|
102
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
113
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2ltcGxlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ZhbHRlY2gtY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvdGVtcGxhdGVzL3NpbXBsZS9zaW1wbGUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMxQyxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMvRSxPQUFPLEVBQUUsVUFBVSxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDeEYsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBQy9ELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHVDQUF1QyxDQUFDO0FBQ3pFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDJEQUEyRCxDQUFDO0FBQ3BHLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQUNwRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFDMUUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDRCQUE0QixDQUFDOztBQTZEN0QsTUFBTSxPQUFPLGVBQWU7SUExRDVCO1FBK0RFLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBRXJDLFVBQUssR0FBRyxNQUFNLENBQUMsWUFBWSxDQUFDLENBQUM7S0FLOUI7SUFIQyxjQUFjLENBQUMsS0FBYztRQUMzQixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMzQixDQUFDOytHQVhVLGVBQWU7bUdBQWYsZUFBZSxtSUEzQ2hCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FvQ1Qsa0hBL0NDLE9BQU8sMkVBQ1AsU0FBUyxvR0FDVCxVQUFVLG1GQUNWLFFBQVEsaUZBQ1IsVUFBVSxrSkFDVixlQUFlLGdHQUNmLGVBQWUsdURBQ2YsZ0JBQWdCLDJFQUNoQixhQUFhLDhGQUNiLHVCQUF1Qjs7NEZBNkNkLGVBQWU7a0JBMUQzQixTQUFTOytCQUNFLFlBQVksY0FDVixJQUFJLFdBQ1A7d0JBQ1AsT0FBTzt3QkFDUCxTQUFTO3dCQUNULFVBQVU7d0JBQ1YsUUFBUTt3QkFDUixVQUFVO3dCQUNWLGVBQWU7d0JBQ2YsZUFBZTt3QkFDZixnQkFBZ0I7d0JBQ2hCLGFBQWE7d0JBQ2IsdUJBQXVCO3FCQUN4QixZQUNTOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FvQ1Q7OEJBU0QsS0FBSztzQkFESixLQUFLO2dCQUlOLE9BQU87c0JBRE4sTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nU3R5bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIGluamVjdCwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSW9uQ29udGVudCwgSW9uSGVhZGVyLCBJb25UaXRsZSwgSW9uVG9vbGJhciB9IGZyb20gJ0Bpb25pYy9hbmd1bGFyL3N0YW5kYWxvbmUnO1xuaW1wb3J0IHsgVGhlbWVTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vLi4vc2VydmljZXMvdGhlbWUuc2VydmljZSc7XG5pbXBvcnQgeyBEaXZpZGVyQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vYXRvbXMvZGl2aWRlci9kaXZpZGVyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBFeHBhbmRhYmxlVGV4dENvbXBvbmVudCB9IGZyb20gJy4uLy4uL21vbGVjdWxlcy9leHBhbmRhYmxlLXRleHQvZXhwYW5kYWJsZS10ZXh0LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBMaW5rQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vbW9sZWN1bGVzL2xpbmsvbGluay5jb21wb25lbnQnO1xuaW1wb3J0IHsgSGVhZGVyQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vb3JnYW5pc21zL2hlYWRlci9oZWFkZXIuY29tcG9uZW50JztcbmltcG9ydCB7IExheW91dENvbXBvbmVudCB9IGZyb20gJy4uL2xheW91dC9sYXlvdXQuY29tcG9uZW50JztcbmltcG9ydCB7IFNpbXBsZU1ldGFkYXRhIH0gZnJvbSAnLi90eXBlcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3ZhbC1zaW1wbGUnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgTmdTdHlsZSxcbiAgICBJb25IZWFkZXIsXG4gICAgSW9uVG9vbGJhcixcbiAgICBJb25UaXRsZSxcbiAgICBJb25Db250ZW50LFxuICAgIEhlYWRlckNvbXBvbmVudCxcbiAgICBMYXlvdXRDb21wb25lbnQsXG4gICAgRGl2aWRlckNvbXBvbmVudCxcbiAgICBMaW5rQ29tcG9uZW50LFxuICAgIEV4cGFuZGFibGVUZXh0Q29tcG9uZW50LFxuICBdLFxuICB0ZW1wbGF0ZTogYFxuICAgIDx2YWwtaGVhZGVyIFtwcm9wc109XCJwcm9wcy5oZWFkZXJcIiAvPlxuXG4gICAgPGlvbi1jb250ZW50XG4gICAgICBbZnVsbHNjcmVlbl09XCJ0cnVlXCJcbiAgICAgIFtuZ1N0eWxlXT1cIntcbiAgICAgICAgJy0tYmFja2dyb3VuZCc6IHRoZW1lLklzRGFyayA/ICd2YXIoLS1pb24tYmFja2dyb3VuZC1jb2xvciknIDogcHJvcHMuYmFja2dyb3VuZCxcbiAgICAgIH1cIlxuICAgID5cbiAgICAgIDxpb24taGVhZGVyIGNvbGxhcHNlPVwiY29uZGVuc2VcIj5cbiAgICAgICAgPGlvbi10b29sYmFyIHN0eWxlPVwiLS1iYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcIj5cbiAgICAgICAgICA8aW9uLXRpdGxlIHN0eWxlPVwicGFkZGluZzogMDtcIiBzaXplPVwibGFyZ2VcIj57eyBwcm9wcy5wYWdlVGl0bGUgfX08L2lvbi10aXRsZT5cbiAgICAgICAgPC9pb24tdG9vbGJhcj5cbiAgICAgIDwvaW9uLWhlYWRlcj5cbiAgICAgIEBpZiAocHJvcHMucGFnZURlc2NyaXB0aW9uKSB7XG4gICAgICAgIDxkaXYgY2xhc3M9XCJkZXNjcmlwdGlvbi1jb250YWluZXJcIj5cbiAgICAgICAgICA8dmFsLWV4cGFuZGFibGUtdGV4dFxuICAgICAgICAgICAgW3Byb3BzXT1cIntcbiAgICAgICAgICAgICAgbGltaXQ6IDE4MCxcbiAgICAgICAgICAgICAgY29udGVudDogcHJvcHMucGFnZURlc2NyaXB0aW9uLFxuICAgICAgICAgICAgICBjb2xvcjogJ3ByaW1hcnknLFxuICAgICAgICAgICAgICBleHBhbmRUZXh0OiAnbcOhcycsXG4gICAgICAgICAgICB9XCJcbiAgICAgICAgICAvPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIH1cbiAgICAgIEBpZiAocHJvcHMubGluaykge1xuICAgICAgICA8dmFsLWxpbmsgW3Byb3BzXT1cInByb3BzLmxpbmtcIiAob25DbGljayk9XCJvbkNsaWNrSGFuZGxlcigkZXZlbnQpXCI+PC92YWwtbGluaz5cbiAgICAgIH1cbiAgICAgIEBpZiAocHJvcHMud2l0aERpdmlkZXIpIHtcbiAgICAgICAgPHZhbC1kaXZpZGVyIFtwcm9wc109XCJ7IGZpbGw6ICdzb2xpZCcsIHNpemU6ICdtZWRpdW0nLCBjb2xvcjogJ2RhcmsnIH1cIiAvPlxuICAgICAgfVxuICAgICAgPHZhbC1sYXlvdXQ+XG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICAgIDwvdmFsLWxheW91dD5cbiAgICA8L2lvbi1jb250ZW50PlxuICBgLFxuICBzdHlsZXM6IGBcbiAgICAuZGVzY3JpcHRpb24tY29udGFpbmVyIHtcbiAgICAgIHBhZGRpbmc6IDBweCAxNnB4O1xuICAgIH1cbiAgYCxcbn0pXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IHtcbiAgQElucHV0KClcbiAgcHJvcHM6IFNpbXBsZU1ldGFkYXRhO1xuXG4gIEBPdXRwdXQoKVxuICBvbkNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG5cbiAgdGhlbWUgPSBpbmplY3QoVGhlbWVTZXJ2aWNlKTtcblxuICBvbkNsaWNrSGFuZGxlcih0b2tlbj86IHN0cmluZykge1xuICAgIHRoaXMub25DbGljay5lbWl0KHRva2VuKTtcbiAgfVxufVxuIl19
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92YWx0ZWNoLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3RlbXBsYXRlcy9zaW1wbGUvdHlwZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IExpbmtNZXRhZGF0YSB9IGZyb20gJy4uLy4uL21vbGVjdWxlcy9saW5rL3R5cGVzJztcbmltcG9ydCB7IEhlYWRlck1ldGFkYXRhIH0gZnJvbSAnLi4vLi4vb3JnYW5pc21zL2hlYWRlci90eXBlcyc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgU2ltcGxlTWV0YWRhdGEge1xuICBoZWFkZXI6IEhlYWRlck1ldGFkYXRhO1xuICBwYWdlVGl0bGU6IHN0cmluZztcbiAgcGFnZURlc2NyaXB0aW9uOiBzdHJpbmc7XG4gIHdpdGhEaXZpZGVyOiBib29sZWFuO1xuICBsaW5rPzogTGlua01ldGFkYXRhO1xuICBiYWNrZ3JvdW5kOiBzdHJpbmc7XG59XG4iXX0=
|
|
@@ -51,6 +51,9 @@ export class ThemeService {
|
|
|
51
51
|
this.toggleTheme(ThemeOption.LIGHT, true);
|
|
52
52
|
this.toggleTheme(ThemeOption.DARK, false);
|
|
53
53
|
}
|
|
54
|
+
get IsDark() {
|
|
55
|
+
return this.prefersDark;
|
|
56
|
+
}
|
|
54
57
|
get Theme() {
|
|
55
58
|
return this.theme.value;
|
|
56
59
|
}
|
|
@@ -94,4 +97,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
94
97
|
providedIn: 'root',
|
|
95
98
|
}]
|
|
96
99
|
}], ctorParameters: () => [] });
|
|
97
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
100
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ZhbHRlY2gtY29tcG9uZW50cy9zcmMvbGliL3NlcnZpY2VzL3RoZW1lLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzQyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQzlELE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQzs7QUFFcEQsTUFBTSxDQUFOLElBQVksV0FJWDtBQUpELFdBQVksV0FBVztJQUNyQiw4QkFBZSxDQUFBO0lBQ2YsNEJBQWEsQ0FBQTtJQUNiLDRCQUFhLENBQUE7QUFDZixDQUFDLEVBSlcsV0FBVyxLQUFYLFdBQVcsUUFJdEI7QUFLRCxNQUFNLE9BQU8sWUFBWTtJQVV2QjtRQVRBLGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ3BCLGVBQVUsR0FBRyxLQUFLLENBQUM7UUFDbkIsZUFBVSxHQUFHLEtBQUssQ0FBQztRQUNuQixrQkFBYSxHQUFHLFdBQVcsQ0FBQyxJQUFJLENBQUM7UUFDakMsaUJBQVksR0FBRyxXQUFXLENBQUM7UUFDM0IsZ0JBQVcsR0FBRyxLQUFLLENBQUM7UUFDcEIsWUFBTyxHQUFHLFdBQVcsQ0FBQyxJQUFJLENBQUM7UUFJekIsTUFBTSxPQUFPLEdBQUcsbUJBQW1CLENBQUMsR0FBRyxDQUFjLEtBQUssQ0FBQyxDQUFDO1FBQzVELE9BQU8sQ0FBQyxHQUFHLENBQUMsNEJBQTRCLEVBQUUsT0FBTyxDQUFDLENBQUM7UUFDbkQsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLGVBQWUsQ0FBYyxPQUFPLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ3ZFLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQztRQUNoQyxPQUFPLENBQUMsR0FBRyxDQUFDLHVDQUF1QyxFQUFFLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUN6RSxJQUFJLENBQUMsb0JBQW9CLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBRTlDLE1BQU0sZ0JBQWdCLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyw4QkFBOEIsQ0FBQyxDQUFDO1FBQzNFLElBQUksQ0FBQyxXQUFXLEdBQUcsZ0JBQWdCLENBQUMsT0FBTyxDQUFDO1FBQzVDLElBQUksQ0FBQyx1QkFBdUIsRUFBRSxDQUFDO1FBRS9CLGdCQUFnQixDQUFDLGdCQUFnQixDQUFDLFFBQVEsRUFBRSxVQUFVLENBQUMsRUFBRTtZQUN2RCxPQUFPLENBQUMsR0FBRyxDQUFDLDRDQUE0QyxFQUFFLFVBQVUsQ0FBQyxDQUFDO1lBQ3RFLElBQUksQ0FBQyxXQUFXLEdBQUcsVUFBVSxDQUFDLE9BQU8sQ0FBQztZQUN0QyxJQUFJLENBQUMsdUJBQXVCLEVBQUUsQ0FBQztRQUNqQyxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFTyx1QkFBdUI7UUFDN0IsSUFBSSxJQUFJLENBQUMsV0FBVyxJQUFJLElBQUksQ0FBQyxhQUFhLEtBQUssV0FBVyxDQUFDLElBQUksRUFBRSxDQUFDO1lBQ2hFLE9BQU8sQ0FBQyxHQUFHLENBQUMsZ0NBQWdDLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1lBQ2hFLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDOUMsQ0FBQztRQUNELElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxJQUFJLElBQUksQ0FBQyxhQUFhLEtBQUssV0FBVyxDQUFDLElBQUksRUFBRSxDQUFDO1lBQ2pFLE9BQU8sQ0FBQyxHQUFHLENBQUMsZ0NBQWdDLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1lBQ2hFLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDOUMsQ0FBQztJQUNILENBQUM7SUFFTyxvQkFBb0I7UUFDMUIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxDQUFDO1FBQ3pDLElBQUksQ0FBQyxXQUFXLENBQUMsV0FBVyxDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQztJQUM3QyxDQUFDO0lBRU8scUJBQXFCO1FBQzNCLElBQUksQ0FBQyxXQUFXLENBQUMsV0FBVyxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsQ0FBQztRQUMxQyxJQUFJLENBQUMsV0FBVyxDQUFDLFdBQVcsQ0FBQyxJQUFJLEVBQUUsS0FBSyxDQUFDLENBQUM7SUFDNUMsQ0FBQztJQUVELElBQUksTUFBTTtRQUNSLE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQztJQUMxQixDQUFDO0lBRUQsSUFBSSxLQUFLO1FBQ1AsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQztJQUMxQixDQUFDO0lBRUQsSUFBSSxLQUFLLENBQUMsS0FBa0I7UUFDMUIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDdkIsbUJBQW1CLENBQUMsR0FBRyxDQUFjLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQztJQUNyRCxDQUFDO0lBRUQsV0FBVyxDQUFDLElBQVksRUFBRSxTQUFrQjtRQUMxQyxPQUFPLENBQUMsR0FBRyxDQUFDLGlCQUFpQixFQUFFLElBQUksRUFBRSxTQUFTLENBQUMsQ0FBQztRQUNoRCxRQUFRLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLFNBQVMsQ0FBQyxDQUFDO0lBQ2xELENBQUM7SUFFRCxvQkFBb0IsQ0FBQyxNQUFtQjtRQUN0QyxJQUFJLENBQUMsYUFBYSxHQUFHLE1BQU0sQ0FBQztRQUM1QixJQUFJLENBQUMsS0FBSyxHQUFHLE1BQU0sQ0FBQztRQUNwQixJQUFJLENBQUMsV0FBVyxHQUFHLE1BQU0sS0FBSyxXQUFXLENBQUMsS0FBSyxDQUFDO1FBQ2hELElBQUksQ0FBQyxVQUFVLEdBQUcsTUFBTSxLQUFLLFdBQVcsQ0FBQyxJQUFJLENBQUM7UUFDOUMsSUFBSSxDQUFDLFVBQVUsR0FBRyxNQUFNLEtBQUssV0FBVyxDQUFDLElBQUksQ0FBQztRQUU5QyxRQUFRLE1BQU0sRUFBRSxDQUFDO1lBQ2YsS0FBSyxXQUFXLENBQUMsS0FBSztnQkFDcEIsSUFBSSxDQUFDLHFCQUFxQixFQUFFLENBQUM7Z0JBQzdCLE1BQU07WUFDUixLQUFLLFdBQVcsQ0FBQyxJQUFJO2dCQUNuQixJQUFJLENBQUMsb0JBQW9CLEVBQUUsQ0FBQztnQkFDNUIsTUFBTTtZQUNSLEtBQUssV0FBVyxDQUFDLElBQUk7Z0JBQ25CLElBQUksSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO29CQUNyQixJQUFJLENBQUMsb0JBQW9CLEVBQUUsQ0FBQztnQkFDOUIsQ0FBQztxQkFBTSxDQUFDO29CQUNOLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO2dCQUMvQixDQUFDO2dCQUNELE1BQU07UUFDVixDQUFDO0lBQ0gsQ0FBQzsrR0ExRlUsWUFBWTttSEFBWixZQUFZLGNBRlgsTUFBTTs7NEZBRVAsWUFBWTtrQkFIeEIsVUFBVTttQkFBQztvQkFDVixVQUFVLEVBQUUsTUFBTTtpQkFDbkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBCZWhhdmlvclN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IExvY2FsU3RvcmFnZVNlcnZpY2UgfSBmcm9tICcuL2xvY2FsLXN0b3JhZ2Uuc2VydmljZSc7XG5pbXBvcnQgeyBUSEVNRSB9IGZyb20gJy4uL3NoYXJlZC9jb25zdGFudHMvc3RvcmFnZSc7XG5cbmV4cG9ydCBlbnVtIFRoZW1lT3B0aW9uIHtcbiAgTElHSFQgPSAnbGlnaHQnLFxuICBEQVJLID0gJ2RhcmsnLFxuICBBVVRPID0gJ2F1dG8nLFxufVxuXG5ASW5qZWN0YWJsZSh7XG4gIHByb3ZpZGVkSW46ICdyb290Jyxcbn0pXG5leHBvcnQgY2xhc3MgVGhlbWVTZXJ2aWNlIHtcbiAgbGlnaHRUb2dnbGUgPSBmYWxzZTtcbiAgZGFya1RvZ2dsZSA9IGZhbHNlO1xuICBhdXRvVG9nZ2xlID0gZmFsc2U7XG4gIGN1cnJlbnRPcHRpb24gPSBUaGVtZU9wdGlvbi5BVVRPO1xuICB0aGVtZU9wdGlvbnMgPSBUaGVtZU9wdGlvbjtcbiAgcHJlZmVyc0RhcmsgPSBmYWxzZTtcbiAgZGVmYXVsdCA9IFRoZW1lT3B0aW9uLkFVVE87XG4gIHRoZW1lOiBCZWhhdmlvclN1YmplY3Q8VGhlbWVPcHRpb24+O1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIGNvbnN0IGN1cnJlbnQgPSBMb2NhbFN0b3JhZ2VTZXJ2aWNlLmdldDxUaGVtZU9wdGlvbj4oVEhFTUUpO1xuICAgIGNvbnNvbGUubG9nKCfwn5KhIFRoZW1lQ29uZmlnIGN1cnJlbnQ6OjogJywgY3VycmVudCk7XG4gICAgdGhpcy50aGVtZSA9IG5ldyBCZWhhdmlvclN1YmplY3Q8VGhlbWVPcHRpb24+KGN1cnJlbnQgfHwgdGhpcy5kZWZhdWx0KTtcbiAgICB0aGlzLmN1cnJlbnRPcHRpb24gPSB0aGlzLlRoZW1lO1xuICAgIGNvbnNvbGUubG9nKCfwn5KhIFRoZW1lQ29uZmlnIHRoaXMuY3VycmVudE9wdGlvbjo6OiAnLCB0aGlzLmN1cnJlbnRPcHRpb24pO1xuICAgIHRoaXMudG9nZ2xlVXNlclByZWZlcmVuY2UodGhpcy5jdXJyZW50T3B0aW9uKTtcblxuICAgIGNvbnN0IHByZWZlcnNEYXJrUXVlcnkgPSB3aW5kb3cubWF0Y2hNZWRpYSgnKHByZWZlcnMtY29sb3Itc2NoZW1lOiBkYXJrKScpO1xuICAgIHRoaXMucHJlZmVyc0RhcmsgPSBwcmVmZXJzRGFya1F1ZXJ5Lm1hdGNoZXM7XG4gICAgdGhpcy5oYW5kbGVBdXRvQ29uZmlndXJhdGlvbigpO1xuXG4gICAgcHJlZmVyc0RhcmtRdWVyeS5hZGRFdmVudExpc3RlbmVyKCdjaGFuZ2UnLCBtZWRpYVF1ZXJ5ID0+IHtcbiAgICAgIGNvbnNvbGUubG9nKCfwn5KhIFRoZW1lQ29uZmlnIGFkZEV2ZW50TGlzdGVuZXIgY2hhbmdlOjo6ICcsIG1lZGlhUXVlcnkpO1xuICAgICAgdGhpcy5wcmVmZXJzRGFyayA9IG1lZGlhUXVlcnkubWF0Y2hlcztcbiAgICAgIHRoaXMuaGFuZGxlQXV0b0NvbmZpZ3VyYXRpb24oKTtcbiAgICB9KTtcbiAgfVxuXG4gIHByaXZhdGUgaGFuZGxlQXV0b0NvbmZpZ3VyYXRpb24oKSB7XG4gICAgaWYgKHRoaXMucHJlZmVyc0RhcmsgJiYgdGhpcy5jdXJyZW50T3B0aW9uID09PSBUaGVtZU9wdGlvbi5BVVRPKSB7XG4gICAgICBjb25zb2xlLmxvZygn8J+SoSBUaGVtZUNvbmZpZyBwcmVmZXJzRGFyazo6OiAnLCB0aGlzLnByZWZlcnNEYXJrKTtcbiAgICAgIHRoaXMudG9nZ2xlVXNlclByZWZlcmVuY2UoVGhlbWVPcHRpb24uQVVUTyk7XG4gICAgfVxuICAgIGlmICghdGhpcy5wcmVmZXJzRGFyayAmJiB0aGlzLmN1cnJlbnRPcHRpb24gPT09IFRoZW1lT3B0aW9uLkFVVE8pIHtcbiAgICAgIGNvbnNvbGUubG9nKCfwn5KhIFRoZW1lQ29uZmlnIHByZWZlcnNEYXJrOjo6ICcsIHRoaXMucHJlZmVyc0RhcmspO1xuICAgICAgdGhpcy50b2dnbGVVc2VyUHJlZmVyZW5jZShUaGVtZU9wdGlvbi5BVVRPKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGhhbmRsZURhcmtQcmVmZXJlbmNlKCkge1xuICAgIHRoaXMudG9nZ2xlVGhlbWUoVGhlbWVPcHRpb24uREFSSywgdHJ1ZSk7XG4gICAgdGhpcy50b2dnbGVUaGVtZShUaGVtZU9wdGlvbi5MSUdIVCwgZmFsc2UpO1xuICB9XG5cbiAgcHJpdmF0ZSBoYW5kbGVMaWdodFByZWZlcmVuY2UoKSB7XG4gICAgdGhpcy50b2dnbGVUaGVtZShUaGVtZU9wdGlvbi5MSUdIVCwgdHJ1ZSk7XG4gICAgdGhpcy50b2dnbGVUaGVtZShUaGVtZU9wdGlvbi5EQVJLLCBmYWxzZSk7XG4gIH1cblxuICBnZXQgSXNEYXJrKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLnByZWZlcnNEYXJrO1xuICB9XG5cbiAgZ2V0IFRoZW1lKCk6IFRoZW1lT3B0aW9uIHtcbiAgICByZXR1cm4gdGhpcy50aGVtZS52YWx1ZTtcbiAgfVxuXG4gIHNldCBUaGVtZSh0aGVtZTogVGhlbWVPcHRpb24pIHtcbiAgICB0aGlzLnRoZW1lLm5leHQodGhlbWUpO1xuICAgIExvY2FsU3RvcmFnZVNlcnZpY2Uuc2V0PFRoZW1lT3B0aW9uPihUSEVNRSwgdGhlbWUpO1xuICB9XG5cbiAgdG9nZ2xlVGhlbWUobmFtZTogc3RyaW5nLCBzaG91bGRBZGQ6IGJvb2xlYW4pIHtcbiAgICBjb25zb2xlLmxvZygndG9nZ2xlVGhlbWU6OjogJywgbmFtZSwgc2hvdWxkQWRkKTtcbiAgICBkb2N1bWVudC5ib2R5LmNsYXNzTGlzdC50b2dnbGUobmFtZSwgc2hvdWxkQWRkKTtcbiAgfVxuXG4gIHRvZ2dsZVVzZXJQcmVmZXJlbmNlKG9wdGlvbjogVGhlbWVPcHRpb24pIHtcbiAgICB0aGlzLmN1cnJlbnRPcHRpb24gPSBvcHRpb247XG4gICAgdGhpcy5UaGVtZSA9IG9wdGlvbjtcbiAgICB0aGlzLmxpZ2h0VG9nZ2xlID0gb3B0aW9uID09PSBUaGVtZU9wdGlvbi5MSUdIVDtcbiAgICB0aGlzLmRhcmtUb2dnbGUgPSBvcHRpb24gPT09IFRoZW1lT3B0aW9uLkRBUks7XG4gICAgdGhpcy5hdXRvVG9nZ2xlID0gb3B0aW9uID09PSBUaGVtZU9wdGlvbi5BVVRPO1xuXG4gICAgc3dpdGNoIChvcHRpb24pIHtcbiAgICAgIGNhc2UgVGhlbWVPcHRpb24uTElHSFQ6XG4gICAgICAgIHRoaXMuaGFuZGxlTGlnaHRQcmVmZXJlbmNlKCk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSBUaGVtZU9wdGlvbi5EQVJLOlxuICAgICAgICB0aGlzLmhhbmRsZURhcmtQcmVmZXJlbmNlKCk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSBUaGVtZU9wdGlvbi5BVVRPOlxuICAgICAgICBpZiAodGhpcy5wcmVmZXJzRGFyaykge1xuICAgICAgICAgIHRoaXMuaGFuZGxlRGFya1ByZWZlcmVuY2UoKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICB0aGlzLmhhbmRsZUxpZ2h0UHJlZmVyZW5jZSgpO1xuICAgICAgICB9XG4gICAgICAgIGJyZWFrO1xuICAgIH1cbiAgfVxufVxuIl19
|
|
@@ -3291,9 +3291,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3291
3291
|
`, styles: [".layout-container{margin:0 auto;padding:0;width:100%;box-sizing:border-box;margin-bottom:1rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{margin:0 auto;max-width:55rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{margin:0 auto;max-width:68.75rem}}\n"] }]
|
|
3292
3292
|
}] });
|
|
3293
3293
|
|
|
3294
|
+
class LocalStorageService {
|
|
3295
|
+
static set(reference, value) {
|
|
3296
|
+
localStorage.setItem(reference, JSON.stringify(value));
|
|
3297
|
+
}
|
|
3298
|
+
static get(reference) {
|
|
3299
|
+
const value = localStorage.getItem(reference);
|
|
3300
|
+
return JSON.parse(value);
|
|
3301
|
+
}
|
|
3302
|
+
static remove(reference) {
|
|
3303
|
+
localStorage.removeItem(reference);
|
|
3304
|
+
}
|
|
3305
|
+
static clear() {
|
|
3306
|
+
localStorage.clear();
|
|
3307
|
+
}
|
|
3308
|
+
}
|
|
3309
|
+
|
|
3310
|
+
const LANG = 'LANG';
|
|
3311
|
+
const THEME = 'THEME';
|
|
3312
|
+
|
|
3313
|
+
var ThemeOption;
|
|
3314
|
+
(function (ThemeOption) {
|
|
3315
|
+
ThemeOption["LIGHT"] = "light";
|
|
3316
|
+
ThemeOption["DARK"] = "dark";
|
|
3317
|
+
ThemeOption["AUTO"] = "auto";
|
|
3318
|
+
})(ThemeOption || (ThemeOption = {}));
|
|
3319
|
+
class ThemeService {
|
|
3320
|
+
constructor() {
|
|
3321
|
+
this.lightToggle = false;
|
|
3322
|
+
this.darkToggle = false;
|
|
3323
|
+
this.autoToggle = false;
|
|
3324
|
+
this.currentOption = ThemeOption.AUTO;
|
|
3325
|
+
this.themeOptions = ThemeOption;
|
|
3326
|
+
this.prefersDark = false;
|
|
3327
|
+
this.default = ThemeOption.AUTO;
|
|
3328
|
+
const current = LocalStorageService.get(THEME);
|
|
3329
|
+
console.log('💡 ThemeConfig current::: ', current);
|
|
3330
|
+
this.theme = new BehaviorSubject(current || this.default);
|
|
3331
|
+
this.currentOption = this.Theme;
|
|
3332
|
+
console.log('💡 ThemeConfig this.currentOption::: ', this.currentOption);
|
|
3333
|
+
this.toggleUserPreference(this.currentOption);
|
|
3334
|
+
const prefersDarkQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
3335
|
+
this.prefersDark = prefersDarkQuery.matches;
|
|
3336
|
+
this.handleAutoConfiguration();
|
|
3337
|
+
prefersDarkQuery.addEventListener('change', mediaQuery => {
|
|
3338
|
+
console.log('💡 ThemeConfig addEventListener change::: ', mediaQuery);
|
|
3339
|
+
this.prefersDark = mediaQuery.matches;
|
|
3340
|
+
this.handleAutoConfiguration();
|
|
3341
|
+
});
|
|
3342
|
+
}
|
|
3343
|
+
handleAutoConfiguration() {
|
|
3344
|
+
if (this.prefersDark && this.currentOption === ThemeOption.AUTO) {
|
|
3345
|
+
console.log('💡 ThemeConfig prefersDark::: ', this.prefersDark);
|
|
3346
|
+
this.toggleUserPreference(ThemeOption.AUTO);
|
|
3347
|
+
}
|
|
3348
|
+
if (!this.prefersDark && this.currentOption === ThemeOption.AUTO) {
|
|
3349
|
+
console.log('💡 ThemeConfig prefersDark::: ', this.prefersDark);
|
|
3350
|
+
this.toggleUserPreference(ThemeOption.AUTO);
|
|
3351
|
+
}
|
|
3352
|
+
}
|
|
3353
|
+
handleDarkPreference() {
|
|
3354
|
+
this.toggleTheme(ThemeOption.DARK, true);
|
|
3355
|
+
this.toggleTheme(ThemeOption.LIGHT, false);
|
|
3356
|
+
}
|
|
3357
|
+
handleLightPreference() {
|
|
3358
|
+
this.toggleTheme(ThemeOption.LIGHT, true);
|
|
3359
|
+
this.toggleTheme(ThemeOption.DARK, false);
|
|
3360
|
+
}
|
|
3361
|
+
get IsDark() {
|
|
3362
|
+
return this.prefersDark;
|
|
3363
|
+
}
|
|
3364
|
+
get Theme() {
|
|
3365
|
+
return this.theme.value;
|
|
3366
|
+
}
|
|
3367
|
+
set Theme(theme) {
|
|
3368
|
+
this.theme.next(theme);
|
|
3369
|
+
LocalStorageService.set(THEME, theme);
|
|
3370
|
+
}
|
|
3371
|
+
toggleTheme(name, shouldAdd) {
|
|
3372
|
+
console.log('toggleTheme::: ', name, shouldAdd);
|
|
3373
|
+
document.body.classList.toggle(name, shouldAdd);
|
|
3374
|
+
}
|
|
3375
|
+
toggleUserPreference(option) {
|
|
3376
|
+
this.currentOption = option;
|
|
3377
|
+
this.Theme = option;
|
|
3378
|
+
this.lightToggle = option === ThemeOption.LIGHT;
|
|
3379
|
+
this.darkToggle = option === ThemeOption.DARK;
|
|
3380
|
+
this.autoToggle = option === ThemeOption.AUTO;
|
|
3381
|
+
switch (option) {
|
|
3382
|
+
case ThemeOption.LIGHT:
|
|
3383
|
+
this.handleLightPreference();
|
|
3384
|
+
break;
|
|
3385
|
+
case ThemeOption.DARK:
|
|
3386
|
+
this.handleDarkPreference();
|
|
3387
|
+
break;
|
|
3388
|
+
case ThemeOption.AUTO:
|
|
3389
|
+
if (this.prefersDark) {
|
|
3390
|
+
this.handleDarkPreference();
|
|
3391
|
+
}
|
|
3392
|
+
else {
|
|
3393
|
+
this.handleLightPreference();
|
|
3394
|
+
}
|
|
3395
|
+
break;
|
|
3396
|
+
}
|
|
3397
|
+
}
|
|
3398
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3399
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
|
|
3400
|
+
}
|
|
3401
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThemeService, decorators: [{
|
|
3402
|
+
type: Injectable,
|
|
3403
|
+
args: [{
|
|
3404
|
+
providedIn: 'root',
|
|
3405
|
+
}]
|
|
3406
|
+
}], ctorParameters: () => [] });
|
|
3407
|
+
|
|
3294
3408
|
class SimpleComponent {
|
|
3295
3409
|
constructor() {
|
|
3296
3410
|
this.onClick = new EventEmitter();
|
|
3411
|
+
this.theme = inject(ThemeService);
|
|
3297
3412
|
}
|
|
3298
3413
|
onClickHandler(token) {
|
|
3299
3414
|
this.onClick.emit(token);
|
|
@@ -3302,7 +3417,12 @@ class SimpleComponent {
|
|
|
3302
3417
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SimpleComponent, isStandalone: true, selector: "val-simple", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
|
|
3303
3418
|
<val-header [props]="props.header" />
|
|
3304
3419
|
|
|
3305
|
-
<ion-content
|
|
3420
|
+
<ion-content
|
|
3421
|
+
[fullscreen]="true"
|
|
3422
|
+
[ngStyle]="{
|
|
3423
|
+
'--background': theme.IsDark ? 'var(--ion-background-color)' : props.background,
|
|
3424
|
+
}"
|
|
3425
|
+
>
|
|
3306
3426
|
<ion-header collapse="condense">
|
|
3307
3427
|
<ion-toolbar style="--background: transparent;">
|
|
3308
3428
|
<ion-title style="padding: 0;" size="large">{{ props.pageTitle }}</ion-title>
|
|
@@ -3330,16 +3450,15 @@ class SimpleComponent {
|
|
|
3330
3450
|
<ng-content></ng-content>
|
|
3331
3451
|
</val-layout>
|
|
3332
3452
|
</ion-content>
|
|
3333
|
-
`, isInline: true, styles: [".description-container{padding:0 16px}\n"], dependencies: [{ kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: HeaderComponent, selector: "val-header", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: LayoutComponent, selector: "val-layout" }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: LinkComponent, selector: "val-link", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ExpandableTextComponent, selector: "val-expandable-text", inputs: ["props"] }] }); }
|
|
3453
|
+
`, isInline: true, styles: [".description-container{padding:0 16px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: HeaderComponent, selector: "val-header", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: LayoutComponent, selector: "val-layout" }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: LinkComponent, selector: "val-link", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ExpandableTextComponent, selector: "val-expandable-text", inputs: ["props"] }] }); }
|
|
3334
3454
|
}
|
|
3335
3455
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleComponent, decorators: [{
|
|
3336
3456
|
type: Component,
|
|
3337
3457
|
args: [{ selector: 'val-simple', standalone: true, imports: [
|
|
3338
|
-
|
|
3458
|
+
NgStyle,
|
|
3339
3459
|
IonHeader,
|
|
3340
3460
|
IonToolbar,
|
|
3341
3461
|
IonTitle,
|
|
3342
|
-
IonText,
|
|
3343
3462
|
IonContent,
|
|
3344
3463
|
HeaderComponent,
|
|
3345
3464
|
LayoutComponent,
|
|
@@ -3349,7 +3468,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3349
3468
|
], template: `
|
|
3350
3469
|
<val-header [props]="props.header" />
|
|
3351
3470
|
|
|
3352
|
-
<ion-content
|
|
3471
|
+
<ion-content
|
|
3472
|
+
[fullscreen]="true"
|
|
3473
|
+
[ngStyle]="{
|
|
3474
|
+
'--background': theme.IsDark ? 'var(--ion-background-color)' : props.background,
|
|
3475
|
+
}"
|
|
3476
|
+
>
|
|
3353
3477
|
<ion-header collapse="condense">
|
|
3354
3478
|
<ion-toolbar style="--background: transparent;">
|
|
3355
3479
|
<ion-title style="padding: 0;" size="large">{{ props.pageTitle }}</ion-title>
|
|
@@ -3398,25 +3522,6 @@ var LangOption;
|
|
|
3398
3522
|
LangOption["EN"] = "en";
|
|
3399
3523
|
})(LangOption || (LangOption = {}));
|
|
3400
3524
|
|
|
3401
|
-
class LocalStorageService {
|
|
3402
|
-
static set(reference, value) {
|
|
3403
|
-
localStorage.setItem(reference, JSON.stringify(value));
|
|
3404
|
-
}
|
|
3405
|
-
static get(reference) {
|
|
3406
|
-
const value = localStorage.getItem(reference);
|
|
3407
|
-
return JSON.parse(value);
|
|
3408
|
-
}
|
|
3409
|
-
static remove(reference) {
|
|
3410
|
-
localStorage.removeItem(reference);
|
|
3411
|
-
}
|
|
3412
|
-
static clear() {
|
|
3413
|
-
localStorage.clear();
|
|
3414
|
-
}
|
|
3415
|
-
}
|
|
3416
|
-
|
|
3417
|
-
const LANG = 'LANG';
|
|
3418
|
-
const THEME = 'THEME';
|
|
3419
|
-
|
|
3420
3525
|
const ValtechConfigService = new InjectionToken('ValtechConfig');
|
|
3421
3526
|
|
|
3422
3527
|
class LangService {
|
|
@@ -3451,98 +3556,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3451
3556
|
args: [ValtechConfigService]
|
|
3452
3557
|
}] }] });
|
|
3453
3558
|
|
|
3454
|
-
var ThemeOption;
|
|
3455
|
-
(function (ThemeOption) {
|
|
3456
|
-
ThemeOption["LIGHT"] = "light";
|
|
3457
|
-
ThemeOption["DARK"] = "dark";
|
|
3458
|
-
ThemeOption["AUTO"] = "auto";
|
|
3459
|
-
})(ThemeOption || (ThemeOption = {}));
|
|
3460
|
-
class ThemeService {
|
|
3461
|
-
constructor() {
|
|
3462
|
-
this.lightToggle = false;
|
|
3463
|
-
this.darkToggle = false;
|
|
3464
|
-
this.autoToggle = false;
|
|
3465
|
-
this.currentOption = ThemeOption.AUTO;
|
|
3466
|
-
this.themeOptions = ThemeOption;
|
|
3467
|
-
this.prefersDark = false;
|
|
3468
|
-
this.default = ThemeOption.AUTO;
|
|
3469
|
-
const current = LocalStorageService.get(THEME);
|
|
3470
|
-
console.log('💡 ThemeConfig current::: ', current);
|
|
3471
|
-
this.theme = new BehaviorSubject(current || this.default);
|
|
3472
|
-
this.currentOption = this.Theme;
|
|
3473
|
-
console.log('💡 ThemeConfig this.currentOption::: ', this.currentOption);
|
|
3474
|
-
this.toggleUserPreference(this.currentOption);
|
|
3475
|
-
const prefersDarkQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
3476
|
-
this.prefersDark = prefersDarkQuery.matches;
|
|
3477
|
-
this.handleAutoConfiguration();
|
|
3478
|
-
prefersDarkQuery.addEventListener('change', mediaQuery => {
|
|
3479
|
-
console.log('💡 ThemeConfig addEventListener change::: ', mediaQuery);
|
|
3480
|
-
this.prefersDark = mediaQuery.matches;
|
|
3481
|
-
this.handleAutoConfiguration();
|
|
3482
|
-
});
|
|
3483
|
-
}
|
|
3484
|
-
handleAutoConfiguration() {
|
|
3485
|
-
if (this.prefersDark && this.currentOption === ThemeOption.AUTO) {
|
|
3486
|
-
console.log('💡 ThemeConfig prefersDark::: ', this.prefersDark);
|
|
3487
|
-
this.toggleUserPreference(ThemeOption.AUTO);
|
|
3488
|
-
}
|
|
3489
|
-
if (!this.prefersDark && this.currentOption === ThemeOption.AUTO) {
|
|
3490
|
-
console.log('💡 ThemeConfig prefersDark::: ', this.prefersDark);
|
|
3491
|
-
this.toggleUserPreference(ThemeOption.AUTO);
|
|
3492
|
-
}
|
|
3493
|
-
}
|
|
3494
|
-
handleDarkPreference() {
|
|
3495
|
-
this.toggleTheme(ThemeOption.DARK, true);
|
|
3496
|
-
this.toggleTheme(ThemeOption.LIGHT, false);
|
|
3497
|
-
}
|
|
3498
|
-
handleLightPreference() {
|
|
3499
|
-
this.toggleTheme(ThemeOption.LIGHT, true);
|
|
3500
|
-
this.toggleTheme(ThemeOption.DARK, false);
|
|
3501
|
-
}
|
|
3502
|
-
get Theme() {
|
|
3503
|
-
return this.theme.value;
|
|
3504
|
-
}
|
|
3505
|
-
set Theme(theme) {
|
|
3506
|
-
this.theme.next(theme);
|
|
3507
|
-
LocalStorageService.set(THEME, theme);
|
|
3508
|
-
}
|
|
3509
|
-
toggleTheme(name, shouldAdd) {
|
|
3510
|
-
console.log('toggleTheme::: ', name, shouldAdd);
|
|
3511
|
-
document.body.classList.toggle(name, shouldAdd);
|
|
3512
|
-
}
|
|
3513
|
-
toggleUserPreference(option) {
|
|
3514
|
-
this.currentOption = option;
|
|
3515
|
-
this.Theme = option;
|
|
3516
|
-
this.lightToggle = option === ThemeOption.LIGHT;
|
|
3517
|
-
this.darkToggle = option === ThemeOption.DARK;
|
|
3518
|
-
this.autoToggle = option === ThemeOption.AUTO;
|
|
3519
|
-
switch (option) {
|
|
3520
|
-
case ThemeOption.LIGHT:
|
|
3521
|
-
this.handleLightPreference();
|
|
3522
|
-
break;
|
|
3523
|
-
case ThemeOption.DARK:
|
|
3524
|
-
this.handleDarkPreference();
|
|
3525
|
-
break;
|
|
3526
|
-
case ThemeOption.AUTO:
|
|
3527
|
-
if (this.prefersDark) {
|
|
3528
|
-
this.handleDarkPreference();
|
|
3529
|
-
}
|
|
3530
|
-
else {
|
|
3531
|
-
this.handleLightPreference();
|
|
3532
|
-
}
|
|
3533
|
-
break;
|
|
3534
|
-
}
|
|
3535
|
-
}
|
|
3536
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3537
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
|
|
3538
|
-
}
|
|
3539
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThemeService, decorators: [{
|
|
3540
|
-
type: Injectable,
|
|
3541
|
-
args: [{
|
|
3542
|
-
providedIn: 'root',
|
|
3543
|
-
}]
|
|
3544
|
-
}], ctorParameters: () => [] });
|
|
3545
|
-
|
|
3546
3559
|
/*
|
|
3547
3560
|
* Public API Surface of valtech-components
|
|
3548
3561
|
*/
|