igniteui-angular 17.2.0-rc.1 → 17.2.1

package/lib/core/styles/components/icon-button/_icon-button-theme.scss

@@ -15,6 +15,7 @@
 
     $background: null,
     $foreground: null,
+    $shadow-color: null,
 
     $hover-background: null,
     $hover-foreground: null,
@@ -94,6 +95,7 @@
                 name: $name,
                 background: $background,
                 foreground: $foreground,
+                shadow-color: $shadow-color,
 
                 hover-background: $hover-background,
                 hover-foreground: $hover-foreground,
@@ -228,7 +230,6 @@
             color: var-get($flat-theme, 'hover-foreground');
         }
 
-        &:focus,
         &:focus-visible {
             background: var-get($flat-theme, 'focus-background');
             color: var-get($flat-theme, 'focus-foreground');
@@ -238,15 +239,18 @@
                 background: var-get($flat-theme, 'focus-hover-background');
                 color: var-get($flat-theme, 'focus-hover-foreground');
             }
-        }
 
-        @if ($variant == 'indigo-design') {
-            border: none;
+            @if ($variant == 'bootstrap') {
+                box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color');
+            }
+
+            @if ($variant == 'indigo-design') {
+                border-color: var-get($flat-theme, 'border-color');
+                box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'focus-border-color');
+            }
         }
 
         @if ($variant == 'fluent') {
-            border: none;
-
             &:focus-visible::after {
                 box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-border-color');
             }
@@ -256,19 +260,6 @@
             background: var-get($flat-theme, 'active-background');
             color: var-get($flat-theme, 'active-foreground');
         }
-
-        &:focus,
-        &:focus-visible,
-        &:active {
-            @if ($variant == 'bootstrap') {
-                box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'focus-border-color');
-            }
-
-            @if ($variant == 'indigo-design') {
-                border-color: var-get($flat-theme, 'border-color');
-                box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'focus-border-color');
-            }
-        }
     }
 
     %igx-icon-button--contained {
@@ -289,7 +280,6 @@
             color: var-get($contained-theme, 'hover-foreground');
         }
 
-        &:focus,
         &:focus-visible {
             background: var-get($contained-theme, 'focus-background');
             color: var-get($contained-theme, 'focus-foreground');
@@ -298,6 +288,14 @@
                 border-color: var-get($contained-theme, 'focus-border-color');
             }
 
+            @if ($variant == 'bootstrap') {
+                box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color');
+            }
+
+            @if ($variant == 'indigo-design') {
+                box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'focus-border-color');
+            }
+
             &:hover {
                 background: var-get($contained-theme, 'focus-hover-background');
                 color: var-get($contained-theme, 'focus-hover-foreground');
@@ -314,18 +312,6 @@
             background: var-get($contained-theme, 'active-background');
             color: var-get($contained-theme, 'active-foreground');
         }
-
-        &:focus,
-        &:focus-visible,
-        &:active {
-            @if ($variant == 'bootstrap') {
-                box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'focus-border-color');
-            }
-
-            @if ($variant == 'indigo-design') {
-                box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'focus-border-color');
-            }
-        }
     }
 
     %igx-icon-button--outlined {
@@ -352,17 +338,11 @@
             }
         }
 
-        @if ($variant == 'bootstrap') {
-            border: none;
-            box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'border-color');
-        }
-
         &:hover {
             background: var-get($outlined-theme, 'hover-background');
             color: var-get($outlined-theme, 'hover-foreground');
         }
 
-        &:focus,
         &:focus-visible {
             background: var-get($outlined-theme, 'focus-background');
             color: var-get($outlined-theme, 'focus-foreground');
@@ -372,6 +352,15 @@
                 background: var-get($contained-theme, 'focus-hover-background');
                 color: var-get($contained-theme, 'focus-hover-foreground');
             }
+
+            @if ($variant == 'bootstrap') {
+                box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color');
+            }
+
+            @if ($variant == 'indigo-design') {
+                border-color: var-get($outlined-theme, 'border-color');
+                box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'focus-border-color');
+            }
         }
 
         @if ($variant == 'fluent') {
@@ -393,19 +382,6 @@
             background: var-get($outlined-theme, 'active-background');
             color: var-get($outlined-theme, 'active-foreground');
         }
-
-        &:focus,
-        &:focus-visible,
-        &:active {
-            @if ($variant == 'bootstrap') {
-                box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'focus-border-color');
-            }
-
-            @if ($variant == 'indigo-design') {
-                border-color: var-get($outlined-theme, 'border-color');
-                box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'focus-border-color');
-            }
-        }
     }
 
     %igx-button--disabled {

package/lib/core/styles/components/overlay/_overlay-component.scss

@@ -56,5 +56,9 @@
         @include m(hidden) {
             @extend %igx-toggle--hidden !optional;
         }
+
+        @include m(hidden-webkit) {
+            @extend %igx-toggle--hidden-webkit !optional;
+        }
     }
 }

package/lib/core/styles/components/overlay/_overlay-theme.scss

@@ -94,7 +94,23 @@
         position: relative;
     }
 
-    %igx-toggle--hidden {
+    %igx-toggle--hidden:not(%igx-toggle--hidden-webkit) {
         display: none !important;
     }
+
+    %igx-toggle--hidden-webkit {
+        // WARN: This is a workaround around a bug in Safari.
+        position: absolute;
+        visibility: hidden;
+        top: 0;
+        left: 0;
+        margin: -1px;
+        border: none;
+        clip: rect(0, 0, 0, 0);
+        outline: 0;
+        pointer-events: none;
+        overflow: hidden;
+        appearance: none;
+        z-index: -1;
+    }
 }

package/lib/core/utils.d.ts

@@ -124,9 +124,11 @@ export declare class PlatformUtil {
     private platformId;
     isBrowser: boolean;
     isIOS: boolean;
+    isSafari: boolean;
     isFirefox: boolean;
     isEdge: boolean;
     isChromium: boolean;
+    browserVersion: number;
     KEYMAP: {
         ENTER: "Enter";
         SPACE: " ";

package/lib/directives/button/button-base.d.ts

@@ -28,6 +28,22 @@ export declare abstract class IgxButtonBaseDirective extends DisplayDensityBase
      * @internal
      */
     onClick(ev: MouseEvent): void;
+    /**
+     * @hidden
+     * @internal
+     */
+    protected onBlur(): void;
+    /**
+     * Sets/gets whether the button component is on focus.
+     * Default value is `false`.
+     * ```typescript
+     * this.button.focus = true;
+     * ```
+     * ```typescript
+     * let isFocused =  this.button.focused;
+     * ```
+     */
+    protected focused: boolean;
     /**
       * Enables/disables the button.
       *
@@ -43,6 +59,11 @@ export declare abstract class IgxButtonBaseDirective extends DisplayDensityBase
      */
     get disabledAttribute(): true;
     constructor(element: ElementRef, _displayDensityOptions: IDisplayDensityOptions);
+    /**
+     * @hidden
+     * @internal
+     */
+    protected updateOnKeyUp(event: KeyboardEvent): void;
     /**
      * Returns the underlying DOM element.
      */

package/lib/directives/toggle/toggle.directive.d.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
-import { CancelableBrowserEventArgs, IBaseEventArgs } from '../../core/utils';
+import { CancelableBrowserEventArgs, IBaseEventArgs, PlatformUtil } from '../../core/utils';
 import { IgxNavigationService, IToggleView } from '../../core/navigation';
 import { IgxOverlayService } from '../../services/overlay/overlay';
 import { OverlaySettings } from '../../services/overlay/utilities';
@@ -17,6 +17,7 @@ export declare class IgxToggleDirective implements IToggleView, OnInit, OnDestro
     private cdr;
     protected overlayService: IgxOverlayService;
     private navigationService;
+    private platform?;
     /**
      * Emits an event after the toggle container is opened.
      *
@@ -122,6 +123,7 @@ export declare class IgxToggleDirective implements IToggleView, OnInit, OnDestro
      * @hidden
      */
     get hiddenClass(): boolean;
+    get hiddenWebkitClass(): boolean;
     /**
      * @hidden
      */
@@ -137,7 +139,7 @@ export declare class IgxToggleDirective implements IToggleView, OnInit, OnDestro
     /**
      * @hidden
      */
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, overlayService: IgxOverlayService, navigationService: IgxNavigationService);
+    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, overlayService: IgxOverlayService, navigationService: IgxNavigationService, platform?: PlatformUtil);
     /**
      * Opens the toggle.
      *
@@ -194,7 +196,7 @@ export declare class IgxToggleDirective implements IToggleView, OnInit, OnDestro
     private subscribe;
     private unsubscribe;
     private clearSubscription;
-    static ɵfac: i0.ɵɵFactoryDeclaration<IgxToggleDirective, [null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IgxToggleDirective, [null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<IgxToggleDirective, "[igxToggle]", ["toggle"], { "id": { "alias": "id"; "required": false; }; }, { "opened": "opened"; "opening": "opening"; "closed": "closed"; "closing": "closing"; "appended": "appended"; }, never, never, true, never>;
 }
 export declare class IgxToggleActionDirective implements OnInit {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "17.2.0-rc.1",
+  "version": "17.2.1",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",
@@ -74,7 +74,7 @@
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "uuid": "^9.0.0",
-    "igniteui-theming": "^6.1.0",
+    "igniteui-theming": "^6.2.0",
     "@igniteui/material-icons-extended": "^3.0.0"
   },
   "peerDependencies": {
@@ -94,7 +94,7 @@
     }
   },
   "igxDevDependencies": {
-    "@igniteui/angular-schematics": "~17.2.1320-rc.0"
+    "@igniteui/angular-schematics": "~17.2.1320"
   },
   "ng-update": {
     "migrations": "./migrations/migration-collection.json",