igniteui-angular 19.0.6 → 19.1.0-beta.0

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

@@ -10,26 +10,38 @@
 /// @param {Color} header-background [null] - The background color of the query builder header.
 /// @param {Color} header-foreground [null] - The foreground color of the query builder header.
 /// @param {Color} header-border [null] - The border color of the query builder header.
-/// @param {Map} background-and [null] - The background color of advanced filtering "AND" condition.
-/// @param {Map} background-and--focus [null] - The background color on focus/selected of advanced filtering "AND" condition.
-/// @param {Map} background-or [null] - The background color of advanced filtering "OR" condition.
-/// @param {Map} background-or--focus [null] - The background color on focus/selected of advanced filtering "OR" condition.
+///
+/// @param {Map} subquery-background [null] - The background color of the subquery block.
+/// @param {Map} subquery-border-color [null] - The border color of the query block.
+/// @param {Map} separator-color [null] - The separator color of the query block.
+/// @param {Number} subquery-border-radius [null] - The border radius of the subquery block.
+///
+/// @param {Map} label-foreground [null] - The color for query builder labels "from" & "select".
+/// @param {Map} separator-color [null] - The separator color of the query builder tree block.
+/// @param {Number} border-radius [null] - The border radius of the query builder.
+///
+/// @param {Color} color-expression-group-and [null] - The color of advanced filtering "AND" condition group.
+/// @param {Color} color-expression-group-or [null] - The color of advanced filtering "OR" condition group.
+///
 /// @example scss Set custom query-builder colors
-///   $my-query-builder-theme: query-builder-theme($$background: red);
+///   $my-query-builder-theme: query-builder-theme($background: red);
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-query-builder-theme);
 @function query-builder-theme(
     $schema: $light-material-schema,
     $elevations: null,
-
     $background: null,
     $header-background: null,
     $header-foreground: null,
     $header-border: null,
-    $background-and: null,
-    $background-and--focus: null,
-    $background-or: null,
-    $background-or--focus: null,
+    $color-expression-group-and: null,
+    $color-expression-group-or: null,
+    $border-radius: null,
+    $subquery-background: null,
+    $subquery-border-color: null,
+    $subquery-border-radius: null,
+    $separator-color: null,
+    $label-foreground: null,
 ) {
     $name: 'igx-query-builder';
     $selector: 'igx-query-builder';
@@ -48,21 +60,29 @@
         $header-foreground: text-contrast($header-background);
     }
 
+    @if not($header-background) and $background {
+        $header-background: $background;
+    }
+
     @return extend($theme, (
         name: $name,
         selector: $selector,
-
         background: $background,
         header-background: $header-background,
         header-foreground: $header-foreground,
         header-border: $header-border,
-        background-and: $background-and,
-        background-and--focus: $background-and--focus,
-        background-or: $background-or,
-        background-or--focus: $background-or--focus,
+        color-expression-group-and: $color-expression-group-and,
+        color-expression-group-or: $color-expression-group-or,
+        subquery-background: $subquery-background,
+        subquery-border-color: $subquery-border-color,
+        subquery-border-radius: $subquery-border-radius,
+        separator-color: $separator-color,
+        border-radius: $border-radius,
+        label-foreground: $label-foreground,
         theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
+            variant: map.get($schema, '_meta', 'theme'),
+            theme-variant: map.get($schema, '_meta', 'variant')
         )),
     ));
 }
@@ -85,18 +105,12 @@
     $bootstrap-theme: $variant == 'bootstrap';
     $not-bootstrap-theme: not($bootstrap-theme);
 
-    $filter-empty: (
-        comfortable: rem(144px),
-        cosy: rem(107px),
-        compact: rem(92px)
-    );
-
-    $vertical-space: (
-        comfortable: rem(16px),
-        cosy: rem(12px),
-        compact: rem(8px)
-    );
+    // Custom colors alpha
+    $alpha-hover: .08;
+    $alpha-focus: .16;
+    $alpha-focus-hover: .24;
 
+    $border-radius: var-get($theme, 'border-radius');
     $icon-size: rem(18px);
 
     %advanced-filter {
@@ -105,48 +119,146 @@
         width: auto;
         min-width: rem(660px);
         background-color: var-get($theme, 'background');
-        border-radius: border-radius(rem(4px));
-        box-shadow: elevation(12);
+        border-radius: $border-radius;
+        box-shadow: var-get($theme, 'elevation');
+        overflow: hidden;
     }
 
-    %advanced-filter__header {
-        @if $variant != 'indigo' {
-            @include type-style('h6');
-        } @else {
-            @include type-style('h5');
+    %query-builder-tree {
+        background: var-get($theme, 'background');
+
+        %query-builder-tree {
+            border-radius: var-get($theme, 'subquery-border-radius');
+        }
+    }
+
+    %query-level-0 {
+        display: block;
+        width: 100%;
+        padding-inline: if($variant != 'bootstrap', rem(24px), rem(16px));
+        padding-block:
+            if($variant != 'bootstrap', 0, rem(16px))
+            if($variant != 'bootstrap', rem(24px), rem(16px));
+
+        > %advanced-filter__main {
+             > %filter-tree__section {
+                 --sb-size: #{rem(10px)};
+
+                max-height: rem(570px);
+                overflow-y: auto;
+                overflow-x: hidden;
+                padding-inline-end: rem(16px);
+            }
+        }
+    }
+
+    %filter-tree__subquery {
+        // Add styles to the subquery itself only if there is a direct .igx-filter-tree__inputs inside it
+        &:has( > %filter-tree__inputs) {
+            background: var-get($theme, 'subquery-background');
+            border: rem(1px) solid var-get($theme, 'subquery-border-color');
+            border-radius: var-get($theme, 'subquery-border-radius');
+        }
+
+        // Hide the subquery itself if there is a tree with display none inside
+        &:has( > %query-builder-tree[style='display: none;']) {
+            display: none;
+        }
 
-            border-top-left-radius: border-radius(rem(10px));
-            border-top-right-radius: border-radius(rem(10px));
+        > %filter-tree__inputs {
+            padding: rem(12px);
+            border-radius: inherit;
+
+            > igx-input-group,
+            > igx-date-picker,
+            > igx-time-picker {
+                flex-grow: 1;
+            }
         }
 
+        %filter-tree__buttons {
+            margin-block-start: rem(8px);
+        }
+
+        %query-builder-tree {
+            border-block-start: rem(1px) dashed var-get($theme, 'separator-color');
+            padding: rem(16px);
+        }
+
+        &:empty {
+            display: none;
+        }
+
+    }
+
+    %filter-tree-details-button {
+        margin-inline-start: auto;
+    }
+
+    %query-builder-dialog {
+        display: flex;
+        flex-direction: column;
+        gap: rem(16px);
+        max-width: rem(310px);
+
+        > * {
+            margin: 0 !important;
+        }
+    }
+
+    %advanced-filter__header {
         display: flex;
         align-items: center;
         background-color: var-get($theme, 'header-background');
         color: var-get($theme, 'header-foreground');
         user-select: none;
+        border-radius: $border-radius $border-radius 0 0;
         margin-bottom: 0;
         border-block-end: rem(1px) solid var-get($theme, 'header-border');
+
+        padding-inline: if($variant != 'bootstrap', rem(24px), rem(16px));
+        padding-block: if($variant != 'bootstrap', rem(24px), rem(16px)) rem(16px);
     }
 
-    %advanced-filter__main {
-        display: block;
-        overflow: auto;
-        min-height: pad(rem(138px), rem(164px), rem(214px));
-        max-height: pad(rem(305px), rem(394px), rem(468px));
+    %advanced-filter__title {
+        @if $variant == 'material' {
+            @include type-style('h6');
+        }
 
-        [igxButton] + [igxButton] {
-            margin-inline-start: rem(8px);
+        @if $variant == 'fluent' {
+            @include type-style('h6');
         }
+
+        @if $variant == 'indigo' {
+            @include type-style('h5');
+        }
+
+        @if $variant == 'bootstrap' {
+            @include type-style('h5');
+        }
+
+        margin: 0;
     }
 
-    %advanced-filter__header,
     %advanced-filter__main {
-        padding-inline: pad-inline(
-            map.get($vertical-space, 'compact'),
-            map.get($vertical-space, 'cosy'),
-            map.get($vertical-space, 'comfortable')
-        );
-        padding-block: rem(16px);
+        display: grid;
+        gap: rem(16px);
+    }
+
+    %advanced-filter__root {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+
+        > * {
+            flex-grow: 1;
+        }
+    }
+
+    %advanced-filter__root-actions {
+        display: flex;
+        gap: rem(8px);
+        padding-bottom: rem(16px);
     }
 
     %advanced-filter__outlet {
@@ -160,87 +272,152 @@
 
     %filter-tree {
         display: flex;
+        width: 100%;
+
+        %filter-tree {
+            margin-block: rem(8px);
+        }
+    }
+
+    %filter-tree__section {
+        display: flex;
+        flex-direction: column;
+        gap: rem(8px);
 
-        + %filter-tree,
-        + %filter-tree__expression-item,
-        + %filter-tree__inputs {
-            margin-top: pad(
-                map.get($vertical-space, 'compact'),
-                map.get($vertical-space, 'cosy'),
-                map.get($vertical-space, 'comfortable')
-            );
+        > %filter-tree {
+            margin-block: 0;
+        }
+    }
+
+    %filter-tree__expression-context-menu {
+        display: flex;
+        width: 100%;
+
+        [igxbutton='flat'] {
+            --ig-size: 1;
+
+            @if $variant == 'bootstrap' {
+                --ig-button-text-transform: capitalize;
+            }
+
+            border: none;
+            min-width: auto;
         }
     }
 
     %filter-tree__line {
-        width: rem(8px);
-        min-width: rem(8px);
+        $size: rem(2px);
+        width: $size;
         background-color: white;
-        margin-inline-end: pad(rem(8px), rem(12px), rem(16px));
+        margin-inline-end: calc(rem(8px) - $size);
         outline-style: none;
-        border-radius: border-radius(rem(4px));
-        cursor: pointer;
     }
 
     %filter-tree__line--and {
-        background: var-get($theme, 'background-and');
+        background: var-get($theme, 'color-expression-group-and');
+    }
+
+    %filter-tree__line--or {
+        background: var-get($theme, 'color-expression-group-or');
+    }
 
-        &-selected {
-            background: var-get($theme, 'background-and--focus');
+    %filter-tree__button--and {
+        @if $variant == 'material' {
+            --focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus-hover});
+            --focus-visible-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus});
+            --focus-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus});
+            --active-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus});
+            --hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-hover});
+            --background: transparent;
         }
 
-        &:focus {
-            box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'background-and--focus');
+        @if $variant == 'bootstrap' {
+            --shadow-color: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / .5);
         }
-    }
 
-    %filter-tree__line--or {
-        background: var-get($theme, 'background-or');
+        --foreground: #{var-get($theme, 'color-expression-group-and')};
+        --focus-foreground: #{var-get($theme, 'color-expression-group-and')};
+        --hover-foreground: #{var-get($theme, 'color-expression-group-and')};
+        --focus-hover-foreground: #{var-get($theme, 'color-expression-group-and')};
+        --focus-visible-foreground: #{var-get($theme, 'color-expression-group-and')};
+        --active-foreground: #{var-get($theme, 'color-expression-group-and')};
+
+        --icon-color: #{var-get($theme, 'color-expression-group-and')};
+        --icon-color-hover: #{var-get($theme, 'color-expression-group-and')};
+    }
 
-        &-selected {
-            background-color: var-get($theme, 'background-or--focus');
+    %filter-tree__button--or {
+        @if $variant == 'material' {
+            --focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus-hover});
+            --focus-visible-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus});
+            --focus-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus});
+            --active-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus});
+            --hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-hover});
+            --background: transparent;
         }
 
-        &:focus {
-            box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'background-or--focus');
+        @if $variant == 'bootstrap' {
+            --shadow-color: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / .5);
         }
+
+        --foreground: #{var-get($theme, 'color-expression-group-or')};
+        --focus-foreground: #{var-get($theme, 'color-expression-group-or')};
+        --hover-foreground: #{var-get($theme, 'color-expression-group-or')};
+        --focus-hover-foreground: #{var-get($theme, 'color-expression-group-or')};
+        --focus-visible-foreground: #{var-get($theme, 'color-expression-group-or')};
+        --active-foreground: #{var-get($theme, 'color-expression-group-or')};
+
+        --icon-color: #{var-get($theme, 'color-expression-group-or')};
+        --icon-color-hover: #{var-get($theme, 'color-expression-group-or')};
     }
 
-    %filter-tree__expression {
+    %filter-tree__expressions {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
+        flex-grow: 1;
+        gap: rem(8px);
     }
 
-    %filter-tree__expression-item {
+    %filter-tree__expression-section {
+        $spacing: rem(16px);
         display: flex;
-        align-items: center;
+        flex-direction: column;
+        width: calc(100% - #{$spacing});
+        gap: rem(8px);
+        margin-inline-start: $spacing;
 
-        + %filter-tree,
-        + %filter-tree__inputs,
-        + %filter-tree__expression-item {
-            margin-top: pad(
-                map.get($vertical-space, 'compact'),
-                map.get($vertical-space, 'cosy'),
-                map.get($vertical-space, 'comfortable')
-            );
+        &:empty {
+            display: none;
         }
+    }
 
-        > igx-chip {
-            @container style(--ig-size: 1) {
-                --ig-size: 2;
-            }
+    %filter-tree__expression-item {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        gap: rem(8px);
+        position: relative;
+
+        igx-chip {
+            --ig-size: 3;
 
             @if $variant != 'indigo' {
-                .igx-chip__item {
-                    border-block: none;
+                igx-icon {
+                    --component-size: 1;
                 }
             }
+        }
 
-            .igx-filter-tree__expression-column {
+        > igx-chip {
+            %filter-tree__expression-column {
                 padding-inline: pad-inline(rem(3px), rem(6px), rem(8px));
             }
 
+            %filter-tree__expression-condition {
+                padding-inline-start: pad-inline(rem(3px), rem(6px), rem(8px));
+            }
+
             igx-prefix {
                 display: flex;
             }
@@ -251,156 +428,94 @@
         }
     }
 
+
+    %filter-tree__expression-item-ghost {
+        &.igx-chip__item {
+            @include type-style('body-2');
+
+            --ig-body-2-text-transform: unset;
+
+            padding-inline: rem(32px);
+        }
+
+        color: color($color: 'gray', $variant: if($theme-variant == 'light', 600, 900));
+        border: rem(1px) dashed color($color: 'gray', $variant: if($theme-variant == 'light', 600, 300));
+        background:  transparent;
+    }
+
     %filter-tree__expression-column {
         padding: 0 rem(8px);
     }
 
     %filter-tree__expression-actions {
         display: inline-flex;
-        margin: 0 rem(8px);
-        gap: rem(8px);
+        gap: if($variant != 'indigo', rem(16px), rem(8px));
 
-        %igx-icon-button-display {
-            --size: #{sizable(rem(20px), rem(24px), if($variant != 'indigo', rem(32px), rem(28px)))};
+        span {
+            display: inline-flex;
         }
+
+        %igx-icon-button-display {
+            --ig-size: #{if($variant != 'bootstrap', 2, 1)};
+        };
     }
 
     %filter-tree__expression-condition {
-        opacity: .7;
+        opacity: if($variant != 'indigo', .6, .8);
     }
 
     %filter-tree__buttons {
+        --ig-size: 1;
+
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        margin-top: pad(
-            map.get($vertical-space, 'compact'),
-            map.get($vertical-space, 'cosy'),
-            map.get($vertical-space, 'comfortable')
-        );
+        gap: rem(8px);
 
-        + %filter-tree,
-        + %filter-tree__expression-item,
-        + %filter-tree__inputs {
-            margin-top: pad(
-                map.get($vertical-space, 'compact'),
-                map.get($vertical-space, 'cosy'),
-                map.get($vertical-space, 'comfortable')
-            );
+        [igxbutton='flat'] {
+            padding-block: 0;
+            border: none
         }
     }
 
     %filter-tree__inputs {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        igx-input-group {
-            --ig-size: 1;
-        }
-
-        igx-select + igx-select,
-        igx-select + igx-input-group,
-        igx-select + igx-date-picker,
-        igx-select + igx-time-picker,
-        igx-input-group + igx-select {
-            margin-inline-start: rem(8px);
-        }
+        --ig-size: #{if($variant == 'indigo' or $variant == 'bootstrap', 2, 1)};
 
-        + %filter-tree,
-        + %filter-tree__expression-item {
-            margin-top: pad(
-                map.get($vertical-space, 'compact'),
-                map.get($vertical-space, 'cosy'),
-                map.get($vertical-space, 'comfortable')
-            );
-        }
-    }
-
-    %filter-tree__inputs-actions {
         display: flex;
-        margin: 0 rem(8px);
-        align-items: center;
-
-        [igxIconButton] {
-            transition: none;
-        }
+        align-items: flex-end;
+        gap: rem(16px);
+        width: 100%;
+        border-radius: inherit;
 
-        [igxIconButton] + [igxIconButton] {
-            margin-inline-start: rem(8px);
+        &:empty {
+            display: none;
         }
     }
 
-    %filter-legend {
+    %filter-tree__inputs-field {
         display: flex;
-        margin-inline-start: auto;
-        pointer-events: none;
+        flex-direction: column;
+        gap: rem(4px);
+        max-width: rem(250px);
+        width: 100%;
     }
 
-    %filter-legend__item {
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        font-size: rem(12px);
+    %advanced-filter__label {
+        @include type-style('body-2');
 
-        @if $variant == 'indigo' {
-            font-weight: 400;
-        }
-
-        &::before {
-            content: '';
-            width: rem(24px);
-            height: rem(24px);
-            background: white;
-            border-radius: border-radius(rem(4px));
-            margin-inline-end: rem(8px);
-        }
-
-        + %filter-legend__item {
-            margin-inline-start: rem(24px);
-        }
+        color: var-get($theme, 'label-foreground');
     }
 
-    %filter-legend__item--and::before {
-        background: var-get($theme, 'background-and');
-    }
-
-    %filter-legend__item--or::before {
-        background: var-get($theme, 'background-or');
-    }
+    %filter-tree__inputs-actions {
+        --ig-size: 2;
 
-    %filter-con-menu {
-        position: relative;
         display: flex;
-        flex-flow: column;
-        width: rem(196px);
-        background-color: var-get($theme, 'background');
-        padding: rem(16px);
-        margin-inline-start: rem(16px);
-        border-radius: border-radius(rem(4px));
-        border: rem(1px) solid color(null, 'gray', 200);
-
-        > [igxButton] + [igxButton],
-        igx-buttongroup + [igxButton],
-        [igxButton] + igx-buttongroup {
-            margin-top: pad(
-                map.get($vertical-space, 'compact'),
-                map.get($vertical-space, 'cosy'),
-                map.get($vertical-space, 'comfortable')
-            );
-        }
-
-        > [igxButton]%filter-con-menu__close-btn + [igxButton],
-        [igxButton]%filter-con-menu__close-btn + igx-buttongroup {
-            margin-top: 0;
-        }
-
-        [igxButton] > igx-icon + * {
-            margin-inline-start: rem(8px);
-        }
+        gap: rem(8px);
+        align-items: center;
+        width: auto;
+        align-self: center;
 
-        igx-buttongroup > * {
-            box-shadow: none;
+        [igxIconButton] {
+            transition: none;
         }
     }
 
@@ -424,8 +539,9 @@
 
     %filter-con-menu__close-btn {
         position: absolute;
-        top: rem(-18px);
-        inset-inline-end: rem(-18px);
+        top: 0;
+        inset-inline-start: 100%;
+        transform: translate(-50%, -50%);
         background-color: var-get($theme, 'background');
         border: rem(1px) solid color(null, 'gray', 200);
 
@@ -437,29 +553,6 @@
         }
     }
 
-    %filter-empty {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: pad(
-            map.get($filter-empty, 'compact'),
-            map.get($filter-empty, 'cosy'),
-            map.get($filter-empty, 'comfortable')
-        );
-    }
-
-    %filter-empty__title {
-        @if $variant == 'indigo' {
-            @if $theme-variant == 'light' {
-                color: color(null, 'gray', 600);
-            } @else {
-                color: contrast-color(null, 'gray', 50, .6);
-            }
-        } @else {
-            color: color(null, 'gray', 600);
-        }
-    }
-
     %advanced-filter--inline {
         display: flex;
         flex-direction: column;