igniteui-angular 20.0.12 → 20.1.0-alpha.0

package/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -814,11 +814,9 @@
         %date-inner {
             color: var-get($theme, 'weekend-color');
 
-            @if $variant == 'indigo' {
-                &:hover {
-                    color: var-get($theme, 'date-hover-foreground');
-                }
-            }
+           &:hover {
+               color: var-get($theme, 'date-hover-foreground');
+           }
         }
     }
 

package/lib/core/styles/components/combo/_combo-theme.scss

@@ -136,20 +136,6 @@
     }
 
     @if $variant == 'bootstrap' {
-        .igx-input-group--disabled {
-            %igx-combo__toggle-button {
-                border-inline-start-width: rem(1px);
-                border-inline-start-style: solid;
-                border-inline-start-color: inherit;
-            }
-        }
-
-        igx-suffix:not(.igx-combo__clear-button) + %igx-combo__toggle-button {
-            border-inline-start-width: rem(1px);
-            border-inline-start-style: solid;
-            border-inline-start-color: inherit;
-        }
-
         .igx-input-group__bundle::after {
             height: rem(1px) !important;
         }

package/lib/core/styles/components/input/_input-group-theme.scss

@@ -612,7 +612,7 @@
     %bootstrap-file-focused,
     %bootstrap-file-valid,
     %bootstrap-file-warning,
-    %bootstrap-file-invalid,
+    %bootstrap-file-invalid
     {
         %form-group-bundle {
             border-radius: var-get($theme, 'box-border-radius');
@@ -670,11 +670,27 @@
         %form-group-bundle {
             box-shadow: 0 0 0 rem(4px) var-get($theme, 'success-shadow-color');
         }
+
+        %form-group-prefix:not(:first-child) {
+            border-inline-start-color: var-get($theme, 'success-secondary-color');
+        }
+
+        %form-group-suffix:not(:last-child) {
+            border-inline-end-color: var-get($theme, 'success-secondary-color');
+        }
     }
 
     %bootstrap-file-warning-focused {
         %form-group-bundle {
             box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: '500', $opacity: .38);
+
+            %form-group-prefix:not(:first-child) {
+                border-inline-start-color: var-get($theme, 'warning-secondary-color');
+            }
+    
+            %form-group-suffix:not(:last-child) {
+                border-inline-end-color: var-get($theme, 'warning-secondary-color');
+            }
         }
     }
 
@@ -682,6 +698,14 @@
         %form-group-bundle {
             box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
         }
+
+        %form-group-prefix:not(:first-child) {
+            border-inline-start-color: var-get($theme, 'error-secondary-color');
+        }
+
+        %form-group-suffix:not(:last-child) {
+            border-inline-end-color: var-get($theme, 'error-secondary-color');
+        }
     }
 
     @if $variant == 'bootstrap' {
@@ -691,6 +715,14 @@
             %upload-button {
                 border-color: var-get($theme, 'focused-border-color');
             }
+
+            %form-group-prefix:not(:first-child) {
+                border-inline-start-color: var-get($theme, 'focused-border-color');
+            }
+
+            %form-group-suffix:not(:last-child) {
+                border-inline-end-color: var-get($theme, 'focused-border-color');
+            }
         }
     }
 
@@ -2015,11 +2047,6 @@
                 };
             }
         }
-
-        .igx-input-group__clear-icon + igx-suffix,
-        .igx-input-group__clear-icon + [igxPrefix] {
-            border-inline-start: rem(1px) solid var-get($theme, 'border-color');
-        }
     }
 
     %form-group-display--bootstrap-suffixed-focused {
@@ -2284,6 +2311,24 @@
         border-color: var-get($theme, 'disabled-border-color');
         color: var-get($theme, 'disabled-text-color');
     }
+
+    %form-group-prefix--disabled-bootstrap:not(:first-child) {
+        border-inline-start-color: var-get($theme, 'disabled-border-color');
+    }
+
+    %form-group-suffix--disabled-bootstrap:not(:last-child) {
+        border-inline-end-color: var-get($theme, 'disabled-border-color');
+    }
+
+    @if $variant == 'bootstrap' {
+        %form-group-prefix:not(:first-child) {
+            border-inline-start: rem(1px) solid var-get($theme, 'border-color');
+        }
+
+        %form-group-suffix:not(:last-child) {
+            border-inline-end: rem(1px) solid var-get($theme, 'border-color');
+        }
+    }
 }
 
 /// Adds typography styles for the igx-input-group component.

package/lib/core/styles/components/select/_select-theme.scss

@@ -13,22 +13,6 @@
         display: block;
     }
 
-    @if $variant == 'bootstrap' {
-        .igx-input-group--disabled {
-            %igx-select__toggle-button {
-                border-inline-start-width: rem(1px);
-                border-inline-start-style: solid;
-                border-inline-start-color: inherit;
-            }
-        }
-
-        igx-suffix + %igx-select__toggle-button {
-            border-inline-start-width: rem(1px);
-            border-inline-start-style: solid;
-            border-inline-start-color: inherit;
-        }
-    }
-
     .igx-input-group {
         %igx-select__toggle-button {
             background: var-get($theme, 'toggle-button-background');

package/lib/core/styles/components/tooltip/_tooltip-component.scss

@@ -10,6 +10,22 @@
 
         @extend %tooltip-display !optional;
 
+        @include m(top) {
+            @extend %arrow--top !optional;
+        }
+
+        @include m(bottom) {
+            @extend %arrow--bottom !optional;
+        }
+
+        @include m(left) {
+            @extend %arrow--left !optional;
+        }
+
+        @include m(right) {
+            @extend %arrow--right !optional;
+        }
+
         @include m(hidden) {
             @extend %tooltip--hidden !optional;
         }

package/lib/core/styles/components/tooltip/_tooltip-theme.scss

@@ -8,23 +8,58 @@
     @include css-vars($theme);
     $variant: map.get($theme, '_meta', 'theme');
 
+    $transparent-border: rem(4px) solid transparent;
+    $color-border: rem(4px) solid var-get($theme, 'background');
+
     %tooltip-display {
-        display: inline-flex;
-        justify-content: center;
-        flex-flow: column wrap;
+        display: flex;
+        align-items: flex-start;
+        text-align: start;
         background: var-get($theme, 'background');
         color: var-get($theme, 'text-color');
         border-radius: var-get($theme, 'border-radius');
         box-shadow: map.get($theme, 'shadow');
-        margin: 0 auto;
-        padding: 0 rem(8px);
+        padding: rem(4px) rem(8px);
+        gap: rem(8px);
         min-height: rem(24px);
+        min-width: rem(24px);
+        max-width: 200px;
+        width: fit-content;
+
+        igx-icon {
+            --component-size: 1;
+        }
 
-        @if $variant == 'indigo' {
-            padding: rem(4px) rem(8px);
+        igx-tooltip-close-button {
+            display: flex;
+            cursor: default;
         }
     }
 
+    %arrow--top {
+        border-left: $transparent-border;
+        border-right: $transparent-border;
+        border-top: $color-border;
+    }
+
+    %arrow--bottom {
+        border-left: $transparent-border;
+        border-right: $transparent-border;
+        border-bottom: $color-border;
+    }
+
+    %arrow--left {
+        border-top: $transparent-border;
+        border-bottom: $transparent-border;
+        border-left: $color-border;
+    }
+
+    %arrow--right {
+        border-top: $transparent-border;
+        border-bottom: $transparent-border;
+        border-right: $color-border;
+    }
+
     %tooltip--hidden {
         display: none;
     }
@@ -45,6 +80,7 @@
         }
     } @else {
         %tooltip-display {
+            line-height: rem(16px);
             font-size: rem(10px);
             font-weight: 600;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "20.0.12",
+  "version": "20.1.0-alpha.0",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",