@mediusinc/mng-commons 3.6.0 → 4.0.0-rc.1

package/scss/v2/theme/theme-base/components/data/_treetable.scss

@@ -9,7 +9,7 @@
         border-radius: 0;
     }
 
-   .p-treetable-header {
+    .p-treetable-header {
         background: $tableHeaderBg;
         color: $tableHeaderTextColor;
         border: $tableHeaderBorder;
@@ -109,7 +109,7 @@
 
                 p-treetablecheckbox .p-checkbox {
                     margin-right: $inlineSpacing;
-                    
+
                     .p-indeterminate {
                         .p-checkbox-icon {
                             color: $textColor;
@@ -118,7 +118,7 @@
                 }
             }
 
-            &:focus {
+            &:focus-visible {
                 outline: 0.15rem solid $focusOutlineColor;
                 outline-offset: -0.15rem;
             }
@@ -133,7 +133,6 @@
                     &:hover {
                         color: $highlightTextColor;
                     }
-                    
                 }
             }
         }

package/scss/v2/theme/theme-base/components/file/_fileupload.scss

@@ -24,6 +24,12 @@
         color: $panelContentTextColor;
         border-bottom-right-radius: $borderRadius;
         border-bottom-left-radius: $borderRadius;
+
+        &.p-fileupload-highlight {
+            border-color: $fileUploadContentHoverBorder;
+            border-style: dashed;
+            background-color: $highlightBg;
+        }
     }
 
     .p-progressbar {

package/scss/v2/theme/theme-base/components/input/_autocomplete.scss

@@ -11,24 +11,29 @@
         }
     }
 
-    .p-autocomplete-multiple-container {
-        padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
-        gap: $inlineSpacing;
-
-        &:not(.p-disabled):hover {
+    &:not(.p-disabled):hover {
+        .p-autocomplete-multiple-container {
             border-color: $inputHoverBorderColor;
         }
+    }
 
-        &:not(.p-disabled).p-focus {
+    &:not(.p-disabled).p-focus {
+        .p-autocomplete-multiple-container {
             @include focused-input();
         }
+    }
+
+    .p-autocomplete-multiple-container {
+        padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+        gap: $inlineSpacing;
 
         .p-autocomplete-input-token {
             padding: math.div(nth($inputPadding, 1), 2) 0;
 
             input {
-                font-family: $fontFamily;
-                font-size: $fontSize;
+                font-family: var(--font-family);
+                font-feature-settings: var(--font-feature-settings, normal);
+                font-size: $inputTextFontSize;
                 color: $textColor;
                 padding: 0;
                 margin: 0;
@@ -37,19 +42,24 @@
 
         .p-autocomplete-token {
             padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
-            background: $highlightBg;
-            color: $highlightTextColor;
-            border-radius: $borderRadius;
+            background: $chipBg;
+            color: $chipTextColor;
+            border-radius: $chipBorderRadius;
 
             .p-autocomplete-token-icon {
                 margin-left: $inlineSpacing;
             }
+
+            &.p-focus {
+                background: $chipFocusBg;
+                color: $chipFocusTextColor;
+            }
         }
     }
-}
 
-p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
-    @include invalid-input();
+    &.p-invalid.p-component > .p-inputtext {
+        @include invalid-input();
+    }
 }
 
 .p-autocomplete-panel {
@@ -71,21 +81,26 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
             transition: $listItemTransition;
             border-radius: $inputListItemBorderRadius;
 
-            &:hover {
-                color: $inputListItemTextHoverColor;
-                background: $inputListItemHoverBg;
-            }
-
             &.p-highlight {
                 color: $highlightTextColor;
                 background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
             }
-        }
 
-        .p-autocomplete-empty-message {
-            padding: $inputListItemPadding;
-            color: $inputListItemTextColor;
-            background: $inputListItemBg;
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextFocusColor;
+                    background: $inputListItemFocusBg;
+                }
+
+                &:hover {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
         }
 
         .p-autocomplete-item-group {
@@ -98,6 +113,10 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
     }
 }
 
+p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
+    @include invalid-input();
+}
+
 p-autocomplete.p-autocomplete-clearable {
     .p-inputtext {
         padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;

package/scss/v2/theme/theme-base/components/input/_calendar.scss

@@ -2,6 +2,10 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
     @include invalid-input();
 }
 
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    @include focused-input();
+}
+
 .p-datepicker {
     padding: $calendarPadding;
     background: $calendarInlineBg;
@@ -120,7 +124,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
             @include action-icon();
 
             &:last-child {
-                margin-top: .2em;
+                margin-top: 0.2em;
             }
         }
 
@@ -231,21 +235,20 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
             }
         }
     }
-
 }
 
 p-calendar.p-calendar-clearable {
     .p-inputtext {
         padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
     }
-    
+
     .p-calendar-clear-icon {
         color: $inputIconColor;
         right: nth($inputPadding, 2);
     }
 }
 
-p-calendar.p-calendar-clearable.p-calendar-w-btn {
+p-calendar.p-calendar-clearable .p-calendar-w-btn {
     .p-calendar-clear-icon {
         color: $inputIconColor;
         right: $buttonIconOnlyWidth + nth($inputPadding, 2);
@@ -255,7 +258,8 @@ p-calendar.p-calendar-clearable.p-calendar-w-btn {
 @media screen and (max-width: $calendarBreakpoint) {
     .p-datepicker {
         table {
-            th, td {
+            th,
+            td {
                 padding: $calendarCellDatePaddingSM;
             }
         }

package/scss/v2/theme/theme-base/components/input/_cascadeselect.scss

@@ -1,5 +1,4 @@
 @use 'sass:math';
-
 .p-cascadeselect {
     background: $inputBg;
     border: $inputBorder;
@@ -36,6 +35,10 @@
         border-top-right-radius: $borderRadius;
         border-bottom-right-radius: $borderRadius;
     }
+
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
 }
 
 .p-cascadeselect-panel {
@@ -56,40 +59,38 @@
             transition: $listItemTransition;
             border-radius: $inputListItemBorderRadius;
 
-            .p-cascadeselect-item-content {
-                padding: $inputListItemPadding;
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
 
-                &:focus {
-                    @include focused-listitem();
+                &.p-focus {
+                    background: $highlightFocusBg;
                 }
             }
 
-            &.p-highlight {
-                color: $highlightTextColor;
-                background: $highlightBg;
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextFocusColor;
+                    background: $inputListItemFocusBg;
+                }
+
+                &:hover {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
             }
 
-            &:not(.p-highlight):not(.p-disabled):hover {
-                color: $inputListItemTextHoverColor;
-                background: $inputListItemHoverBg;
+            .p-cascadeselect-item-content {
+                padding: $inputListItemPadding;
             }
 
             .p-cascadeselect-group-icon {
                 font-size: $menuitemSubmenuIconFontSize;
             }
-
-            .p-icon {
-                width: $menuitemSubmenuIconFontSize;
-                height: $menuitemSubmenuIconFontSize;
-            }
         }
     }
 }
 
-p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
-    @include invalid-input();
-}
-
 .p-input-filled {
     .p-cascadeselect {
         background: $inputFilledBg;
@@ -104,6 +105,10 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
     }
 }
 
+p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
+    @include invalid-input();
+}
+
 p-cascadeselect.p-cascadeselect-clearable {
     .p-cascadeselect-label {
         padding-right: nth($inputPadding, 2);

package/scss/v2/theme/theme-base/components/input/_checkbox.scss

@@ -16,7 +16,7 @@
             color: $checkboxIconActiveColor;
             font-size: $checkboxIconFontSize;
         }
-        
+
         .p-icon {
             width: $checkboxIconFontSize;
             height: $checkboxIconFontSize;
@@ -38,7 +38,7 @@
                 @include focused-input();
             }
 
-            &.p-highlight:hover {    
+            &.p-highlight:hover {
                 border-color: $checkboxActiveHoverBorderColor;
                 background: $checkboxActiveHoverBg;
                 color: $checkboxIconActiveHoverColor;
@@ -66,8 +66,8 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
                 &:hover {
                     background-color: $inputFilledHoverBg;
                 }
-        
-                &.p-highlight:hover {    
+
+                &.p-highlight:hover {
                     background: $checkboxActiveHoverBg;
                 }
             }
@@ -87,4 +87,8 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
             }
         }
     }
-} 
+}
+
+p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
+    @include invalid-input();
+}

package/scss/v2/theme/theme-base/components/input/_chips.scss

@@ -1,23 +1,33 @@
 @use 'sass:math';
 
 .p-chips {
-    .p-chips-multiple-container {
-        padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
-        gap: $inlineSpacing;
-
-        &:not(.p-disabled):hover {
+    &:not(.p-disabled):hover {
+        .p-chips-multiple-container {
             border-color: $inputHoverBorderColor;
         }
+    }
 
-        &:not(.p-disabled).p-focus {
+    &:not(.p-disabled).p-focus {
+        .p-chips-multiple-container {
             @include focused-input();
         }
+    }
+
+    .p-chips-multiple-container {
+        padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+        gap: $inlineSpacing;
 
         .p-chips-token {
             padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
-            background: $highlightBg;
-            color: $highlightTextColor;
-            border-radius: $borderRadius;
+            margin-right: $inlineSpacing;
+            background: $chipBg;
+            color: $chipTextColor;
+            border-radius: $chipBorderRadius;
+
+            &.p-focus {
+                background: $chipFocusBg;
+                color: $chipFocusTextColor;
+            }
 
             .p-chips-token-icon {
                 margin-left: $inlineSpacing;
@@ -26,10 +36,11 @@
 
         .p-chips-input-token {
             padding: math.div(nth($inputPadding, 1), 2) 0;
-                
+
             input {
-                font-family: $fontFamily;
-                font-size: $fontSize;
+                font-family: var(--font-family);
+                font-feature-settings: var(--font-feature-settings, normal);
+                font-size: $inputTextFontSize;
                 color: $textColor;
                 padding: 0;
                 margin: 0;
@@ -50,5 +61,5 @@ p-chips.p-chips-clearable {
     .p-chips-clear-icon {
         color: $inputIconColor;
         right: nth($inputPadding, 2);
-    } 
+    }
 }

package/scss/v2/theme/theme-base/components/input/_dropdown.scss

@@ -26,6 +26,7 @@
             color: $inputPlaceholderTextColor;
         }
 
+        &:focus,
         &:enabled:focus {
             outline: 0 none;
             box-shadow: none;
@@ -44,6 +45,10 @@
         color: $inputIconColor;
         right: $inputGroupAddOnMinWidth;
     }
+
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
 }
 
 .p-dropdown-panel {
@@ -88,18 +93,23 @@
             &.p-highlight {
                 color: $highlightTextColor;
                 background: $highlightBg;
-            }
 
-            &:not(.p-highlight):not(.p-disabled):hover {
-                color: $inputListItemTextHoverColor;
-                background: $inputListItemHoverBg;
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
             }
-        }
 
-        .p-dropdown-empty-message {
-            padding: $inputListItemPadding;
-            color: $inputListItemTextColor;
-            background: $inputListItemBg;
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextFocusColor;
+                    background: $inputListItemFocusBg;
+                }
+
+                &:hover {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
         }
 
         .p-dropdown-item-group {
@@ -109,11 +119,13 @@
             background: $submenuHeaderBg;
             font-weight: $submenuHeaderFontWeight;
         }
-    }
-}
 
-p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    @include invalid-input();
+        .p-dropdown-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
 }
 
 .p-input-filled {
@@ -133,3 +145,7 @@ p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
         }
     }
 }
+
+p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
+    @include invalid-input();
+}

package/scss/v2/theme/theme-base/components/input/_editor.scss

@@ -10,11 +10,11 @@
             .ql-stroke {
                 stroke: $editorToolbarIconColor;
             }
-    
+
             .ql-fill {
                 fill: $editorToolbarIconColor;
             }
-    
+
             .ql-picker {
                 .ql-picker-label {
                     border: 0 none;
@@ -26,7 +26,7 @@
                         .ql-stroke {
                             stroke: $editorToolbarIconHoverColor;
                         }
-                
+
                         .ql-fill {
                             fill: $editorToolbarIconHoverColor;
                         }
@@ -40,7 +40,7 @@
                         .ql-stroke {
                             stroke: $editorToolbarIconHoverColor;
                         }
-                
+
                         .ql-fill {
                             fill: $editorToolbarIconHoverColor;
                         }
@@ -48,14 +48,14 @@
 
                     .ql-picker-options {
                         background: $inputOverlayBg;
-                        border:$inputOverlayBorder;
-                        box-shadow:$inputOverlayShadow;
+                        border: $inputOverlayBorder;
+                        box-shadow: $inputOverlayShadow;
                         border-radius: $borderRadius;
                         padding: $inputListPadding;
 
                         .ql-picker-item {
                             color: $inputListItemTextColor;
-                            
+
                             &:hover {
                                 color: $inputListItemTextHoverColor;
                                 background: $inputListItemHoverBg;

package/scss/v2/theme/theme-base/components/input/_inputgroup.scss

@@ -14,8 +14,7 @@
 
 .p-inputgroup {
     > .p-component,
-    > .p-element,
-    > .p-inputwrapper > .p-component > .p-inputtext,
+    > .p-inputwrapper > .p-inputtext,
     > .p-float-label > .p-component {
         border-radius: 0;
         margin: 0;

package/scss/v2/theme/theme-base/components/input/_inputmask.scss

@@ -8,9 +8,9 @@ p-inputmask.p-inputmask-clearable {
     .p-inputtext {
         padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
     }
-    
+
     .p-inputmask-clear-icon {
         color: $inputIconColor;
         right: nth($inputPadding, 2);
     }
-}
+}

package/scss/v2/theme/theme-base/components/input/_inputnumber.scss

@@ -6,7 +6,7 @@ p-inputnumber.p-inputnumber-clearable {
     .p-inputnumber-input {
         padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
     }
-    
+
     .p-inputnumber-clear-icon {
         color: $inputIconColor;
         right: nth($inputPadding, 2);
@@ -14,15 +14,15 @@ p-inputnumber.p-inputnumber-clearable {
 }
 
 p-inputnumber.p-inputnumber-clearable {
-    .p-inputnumber-buttons-stacked{
+    .p-inputnumber-buttons-stacked {
         .p-inputnumber-clear-icon {
-           right: $buttonIconOnlyWidth + nth($inputPadding, 2);
+            right: $buttonIconOnlyWidth + nth($inputPadding, 2);
         }
     }
-    
-    .p-inputnumber-buttons-horizontal{
+
+    .p-inputnumber-buttons-horizontal {
         .p-inputnumber-clear-icon {
-           right: $buttonIconOnlyWidth + nth($inputPadding, 2);
+            right: $buttonIconOnlyWidth + nth($inputPadding, 2);
         }
     }
-}
+}

package/scss/v2/theme/theme-base/components/input/_inputswitch.scss

@@ -44,7 +44,7 @@
 
             &:before {
                 background: $inputSwitchHandleOnBg;
-             }
+            }
         }
 
         &:not(.p-disabled):hover {
@@ -55,6 +55,6 @@
     }
 }
 
-p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
+p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider {
     @include invalid-input();
-}
+}

package/scss/v2/theme/theme-base/components/input/_inputtext.scss

@@ -1,5 +1,6 @@
 .p-inputtext {
-    font-family: $fontFamily;
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
     font-size: $inputTextFontSize;
     color: $inputTextColor;
     background: $inputBg;
@@ -67,8 +68,8 @@
 }
 
 @include placeholder {
-    color: $inputPlaceholderTextColor
-};
+    color: $inputPlaceholderTextColor;
+}
 
 .p-input-filled {
     .p-inputtext {

package/scss/v2/theme/theme-base/components/input/_listbox.scss

@@ -3,6 +3,7 @@
     color: $inputListTextColor;
     border: $inputListBorder;
     border-radius: $borderRadius;
+    transition: $formElementTransition;
 
     .p-listbox-header {
         padding: $inputListHeaderPadding;
@@ -29,6 +30,7 @@
 
     .p-listbox-list {
         padding: $inputListPadding;
+        outline: 0 none;
 
         .p-listbox-item {
             margin: $inputListItemMargin;
@@ -43,10 +45,6 @@
                 background: $highlightBg;
             }
 
-            &:focus {
-                @include focused-listitem();
-            }
-
             .p-checkbox {
                 margin-right: $inlineSpacing;
             }
@@ -69,14 +67,31 @@
 
     &:not(.p-disabled) {
         .p-listbox-item {
-            &:not(.p-highlight):not(.p-disabled):hover {
-                color: $inputListItemTextHoverColor;
-                background: $inputListItemHoverBg;
+            &.p-highlight {
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextFocusColor;
+                    background: $inputListItemFocusBg;
+                }
+
+                &:hover {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
             }
         }
     }
+
+    &.p-focus {
+        @include focused-input();
+    }
 }
 
 p-listbox.ng-dirty.ng-invalid > .p-listbox {
     @include invalid-input();
-}
+}