igniteui-angular 18.2.0-beta.0 → 18.2.0-beta.1

package/lib/badge/badge.component.d.ts

@@ -137,6 +137,16 @@ export declare class IgxBadgeComponent {
      * ```
      */
     label: string;
+    /**
+     * Sets/gets whether the badge is outlined.
+     * Default value is `false`.
+     *
+     * @example
+     * ```html
+     * <igx-badge outlined></igx-badge>
+     * ```
+     */
+    outlined: boolean;
     /**
      * Defines a human-readable, accessor, author-localized description for
      * the `type` and the `icon` or `value` of the element.
@@ -150,5 +160,6 @@ export declare class IgxBadgeComponent {
     get warningClass(): boolean;
     get errorClass(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxBadgeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IgxBadgeComponent, "igx-badge", never, { "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconSet": { "alias": "iconSet"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IgxBadgeComponent, "igx-badge", never, { "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconSet": { "alias": "iconSet"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "outlined": { "alias": "outlined"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ngAcceptInputType_outlined: unknown;
 }

package/lib/core/i18n/query-builder-resources.d.ts

@@ -1,6 +1,7 @@
 export interface IQueryBuilderResourceStrings {
     igx_query_builder_date_placeholder?: string;
     igx_query_builder_time_placeholder?: string;
+    igx_query_builder_datetime_placeholder?: string;
     igx_query_builder_filter_operator_and?: string;
     igx_query_builder_filter_operator_or?: string;
     igx_query_builder_filter_contains?: string;

package/lib/core/styles/components/badge/_badge-component.scss

@@ -35,6 +35,10 @@
             @extend %igx-badge--error !optional;
         }
 
+        @include m(outlined) {
+            @extend %igx-badge--outlined !optional;
+        }
+
         @include m(square) {
             @extend %igx-badge--square !optional;
         }

package/lib/core/styles/components/badge/_badge-theme.scss

@@ -17,7 +17,6 @@
 /// @param {Color} $icon-color [null] - The icon color used.
 /// @param {Color} $text-color [null] - The text color used.
 /// @param {Color} $border-color [null] - The border color used.
-/// @param {Number} $border-width [null] - The border width of the badge component.
 /// @param {Color} $background-color [null] - The background color used.
 /// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the badge.
 /// @param {Number} $border-radius [null] - The border radius used for badge component.
@@ -37,7 +36,6 @@
 
     $border-color: null,
     $border-radius: null,
-    $border-width: null,
 
     $background-color: null,
     $shadow: null,
@@ -75,7 +73,6 @@
         border-radius: $border-radius,
         background-color: $background-color,
         shadow: $shadow,
-        border-width: $border-width,
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme'),
         )),
@@ -90,10 +87,6 @@
 
     $variant: map.get($theme, '_meta', 'variant');
 
-    $badge-font-weight: normal;
-    $badge-value-padding: rem(4px);
-    $border-type: solid;
-
     %igx-badge-display {
         --size: #{rem(22px)};
         --_badge-size: var(--size);
@@ -107,9 +100,6 @@
         background: var-get($theme, 'background-color');
         border-radius: calc(var(--size) / 2);
         box-shadow: var-get($theme, 'shadow');
-        border-width: var-get($theme, 'border-width');
-        border-color: var-get($theme, 'border-color');
-        border-style: $border-type;
         overflow: hidden;
 
         igx-icon {
@@ -118,7 +108,7 @@
             display: inline-flex;
             justify-content: center;
             align-items: center;
-            font-weight: $badge-font-weight;
+            font-weight: 400;
             color: var-get($theme, 'icon-color');
         }
 
@@ -132,13 +122,17 @@
         }
     }
 
+    %igx-badge--outlined {
+        box-shadow: inset 0 0 0 rem(if($variant != 'bootstrap', 2px, 1px)) var-get($theme, 'border-color');
+    }
+
     %igx-badge--square {
         border-radius: var-get($theme, 'border-radius');
     }
 
     %igx-badge-value {
         white-space: nowrap;
-        padding-inline: $badge-value-padding;
+        padding-inline: rem(4px);
     }
 
     %igx-badge--success {

package/lib/core/styles/components/banner/_banner-theme.scss

@@ -111,7 +111,11 @@
         igx-icon,
         igc-button,
         [igxButton] {
-            --component-size: var(--ig-size, 2) !important;
+            --component-size: var(--ig-size, var(--ig-size-large));
+
+            @if $variant == 'indigo' {
+                --component-size: var(--ig-size, var(--ig-size-medium));
+            }
         }
     }
 

package/lib/core/styles/components/card/_card-theme.scss

@@ -115,7 +115,7 @@
     $not-material-theme: $variant != 'material';
 
     $card-heading-padding: rem(16px, 16px);
-    $card-content-padding: rem(14px);
+    $card-content-padding: rem(16px);
     $card-actions-padding: rem(8px);
 
     $card-tgroup-margin: 0 em(16px);
@@ -169,6 +169,10 @@
             display: block;
             padding: 0;
         }
+
+        @if $variant == 'fluent' {
+            padding: rem(16px) rem(8px);
+        }
     }
 
     %igx-card-header--vertical {
@@ -278,6 +282,19 @@
         }
     }
 
+    @if $variant == 'bootstrap' {
+        %igx-card-content {
+            @if $variant == 'bootstrap' {
+                padding-block: rem(16px) rem(24px);
+                padding-inline: rem(24px);
+            }
+        }
+
+        %igx-card-actions {
+            padding: rem(16px);
+        }
+    }
+
     @if $variant == 'indigo' {
         %igx-card-content,
         %igx-card-actions {