Merge branch '15.1.x' into ibarakov/fix-12787

Author: igdmdimitrov

gulpfile.js

@@ -188,8 +188,6 @@ function typedocBuildExportFn(cb) {
         TYPEDOC.PROJECT_PATH,
         "--generate-json",
         TYPEDOC.EXPORT_JSON_PATH,
-        "--tags",
-        "--params",
         "--tsconfig",
         path.join(__dirname, "tsconfig.typedoc.json")],
         { stdio: 'inherit', shell: true });

package-lock.json

@@ -130,8 +130,8 @@
     "stylelint": "^15.1.0",
     "stylelint-scss": "^4.1.0",
     "ts-node": "^10.8.1",
-    "typedoc": "^0.23.24",
-    "typedoc-plugin-localization": "^2.4.0",
+    "typedoc": "^0.23.21",
+    "typedoc-plugin-localization": "^3.0.0",
     "typescript": "4.9.5"
   }
 }

package.json

@@ -86,7 +86,7 @@
         "@angular/forms": "^15.0.0"
     },
     "igxDevDependencies": {
-        "@igniteui/angular-schematics": "~15.0.1100"
+        "@igniteui/angular-schematics": "~15.1.1110-rc.0"
     },
     "ng-update": {
         "migrations": "./migrations/migration-collection.json"

projects/igniteui-angular/package.json

@@ -16,9 +16,6 @@ export class IgxComboAddItemComponent extends IgxComboItemComponent {
     public set selected(value: boolean) {
     }
 
-    /**
-     * @inheritDoc
-     */
     public clicked(event?) {// eslint-disable-line
         this.comboAPI.disableTransitions = false;
         this.comboAPI.add_custom_item();

projects/igniteui-angular/src/lib/combo/combo-add-item.component.ts

@@ -101,9 +101,6 @@ export class IgxComboItemComponent extends IgxDropDownItemComponent {
         return rect.y >= parentDiv.y;
     }
 
-    /**
-     * @inheritDoc
-     */
     public clicked(event): void {
         this.comboAPI.disableTransitions = false;
         if (!this.isSelectable) {

projects/igniteui-angular/src/lib/combo/combo-item.component.ts

@@ -369,9 +369,9 @@
         align-items: center;
 
         igx-icon {
+            width: sizable(rem(18px), rem(20px), rem(24px)) ;
+            height: sizable(rem(18px), rem(20px), rem(24px)) ;
             font-size: sizable(rem(18px), rem(20px), rem(24px)) !important;
-            width: auto;
-            height: auto;
         }
 
         @if $indigo-theme {
@@ -393,8 +393,8 @@
 
         igx-icon[igxPrefix],
         igx-icon[igxSuffix] {
-            width: auto;
-            height: auto;
+            width: sizable(rem(18px), rem(20px), rem(24px)) ;
+            height: sizable(rem(18px), rem(20px), rem(24px)) ;
             font-size: sizable(rem(18px), rem(20px), rem(24px)) !important;
         }
     }
@@ -637,6 +637,7 @@
         width: auto;
         min-width: 0;
         height: 100%;
+        position: relative;
 
         grid-area: 1 / 2;
     }
@@ -653,10 +654,6 @@
         grid-area: 1 / 4;
     }
 
-    %form-group-bundle--box,
-    %form-group-bundle--border {
-        grid-template-columns: auto auto 1fr auto;
-    }
 
     %form-group-bundle-start,
     %form-group-bundle-end {
@@ -677,8 +674,7 @@
     }
 
     %form-group-bundle--border {
-        --size: #{sizable(rem(40px), rem(48px), rem(56px))};
-
+        grid-template-columns: auto auto 1fr auto;
         display: grid;
         align-items: initial;
         padding: 0;
@@ -787,7 +783,6 @@
         padding-block: 0;
         border: none;
         outline-style: none;
-        color: inherit;
         z-index: 1;
     }
 
@@ -873,7 +868,7 @@
         position: absolute;
         max-width: 100%;
         padding-inline-end: rem(4px);
-        line-height: 1;
+        line-height: normal;
         backface-visibility: hidden;
         will-change: transform;
         transform-origin: top left;
@@ -905,7 +900,7 @@
     }
 
     %form-group-label--float {
-        --floating-label-position: -106%;
+        --floating-label-position: -73%;
         transform: translateY(var(--floating-label-position));
         font-size: rem(12px);
     }
@@ -1584,10 +1579,9 @@
 
     // Label
     %fluent-label {
-        display: inline-flex;
+        display: block;
         font-size: rem(14px);
         font-weight: 600;
-        line-height: 1 !important;
         position: static;
         transform: translateY(0);
         transform-origin: top left;

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -117,8 +117,8 @@
 
     %igx-page-size__select {
         display: flex;
-        max-width: rem(90px);
-        min-width: rem(80px);
+        max-width: rem(114px);
+        min-width: rem(100px);
     }
 
     %igx-page-nav {

projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss

@@ -74,13 +74,6 @@
         }
     }
 
-    @if $variant == 'material' {
-        .igx-input-group--focused %igx-select__toggle-button {
-            background: var-get($theme, 'toggle-button-background-focus');
-            color: var-get($theme, 'toggle-button-foreground-focus');
-        }
-    }
-
     @if $variant == 'bootstrap' {
         .igx-input-group--disabled {
             %igx-select__toggle-button {
@@ -104,6 +97,14 @@
         }
     }
 
+    @if $variant == 'material' {
+        .igx-input-group--focused %igx-select__toggle-button {
+            background: var-get($theme, 'toggle-button-background-focus');
+            color: var-get($theme, 'toggle-button-foreground-focus');
+        }
+    }
+
+
     .igx-input-group--disabled {
         %igx-select__toggle-button {
             background: var-get($theme, 'toggle-button-background-disabled');

projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss

@@ -1,7 +1,7 @@
 import {
     AfterContentInit,
     AfterViewInit,
-    ContentChildren, Directive, EventEmitter, HostBinding, HostListener, Input, NgModule, OnDestroy, Optional, Output, QueryList, Self
+    ContentChildren, Directive, DoCheck, EventEmitter, HostBinding, HostListener, Input, NgModule, OnDestroy, Optional, Output, QueryList, Self
 } from '@angular/core';
 import { ControlValueAccessor, NgControl, Validators } from '@angular/forms';
 import { fromEvent, noop, Subject } from 'rxjs';
@@ -49,7 +49,7 @@ let nextId = 0;
     exportAs: 'igxRadioGroup',
     selector: 'igx-radio-group, [igxRadioGroup]'
 })
-export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit, ControlValueAccessor, OnDestroy {
+export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit, ControlValueAccessor, OnDestroy, DoCheck {
     private static ngAcceptInputType_required: boolean | '';
     private static ngAcceptInputType_invalid: boolean | '';
     /**
@@ -204,10 +204,10 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
     @HostListener('keydown', ['$event'])
     protected handleKeyDown(event: KeyboardEvent) {
         const { key } = event;
+        const buttons = this.radioButtons.filter(radio => !radio.disabled);
+        const checked = buttons.find((radio) => radio.checked);
 
         if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
-            const buttons = this.radioButtons.filter(radio => !radio.disabled);
-            const checked = buttons.find((radio) => radio.checked);
             let index = checked ? buttons.indexOf(checked!) : -1;
             const ltr = this._directionality.value === 'ltr';
 
@@ -238,6 +238,14 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
             buttons[index].select();
             event.preventDefault();
         }
+
+        if (event.key === "Tab") {
+            buttons.forEach((radio) => {
+                if (radio !== checked) {
+                    event.stopPropagation();
+                }
+            });
+        }
     }
 
     /**
@@ -352,6 +360,12 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
                 .subscribe(() => {
                     this.updateValidityOnBlur()
                 });
+
+                fromEvent(button.nativeElement, 'keyup')
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((event: KeyboardEvent) => {
+                    this.updateOnKeyUp(event)
+                });
             });
         }
     }
@@ -371,6 +385,45 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
         }
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    private updateOnKeyUp(event: KeyboardEvent) {
+        const checked = this.radioButtons.find(x => x.checked);
+
+        if (event.key === "Tab") {
+            this.radioButtons.forEach((radio) => {
+                if (radio === checked) {
+                    checked.focused = true;
+                }
+            });
+        }
+    }
+
+    public ngDoCheck(): void {
+        this._updateTabIndex();
+    }
+
+    private _updateTabIndex() {
+        // Needed so that the keyboard navigation of a radio group
+        // placed inside a dialog works properly
+        if (this.radioButtons) {
+            const checked = this.radioButtons.find(x => x.checked);
+
+            if (checked) {
+                this.radioButtons.forEach((button) => {
+                    checked.nativeElement.tabIndex = 0;
+
+                    if (button !== checked) {
+                        button.nativeElement.tabIndex = -1;
+                        button.focused = false;
+                    }
+                });
+            }
+        }
+    }
+
     /**
      * Sets the "checked" property value on the radio input element.
      *