Merge branch 'master' into ganastasov/feat-14905-master

Author: ddincheva

package-lock.json

@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.21.1",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^14.1.1",
+    "igniteui-theming": "^14.2.0",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",

package.json

@@ -201,6 +201,11 @@
             "version": "18.2.0",
             "description": "Updates Ignite UI for Angular from v18.1.x to v18.2.0",
             "factory": "./update-18_2_0"
+        },
+        "migration-41": {
+            "version": "18.2.3",
+            "description": "Updates Ignite UI for Angular from v18.2.0 to v18.2.3",
+            "factory": "./update-18_2_3"
         }
     }
 }

projects/igniteui-angular/migrations/migration-collection.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../common/schema/theme-changes.schema.json",
+  "changes": [
+    {
+      "name": "$header-time-period-color",
+      "remove": true,
+      "owner": "time-picker-theme",
+      "type":"property"
+    }
+  ]
+}

projects/igniteui-angular/migrations/update-18_2_3/changes/theme-changes.json

@@ -0,0 +1,36 @@
+import * as path from 'path';
+
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { setupTestTree } from '../common/setup.spec';
+
+const version = '18.2.3';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+
+    beforeEach(() => {
+        appTree = setupTestTree();
+    });
+
+    const migrationName = 'migration-41';
+
+    it('should remove the $header-time-period-color property from the time-picker-theme', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/test.component.scss`,
+            `$custom-time-picker: time-picker-theme(
+                $text-color: red,
+                $header-time-period-color: pink
+            );`
+        );
+
+        const tree = await schematicRunner
+            .runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(
+            `$custom-time-picker: time-picker-theme(
+                $text-color: red
+            );`
+        );
+    });
+});

projects/igniteui-angular/migrations/update-18_2_3/index.spec.ts

@@ -0,0 +1,14 @@
+import type {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '18.2.3';
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+    context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+    const update = new UpdateChanges(__dirname, host, context);
+    update.applyChanges();
+};

projects/igniteui-angular/migrations/update-18_2_3/index.ts

@@ -74,7 +74,7 @@
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^14.1.0",
+        "igniteui-theming": "^14.2.0",
         "@igniteui/material-icons-extended": "^3.0.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -87,7 +87,7 @@
     @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'variant');
-    $bootstrap-theme: map.get($theme, variant) == 'bootstrap';
+    $bootstrap-theme: map.get($theme, '_meta', 'variant') == 'bootstrap';
 
     $dialog-min-width: map.get((
         'material': rem(280px),
@@ -96,21 +96,21 @@
     ), $variant);
 
     $dialog-title-padding: map.get((
-        'material': rem(24px) rem(24px) rem(12px) rem(24px),
+        'material': rem(16px) rem(24px) rem(0px) rem(24px),
         'fluent': rem(16px) rem(24px) rem(24px) rem(24px),
         'bootstrap': rem(16px),
         'indigo': rem(24px) rem(24px) 0 rem(24px),
     ), $variant);
 
     $dialog-message-padding: map.get((
-        'material': rem(12px) rem(24px),
+        'material': rem(14px) rem(24px),
         'fluent': 0 rem(24px) rem(20px) rem(24px),
         'bootstrap': rem(16px),
         'indigo': rem(16px) rem(24px),
     ), $variant);
 
     $dialog-actions-padding: map.get((
-        'material': rem(8px),
+        'material': 0 rem(8px) rem(8px),
         'fluent': 0 rem(24px) rem(24px) rem(24px),
         'bootstrap': rem(16px),
         'indigo': rem(16px) rem(24px) rem(24px) rem(24px),
@@ -180,23 +180,16 @@
         flex-flow: row nowrap;
         justify-content: flex-end;
         padding: $dialog-actions-padding;
+        gap: if($variant == 'indigo', rem(16px), rem(8px));
 
         @if $bootstrap-theme {
             border-top: rem(1px) solid var-get($theme, 'border-color');
         }
 
-        button + button {
-            margin-inline-start: rem(8px);
-        }
-
         @if $variant == 'indigo' {
             .igx-button {
                 --ig-size: 2;
             }
-
-            button + button {
-                margin-inline-start: rem(16px);
-            }
         }
     }
 }

projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss

@@ -24,10 +24,6 @@
             @extend %time-picker__wrapper !optional;
         }
 
-        @include e(header-ampm) {
-            @extend %time-picker__header-ampm !optional;
-        }
-
         @include e(header-hour){
             @extend %time-picker__header-hour !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss

@@ -23,7 +23,6 @@
 /// @param {Color} $disabled-item-background [null] - The background color for disabled values .
 /// @param {Color} $header-background [null] - The header background color of a time picker.
 /// @param {Color} $header-hour-text-color [null] - The header hour text color of a time picker.
-/// @param {Color} $header-time-period-color [null] - The header AM/PM text color of a time picker.
 /// @param {Color} $background-color [null] - The time-picker panel background color.
 /// @param {Number} $time-item-size [null] - The height of the time item.
 /// @param {Color} $divider-color [null] - The color for the actions area divider.
@@ -56,7 +55,6 @@
     $disabled-item-background: null,
     $header-background: null,
     $header-hour-text-color: null,
-    $header-time-period-color: null,
     $background-color: null,
     $modal-shadow: null,
     $dropdown-shadow: null,
@@ -85,12 +83,6 @@
         $header-hour-text-color: text-contrast($header-background);
     }
 
-    @if not($header-time-period-color) and $header-background {
-        @if meta.type-of($header-background) == 'color' {
-            $header-time-period-color: rgba(text-contrast($header-background), .8);
-        }
-    }
-
     @if not($selected-text-color) and $active-item-background {
         $selected-text-color: text-contrast($active-item-background);
     }
@@ -135,7 +127,6 @@
         disabled-item-background: $disabled-item-background,
         header-background: $header-background,
         header-hour-text-color: $header-hour-text-color,
-        header-time-period-color: $header-time-period-color,
         background-color: $background-color,
         modal-shadow: $modal-shadow,
         dropdown-shadow: $dropdown-shadow,
@@ -162,15 +153,15 @@
     $picker-buttons-padding: map.get((
         'material': rem(8px),
         'fluent': rem(8px),
-        'bootstrap': rem(16px),
+        'bootstrap': rem(8px),
         'indigo': rem(8px) rem(16px),
     ), $variant);
 
     $picker-header-padding: map.get((
-        'material': rem(24px) rem(16px),
+        'material': rem(16px) rem(24px),
         'fluent': rem(16px),
         'bootstrap': rem(16px),
-        'indigo': rem(16px) rem(24px) ,
+        'indigo': rem(16px),
     ), $variant);
 
     %time-picker-display {
@@ -287,7 +278,7 @@
     }
 
     %time-picker__item {
-        width: if($variant == 'indigo', rem(46px), rem(54px));
+        width: rem(46px);
         padding: rem(5px) rem(10px);
         border-radius: var-get($theme, 'active-item-border-radius');
         height: var-get($theme, 'time-item-size');
@@ -355,10 +346,6 @@
         }
     }
 
-    %time-picker__header-ampm {
-        color: var-get($theme, 'header-time-period-color');
-    }
-
     %time-picker__header--vertical {
         @if $variant == 'indigo' {
             min-width: rem(136px);
@@ -371,18 +358,14 @@
     %time-picker__header-hour {
         display: flex;
         color: var-get($theme, 'header-hour-text-color');
+        margin: 0;
 
         [dir='rtl'] & {
             flex-direction: row-reverse;
             justify-content: flex-end;
         }
     }
 
-    %time-picker__header-ampm,
-    %time-picker__header-hour {
-        margin: 0;
-    }
-
     %time-picker__buttons {
         display: flex;
         min-height: sizable(rem(40px), rem(44px), rem(48px));
@@ -413,24 +396,20 @@
     header-hour: 'h4',
     selected-time: 'h5'
 )) {
-    $time-period: map.get($categories, 'header-time-period');
     $header-hour: map.get($categories, 'header-hour');
     $selected-time: map.get($categories, 'selected-time');
 
-
-    %time-picker__header-ampm {
-        @include type-style($time-period, false);
-    }
-
     %time-picker__header-hour {
         @include type-style($header-hour, false) {
             margin-top: 0;
+            margin-bottom: 0;
         }
     }
 
     %time-picker__item--selected {
         @include type-style($selected-time) {
             margin-top: 0;
+            margin-bottom: 0;
         }
     }
 }