Merge tag 'v13.11.2' into beta

.storybook/helpers/elements.data.ts

@@ -4,14 +4,14 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-export interface ELement {
+export interface Element {
   name: string;
   symbol: string;
   number: number;
   electronegativity: number;
 }
 
-export const elements: ELement[] = [
+export const elements: Element[] = [
   { name: 'Actinium', symbol: 'Ac', number: 89, electronegativity: 1.1 },
   { name: 'Aluminum', symbol: 'Al', number: 13, electronegativity: 1.61 },
   { name: 'Americium', symbol: 'Am', number: 95, electronegativity: 1.3 },

.storybook/stories/datagrid/datagrid-detail.stories.ts

@@ -8,10 +8,10 @@ import { ClrConditionalModule, ClrDatagridDetail, ClrDatagridModule } from '@clr
 import { Parameters } from '@storybook/addons';
 import { Story } from '@storybook/angular';
 
-import { ELement, elements } from '../../helpers/elements.data';
+import { Element, elements } from '../../helpers/elements.data';
 import { setupStorybook } from '../../helpers/setup-storybook.helpers';
 
-const longContentElement: ELement = {
+const longContentElement: Element = {
   name: 'A really really really really really really really really really long content in the cell',
   symbol: 'Ac',
   number: 89,

.storybook/stories/modal/modal.stories.ts

@@ -17,7 +17,7 @@ const defaultStory: Story = args => ({
   template: `
     <button type="button" class="btn btn-primary" (click)="clrModalOpen = true">Open Modal</button>
     <div>
-      This list is provided to demonstrate scrolling capabillity when modal is open.
+      This list is provided to demonstrate scrolling capability when modal is open.
       <ul>
         <li *ngFor="let _ of createArray(100); let i = index">{{i + 1}}</li>
       </ul>
@@ -32,7 +32,8 @@ const defaultStory: Story = args => ({
       [clrModalSkipAnimation]="clrModalSkipAnimation"
       [clrModalStaticBackdrop]="clrModalStaticBackdrop"
       (clrModalAlternateClose)="clrModalAlternateClose($event)"
-      (clrModalOpenChange)="clrModalOpenChange($event)">
+      (clrModalOpenChange)="clrModalOpen = $event; clrModalOpenChange($event)"
+    >
       <h3 class="modal-title">{{title}}</h3>
       <div class="modal-body">
         {{body}}

projects/angular/clarity.api.md

@@ -3961,7 +3961,8 @@ export class ClrTooltip {
 // @public (undocumented)
 export class ClrTooltipContent extends AbstractPopover implements OnInit {
     // Warning: (ae-forgotten-export) The symbol "TooltipIdService" needs to be exported by the entry point index.d.ts
-    constructor(injector: Injector, parentHost: ElementRef, tooltipIdService: TooltipIdService);
+    // Warning: (ae-forgotten-export) The symbol "TooltipMouseService" needs to be exported by the entry point index.d.ts
+    constructor(injector: Injector, parentHost: ElementRef, tooltipIdService: TooltipIdService, tooltipMouseService: TooltipMouseService);
     // (undocumented)
     get id(): string;
     set id(value: string);
@@ -3976,7 +3977,7 @@ export class ClrTooltipContent extends AbstractPopover implements OnInit {
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<ClrTooltipContent, "clr-tooltip-content", never, { "id": "id"; "position": "clrPosition"; "size": "clrSize"; }, {}, never, ["*"], false, never>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<ClrTooltipContent, [null, { optional: true; }, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrTooltipContent, [null, { optional: true; }, null, null]>;
 }
 
 // @public (undocumented)
@@ -3995,7 +3996,7 @@ export class ClrTooltipModule {
 
 // @public (undocumented)
 export class ClrTooltipTrigger {
-    constructor(toggleService: ClrPopoverToggleService, tooltipIdService: TooltipIdService);
+    constructor(toggleService: ClrPopoverToggleService, tooltipIdService: TooltipIdService, tooltipMouseService: TooltipMouseService);
     // (undocumented)
     ariaDescribedBy: string;
     // (undocumented)

projects/angular/src/data/datagrid/_datagrid.clarity.scss

@@ -1695,12 +1695,12 @@
 
   .datagrid-detail-open {
     & > .datagrid-outer-wrapper > .datagrid-inner-wrapper {
-      div.datagrid-table-wrapper {
+      div.datagrid-table {
         /**
          * So the content with no spaces in the cell doesn't get cut when and the row selected indicator is not hidden
          * e.g. Helloworldthisisaveryveryveryveryverylongcontent
          */
-        display: block;
+        max-width: 100%;
         /**
          * To get rid of detail-pane overlapping the content inside the rows
          */

projects/angular/src/data/datagrid/datagrid-column-separator.spec.ts

@@ -9,7 +9,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { DomAdapter } from '../../utils/dom-adapter/dom-adapter';
-import { KeyCodes } from '../../utils/enums/key-codes.enum';
+import { Keys } from '../../utils/enums/keys.enum';
 import { ClrDatagridColumnSeparator } from './datagrid-column-separator';
 import { ColumnResizerService } from './providers/column-resizer.service';
 import { TableSizeService } from './providers/table-size.service';
@@ -96,41 +96,41 @@ export default function (): void {
 
     it('shows resize tracker on first arrow right key down event', function () {
       expect(resizeTrackerEl.style.height).toBe('');
-      columnHandleEl.dispatchEvent(new KeyboardEvent('keydown', { key: KeyCodes.ArrowRight }));
+      columnHandleEl.dispatchEvent(new KeyboardEvent('keydown', { key: Keys.ArrowRight }));
       expect(resizeTrackerEl.style.height).toBe(tableSizeService.getColumnDragHeight());
     });
 
     it('shows resize tracker on first arrow left key down event', function () {
       expect(resizeTrackerEl.style.height).toBe('');
-      columnHandleEl.dispatchEvent(new KeyboardEvent('keydown', { key: KeyCodes.ArrowLeft }));
+      columnHandleEl.dispatchEvent(new KeyboardEvent('keydown', { key: Keys.ArrowLeft }));
       expect(resizeTrackerEl.style.height).toBe(tableSizeService.getColumnDragHeight());
     });
 
     it('moves resize tracker on horizontal arrow key down events', function () {
       expect(resizeTrackerEl.style.transform).toBe('');
-      columnHandleEl.dispatchEvent(new KeyboardEvent('keydown', { key: KeyCodes.ArrowLeft }));
-      columnHandleEl.dispatchEvent(new KeyboardEvent('keydown', { key: KeyCodes.ArrowLeft }));
-      columnHandleEl.dispatchEvent(new KeyboardEvent('keydown', { key: KeyCodes.ArrowLeft }));
+      columnHandleEl.dispatchEvent(new KeyboardEvent('keydown', { key: Keys.ArrowLeft }));
+      columnHandleEl.dispatchEvent(new KeyboardEvent('keydown', { key: Keys.ArrowLeft }));
+      columnHandleEl.dispatchEvent(new KeyboardEvent('keydown', { key: Keys.ArrowLeft }));
       expect(resizeTrackerEl.style.transform).toBe('translateX(-36px)');
-      columnHandleEl.dispatchEvent(new KeyboardEvent('keydown', { key: KeyCodes.ArrowRight }));
-      columnHandleEl.dispatchEvent(new KeyboardEvent('keydown', { key: KeyCodes.ArrowRight }));
+      columnHandleEl.dispatchEvent(new KeyboardEvent('keydown', { key: Keys.ArrowRight }));
+      columnHandleEl.dispatchEvent(new KeyboardEvent('keydown', { key: Keys.ArrowRight }));
       expect(resizeTrackerEl.style.transform).toBe('translateX(-12px)');
     });
 
     it('hides resize tracker on horizontal arrow key up events', function () {
       expect(resizeTrackerEl.style.height).toBe('');
-      columnHandleEl.dispatchEvent(new KeyboardEvent('keydown', { key: KeyCodes.ArrowRight }));
+      columnHandleEl.dispatchEvent(new KeyboardEvent('keydown', { key: Keys.ArrowRight }));
       expect(resizeTrackerEl.style.height).toBe(tableSizeService.getColumnDragHeight());
-      columnHandleEl.dispatchEvent(new KeyboardEvent('keyup', { key: KeyCodes.ArrowRight }));
+      columnHandleEl.dispatchEvent(new KeyboardEvent('keyup', { key: Keys.ArrowRight }));
       expect(resizeTrackerEl.style.display).toBe('none');
       expect(resizeTrackerEl.style.transform).toBe('translateX(0px)');
     });
 
     it('focuses column handle after arrow key up events', function () {
       expect(document.activeElement).not.toBe(columnHandleEl);
-      columnHandleEl.dispatchEvent(new KeyboardEvent('keydown', { key: KeyCodes.ArrowLeft }));
+      columnHandleEl.dispatchEvent(new KeyboardEvent('keydown', { key: Keys.ArrowLeft }));
       expect(resizeTrackerEl.style.height).toBe(tableSizeService.getColumnDragHeight());
-      columnHandleEl.dispatchEvent(new KeyboardEvent('keyup', { key: KeyCodes.ArrowRight }));
+      columnHandleEl.dispatchEvent(new KeyboardEvent('keyup', { key: Keys.ArrowRight }));
       expect(document.activeElement).toBe(columnHandleEl);
     });
   });

projects/angular/src/data/datagrid/datagrid-column-separator.ts

@@ -7,7 +7,8 @@
 import { DOCUMENT } from '@angular/common';
 import { AfterViewInit, Component, ElementRef, Inject, NgZone, OnDestroy, Renderer2, ViewChild } from '@angular/core';
 
-import { IEKeyCodes, KeyCodes } from '../../utils/enums/key-codes.enum';
+import { Keys } from '../../utils/enums/keys.enum';
+import { normalizeKey } from '../../utils/focus/key-focus/util';
 import { ClrCommonStringsService } from '../../utils/i18n/common-strings.service';
 import { uniqueIdFactory } from '../../utils/id-generator/id-generator.service';
 import { ColumnResizerService } from './providers/column-resizer.service';
@@ -151,11 +152,11 @@ export class ClrDatagridColumnSeparator implements AfterViewInit, OnDestroy {
   }
 
   private isArrowLeftKeyEvent(event: KeyboardEvent) {
-    return event.key === KeyCodes.ArrowLeft || event.key === IEKeyCodes.ArrowLeft;
+    return normalizeKey(event.key) === Keys.ArrowLeft;
   }
 
   private isArrowRightKeyEvent(event: KeyboardEvent) {
-    return event.key === KeyCodes.ArrowRight || event.key === IEKeyCodes.ArrowRight;
+    return normalizeKey(event.key) === Keys.ArrowRight;
   }
 
   ngOnDestroy() {

projects/angular/src/data/datagrid/datagrid-detail.ts

@@ -39,7 +39,7 @@ export class ClrDatagridDetail {
 
   constructor(public detailService: DetailService, public commonStrings: ClrCommonStringsService) {}
 
-  @HostListener('document:keyup.esc')
+  @HostListener('document:keyup.escape')
   close(): void {
     this.detailService.close();
   }

projects/angular/src/data/datagrid/datagrid.spec.ts

@@ -8,7 +8,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { async, fakeAsync, tick } from '@angular/core/testing';
 import { Subject } from 'rxjs';
 
-import { KeyCodes } from '../../utils/enums/key-codes.enum';
+import { Keys } from '../../utils/enums/keys.enum';
 import { commonStringsDefault } from '../../utils/i18n/common-strings.default';
 import { DatagridPropertyStringFilter } from './built-in/filters/datagrid-property-string-filter';
 import { DatagridStringFilterImpl } from './built-in/filters/datagrid-string-filter-impl';
@@ -817,15 +817,15 @@ export default function (): void {
         // need to start with this cell exactly, because it has tabindex=0
         cells[0].focus();
         expect(document.activeElement).toEqual(cells[0]);
-        grid.dispatchEvent(new KeyboardEvent('keydown', { code: KeyCodes.ArrowRight }));
+        grid.dispatchEvent(new KeyboardEvent('keydown', { code: Keys.ArrowRight }));
         // second time, to avoid cycling over cells with radios
-        grid.dispatchEvent(new KeyboardEvent('keydown', { code: KeyCodes.ArrowRight }));
+        grid.dispatchEvent(new KeyboardEvent('keydown', { code: Keys.ArrowRight }));
         expect(document.activeElement).toBe(cells[2]);
-        grid.dispatchEvent(new KeyboardEvent('keydown', { code: KeyCodes.ArrowDown }));
+        grid.dispatchEvent(new KeyboardEvent('keydown', { code: Keys.ArrowDown }));
         expect(document.activeElement).toBe(cells[5]);
-        grid.dispatchEvent(new KeyboardEvent('keydown', { code: KeyCodes.ArrowLeft }));
+        grid.dispatchEvent(new KeyboardEvent('keydown', { code: Keys.ArrowLeft }));
         expect(document.activeElement).toBe(cells[4]);
-        grid.dispatchEvent(new KeyboardEvent('keydown', { code: KeyCodes.ArrowUp }));
+        grid.dispatchEvent(new KeyboardEvent('keydown', { code: Keys.ArrowUp }));
         expect(document.activeElement).toBe(cells[1]);
       });
 
@@ -834,7 +834,7 @@ export default function (): void {
         const cells = grid.querySelectorAll('[role=gridcell], [role=columnheader]');
         cells[0].focus();
         expect(document.activeElement).toEqual(cells[0]);
-        grid.dispatchEvent(new KeyboardEvent('keydown', { code: KeyCodes.ArrowDown }));
+        grid.dispatchEvent(new KeyboardEvent('keydown', { code: Keys.ArrowDown }));
         expect(document.activeElement).toEqual(cells[3].querySelector('[type=radio]'));
       });
 
@@ -843,12 +843,12 @@ export default function (): void {
         const cells = grid.querySelectorAll('[role=gridcell], [role=columnheader]');
         cells[0].focus();
         expect(document.activeElement).toEqual(cells[0]);
-        grid.dispatchEvent(new KeyboardEvent('keydown', { code: KeyCodes.ArrowDown }));
-        grid.dispatchEvent(new KeyboardEvent('keydown', { code: KeyCodes.ArrowDown }));
-        grid.dispatchEvent(new KeyboardEvent('keydown', { code: KeyCodes.ArrowDown }));
+        grid.dispatchEvent(new KeyboardEvent('keydown', { code: Keys.ArrowDown }));
+        grid.dispatchEvent(new KeyboardEvent('keydown', { code: Keys.ArrowDown }));
+        grid.dispatchEvent(new KeyboardEvent('keydown', { code: Keys.ArrowDown }));
         expect(document.activeElement).toEqual(cells[9].querySelector('[type=radio]'));
         // we're at the edge, then we click once more to get to the placeholder
-        grid.dispatchEvent(new KeyboardEvent('keydown', { code: KeyCodes.ArrowDown }));
+        grid.dispatchEvent(new KeyboardEvent('keydown', { code: Keys.ArrowDown }));
         expect(document.activeElement).toEqual(cells[9].querySelector('[type=radio]'));
       });