@flusys/ng-layout 3.0.0 → 4.0.0-rc
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/README.md +2 -2
- package/assets/layout/_rtl.scss +482 -0
- package/assets/layout/_topbar.scss +1 -0
- package/assets/layout/layout.scss +1 -0
- package/fesm2022/flusys-ng-layout.mjs +318 -170
- package/fesm2022/flusys-ng-layout.mjs.map +1 -1
- package/package.json +3 -3
- package/types/flusys-ng-layout.d.ts +29 -6
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
| Property | Value |
|
|
12
12
|
|----------|-------|
|
|
13
13
|
| Package | `@flusys/ng-layout` |
|
|
14
|
-
| Version |
|
|
14
|
+
| Version | 4.0.0-rc |
|
|
15
15
|
| Dependencies | ng-core, ng-shared |
|
|
16
16
|
| Build | `npm run build:ng-layout` |
|
|
17
17
|
|
|
@@ -619,4 +619,4 @@ bg-primary / text-primary-contrast /* Primary */
|
|
|
619
619
|
|
|
620
620
|
---
|
|
621
621
|
|
|
622
|
-
**Last Updated:** 2026-02-25 | **Version:** 3.0.
|
|
622
|
+
**Last Updated:** 2026-02-25 | **Version:** 3.0.1 | **Angular:** 21
|
|
@@ -0,0 +1,482 @@
|
|
|
1
|
+
// RTL Support using CSS Logical Properties and dir="rtl" overrides
|
|
2
|
+
|
|
3
|
+
// Base RTL styles
|
|
4
|
+
html[dir='rtl'] {
|
|
5
|
+
// Note: Topbar RTL styles are in _topbar.scss for better specificity
|
|
6
|
+
|
|
7
|
+
// Layout sidebar positioning - move to right side
|
|
8
|
+
.layout-sidebar {
|
|
9
|
+
left: auto;
|
|
10
|
+
right: 0;
|
|
11
|
+
transition:
|
|
12
|
+
transform var(--layout-section-transition-duration),
|
|
13
|
+
right var(--layout-section-transition-duration);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
// Main container margin - apply to right side
|
|
17
|
+
.layout-main-container {
|
|
18
|
+
transition: margin-right var(--layout-section-transition-duration);
|
|
19
|
+
padding-left: 2rem;
|
|
20
|
+
padding-right: 2rem;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// Topbar actions - swap margin for RTL
|
|
24
|
+
.layout-topbar .layout-topbar-actions {
|
|
25
|
+
margin-left: 0;
|
|
26
|
+
margin-right: auto;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
// Menu items - native RTL handles flex direction
|
|
30
|
+
.layout-menu {
|
|
31
|
+
ul {
|
|
32
|
+
a {
|
|
33
|
+
// Swap icon margin for RTL (icon moves to right side naturally)
|
|
34
|
+
.layout-menuitem-icon {
|
|
35
|
+
margin-right: 0 !important;
|
|
36
|
+
margin-left: 0.5rem !important;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.layout-submenu-toggler {
|
|
40
|
+
margin-left: auto;
|
|
41
|
+
margin-right: 0;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Nested menu indentation (RTL) - swap left margin to right
|
|
46
|
+
ul {
|
|
47
|
+
li {
|
|
48
|
+
a {
|
|
49
|
+
margin-left: 0 !important;
|
|
50
|
+
margin-right: 1rem;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
li {
|
|
54
|
+
a {
|
|
55
|
+
margin-right: 2rem;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
li {
|
|
59
|
+
a {
|
|
60
|
+
margin-right: 2.5rem;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
li {
|
|
64
|
+
a {
|
|
65
|
+
margin-right: 3rem;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
li {
|
|
69
|
+
a {
|
|
70
|
+
margin-right: 3.5rem;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
li {
|
|
74
|
+
a {
|
|
75
|
+
margin-right: 4rem;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
li {
|
|
79
|
+
a {
|
|
80
|
+
margin-right: 4.5rem;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
li {
|
|
84
|
+
a {
|
|
85
|
+
margin-right: 5rem;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
li {
|
|
89
|
+
a {
|
|
90
|
+
margin-right: 5.5rem;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// Flip navigation arrows
|
|
106
|
+
.pi-chevron-left::before {
|
|
107
|
+
content: '\e901'; // pi-chevron-right icon code
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.pi-chevron-right::before {
|
|
111
|
+
content: '\e900'; // pi-chevron-left icon code
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// Calendar grid direction
|
|
115
|
+
.calendar-month .grid,
|
|
116
|
+
.calendar-week .grid,
|
|
117
|
+
.calendar-day {
|
|
118
|
+
direction: rtl;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
// Calendar day - time column should align left in RTL (visually on right side)
|
|
122
|
+
.calendar-day .pr-2 {
|
|
123
|
+
padding-right: 0 !important;
|
|
124
|
+
padding-left: 0.5rem !important;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.calendar-day .border-r {
|
|
128
|
+
border-right: none !important;
|
|
129
|
+
border-left: 1px solid var(--surface-border) !important;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// Note: Header dropdown panels use inset-inline-end in component templates
|
|
133
|
+
// (language-selector, notification-bell, launcher, profile, company-branch-selector)
|
|
134
|
+
|
|
135
|
+
// Form labels and inputs
|
|
136
|
+
.p-float-label > label {
|
|
137
|
+
left: auto;
|
|
138
|
+
right: 0.75rem;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
// Checkbox/radio alignment
|
|
142
|
+
.p-checkbox,
|
|
143
|
+
.p-radiobutton {
|
|
144
|
+
margin-right: 0;
|
|
145
|
+
margin-left: 0.5rem;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
// Button icons
|
|
149
|
+
.p-button-icon-left {
|
|
150
|
+
margin-right: 0;
|
|
151
|
+
margin-left: 0.5rem;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.p-button-icon-right {
|
|
155
|
+
margin-left: 0;
|
|
156
|
+
margin-right: 0.5rem;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
// Table - full RTL support
|
|
160
|
+
.p-datatable {
|
|
161
|
+
direction: rtl;
|
|
162
|
+
|
|
163
|
+
.p-datatable-thead > tr > th,
|
|
164
|
+
.p-datatable-tbody > tr > td {
|
|
165
|
+
text-align: right;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
// Actions column (usually last) should be left-aligned
|
|
169
|
+
.p-datatable-thead > tr > th:first-child,
|
|
170
|
+
.p-datatable-tbody > tr > td:first-child {
|
|
171
|
+
text-align: right;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.p-datatable-thead > tr > th:last-child,
|
|
175
|
+
.p-datatable-tbody > tr > td:last-child {
|
|
176
|
+
text-align: left;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
// Paginator - rotate navigation icons
|
|
180
|
+
.p-paginator {
|
|
181
|
+
.p-paginator-first,
|
|
182
|
+
.p-paginator-prev,
|
|
183
|
+
.p-paginator-next,
|
|
184
|
+
.p-paginator-last {
|
|
185
|
+
transform: rotate(180deg);
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
// Toast positioning
|
|
191
|
+
.p-toast {
|
|
192
|
+
&.p-toast-top-right {
|
|
193
|
+
right: auto;
|
|
194
|
+
left: 20px;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
&.p-toast-top-left {
|
|
198
|
+
left: auto;
|
|
199
|
+
right: 20px;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
&.p-toast-bottom-right {
|
|
203
|
+
right: auto;
|
|
204
|
+
left: 20px;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
&.p-toast-bottom-left {
|
|
208
|
+
left: auto;
|
|
209
|
+
right: 20px;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
// Breadcrumb separator - rotate arrow
|
|
214
|
+
.p-breadcrumb {
|
|
215
|
+
.p-menuitem-separator {
|
|
216
|
+
transform: rotate(180deg);
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
// Steps
|
|
221
|
+
.p-steps {
|
|
222
|
+
.p-steps-item::before {
|
|
223
|
+
left: auto;
|
|
224
|
+
right: 50%;
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
// Dialog - swap margins only
|
|
229
|
+
.p-dialog {
|
|
230
|
+
.p-dialog-header-icons {
|
|
231
|
+
margin-left: 0;
|
|
232
|
+
margin-right: auto;
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
// Sidebar panel
|
|
237
|
+
.p-sidebar-left {
|
|
238
|
+
left: auto !important;
|
|
239
|
+
right: 0 !important;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.p-sidebar-right {
|
|
243
|
+
right: auto !important;
|
|
244
|
+
left: 0 !important;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
// Card actions - swap margin
|
|
248
|
+
.card-actions {
|
|
249
|
+
margin-left: 0;
|
|
250
|
+
margin-right: auto;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
// Tag/Badge positioning
|
|
254
|
+
.p-tag,
|
|
255
|
+
.p-badge {
|
|
256
|
+
margin-left: 0;
|
|
257
|
+
margin-right: 0.5rem;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
// Menu items with icons - swap icon margin for RTL
|
|
261
|
+
.p-menuitem-link {
|
|
262
|
+
.p-menuitem-icon {
|
|
263
|
+
margin-right: 0;
|
|
264
|
+
margin-left: 0.5rem;
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
// Accordion - swap toggle icon margin
|
|
269
|
+
.p-accordion {
|
|
270
|
+
.p-accordion-toggle-icon {
|
|
271
|
+
margin-left: 0;
|
|
272
|
+
margin-right: auto;
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
// Tree/TreeTable - swap toggler margin
|
|
277
|
+
.p-tree,
|
|
278
|
+
.p-treetable {
|
|
279
|
+
.p-tree-toggler,
|
|
280
|
+
.p-treetable-toggler {
|
|
281
|
+
margin-right: 0;
|
|
282
|
+
margin-left: 0.5rem;
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
// Text alignment
|
|
287
|
+
.text-left {
|
|
288
|
+
text-align: right !important;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.text-right {
|
|
292
|
+
text-align: left !important;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
// Border utilities
|
|
296
|
+
.border-l {
|
|
297
|
+
border-left: none !important;
|
|
298
|
+
border-right: 1px solid var(--surface-border) !important;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.border-r {
|
|
302
|
+
border-right: none !important;
|
|
303
|
+
border-left: 1px solid var(--surface-border) !important;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
// Margin/padding utilities
|
|
307
|
+
.ml-auto {
|
|
308
|
+
margin-left: 0 !important;
|
|
309
|
+
margin-right: auto !important;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.mr-auto {
|
|
313
|
+
margin-right: 0 !important;
|
|
314
|
+
margin-left: auto !important;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.ml-2 {
|
|
318
|
+
margin-left: 0 !important;
|
|
319
|
+
margin-right: 0.5rem !important;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.mr-2 {
|
|
323
|
+
margin-right: 0 !important;
|
|
324
|
+
margin-left: 0.5rem !important;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.pl-2 {
|
|
328
|
+
padding-left: 0 !important;
|
|
329
|
+
padding-right: 0.5rem !important;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.pr-2 {
|
|
333
|
+
padding-right: 0 !important;
|
|
334
|
+
padding-left: 0.5rem !important;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
// Justify content
|
|
338
|
+
.justify-start {
|
|
339
|
+
justify-content: flex-end !important;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.justify-end {
|
|
343
|
+
justify-content: flex-start !important;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
// Items alignment in flex
|
|
347
|
+
.items-start {
|
|
348
|
+
align-items: flex-start;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
// Scroll container
|
|
352
|
+
.overflow-x-auto {
|
|
353
|
+
direction: rtl;
|
|
354
|
+
|
|
355
|
+
> * {
|
|
356
|
+
direction: rtl;
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
// Gap utilities work automatically with flexbox RTL
|
|
361
|
+
|
|
362
|
+
// Configurator panel RTL - reverse color palette display
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
// Desktop RTL layout adjustments
|
|
366
|
+
@media (min-width: 992px) {
|
|
367
|
+
html[dir='rtl'] {
|
|
368
|
+
.layout-wrapper {
|
|
369
|
+
&.layout-overlay {
|
|
370
|
+
.layout-main-container {
|
|
371
|
+
margin-left: 0;
|
|
372
|
+
margin-right: 0;
|
|
373
|
+
padding-left: 2rem;
|
|
374
|
+
padding-right: 2rem;
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
.layout-sidebar {
|
|
378
|
+
transform: translateX(100%);
|
|
379
|
+
right: 0;
|
|
380
|
+
left: auto;
|
|
381
|
+
border-right: none;
|
|
382
|
+
border-left: 1px solid var(--surface-border);
|
|
383
|
+
border-top-right-radius: 0;
|
|
384
|
+
border-bottom-right-radius: 0;
|
|
385
|
+
border-top-left-radius: var(--content-border-radius);
|
|
386
|
+
border-bottom-left-radius: var(--content-border-radius);
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
&.layout-overlay-active {
|
|
390
|
+
.layout-sidebar {
|
|
391
|
+
transform: translateX(0);
|
|
392
|
+
}
|
|
393
|
+
}
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
&.layout-static {
|
|
397
|
+
.layout-main-container {
|
|
398
|
+
margin-left: 0;
|
|
399
|
+
margin-right: 22rem;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
.layout-sidebar {
|
|
403
|
+
right: 0;
|
|
404
|
+
left: auto;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
&.layout-static-inactive {
|
|
408
|
+
.layout-sidebar {
|
|
409
|
+
transform: translateX(100%);
|
|
410
|
+
right: 0;
|
|
411
|
+
left: auto;
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
.layout-main-container {
|
|
415
|
+
margin-right: 0;
|
|
416
|
+
padding-right: 2rem;
|
|
417
|
+
}
|
|
418
|
+
}
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
}
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
// Mobile RTL layout adjustments
|
|
425
|
+
@media (max-width: 991px) {
|
|
426
|
+
html[dir='rtl'] {
|
|
427
|
+
.layout-wrapper {
|
|
428
|
+
.layout-main-container {
|
|
429
|
+
margin-left: 0;
|
|
430
|
+
margin-right: 0;
|
|
431
|
+
padding-left: 2rem;
|
|
432
|
+
padding-right: 2rem;
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
.layout-sidebar {
|
|
436
|
+
transform: translateX(100%);
|
|
437
|
+
right: 0;
|
|
438
|
+
left: auto;
|
|
439
|
+
top: 0;
|
|
440
|
+
height: 100vh;
|
|
441
|
+
border-right: none;
|
|
442
|
+
border-left: 1px solid var(--surface-border);
|
|
443
|
+
border-top-right-radius: 0;
|
|
444
|
+
border-bottom-right-radius: 0;
|
|
445
|
+
border-top-left-radius: var(--content-border-radius);
|
|
446
|
+
border-bottom-left-radius: var(--content-border-radius);
|
|
447
|
+
transition:
|
|
448
|
+
transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
|
|
449
|
+
right 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
&.layout-mobile-active {
|
|
453
|
+
.layout-sidebar {
|
|
454
|
+
transform: translateX(0);
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
.layout-mask {
|
|
458
|
+
display: block;
|
|
459
|
+
}
|
|
460
|
+
}
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
.layout-topbar {
|
|
464
|
+
.layout-topbar-menu {
|
|
465
|
+
right: auto;
|
|
466
|
+
left: 2rem;
|
|
467
|
+
|
|
468
|
+
.layout-topbar-menu-content {
|
|
469
|
+
align-items: stretch;
|
|
470
|
+
}
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
// Topbar menu items - swap icon margin for RTL
|
|
474
|
+
.layout-topbar-menu .layout-topbar-action {
|
|
475
|
+
i {
|
|
476
|
+
margin-right: 0;
|
|
477
|
+
margin-left: 0.5rem;
|
|
478
|
+
}
|
|
479
|
+
}
|
|
480
|
+
}
|
|
481
|
+
}
|
|
482
|
+
}
|