@clr/angular 15.14.1 → 15.14.4

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, take, first, switchMap } from 'rxjs/operators';
+import { map, tap, startWith, distinctUntilChanged, filter, skipUntil, 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';
@@ -361,8 +361,8 @@ const commonStringsDefault = {
      * Password Input
      * Screen-reader text for the hide/show password field button
      */
-    passwordHide: 'Hide password',
-    passwordShow: 'Show password',
+    passwordHide: 'Hide password for {LABEL}',
+    passwordShow: 'Show password for {LABEL}',
     /**
      * Datagrid footer; sr-only text after the number of selected rows.
      */
@@ -941,6 +941,12 @@ class StepperModel extends AccordionModel {
             }
         });
     }
+    setPanelValid(panelId) {
+        this._panels[panelId].status = AccordionStatus.Complete;
+    }
+    setPanelInvalid(panelId) {
+        this._panels[panelId].status = AccordionStatus.Error;
+    }
     setPanelsWithErrors(ids) {
         ids.forEach(id => this.setPanelError(id));
     }
@@ -1021,6 +1027,14 @@ class StepperService extends AccordionService {
         this.accordion.resetPanels();
         this.emitUpdatedPanels();
     }
+    setPanelValid(panelId) {
+        this.accordion.setPanelValid(panelId);
+        this.emitUpdatedPanels();
+    }
+    setPanelInvalid(panelId) {
+        this.accordion.setPanelInvalid(panelId);
+        this.emitUpdatedPanels();
+    }
     setPanelsWithErrors(ids) {
         this.accordion.setPanelsWithErrors(ids);
         this.emitUpdatedPanels();
@@ -1083,11 +1097,16 @@ class ClrStepperPanel extends ClrAccordionPanel {
         this.panel = this.panel.pipe(tap(panel => this.triggerAllFormControlValidationIfError(panel)));
         this.stepperService.disablePanel(this.id, true);
         this.listenToFocusChanges();
+        // not all stepper panels are guaranteed to have a form (i.e. empty template-driven)
         if (this.formGroup) {
-            // not all stepper panels are guaranteed to have a form (i.e. empty template-driven)
-            this.subscriptions.push(this.formGroup.statusChanges.pipe(pairwise()).subscribe(([prevStatus, newStatus]) => {
-                if ('VALID' === prevStatus && 'INVALID' === newStatus) {
-                    this.stepperService.navigateToNextPanel(this.id, this.formGroup.valid);
+            // set panel status on form status change only after the form becomes invalid
+            const invalidStatusTrigger = this.formGroup.statusChanges.pipe(filter(status => status === 'INVALID'));
+            this.subscriptions.push(this.formGroup.statusChanges.pipe(skipUntil(invalidStatusTrigger), distinctUntilChanged()).subscribe(status => {
+                if (status === 'VALID') {
+                    this.stepperService.setPanelValid(this.id);
+                }
+                else if (status === 'INVALID') {
+                    this.stepperService.setPanelInvalid(this.id);
                 }
             }));
         }
@@ -1933,12 +1952,12 @@ class ClrPopoverPositionService {
          *
          *   Note, more than 3 viewport violations and there isn't anything we can do to help. Also when there are two
          *   violations, we can't help if the violations are TOP+BOTTOM || LEFT+RIGHT => There is no transformation we
-         *   can make to the postion that will help.
+         *   can make to the position that will help.
          *
          *   Some examples:
          *   There is only one error and Primary axis is VERTICAL
          *   - this.handleVerticalAxisOneViolation has a switch that will use the error sum to apply the correct
-         *   transform to the postion based on the reduction of visibilityViolations.
+         *   transform to the position based on the reduction of visibilityViolations.
          *
          *   There are two errors and Primary axis is HORIZONTAL
          *   - handleHorizontalAxisTwoViolations has a switch that uses the error sum to apply both transforms needed to
@@ -1970,6 +1989,14 @@ class ClrPopoverPositionService {
         if (this.currentContentCoords.top < 0) {
             this.contentOffsets.yOffset += Math.abs(this.currentContentCoords.top);
         }
+        /**
+         * This detects the condition where the popover is flipped because it would violate the bottom of the viewport, but flipping it results in the
+         * popover rendering above the top of the body (y coordinate outside the body). In that event, it should be rendered within the body
+         * as much as possible, so this logic sets the top of popover to render touching the top of the body.
+         */
+        if (this.contentOffsets.yOffset + this.currentAnchorCoords.y < 0) {
+            this.contentOffsets.yOffset = 0 - this.currentContentCoords.top;
+        }
         return this.contentOffsets;
     }
     handleVerticalAxisOneViolation(errorSum) {
@@ -3795,16 +3822,14 @@ class ClrButtonGroup {
         this.menuButtons = tempInMenuButtons;
     }
     handleFocusOnMenuOpen() {
-        if (this.menuButtons.length) {
-            this.toggleService.popoverVisible.pipe(takeUntil(this.destroy$)).subscribe(visible => {
-                if (visible) {
-                    this.focusHandler.initialize({
-                        menu: this.menu.nativeElement,
-                        menuToggle: this.menuToggle.nativeElement,
-                    });
-                }
-            });
-        }
+        this.toggleService.popoverVisible.pipe(takeUntil(this.destroy$)).subscribe(visible => {
+            if (visible) {
+                this.focusHandler.initialize({
+                    menu: this.menu.nativeElement,
+                    menuToggle: this.menuToggle.nativeElement,
+                });
+            }
+        });
     }
 }
 ClrButtonGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrButtonGroup, deps: [{ token: ButtonInGroupService }, { token: ClrPopoverToggleService }, { token: ClrCommonStringsService }, { token: ClrDestroyService }, { token: ButtonGroupFocusHandler }], target: i0.ɵɵFactoryTarget.Component });
@@ -3903,7 +3928,7 @@ class ClrLoadingButton {
 }
 ClrLoadingButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrLoadingButton, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
 ClrLoadingButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrLoadingButton, selector: "button[clrLoading]", inputs: { disabled: "disabled" }, outputs: { clrLoadingChange: "clrLoadingChange" }, host: { properties: { "attr.disabled": "disabled? '' : null" } }, providers: [{ provide: LoadingListener, useExisting: ClrLoadingButton }], ngImport: i0, template: `
-    <ng-container [ngSwitch]="state">
+    <span @parent [ngSwitch]="state">
       <span *ngSwitchCase="buttonState.LOADING">
         <span @spinner class="spinner spinner-inline"></span>
       </span>
@@ -3917,8 +3942,13 @@ ClrLoadingButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
       <span *ngSwitchCase="buttonState.DEFAULT" @defaultButton>
         <ng-content></ng-content>
       </span>
-    </ng-container>
+    </span>
   `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], animations: [
+        trigger('parent', [
+            // Skip :enter animation on first render.
+            // The button text/content should only be faded when transitioning to or from a non-default state.
+            transition(':enter', []),
+        ]),
         trigger('defaultButton', [
             transition(':enter', [style({ opacity: 0 }), animate('200ms 100ms ease-in', style({ opacity: 1 }))]),
             // TODO: see if we can get leave animation to work before spinner's enter animation
@@ -3946,7 +3976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             args: [{
                     selector: 'button[clrLoading]',
                     template: `
-    <ng-container [ngSwitch]="state">
+    <span @parent [ngSwitch]="state">
       <span *ngSwitchCase="buttonState.LOADING">
         <span @spinner class="spinner spinner-inline"></span>
       </span>
@@ -3960,10 +3990,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
       <span *ngSwitchCase="buttonState.DEFAULT" @defaultButton>
         <ng-content></ng-content>
       </span>
-    </ng-container>
+    </span>
   `,
                     providers: [{ provide: LoadingListener, useExisting: ClrLoadingButton }],
                     animations: [
+                        trigger('parent', [
+                            // Skip :enter animation on first render.
+                            // The button text/content should only be faded when transitioning to or from a non-default state.
+                            transition(':enter', []),
+                        ]),
                         trigger('defaultButton', [
                             transition(':enter', [style({ opacity: 0 }), animate('200ms 100ms ease-in', style({ opacity: 1 }))]),
                             // TODO: see if we can get leave animation to work before spinner's enter animation
@@ -7126,25 +7161,24 @@ class ClrOptionItems {
         if (!this._rawItems || this.filter === undefined || this.filter === null) {
             return;
         }
+        const normalizedFilterValue = normalizeValue(this.filter);
         if (this.optionService.showAllOptions) {
             this.filteredItems = this._rawItems;
         }
         else if (this._filterField) {
             this.filteredItems = this._rawItems.filter(item => {
                 const objValue = item[this._filterField];
-                return objValue ? objValue.toString().toLowerCase().indexOf(this.filter.toLowerCase().toString()) > -1 : false;
+                return objValue ? normalizeValue(objValue).includes(normalizedFilterValue) : false;
             });
         }
         else {
             // Filter by all item object values
             this.filteredItems = this._rawItems.filter(item => {
                 if (typeof item !== 'object') {
-                    return item.toString().toLowerCase().indexOf(this.filter.toString().toLowerCase()) > -1;
+                    return normalizeValue(item).includes(normalizedFilterValue);
                 }
                 const objValues = Object.values(item).filter(value => {
-                    return value !== null && value !== undefined
-                        ? value.toString().toLowerCase().indexOf(this.filter.toString().toLowerCase()) > -1
-                        : false;
+                    return value !== null && value !== undefined ? normalizeValue(value).includes(normalizedFilterValue) : false;
                 });
                 return objValues.length > 0;
             });
@@ -7169,6 +7203,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                 type: Input,
                 args: ['clrOptionItemsField']
             }] } });
+function normalizeValue(value) {
+    return value
+        .toString()
+        .normalize('NFD')
+        .replace(/\p{Diacritic}/gu, '')
+        .toLowerCase();
+}
 
 /*
  * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
@@ -8373,7 +8414,7 @@ class DateIOService {
         return '';
     }
     getDateValueFromDateString(date) {
-        if (!date) {
+        if (!date || typeof date !== 'string') {
             return null;
         }
         const dateParts = date.match(USER_INPUT_REGEX);
@@ -9579,9 +9620,11 @@ class ClrDateInput extends WrappedFormControl {
     }
     set min(dateString) {
         this.dateIOService.setMinDate(dateString);
+        this.triggerControlValidation();
     }
     set max(dateString) {
         this.dateIOService.setMaxDate(dateString);
+        this.triggerControlValidation();
     }
     get disabled() {
         if (this.dateFormControlService) {
@@ -9646,6 +9689,13 @@ class ClrDateInput extends WrappedFormControl {
             this.focusService.focused = focus;
         }
     }
+    triggerControlValidation() {
+        if (this.datepickerHasFormControl()) {
+            // Set `emitEvent` to false to prevent unnecessary value change event. Status change event will be emitted by `setErrors` below.
+            this.control.control?.updateValueAndValidity({ emitEvent: false });
+            this.control.control?.setErrors(this.control.control.errors);
+        }
+    }
     populateServicesFromContainerComponent() {
         if (!this.container) {
             this.dateIOService = this.getProviderFromContainer(DateIOService);
@@ -9951,6 +10001,12 @@ class ClrPasswordContainer extends ClrAbstractContainer {
         this.show = !this.show;
         this.toggleService.next(this.show);
     }
+    showPasswordText(label) {
+        return this.commonStrings.parse(this.commonStrings.keys.passwordShow, { LABEL: label });
+    }
+    hidePasswordText(label) {
+        return this.commonStrings.parse(this.commonStrings.keys.passwordHide, { LABEL: label });
+    }
 }
 ClrPasswordContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrPasswordContainer, deps: [{ token: IfControlStateService }, { token: LayoutService, optional: true }, { token: ControlClassService }, { token: NgControlService }, { token: FocusService }, { token: TOGGLE_SERVICE }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
 ClrPasswordContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrPasswordContainer, selector: "clr-password-container", inputs: { clrToggle: "clrToggle" }, host: { properties: { "class.clr-form-control": "true", "class.clr-form-control-disabled": "control?.disabled", "class.clr-row": "addGrid()" } }, providers: [
@@ -9976,7 +10032,7 @@ ClrPasswordContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
           >
             <cds-icon status="info" class="clr-password-eye-icon" [attr.shape]="show ? 'eye-hide' : 'eye'"></cds-icon>
             <span class="clr-sr-only">
-              {{ show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow }}
+              {{ show ? hidePasswordText(label?.labelText) : showPasswordText(label?.labelText) }}
             </span>
           </button>
         </div>
@@ -10020,7 +10076,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
           >
             <cds-icon status="info" class="clr-password-eye-icon" [attr.shape]="show ? 'eye-hide' : 'eye'"></cds-icon>
             <span class="clr-sr-only">
-              {{ show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow }}
+              {{ show ? hidePasswordText(label?.labelText) : showPasswordText(label?.labelText) }}
             </span>
           </button>
         </div>
@@ -13524,6 +13580,7 @@ class ClrSignpostTrigger {
         this.signpostIdService = signpostIdService;
         this.signpostFocusManager = signpostFocusManager;
         this.platformId = platformId;
+        this.ariaExpanded = false;
         this.subscriptions = [];
         this.document = document;
     }
@@ -19909,7 +19966,7 @@ class ClrAlert {
         }
         const isCurrentAlert = this.multiAlertService?.currentAlert === this;
         this._closed = true;
-        if (this.multiAlertService) {
+        if (this.multiAlertService?.activeAlerts) {
             this.multiAlertService.close(isCurrentAlert);
         }
         this._closedChanged.emit(true);
@@ -22420,7 +22477,7 @@ ClrSignpostContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
           <cds-icon shape="window-close" [attr.title]="commonStrings.keys.close"></cds-icon>
         </button>
       </div>
-      <div class="signpost-content-body">
+      <div class="signpost-content-body" tabindex="0">
         <ng-content></ng-content>
       </div>
     </div>
@@ -22443,7 +22500,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
           <cds-icon shape="window-close" [attr.title]="commonStrings.keys.close"></cds-icon>
         </button>
       </div>
-      <div class="signpost-content-body">
+      <div class="signpost-content-body" tabindex="0">
         <ng-content></ng-content>
       </div>
     </div>