@tilde-nlp/ngx-common 8.1.3 → 8.1.5

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.
Files changed (7) hide show
  1. package/fesm2022/tilde-nlp-ngx-common.mjs +151 -18
  2. package/fesm2022/tilde-nlp-ngx-common.mjs.map +1 -1
  3. package/index.d.ts +8 -0
  4. package/package.json +1 -1
  5. package/styles/accessibility.scss +62 -0
  6. package/styles/contrast-themes/black-white.scss +3 -2
  7. package/styles/contrast-themes/black-yellow.scss +4 -3
package/index.d.ts CHANGED
@@ -2493,6 +2493,7 @@ declare enum AccessibilityContrasts {
2493
2493
  declare class AccessibilityDialogComponent implements OnInit {
2494
2494
  #private;
2495
2495
  isTextMagnifierEnabled: boolean;
2496
+ isScreenMaskEnabled: boolean;
2496
2497
  selectedFontSizeIndex: number;
2497
2498
  currentContrast: AccessibilityContrasts;
2498
2499
  readonly contrasts: AccessibilityContrasts[];
@@ -2500,6 +2501,8 @@ declare class AccessibilityDialogComponent implements OnInit {
2500
2501
  changeContrast(contrast: AccessibilityContrasts): void;
2501
2502
  changeFontSize(e: MatTabChangeEvent): void;
2502
2503
  toggleTextMagnifier(): void;
2504
+ toggleScreenMask(): void;
2505
+ closeFocusBar(): void;
2503
2506
  reset(): void;
2504
2507
  static ɵfac: i0.ɵɵFactoryDeclaration<AccessibilityDialogComponent, never>;
2505
2508
  static ɵcmp: i0.ɵɵComponentDeclaration<AccessibilityDialogComponent, "lib-accessibility-dialog", never, {}, {}, never, never, true, never>;
@@ -2516,11 +2519,16 @@ declare class AccessibilityService {
2516
2519
  readonly fontSizeLocalStorageKey = "ACCESSIBILITY_FONT_SIZE_IX";
2517
2520
  readonly contrastLocalStorageKey = "ACCESSIBILITY_CONTRAST";
2518
2521
  readonly textMagnifierLocalStorageKey = "TEXT_MAGNIFIER";
2522
+ readonly screenMaskLocalStorageKey = "SCREEN_MASK";
2519
2523
  sizeIncreaseSubject: Subject<boolean>;
2520
2524
  contrastSubject: Subject<string>;
2525
+ toggleScreenMask(): void;
2526
+ closeFocusBar(): void;
2521
2527
  toggleTextMagnifier(): void;
2522
2528
  getSavedTextMagnifierStatus(): boolean;
2529
+ getSavedScreenMaskStatus(): boolean;
2523
2530
  setSavedTextMagnifierStatus(): void;
2531
+ setSavedScreenMaskStatus(): void;
2524
2532
  saveContrast(contrast: string): void;
2525
2533
  getSavedContrast(): AccessibilityContrasts;
2526
2534
  getSavedFontSize(): number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tilde-nlp/ngx-common",
3
- "version": "8.1.3",
3
+ "version": "8.1.5",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^20.0.0",
6
6
  "@angular/core": "^20.0.0",
package/styles/accessibility.scss CHANGED
@@ -17,3 +17,65 @@
17
17
  max-width: 20vw;
18
18
  scale: 2;
19
19
  }
20
+
21
+ .screen-mask {
22
+ position: fixed;
23
+ height: 100%;
24
+ width: 100%;
25
+ top: 0;
26
+ left: 0;
27
+ z-index: 99999;
28
+ pointer-events: none;
29
+ }
30
+
31
+ .screen-mask-overlay {
32
+ background-color: rgba(0, 0, 0, 0.3);
33
+ pointer-events: auto;
34
+ height: 100%;
35
+ width: 100%;
36
+ }
37
+
38
+ .screen-mask-focus-bar {
39
+ display: flex;
40
+ align-items: center;
41
+ justify-content: end;
42
+ position: fixed;
43
+ height: 60px;
44
+ width: 100%;
45
+ background: transparent;
46
+ left: 0;
47
+ top: 0;
48
+ padding-right: 20px;
49
+ }
50
+
51
+ .screen-mask-focus-bar button {
52
+ height: 40px;
53
+ width: 40px;
54
+ padding: 12px;
55
+ pointer-events: all;
56
+ border-radius: 50%;
57
+ display: flex;
58
+ align-items: center;
59
+ justify-content: center;
60
+
61
+ &:hover {
62
+ background-color: var(--base-95);
63
+ }
64
+ }
65
+
66
+ .screen-mask-bar {
67
+ align-items: center;
68
+ height: 100%;
69
+ position: absolute;
70
+ right: 10px;
71
+ z-index: 1;
72
+ display: flex;
73
+ background: transparent;
74
+ pointer-events: auto;
75
+ }
76
+
77
+ .screen-mask-bar-btn {
78
+ display: flex !important;
79
+ align-items: center !important;
80
+ justify-content: center !important;
81
+ }
package/styles/contrast-themes/black-white.scss CHANGED
@@ -135,8 +135,8 @@ $tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);
135
135
  html.black-white {
136
136
  --base-0: #ffffff !important;
137
137
  --base-10: #f1f1f1 !important;
138
- --base-30: #ababab !important;
139
- --base-40: #919191 !important;
138
+ --base-30: #f1f1f1 !important;
139
+ --base-40: #f1f1f1 !important;
140
140
  --base-65: #5e5e5e !important;
141
141
  --base-70: #474747 !important;
142
142
  --base-95: #1b1b1b !important;
@@ -161,6 +161,7 @@ html.black-white {
161
161
 
162
162
  --mat-menu-item-label-text-color: #000000 !important;
163
163
  --mat-menu-container-color: #e2e2e2 !important;
164
+ --mat-sys-on-surface: #f1f1f1 !important;
164
165
 
165
166
  @include mat.dialog-overrides(
166
167
  (
package/styles/contrast-themes/black-yellow.scss CHANGED
@@ -135,11 +135,11 @@ $tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);
135
135
  html.black-yellow {
136
136
  --base-0: #000000 !important;
137
137
  --base-10: #1e1c00 !important;
138
- --base-30: #4c4900 !important;
139
- --base-40: #656100 !important;
138
+ --base-30: #fef655 !important;
139
+ --base-40: #fef655 !important;
140
140
  --base-65: #9a9400 !important;
141
141
  --base-70: #b6af00 !important;
142
- --base-95: #fef655 !important;
142
+ --base-95: #4c4900 !important;
143
143
  --base-100: #ffffff !important;
144
144
  --neutral-50: #847374 !important;
145
145
  --neutral-95: #fbeeee !important;
@@ -161,6 +161,7 @@ html.black-yellow {
161
161
 
162
162
  --mat-menu-item-label-text-color: #656100 !important;
163
163
  --mat-menu-container-color: #fef655 !important;
164
+ --mat-sys-on-surface: #fef655 !important;
164
165
 
165
166
  @include mat.dialog-overrides(
166
167
  (