@skysoftware-co/bayan-core-widgets-ui 0.0.6 → 0.0.9

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 (47) hide show
  1. package/README.md +183 -0
  2. package/fesm2022/skysoftware-co-bayan-core-widgets-ui.mjs +1232 -0
  3. package/fesm2022/skysoftware-co-bayan-core-widgets-ui.mjs.map +1 -0
  4. package/index.d.ts +5 -0
  5. package/lib/shared/common-methods/navigation.utils.d.ts +3 -0
  6. package/lib/shared/menu.dtos.d.ts +90 -0
  7. package/lib/shared/menu.service.d.ts +23 -0
  8. package/lib/top-menu-widget/components/about-dialog-widget/about-dialog-widget.component.d.ts +36 -0
  9. package/lib/top-menu-widget/components/change-password-widget/change-password-widget.component.d.ts +33 -0
  10. package/lib/top-menu-widget/components/global-search-widget/global-search-widget.component.d.ts +58 -0
  11. package/lib/top-menu-widget/components/item-widget/item-widget.component.d.ts +28 -0
  12. package/lib/top-menu-widget/components/notifications-widget/notifications-widget.component.d.ts +22 -0
  13. package/lib/top-menu-widget/components/settings-widget/settings-widget.component.d.ts +73 -0
  14. package/lib/top-menu-widget/components/user-panel-widget/user-panel-widget.component.d.ts +42 -0
  15. package/lib/top-menu-widget/top-menu-widget.component.d.ts +57 -0
  16. package/lib/top-menu-widget/top-menu-widget.models.d.ts +24 -0
  17. package/package.json +48 -36
  18. package/public-api.d.ts +10 -0
  19. package/ng-package.json +0 -7
  20. package/src/assets/i18n/ar.json +0 -725
  21. package/src/assets/i18n/en.json +0 -683
  22. package/src/assets/i18n/fr.json +0 -687
  23. package/src/lib/shared/common-methods/navigation.utils.ts +0 -21
  24. package/src/lib/shared/menu.dtos.ts +0 -107
  25. package/src/lib/shared/menu.service.ts +0 -157
  26. package/src/lib/top-menu-widget/components/about-dialog-widget/about-dialog-widget.component.html +0 -37
  27. package/src/lib/top-menu-widget/components/about-dialog-widget/about-dialog-widget.component.ts +0 -68
  28. package/src/lib/top-menu-widget/components/change-password-widget/change-password-widget.component.html +0 -56
  29. package/src/lib/top-menu-widget/components/change-password-widget/change-password-widget.component.ts +0 -158
  30. package/src/lib/top-menu-widget/components/global-search-widget/global-search-widget.component.html +0 -39
  31. package/src/lib/top-menu-widget/components/global-search-widget/global-search-widget.component.ts +0 -153
  32. package/src/lib/top-menu-widget/components/item-widget/item-widget.component.html +0 -39
  33. package/src/lib/top-menu-widget/components/item-widget/item-widget.component.ts +0 -95
  34. package/src/lib/top-menu-widget/components/notifications-widget/notifications-widget.component.html +0 -10
  35. package/src/lib/top-menu-widget/components/notifications-widget/notifications-widget.component.ts +0 -89
  36. package/src/lib/top-menu-widget/components/settings-widget/settings-widget.component.html +0 -119
  37. package/src/lib/top-menu-widget/components/settings-widget/settings-widget.component.ts +0 -233
  38. package/src/lib/top-menu-widget/components/user-panel-widget/user-panel-widget.component.html +0 -53
  39. package/src/lib/top-menu-widget/components/user-panel-widget/user-panel-widget.component.ts +0 -140
  40. package/src/lib/top-menu-widget/top-menu-widget.component.html +0 -103
  41. package/src/lib/top-menu-widget/top-menu-widget.component.ts +0 -148
  42. package/src/lib/top-menu-widget/top-menu-widget.models.ts +0 -29
  43. package/src/lib/top-menu-widget/top-menu-widget.styles.css +0 -576
  44. package/src/public-api.ts +0 -7
  45. package/tsconfig.lib.json +0 -16
  46. package/tsconfig.lib.prod.json +0 -9
  47. package/tsconfig.spec.json +0 -13
@@ -1,29 +0,0 @@
1
- import { SystemModule } from '../shared/menu.dtos';
2
-
3
- export interface TopMenuWidgetAboutDialogConfig {
4
- title?: string;
5
- logoUrl?: string;
6
- version?: string;
7
- versionLabel?: string;
8
- copyright?: string;
9
- statusLabel?: string;
10
- licenseButtonLabel?: string;
11
- releaseNotesButtonLabel?: string;
12
- supportButtonLabel?: string;
13
- closeButtonLabel?: string;
14
- }
15
-
16
- export interface TopMenuWidgetChangePasswordPayload {
17
- currentPassword: string;
18
- newPassword: string;
19
- confirmNewPassword: string;
20
- }
21
-
22
- export interface TopMenuWidgetChangePasswordDialogConfig {
23
- title: string;
24
- currentPasswordLabel: string;
25
- newPasswordLabel: string;
26
- confirmNewPasswordLabel: string;
27
- primaryButtonText: string;
28
- }
29
-
@@ -1,576 +0,0 @@
1
- /* Stronger focus outline removal for all browsers */
2
- ::ng-deep .top-menu-widget__search .dx-texteditor-input:focus,
3
- ::ng-deep .dx-autocomplete .dx-texteditor-input:focus,
4
- ::ng-deep .dx-texteditor.dx-state-focused .dx-texteditor-input,
5
- ::ng-deep input:focus, ::ng-deep textarea:focus, ::ng-deep select:focus {
6
- outline: none !important;
7
- box-shadow: none !important;
8
- border-color: transparent !important;
9
- }
10
- /* GLOBAL SEARCH WIDGET DESIGN OVERRIDES */
11
- .top-menu-widget__search {
12
- width: 330px !important;
13
- max-width: 330px !important;
14
- min-width: 330px !important;
15
- margin: 0 auto;
16
- display: flex;
17
- align-items: center;
18
- }
19
-
20
- ::ng-deep .top-menu-widget__search .dx-texteditor-input,
21
- ::ng-deep .dx-autocomplete .dx-texteditor-input {
22
- background: #6d5555 !important;
23
- color: #fff !important;
24
- border-radius: 6px !important;
25
- border: none !important;
26
- height: 40px !important;
27
- padding-left: 36px !important;
28
- font-size: 18px !important;
29
- box-shadow: none !important;
30
- outline: none !important;
31
- transition: background 0.2s, color 0.2s;
32
- }
33
-
34
- ::ng-deep .top-menu-widget__search .dx-texteditor-input:focus,
35
- ::ng-deep .dx-autocomplete .dx-texteditor-input:focus {
36
- background: #fff !important;
37
- color: #6d5555 !important;
38
- outline: none !important;
39
- box-shadow: none !important;
40
- }
41
-
42
- ::ng-deep .top-menu-widget__search .dx-texteditor-input:hover,
43
- ::ng-deep .dx-autocomplete .dx-texteditor-input:hover {
44
- background: #fff !important;
45
- color: #6d5555 !important;
46
- }
47
-
48
- /* Remove default browser blue border on focus */
49
- input:focus, textarea:focus, select:focus {
50
- outline: none !important;
51
- box-shadow: none !important;
52
- }
53
- :host {
54
- flex: 0 0 auto;
55
- z-index: 1;
56
- }
57
-
58
- .top-bar-header {
59
- width: 100%;
60
- background: #222222;
61
- color: #ffffff;
62
- }
63
-
64
- ::ng-deep .dx-autocomplete.dx-state-focused .dx-texteditor-input,
65
- ::ng-deep .dx-autocomplete .dx-texteditor-input:focus {
66
- outline: none !important;
67
- box-shadow: none !important;
68
- }
69
-
70
- ::ng-deep .dx-autocomplete.dx-state-focused.dx-texteditor-filled {
71
- border-color: transparent !important;
72
- box-shadow: none !important;
73
- }
74
-
75
- .menu-dropdown-host {
76
- position: relative;
77
- display: flex;
78
- align-items: center;
79
- }
80
-
81
- .menu-icon-btn {
82
- display: flex;
83
- align-items: center;
84
- justify-content: center;
85
- width: 40px;
86
- height: 56px;
87
- text-decoration: none;
88
- color: var(--Secondary-Light-Color, #999) !important;
89
- transition: color var(--tran-02, 0.2s);
90
- cursor: pointer;
91
- }
92
-
93
- .menu-icon-btn:hover {
94
- color: var(--bs-white, #fff) !important;
95
- }
96
-
97
- .menu-dropdown-panel {
98
- position: absolute;
99
- top: 100%;
100
- background: var(--bs-white, #fff);
101
- color: var(--dark-text-color, #333);
102
- border: 1px solid var(--bs-gray, #dee2e6);
103
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
104
- z-index: 1050;
105
- padding: 4px 0;
106
- list-style: none;
107
- border-radius: 4px;
108
- margin-top: 0;
109
- }
110
-
111
- .menu-section-label {
112
- font-size: 12px;
113
- color: var(--Secondary-Light-Color, #888);
114
- padding: 4px 16px 6px;
115
- letter-spacing: 0.03em;
116
- display: block;
117
- }
118
-
119
- .menu-row {
120
- display: flex;
121
- align-items: center;
122
- gap: 6px;
123
- }
124
-
125
- .menu-divider {
126
- border: none;
127
- border-top: 1px solid rgba(0, 0, 0, 0.8);
128
- margin: 4px 0;
129
- }
130
-
131
- .menu-indicator {
132
- display: inline-flex;
133
- align-items: center;
134
- justify-content: center;
135
- width: 16px;
136
- flex-shrink: 0;
137
- font-size: 12px;
138
- padding-top: 2px;
139
- }
140
-
141
- .menu-indicator-active {
142
- color: var(--primary-color, #f18206);
143
- }
144
-
145
- ::ng-deep .top-bar-header .dx-toolbar {
146
- padding: 0 !important;
147
- height: 56px !important;
148
- }
149
-
150
- ::ng-deep .top-bar-header .dx-toolbar .dx-toolbar-items-container {
151
- height: 56px !important;
152
- }
153
-
154
- ::ng-deep .top-bar-header .dx-toolbar .dx-toolbar-before,
155
- ::ng-deep .top-bar-header .dx-toolbar .dx-toolbar-center,
156
- ::ng-deep .top-bar-header .dx-toolbar .dx-toolbar-after {
157
- display: flex !important;
158
- align-items: center !important;
159
- height: 56px !important;
160
- }
161
-
162
- ::ng-deep .top-bar-header .dx-toolbar .dx-item.dx-toolbar-item,
163
- ::ng-deep .top-bar-header .dx-toolbar .dx-item-content.dx-toolbar-item-content {
164
- display: flex !important;
165
- align-items: center !important;
166
- }
167
-
168
- ::ng-deep .top-bar-header .dx-toolbar .dx-toolbar-after {
169
- padding: 0 20px !important;
170
- }
171
-
172
- .navbar-brand-link {
173
- display: flex;
174
- align-items: center;
175
- text-decoration: none;
176
- width: 235px;
177
- min-width: 235px;
178
- transition: width var(--tran-03, 0.3s), min-width var(--tran-03, 0.3s);
179
- overflow: hidden;
180
- }
181
-
182
- .navbar-brand-link.collapsed {
183
- width: 60px;
184
- min-width: 60px;
185
- }
186
-
187
- .header-logo {
188
- height: 38px;
189
- object-fit: contain;
190
- }
191
-
192
- .header-logo-collapsed {
193
- height: 32px;
194
- object-fit: contain;
195
- }
196
-
197
- .nav.navbar-nav {
198
- list-style: none;
199
- padding: 0;
200
- margin: 0;
201
- }
202
-
203
- ul {
204
- margin-top: 0;
205
- }
206
-
207
- .employee-toggle {
208
- display: flex;
209
- align-items: center;
210
- height: 56px;
211
- padding: 0 6px;
212
- text-decoration: none;
213
- cursor: pointer;
214
- color: var(--Secondary-Light-Color, #999);
215
- transition: color var(--tran-02, 0.2s);
216
- }
217
-
218
- .employee-toggle:hover {
219
- color: var(--bs-white, #fff);
220
- }
221
-
222
- .employee-info {
223
- display: flex;
224
- flex-direction: column;
225
- justify-content: center;
226
- margin-left: 8px;
227
- margin-right: 4px;
228
- }
229
-
230
- .user-name {
231
- font-size: 13px;
232
- font-weight: 500;
233
- color: var(--Secondary-Light-Color, #999);
234
- max-width: 140px;
235
- white-space: nowrap;
236
- overflow: hidden;
237
- text-overflow: ellipsis;
238
- line-height: 1.3;
239
- display: block;
240
- }
241
-
242
- .property-name {
243
- font-size: 11px;
244
- color: var(--Secondary-Light-Color, #999);
245
- max-width: 140px;
246
- white-space: nowrap;
247
- overflow: hidden;
248
- text-overflow: ellipsis;
249
- line-height: 1.3;
250
- letter-spacing: 0.03em;
251
- display: block;
252
- }
253
-
254
- .user-name:hover, .property-name:hover {
255
- color: var(--bs-white, #fff);
256
- }
257
-
258
- .employee-caret {
259
- font-size: 9px;
260
- color: var(--Secondary-Light-Color, #999);
261
- flex-shrink: 0;
262
- margin-left: 2px;
263
- }
264
-
265
- .employee-menu {
266
- right: 0;
267
- min-width: 200px;
268
- padding: 6px 0;
269
- border-color: rgba(0, 0, 0, 0.12);
270
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
271
- }
272
-
273
- .menu-item {
274
- display: flex;
275
- align-items: center;
276
- padding: 7px 16px;
277
- font-size: 14px;
278
- color: var(--dark-text-color, #333);
279
- text-decoration: none;
280
- cursor: pointer;
281
- transition: background var(--tran-02, 0.15s);
282
- }
283
-
284
- .menu-item:hover,
285
- .menu-item:focus {
286
- background: #f5f5f5;
287
- color: var(--dark-text-color, #333) !important;
288
- }
289
-
290
- .menu-item-active {
291
- color: var(--dark-text-color, #333);
292
- font-weight: 600;
293
- }
294
-
295
- .menu-item-active .menu-indicator {
296
- color: var(--primary-color, #f18206);
297
- }
298
-
299
- .menu-item-signout:hover,
300
- .menu-item-signout:focus {
301
- background: #f5f5f5 !important;
302
- }
303
-
304
- .settings-menu {
305
- right: 0;
306
- min-width: 240px;
307
- }
308
-
309
- .header-dropdown-item {
310
- display: flex;
311
- align-items: center;
312
- width: 100%;
313
- background: transparent;
314
- border: 0;
315
- color: var(--dark-text-color, #333);
316
- text-align: left;
317
- text-decoration: none;
318
- cursor: pointer;
319
- gap: 6px;
320
- padding: 7px 16px;
321
- font-size: 14px;
322
- }
323
-
324
- .header-dropdown-item:hover,
325
- .header-dropdown-item:focus {
326
- background: #f5f5f5;
327
- color: var(--dark-text-color, #333) !important;
328
- }
329
-
330
- .header-dropdown-item.disabled,
331
- .disabled {
332
- opacity: 0.5;
333
- }
334
-
335
- .dropdown-divider {
336
- border-top: 1px solid rgba(0, 0, 0, 0.175);
337
- }
338
-
339
- .notifications-icon-btn {
340
- position: relative;
341
- }
342
-
343
- .notifications-badge {
344
- position: absolute;
345
- top: 4px;
346
- right: 4px;
347
- min-width: 18px;
348
- height: 18px;
349
- border-radius: 999px;
350
- padding: 0 5px;
351
- font-size: 9px;
352
- line-height: 18px;
353
- text-align: center;
354
- background: var(--danger-color, #D9534F);
355
- color: #ffffff;
356
- }
357
-
358
- .nav-item .nav-link {
359
- color: var(--Secondary-Light-Color, #999);
360
- font-weight: 500;
361
- padding: 0 14px;
362
- height: 56px;
363
- display: flex;
364
- align-items: center;
365
- justify-content: flex-start;
366
- text-decoration: none;
367
- font-size: 13px;
368
- white-space: nowrap;
369
- transition: color 0.2s;
370
- background: #222222;
371
- border: 0;
372
- }
373
-
374
- .nav-item .nav-link:hover,
375
- .nav-item.dropdown.open > .nav-link {
376
- color: var(--bs-white, #fff);
377
- background: #222222;
378
- }
379
-
380
- .nav-item .nav-link .caret {
381
- margin-left: 4px;
382
- font-size: 10px;
383
- }
384
-
385
- .nav-item.dropdown {
386
- position: relative;
387
- }
388
-
389
- .dropdown-menu {
390
- left: 0;
391
- min-width: 200px;
392
- }
393
-
394
- .nav-item.dropdown.open > .dropdown-menu {
395
- display: block;
396
- }
397
-
398
- .top-bar-header .nav-item .nav-link,
399
- .top-bar-header .nav-item .nav-link:hover,
400
- .top-bar-header .nav-item .nav-link:focus {
401
- background: #222222 !important;
402
- color: var(--Secondary-Light-Color, #999) !important;
403
- }
404
-
405
- .top-bar-header .nav-item.dropdown.open > .nav-link,
406
- .top-bar-header .nav-item .nav-link:hover {
407
- color: var(--bs-white, #fff) !important;
408
- }
409
-
410
- .top-bar-header .nav-item {
411
- margin: 0;
412
- }
413
-
414
- .top-bar-header .dropdown-menu.menu-dropdown-panel {
415
- top: 100%;
416
- margin-top: 0;
417
- min-width: 220px;
418
- padding: 0;
419
- border-radius: 0 0 4px 4px;
420
- overflow: hidden;
421
- background: #fff !important;
422
- z-index: 1200;
423
- }
424
-
425
- .top-bar-header .dropdown-menu.menu-dropdown-panel .nav-item .nav-link {
426
- height: 44px;
427
- padding: 0 22px;
428
- background: #fff !important;
429
- color: var(--dark-text-color, #333) !important;
430
- border-bottom: none;
431
- font-weight: 400;
432
- text-decoration: none !important;
433
- }
434
-
435
- .top-bar-header .dropdown-menu.menu-dropdown-panel .nav-item .nav-link:hover,
436
- .top-bar-header .dropdown-menu.menu-dropdown-panel .nav-item.dropdown.open > .nav-link {
437
- background: #f5f6f8 !important;
438
- color: var(--dark-text-color, #222) !important;
439
- text-decoration: none !important;
440
- }
441
-
442
- .top-bar-header .nav-item.dropdown > .nav-link,
443
- .top-bar-header .nav-item.dropdown > .nav-link:focus {
444
- color: var(--Secondary-Light-Color, #999) !important;
445
- }
446
-
447
- .top-bar-header .nav-item.dropdown > .nav-link:hover,
448
- .top-bar-header .nav-item.dropdown.open > .nav-link {
449
- color: #fff !important;
450
- }
451
-
452
- .top-menu-widget__search {
453
- width: 280px;
454
- display: flex;
455
- align-items: center;
456
- }
457
-
458
- ::ng-deep .top-menu-widget__search .dx-texteditor {
459
- border-radius: 6px;
460
- }
461
-
462
- ::ng-deep .top-menu-widget__search .dx-texteditor-input {
463
- color: #333333;
464
- }
465
-
466
- .top-menu-widget__search-item {
467
- display: flex;
468
- flex-direction: column;
469
- text-decoration: none;
470
- }
471
-
472
- .top-menu-widget__search-item-title {
473
- display: flex;
474
- align-items: center;
475
- gap: 4px;
476
- color: #666666;
477
- font-size: 11px;
478
- margin-bottom: 4px;
479
- }
480
-
481
- .top-menu-widget__search-item-subtitle {
482
- color: #222222;
483
- font-size: 13px;
484
- margin-left: 18px;
485
- }
486
-
487
- .top-menu-widget__help-link {
488
- display: inline-flex;
489
- }
490
-
491
- .invisible {
492
- visibility: hidden;
493
- }
494
-
495
- .disabled {
496
- pointer-events: none;
497
- }
498
-
499
- .about-backdrop {
500
- position: fixed;
501
- top: 0;
502
- right: 0;
503
- bottom: 0;
504
- left: 0;
505
- background: rgba(0, 0, 0, 0.45);
506
- z-index: 2000;
507
- display: flex;
508
- align-items: center;
509
- justify-content: center;
510
- }
511
-
512
- .about-modal {
513
- background: #ffffff;
514
- border-radius: 6px;
515
- width: 560px;
516
- max-width: 95vw;
517
- box-shadow: 0 5px 30px rgba(0, 0, 0, 0.25);
518
- overflow: hidden;
519
- }
520
-
521
- .about-modal-header {
522
- display: flex;
523
- align-items: center;
524
- justify-content: space-between;
525
- padding: 14px 20px;
526
- border-bottom: 1px solid #e5e5e5;
527
- }
528
-
529
- .about-modal-title {
530
- margin: 0;
531
- font-size: 18px;
532
- font-weight: 600;
533
- }
534
-
535
- .about-close-btn {
536
- border: 0;
537
- background: transparent;
538
- font-size: 24px;
539
- line-height: 1;
540
- color: #666666;
541
- }
542
-
543
- .about-modal-body {
544
- padding: 20px;
545
- }
546
-
547
- .about-logo {
548
- max-height: 80px;
549
- object-fit: contain;
550
- }
551
-
552
- .about-product-name {
553
- font-size: 20px;
554
- font-weight: 600;
555
- margin-bottom: 8px;
556
- }
557
-
558
- .about-version-text,
559
- .about-copyright {
560
- color: #555555;
561
- }
562
-
563
- .about-modal-actions {
564
- display: flex;
565
- gap: 8px;
566
- justify-content: flex-end;
567
- padding: 0 20px 20px;
568
- }
569
-
570
- .about-action-btn {
571
- border: 1px solid #d0d0d0;
572
- border-radius: 6px;
573
- background: #ffffff;
574
- color: #333333;
575
- padding: 8px 12px;
576
- }
package/src/public-api.ts DELETED
@@ -1,7 +0,0 @@
1
- /*
2
- * Public API Surface of bayan-core-ui
3
- */
4
-
5
- export * from './lib/top-menu-widget/top-menu-widget.component';
6
- export * from './lib/shared/menu.dtos';
7
- export * from './lib/shared/menu.service';
package/tsconfig.lib.json DELETED
@@ -1,16 +0,0 @@
1
- {
2
- "extends": "../../tsconfig.json",
3
- "compilerOptions": {
4
- "outDir": "../../out-tsc/lib",
5
- "declaration": true,
6
- "declarationMap": true,
7
- "inlineSources": true,
8
- "types": []
9
- },
10
- "angularCompilerOptions": {
11
- "compilationMode": "partial"
12
- },
13
- "exclude": [
14
- "**/*.spec.ts"
15
- ]
16
- }
@@ -1,9 +0,0 @@
1
- {
2
- "extends": "./tsconfig.lib.json",
3
- "compilerOptions": {
4
- "declarationMap": false
5
- },
6
- "angularCompilerOptions": {
7
- "compilationMode": "partial"
8
- }
9
- }
@@ -1,13 +0,0 @@
1
- {
2
- "extends": "../../tsconfig.json",
3
- "compilerOptions": {
4
- "outDir": "../../out-tsc/spec",
5
- "types": [
6
- "jasmine"
7
- ]
8
- },
9
- "include": [
10
- "**/*.spec.ts",
11
- "**/*.d.ts"
12
- ]
13
- }