@clr/angular 16.3.2 → 16.3.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.
      */
@@ -960,6 +960,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));
     }
@@ -1043,6 +1049,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();
@@ -1105,11 +1119,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);
                 }
             }));
         }
@@ -3932,17 +3951,17 @@ 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: `
     <span @parent [ngSwitch]="state">
-      <span *ngSwitchCase="buttonState.LOADING">
+      <ng-container *ngSwitchCase="buttonState.LOADING">
         <span @spinner class="spinner spinner-inline"></span>
-      </span>
-      <span *ngSwitchCase="buttonState.SUCCESS">
+      </ng-container>
+      <ng-container *ngSwitchCase="buttonState.SUCCESS">
         <span
           @validated
           (@validated.done)="this.loadingStateChange(this.buttonState.DEFAULT)"
           class="spinner spinner-inline spinner-check"
         ></span>
-      </span>
-      <span *ngSwitchCase="buttonState.DEFAULT" @defaultButton>
+      </ng-container>
+      <span *ngSwitchCase="buttonState.DEFAULT" @defaultButton class="clr-loading-btn-content">
         <ng-content></ng-content>
       </span>
     </span>
@@ -3980,17 +3999,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                     selector: 'button[clrLoading]',
                     template: `
     <span @parent [ngSwitch]="state">
-      <span *ngSwitchCase="buttonState.LOADING">
+      <ng-container *ngSwitchCase="buttonState.LOADING">
         <span @spinner class="spinner spinner-inline"></span>
-      </span>
-      <span *ngSwitchCase="buttonState.SUCCESS">
+      </ng-container>
+      <ng-container *ngSwitchCase="buttonState.SUCCESS">
         <span
           @validated
           (@validated.done)="this.loadingStateChange(this.buttonState.DEFAULT)"
           class="spinner spinner-inline spinner-check"
         ></span>
-      </span>
-      <span *ngSwitchCase="buttonState.DEFAULT" @defaultButton>
+      </ng-container>
+      <span *ngSwitchCase="buttonState.DEFAULT" @defaultButton class="clr-loading-btn-content">
         <ng-content></ng-content>
       </span>
     </span>
@@ -7166,25 +7185,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;
             });
@@ -7209,6 +7227,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.
@@ -10005,6 +10030,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: [
@@ -10030,7 +10061,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>
@@ -10074,7 +10105,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>
@@ -13577,6 +13608,7 @@ class ClrSignpostTrigger {
         this.signpostIdService = signpostIdService;
         this.signpostFocusManager = signpostFocusManager;
         this.platformId = platformId;
+        this.ariaExpanded = false;
         this.subscriptions = [];
         this.document = document;
     }