igniteui-angular 19.0.7 → 19.1.0-beta.0

package/lib/core/styles/components/grid/_grid-theme.scss

@@ -1206,7 +1206,7 @@
         } @else {
             padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
 
-            igx-icon {
+            %igx-icon-display {
                 opacity: if($theme-variant == 'light', .75, .85);
 
                 &:hover {
@@ -1460,12 +1460,12 @@
         } @else {
             padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
 
-            igx-icon {
+            %igx-icon-display {
                 opacity: if($theme-variant == 'light', .75, .85);
             }
 
             &:hover {
-                igx-icon {
+                %igx-icon-display {
                     opacity: 1;
                 }
             }
@@ -2037,10 +2037,13 @@
             position: relative;
             display: flex;
 
-
-            @if $variant != 'indigo' {
-                igx-icon {
-                    --size: var(--igx-icon-size, #{rem(15px)});
+            igx-icon {
+                @if $variant == 'indigo' {
+                    --component-size: 2;
+                } @else {
+                    width: var(--igx-icon-size, #{rem(15px)});
+                    height: var(--igx-icon-size, #{rem(15px)});
+                    font-size: var(--igx-icon-size, #{rem(15px)});
                 }
             }
 
@@ -2146,7 +2149,7 @@
             %grid-excel-icon {
                 color: var-get($theme, 'header-selected-text-color');
 
-                igx-icon {
+                %igx-icon-display {
                     color: var-get($theme, 'header-selected-text-color');
                 }
 
@@ -2154,7 +2157,7 @@
                 &:hover {
                     color: var-get($theme, 'header-selected-text-color');
 
-                    igx-icon {
+                    %igx-icon-display {
                         color: var-get($theme, 'header-selected-text-color');
                     }
                 }
@@ -2498,7 +2501,7 @@
     }
 
     %igx-group-label__icon {
-        @at-root igx-icon#{&} {
+        &.igx-icon {
             --component-size: #{if($variant == 'indigo', 2, 1)};
 
             color: var-get($theme, 'group-label-icon');
@@ -3194,24 +3197,32 @@
     @include excel-filtering($theme);
 
     %advanced-filtering-dialog {
-        background: var-get($theme, 'filtering-row-background');
-        box-shadow: elevation(if($variant == 'indigo', if($theme-variant == 'light', 24, 23), 12));
+        $light-variant: contrast-color($color: 'gray', $variant: 900);
+        $dark-variant: color($color: 'surface', $variant: 500);
+        background: if($theme-variant == 'light', $light-variant, $dark-variant);
+        box-shadow: elevation(if($variant == 'indigo', if($theme-variant == 'light', 24, 23), 24));
+
+        @if $variant == 'material' or $variant == 'bootstrap' {
+            border-radius: rem(4px);
+        }
+
+        @if $variant == 'fluent' {
+            border-radius: rem(2px);
+        }
 
         @if $variant == 'indigo' {
             border-radius: rem(10px);
         }
 
         igx-query-builder {
-            --igx-query-builder-background: #{var-get($theme, 'filtering-row-background')};
-            --igx-query-builder-background-and: #{var-get($theme, 'filtering-background-and')};
-            --igx-query-builder-background-and--focus: #{var-get($theme, 'filtering-background-and--focus')};
-            --igx-query-builder-background-or: #{var-get($theme, 'filtering-background-or')};
-            --igx-query-builder-background-or--focus: #{var-get($theme, 'filtering-background-or--focus')};
+            //--igx-query-builder-background: #{var-get($theme, 'filtering-row-background')};
+            //--igx-query-builder-background-and: #{var-get($theme, 'filtering-background-and')};
+            //--igx-query-builder-background-and--focus: #{var-get($theme, 'filtering-background-and--focus')};
+            //--igx-query-builder-background-or: #{var-get($theme, 'filtering-background-or')};
+            //--igx-query-builder-background-or--focus: #{var-get($theme, 'filtering-background-or--focus')};
             box-shadow: none;
-
-            @if $variant == 'indigo' {
-                border-radius: rem(10px);
-            }
+            border: none;
+            border-radius: inherit;
         }
 
         igx-query-builder-header {
@@ -3245,14 +3256,6 @@
         }
     }
 
-    igx-child-grid-row {
-        igx-child-grid-row {
-            %igx-grid__tr-action {
-                border-inline-end: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
-            }
-        }
-    }
-
     // Pivot grid
     %igx-grid__pivot--super-compact {
         --ig-size: 1 !important;
@@ -3446,9 +3449,10 @@
             }
 
             @if $variant == 'indigo' {
-                igx-icon {
+                %igx-icon-display {
                     opacity: if($theme-variant == 'light', .75, .85);
 
+
                     &:hover {
                         opacity: 1;
                         cursor: pointer;

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

@@ -422,15 +422,12 @@
         }
 
         input,
-        textarea {
+        textarea,
+        span {
             font: inherit;
             margin: 0;
         }
 
-        span {
-            font-family: inherit;
-        }
-
         input[type='file'] {
             @include hide-default();
         }

package/lib/core/styles/components/query-builder/_query-builder-component.scss

@@ -4,10 +4,9 @@
 /// @access private
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 @mixin component {
-    @include _builder-legend();
     @include _advanced-filtering-tree();
-    @include _advanced-filtering-con-menu();
-    @include _advanced-filtering-empty();
+    @include _query-builder-tree();
+    @include _query-builder-dialog();
 
     @include b(igx-query-builder) {
         $this: bem--selector-to-string(&);
@@ -30,36 +29,32 @@
             @extend %advanced-filter__header !optional;
         }
 
-        @include e(main) {
-            @extend %advanced-filter__main !optional;
+        @include e(title) {
+            @extend %advanced-filter__title !optional;
         }
 
-        @include e(outlet) {
-            @extend %advanced-filter__outlet !optional;
+        @include e(label) {
+            @extend %advanced-filter__label !optional;
         }
 
-        @include m('inline') {
-            @extend %advanced-filter--inline !optional;
+        @include e(main) {
+            @extend %advanced-filter__main !optional;
         }
-    }
-}
 
-@mixin _builder-legend {
-    @include b(igx-builder-legend) {
-        @extend %filter-legend !optional;
+        @include e(root) {
+            @extend %advanced-filter__root !optional;
+        }
 
-        @include e(item) {
-            @extend %filter-legend__item !optional;
+        @include e(root-actions) {
+            @extend %advanced-filter__root-actions !optional;
         }
 
-        @include e(item, $m: 'and') {
-            @extend %filter-legend__item !optional;
-            @extend %filter-legend__item--and !optional;
+        @include e(outlet) {
+            @extend %advanced-filter__outlet !optional;
         }
 
-        @include e(item, $m: 'or') {
-            @extend %filter-legend__item !optional;
-            @extend %filter-legend__item--or !optional;
+        @include m('inline') {
+            @extend %advanced-filter--inline !optional;
         }
     }
 }
@@ -68,6 +63,14 @@
     @include b(igx-filter-tree) {
         @extend %filter-tree !optional;
 
+        @include e(subquery) {
+            @extend %filter-tree__subquery !optional;
+        }
+
+        @include e(section) {
+            @extend %filter-tree__section !optional;
+        }
+
         @include e(line) {
             @extend %filter-tree__line !optional;
         }
@@ -80,22 +83,34 @@
             @extend %filter-tree__line--or !optional;
         }
 
-        @include e(line, $mods: ('selected', 'and')) {
-            @extend %filter-tree__line--and-selected !optional;
+        @include e(button, $m: 'and') {
+            @extend %filter-tree__button--and !optional;
         }
 
-        @include e(line, $mods: ('selected', 'or')) {
-            @extend %filter-tree__line--or-selected !optional;
+        @include e(button, $m: 'or') {
+            @extend %filter-tree__button--or !optional;
         }
 
-        @include e(expression) {
-            @extend %filter-tree__expression !optional;
+        @include e(expressions) {
+            @extend %filter-tree__expressions !optional;
+        }
+
+        @include e(expression-context-menu) {
+            @extend %filter-tree__expression-context-menu !optional;
+        }
+
+        @include e(expression-section) {
+            @extend %filter-tree__expression-section !optional;
         }
 
         @include e(expression-item) {
             @extend %filter-tree__expression-item !optional;
         }
 
+        @include e(expression-item-ghost) {
+            @extend %filter-tree__expression-item-ghost !optional;
+        }
+
         @include e(expression-column) {
             @extend %filter-tree__expression-column !optional;
         }
@@ -116,32 +131,32 @@
             @extend %filter-tree__inputs !optional;
         }
 
+        @include e(inputs-field) {
+            @extend %filter-tree__inputs-field !optional;
+        }
+
         @include e(inputs-actions) {
             @extend %filter-tree__inputs-actions !optional;
         }
+
+        @include e(details-button) {
+            @extend %filter-tree-details-button !optional;;
+        }
     }
 }
 
-@mixin _advanced-filtering-con-menu {
-    @include b(igx-filter-contextual-menu) {
-        @extend %filter-con-menu !optional;
-
-        @include e(close-btn) {
-            @extend %filter-con-menu__close-btn !optional;
-        }
+@mixin _query-builder-tree {
+    @include b(igx-query-builder-tree) {
+        @extend %query-builder-tree !optional;
 
-        @include e(delete-btn) {
-            @extend %filter-con-menu__delete-btn !optional;
+        @include m(level-0) {
+            @extend %query-level-0 !optional;
         }
     }
 }
 
-@mixin _advanced-filtering-empty {
-    @include b(igx-filter-empty) {
-        @extend %filter-empty !optional;
-
-        @include e(title) {
-            @extend %filter-empty__title !optional;
-        }
+@mixin _query-builder-dialog {
+    @include b(igx-query-builder-dialog) {
+        @extend %query-builder-dialog !optional;;
     }
 }