@clr/angular 15.5.1 → 15.7.0

package/fesm2020/clr-angular.mjs

@@ -3,7 +3,7 @@ import { Directive, NgModule, Optional, Input, Injectable, Component, ChangeDete
 import * as i5 from '@angular/common';
 import { CommonModule, isPlatformBrowser, DOCUMENT, NgForOf, getLocaleDayNames, FormStyle, TranslationWidth, getLocaleMonthNames, getLocaleFirstDayOfWeek, getLocaleDateFormat, FormatWidth } from '@angular/common';
 import { ClarityIcons, angleIcon, exclamationCircleIcon, checkCircleIcon, ellipsisHorizontalIcon, windowCloseIcon, eventIcon, calendarIcon, eyeHideIcon, eyeIcon, ellipsisVerticalIcon, viewColumnsIcon, arrowIcon, timesIcon, stepForward2Icon, angleDoubleIcon, filterGridCircleIcon, filterGridIcon, infoCircleIcon, exclamationTriangleIcon, circleIcon, dotCircleIcon, errorStandardIcon, successStandardIcon } from '@cds/core/icon';
-import { map, tap, startWith, distinctUntilChanged, pairwise, filter, debounceTime, takeUntil, delay, take, first, switchMap } from 'rxjs/operators';
+import { map, tap, startWith, distinctUntilChanged, pairwise, filter, debounceTime, takeUntil, take, first, switchMap } from 'rxjs/operators';
 import * as i3 from 'rxjs';
 import { Subject, BehaviorSubject, Observable, fromEvent, isObservable, of, ReplaySubject, combineLatest, merge } from 'rxjs';
 import { trigger, transition, style, animate, state, keyframes } from '@angular/animations';
@@ -1412,10 +1412,14 @@ class ClrPopoverToggleService {
         this._openChange = new Subject();
         this._openEventChange = new Subject();
         this._popoverAligned = new Subject();
+        this._popoverVisible = new Subject();
     }
     get openChange() {
         return this._openChange.asObservable();
     }
+    get popoverVisible() {
+        return this._popoverVisible.asObservable();
+    }
     get openEvent() {
         return this._openEvent;
     }
@@ -1452,6 +1456,9 @@ class ClrPopoverToggleService {
         this.openEvent = event;
         this.open = !this.open;
     }
+    popoverVisibleEmit(visible) {
+        this._popoverVisible.next(visible);
+    }
     popoverAlignedEmit(popoverNode) {
         this._popoverAligned.next(popoverNode);
     }
@@ -1953,6 +1960,13 @@ class ClrPopoverPositionService {
             // When primary axis is HORIZONTAL and there are two viewport violations
             this.handleHorizontalAxisTwoViolations(errorSum);
         }
+        /**
+         * Adjusts popover position based on scroll value by adding the negative 'top' value of currentContentCoords to yOffset for proper alignment.
+         * - The negative value means that the 'top' of the content is scrolled out of view at the top of the viewport.
+         */
+        if (this.currentContentCoords.top < 0) {
+            this.contentOffsets.yOffset += Math.abs(this.currentContentCoords.top);
+        }
         return this.contentOffsets;
     }
     handleVerticalAxisOneViolation(errorSum) {
@@ -2148,6 +2162,7 @@ class ClrPopoverContent {
             this.shouldRealign = false;
             if (this.view) {
                 this.renderer.setStyle(this.view.rootNodes[0], 'opacity', '1');
+                this.smartOpenService.popoverVisibleEmit(true);
             }
         }));
     }
@@ -2195,6 +2210,7 @@ class ClrPopoverContent {
         this.view.rootNodes.forEach(node => this.renderer.removeChild(this.document.body, node));
         this.container.clear();
         delete this.view;
+        this.smartOpenService.popoverVisibleEmit(false);
     }
     alignContent() {
         if (!this.view) {
@@ -3777,8 +3793,8 @@ class ClrButtonGroup {
     }
     handleFocusOnMenuOpen() {
         if (this.menuButtons.length) {
-            this.toggleService.openChange.pipe(delay(0), takeUntil(this.destroy$)).subscribe(isOpened => {
-                if (isOpened) {
+            this.toggleService.popoverVisible.pipe(takeUntil(this.destroy$)).subscribe(visible => {
+                if (visible) {
                     this.focusHandler.initialize({
                         menu: this.menu.nativeElement,
                         menuToggle: this.menuToggle.nativeElement,
@@ -6628,10 +6644,15 @@ class ClrOptions {
                 event.target !== this.focusHandler.textInput) {
                 this.toggleService.open = false;
             }
-        }), this.items.changes.subscribe(() => {
-            setTimeout(() => {
-                this.focusHandler.focusFirstActive();
-            });
+        }), this.items.changes.subscribe(items => {
+            if (items.length) {
+                setTimeout(() => {
+                    this.focusHandler.focusFirstActive();
+                });
+            }
+            else {
+                this.focusHandler.pseudoFocus.pop();
+            }
         }));
     }
     ngOnDestroy() {
@@ -15216,7 +15237,8 @@ class ClrDatagridActionOverflow {
         this.rowActionService.register();
         this.subscriptions.push(this.smartToggleService.openChange.subscribe(openState => {
             this.open = openState;
-            if (openState) {
+        }), this.smartToggleService.popoverVisible.subscribe(visible => {
+            if (visible) {
                 this.initializeFocus();
             }
         }));
@@ -15243,16 +15265,12 @@ class ClrDatagridActionOverflow {
     }
     initializeFocus() {
         if (isPlatformBrowser(this.platformId)) {
-            this.zone.runOutsideAngular(() => {
-                setTimeout(() => {
-                    const buttons = Array.from(document.querySelectorAll('button.action-item'));
-                    if (buttons.length) {
-                        this.keyFocus.current = 0;
-                        this.keyFocus.focusableItems = buttons;
-                        this.keyFocus.focusCurrent();
-                    }
-                });
-            });
+            const buttons = Array.from(document.querySelectorAll('button.action-item'));
+            if (buttons.length) {
+                this.keyFocus.current = 0;
+                this.keyFocus.focusableItems = buttons;
+                this.keyFocus.focusCurrent();
+            }
         }
     }
 }
@@ -21645,7 +21663,7 @@ class ClrVerticalNav {
     }
 }
 ClrVerticalNav.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrVerticalNav, deps: [{ token: VerticalNavService }, { token: VerticalNavIconService }, { token: VerticalNavGroupRegistrationService }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrVerticalNav.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrVerticalNav, selector: "clr-vertical-nav", inputs: { collapsible: ["clrVerticalNavCollapsible", "collapsible"], collapsed: ["clrVerticalNavCollapsed", "collapsed"] }, outputs: { _collapsedChanged: "clrVerticalNavCollapsedChange" }, host: { properties: { "class.is-collapsed": "collapsed", "class.has-nav-groups": "hasNavGroups", "class.has-icons": "hasIcons" }, classAttribute: "clr-vertical-nav" }, providers: [VerticalNavService, VerticalNavIconService, VerticalNavGroupRegistrationService], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<button\n  type=\"button\"\n  class=\"nav-trigger\"\n  [class.on-collapse]=\"collapsed\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n  (click)=\"toggleByButton()\"\n  *ngIf=\"collapsible\"\n>\n  <cds-icon\n    shape=\"angle-double\"\n    class=\"nav-trigger-icon\"\n    [attr.direction]=\"(this.collapsed) ? 'right' : 'left'\"\n    [attr.title]=\"(this.collapsed) ? commonStrings.keys.expand : commonStrings.keys.collapse\"\n  ></cds-icon>\n</button>\n<div class=\"nav-content\">\n  <ng-content></ng-content>\n  <button\n    (click)=\"collapsed = false\"\n    class=\"nav-btn\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n    [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n    *ngIf=\"collapsible && collapsed\"\n  ></button>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }] });
+ClrVerticalNav.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrVerticalNav, selector: "clr-vertical-nav", inputs: { collapsible: ["clrVerticalNavCollapsible", "collapsible"], collapsed: ["clrVerticalNavCollapsed", "collapsed"] }, outputs: { _collapsedChanged: "clrVerticalNavCollapsedChange" }, host: { properties: { "class.is-collapsed": "collapsed", "class.has-nav-groups": "hasNavGroups", "class.has-icons": "hasIcons" }, classAttribute: "clr-vertical-nav" }, providers: [VerticalNavService, VerticalNavIconService, VerticalNavGroupRegistrationService], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<button\n  type=\"button\"\n  class=\"nav-trigger\"\n  [class.on-collapse]=\"collapsed\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n  (click)=\"toggleByButton()\"\n  *ngIf=\"collapsible\"\n>\n  <cds-icon\n    shape=\"angle-double\"\n    class=\"nav-trigger-icon\"\n    [attr.direction]=\"(this.collapsed) ? 'right' : 'left'\"\n    [attr.title]=\"(this.collapsed) ? commonStrings.keys.expand : commonStrings.keys.collapse\"\n  ></cds-icon>\n</button>\n<div class=\"nav-content\">\n  <ng-content></ng-content>\n  <button\n    type=\"button\"\n    (click)=\"collapsed = false\"\n    class=\"nav-btn\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n    [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n    *ngIf=\"collapsible && collapsed\"\n  ></button>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrVerticalNav, decorators: [{
             type: Component,
             args: [{ selector: 'clr-vertical-nav', providers: [VerticalNavService, VerticalNavIconService, VerticalNavGroupRegistrationService], host: {
@@ -21653,7 +21671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                         '[class.is-collapsed]': 'collapsed',
                         '[class.has-nav-groups]': 'hasNavGroups',
                         '[class.has-icons]': 'hasIcons',
-                    }, template: "<!--\n  ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<button\n  type=\"button\"\n  class=\"nav-trigger\"\n  [class.on-collapse]=\"collapsed\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n  (click)=\"toggleByButton()\"\n  *ngIf=\"collapsible\"\n>\n  <cds-icon\n    shape=\"angle-double\"\n    class=\"nav-trigger-icon\"\n    [attr.direction]=\"(this.collapsed) ? 'right' : 'left'\"\n    [attr.title]=\"(this.collapsed) ? commonStrings.keys.expand : commonStrings.keys.collapse\"\n  ></cds-icon>\n</button>\n<div class=\"nav-content\">\n  <ng-content></ng-content>\n  <button\n    (click)=\"collapsed = false\"\n    class=\"nav-btn\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n    [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n    *ngIf=\"collapsible && collapsed\"\n  ></button>\n</div>\n" }]
+                    }, template: "<!--\n  ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<button\n  type=\"button\"\n  class=\"nav-trigger\"\n  [class.on-collapse]=\"collapsed\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n  (click)=\"toggleByButton()\"\n  *ngIf=\"collapsible\"\n>\n  <cds-icon\n    shape=\"angle-double\"\n    class=\"nav-trigger-icon\"\n    [attr.direction]=\"(this.collapsed) ? 'right' : 'left'\"\n    [attr.title]=\"(this.collapsed) ? commonStrings.keys.expand : commonStrings.keys.collapse\"\n  ></cds-icon>\n</button>\n<div class=\"nav-content\">\n  <ng-content></ng-content>\n  <button\n    type=\"button\"\n    (click)=\"collapsed = false\"\n    class=\"nav-btn\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n    [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n    *ngIf=\"collapsible && collapsed\"\n  ></button>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: VerticalNavService }, { type: VerticalNavIconService }, { type: VerticalNavGroupRegistrationService }, { type: ClrCommonStringsService }]; }, propDecorators: { _collapsedChanged: [{
                 type: Output,
                 args: ['clrVerticalNavCollapsedChange']