@posiwise/core-styles 1.0.10 → 1.0.12

package/scss/shared/_prime-ng.scss

@@ -1,3 +1,6 @@
+@use 'sass:map';
+@use '../variables' as *;
+
 * {
     box-sizing: border-box;
 }
@@ -1508,12 +1511,29 @@ body {
         }
     }
 
-    p-calendar.ng-dirty.ng-invalid {
+    p-datepicker.ng-dirty.ng-invalid {
         > .ui-calendar {
             > .ui-inputtext {
                 border-color: $invalidInput;
             }
         }
+
+        // PrimeNG 21+ (p-datepicker host — no inner .ui-calendar)
+        .p-datepicker-input {
+            border-color: $invalidInput;
+        }
+    }
+
+    // PrimeNG 21 DatePicker host is inline-flex; Bootstrap .d-block uses display:block !important and breaks input + dropdown trigger layout
+    p-datepicker.d-block {
+        display: inline-flex !important;
+        width: 100%;
+        max-width: 100%;
+    }
+
+    // PrimeNG 21+: <p-datepicker> is the .p-datepicker.p-inputwrapper root (legacy p-calendar used an inner span). :has() rules in @primeuix/styles expect this host to wrap .p-datepicker-input + .p-datepicker-dropdown.
+    p-datepicker.p-datepicker {
+        max-width: 100%;
     }
 
     p-chips.ng-dirty.ng-invalid {
@@ -2999,21 +3019,33 @@ body {
             }
         }
 
-        .p-sortable-column-icon {
+        // PrimeNG 21+: .p-datatable-sort-icon replaces legacy .p-sortable-column-icon
+        .p-datatable-sort-icon {
             color: rgb(255 255 255) !important;
 
+            width: var(--p-icon-size);
+            height: var(--p-icon-size);
             &:hover {
                 color: rgb(255 255 255) !important;
             }
+
+            svg {
+                fill: currentColor;
+            }
         }
 
-        .p-sortable-column-icon.p-highlight {
+        // Sorted column: replaces .p-sortable-column-icon.p-highlight
+        .p-datatable-thead > tr > th.p-datatable-column-sorted .p-datatable-sort-icon {
             background-color: $ng-primary-color !important;
             color: rgb(255 255 255) !important;
 
             &:hover {
                 color: rgb(255 255 255) !important;
             }
+
+            svg {
+                fill: currentColor;
+            }
         }
 
         .ui-column-resizer-helper {
@@ -5179,7 +5211,7 @@ p-table {
 }
 
 .p-menuitem-link-active {
-    color: map-get($danger, base) !important;
+    color: map.get($danger, base) !important;
     font-weight: 600;
 }
 

package/scss/variables/_app-colors-variables.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 // ================================================================================================
 //  These colors are used to defines element colors in palette
 // ================================================================================================
@@ -500,124 +501,124 @@ $branding-colors: (
 // Map variable
 $gradient-colors: (
     gradient-indigo-light-blue: (
-        'start-color': map-get($indigo, lighten-4),
-        'end-color': map-get($light-blue, lighten-4)
+        'start-color': map.get($indigo, lighten-4),
+        'end-color': map.get($light-blue, lighten-4)
     ),
     gradient-light-blue-indigo: (
-        'start-color': map-get($light-blue, lighten-4),
-        'end-color': map-get($indigo, lighten-3)
+        'start-color': map.get($light-blue, lighten-4),
+        'end-color': map.get($indigo, lighten-3)
     ),
     gradient-yellow-green: (
-        'start-color': map-get($yellow, accent-1),
-        'end-color': map-get($green, accent-1)
+        'start-color': map.get($yellow, accent-1),
+        'end-color': map.get($green, accent-1)
     ),
     gradient-orange-deep-orange: (
-        'start-color': map-get($orange, lighten-4),
-        'end-color': map-get($deep-orange, lighten-4)
+        'start-color': map.get($orange, lighten-4),
+        'end-color': map.get($deep-orange, lighten-4)
     ),
     gradient-deep-purple-purple: (
-        'start-color': map-get($deep-purple, lighten-4),
-        'end-color': map-get($purple, lighten-5)
+        'start-color': map.get($deep-purple, lighten-4),
+        'end-color': map.get($purple, lighten-5)
     ),
     gradient-red-pink: (
-        'start-color': map-get($red-color, accent-2),
-        'end-color': map-get($pink, lighten-3)
+        'start-color': map.get($red-color, accent-2),
+        'end-color': map.get($pink, lighten-3)
     ),
     gradient-light-green-amber: (
-        'start-color': map-get($light-green, lighten-3),
-        'end-color': map-get($amber, lighten-5)
+        'start-color': map.get($light-green, lighten-3),
+        'end-color': map.get($amber, lighten-5)
     ),
     gradient-amber-amber: (
-        'start-color': map-get($amber, darken-4),
-        'end-color': map-get($amber, lighten-1)
+        'start-color': map.get($amber, darken-4),
+        'end-color': map.get($amber, lighten-1)
     ),
     gradient-purple-pink: (
-        'start-color': map-get($purple, accent-1),
-        'end-color': map-get($pink, lighten-5)
+        'start-color': map.get($purple, accent-1),
+        'end-color': map.get($pink, lighten-5)
     ),
     gradient-indigo-dark-blue: (
-        'start-color': map-get($indigo, darken-1),
-        'end-color': map-get($light-blue, lighten-2)
+        'start-color': map.get($indigo, darken-1),
+        'end-color': map.get($light-blue, lighten-2)
     ),
     gradient-teal-cyan: (
-        'start-color': map-get($teal, lighten-5),
-        'end-color': map-get($cyan, accent-3)
+        'start-color': map.get($teal, lighten-5),
+        'end-color': map.get($cyan, accent-3)
     ),
     gradient-blue-grey-blue-grey: (
-        'start-color': map-get($blue-grey, lighten-4),
-        'end-color': map-get($blue-grey, darken-1)
+        'start-color': map.get($blue-grey, lighten-4),
+        'end-color': map.get($blue-grey, darken-1)
     ),
     gradient-cyan-dark-green: (
-        'start-color': map-get($cyan, darken-2),
-        'end-color': map-get($light-green, accent-2)
+        'start-color': map.get($cyan, darken-2),
+        'end-color': map.get($light-green, accent-2)
     ),
     gradient-orange-amber: (
-        'start-color': map-get($orange, darken-4),
-        'end-color': map-get($amber, darken-2)
+        'start-color': map.get($orange, darken-4),
+        'end-color': map.get($amber, darken-2)
     ),
     gradient-indigo-blue: (
-        'start-color': map-get($indigo, darken-2),
-        'end-color': map-get($blue, darken-2)
+        'start-color': map.get($indigo, darken-2),
+        'end-color': map.get($blue, darken-2)
     ),
     gradient-brown-brown: (
-        'start-color': map-get($brown, darken-1),
-        'end-color': map-get($brown, lighten-4)
+        'start-color': map.get($brown, darken-1),
+        'end-color': map.get($brown, lighten-4)
     ),
     gradient-blue-grey-blue: (
-        'start-color': map-get($blue-grey, darken-4),
-        'end-color': map-get($blue, accent-3)
+        'start-color': map.get($blue-grey, darken-4),
+        'end-color': map.get($blue, accent-3)
     ),
     gradient-purple-deep-orange: (
-        'start-color': map-get($purple, darken-1),
-        'end-color': map-get($deep-orange, accent-2)
+        'start-color': map.get($purple, darken-1),
+        'end-color': map.get($deep-orange, accent-2)
     ),
     gradient-green-teal: (
-        'start-color': map-get($green, darken-1),
-        'end-color': map-get($teal, accent-3)
+        'start-color': map.get($green, darken-1),
+        'end-color': map.get($teal, accent-3)
     ),
     gradient-purple-light-blue: (
-        'start-color': map-get($purple, accent-2),
-        'end-color': map-get($light-blue, lighten-2)
+        'start-color': map.get($purple, accent-2),
+        'end-color': map.get($light-blue, lighten-2)
     ),
     gradient-cyan-cyan: (
-        'start-color': map-get($cyan, accent-2),
-        'end-color': map-get($cyan, accent-3)
+        'start-color': map.get($cyan, accent-2),
+        'end-color': map.get($cyan, accent-3)
     ),
     gradient-yellow-teal: (
-        'start-color': map-get($yellow, lighten-4),
-        'end-color': map-get($teal, accent-2)
+        'start-color': map.get($yellow, lighten-4),
+        'end-color': map.get($teal, accent-2)
     ),
     gradient-purple-deep-purple: (
-        'start-color': map-get($purple, darken-2),
-        'end-color': map-get($deep-purple, accent-2)
+        'start-color': map.get($purple, darken-2),
+        'end-color': map.get($deep-purple, accent-2)
     ),
     gradient-cyan-light-green: (
-        'start-color': map-get($cyan, accent-3),
-        'end-color': map-get($light-green, accent-1)
+        'start-color': map.get($cyan, accent-3),
+        'end-color': map.get($light-green, accent-1)
     ),
     gradient-purple-amber: (
-        'start-color': map-get($purple, accent-3),
-        'end-color': map-get($amber, darken-2)
+        'start-color': map.get($purple, accent-3),
+        'end-color': map.get($amber, darken-2)
     ),
     gradient-indigo-purple: (
-        'start-color': map-get($indigo, darken-2),
-        'end-color': map-get($purple, darken-2)
+        'start-color': map.get($indigo, darken-2),
+        'end-color': map.get($purple, darken-2)
     ),
     gradient-deep-purple-blue: (
-        'start-color': map-get($deep-purple, accent-4),
-        'end-color': map-get($blue, darken-2)
+        'start-color': map.get($deep-purple, accent-4),
+        'end-color': map.get($blue, darken-2)
     ),
     gradient-deep-orange-orange: (
-        'start-color': map-get($deep-orange, darken-4),
-        'end-color': map-get($orange, darken-2)
+        'start-color': map.get($deep-orange, darken-4),
+        'end-color': map.get($orange, darken-2)
     ),
     gradient-light-blue-cyan: (
-        'start-color': map-get($light-blue, darken-2),
-        'end-color': map-get($cyan, lighten-1)
+        'start-color': map.get($light-blue, darken-2),
+        'end-color': map.get($cyan, lighten-1)
     ),
     gradient-blue-indigo: (
-        'start-color': map-get($blue, accent-4),
-        'end-color': map-get($indigo, darken-1)
+        'start-color': map.get($blue, accent-4),
+        'end-color': map.get($indigo, darken-1)
     ),
     gradient-strawberry: (
         'start-color': rgb(254 11 70),

package/scss/variables/_primeng-variables.scss

@@ -1,5 +1,8 @@
+@use 'sass:map';
+@use 'app-colors-variables' as *;
 /* Product list page color  */
-$ng-primary-color: map-get($primary, base);
+
+$ng-primary-color: map.get($primary, base);
 
 /* Prime page border color  */
 $ng-gray: rgb(249 249 249);
@@ -43,7 +46,7 @@ $toastIcon2: rgb(218 25 0);
 $toast-msg-success: rgb(33 33 33);
 
 /* background-color */
-$toast-msg-success-bg: map-get($primary, base);
+$toast-msg-success-bg: map.get($primary, base);
 
 /* prime warning message color and border color  */
 $toast-msg-warning: rgb(255 240 210);