@clr/angular 17.0.0-beta.3 → 17.0.0-beta.4

package/fesm2020/clr-angular.mjs

@@ -2,8 +2,8 @@ import * as i0 from '@angular/core';
 import { Directive, NgModule, Optional, Input, Injectable, Component, ChangeDetectionStrategy, EventEmitter, HostBinding, Output, ContentChildren, PLATFORM_ID, Inject, ViewChild, HostListener, SkipSelf, Renderer2, InjectionToken, ElementRef, ContentChild, ComponentFactoryResolver, KeyValueDiffers, Self, Attribute, LOCALE_ID, ViewContainerRef, NgZone, ChangeDetectorRef, TemplateRef } from '@angular/core';
 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 { ClarityIcons, angleIcon, exclamationCircleIcon, checkCircleIcon, ellipsisHorizontalIcon, windowCloseIcon, eventIcon, calendarIcon, eyeHideIcon, eyeIcon, ellipsisVerticalIcon, viewColumnsIcon, arrowIcon, timesIcon, stepForward2Icon, angleDoubleIcon, filterGridCircleIcon, filterGridIcon, errorStandardIcon, helpIcon, infoStandardIcon, noteIcon, successStandardIcon, warningStandardIcon, infoCircleIcon, circleIcon, dotCircleIcon } from '@cds/core/icon';
+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';
@@ -363,8 +363,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.
      */
@@ -947,6 +947,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));
     }
@@ -1030,6 +1036,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();
@@ -1092,11 +1106,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);
                 }
             }));
         }
@@ -7157,25 +7176,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;
             });
@@ -7200,6 +7218,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.
@@ -9996,6 +10021,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: [
@@ -10021,7 +10052,7 @@ ClrPasswordContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
           >
             <cds-icon 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>
@@ -10065,7 +10096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
           >
             <cds-icon 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>
@@ -13549,6 +13580,7 @@ class ClrSignpostTrigger {
         this.signpostIdService = signpostIdService;
         this.signpostFocusManager = signpostFocusManager;
         this.platformId = platformId;
+        this.ariaExpanded = false;
         this.subscriptions = [];
         this.document = document;
     }
@@ -19671,7 +19703,7 @@ const ALERT_TYPES = ['info', 'warning', 'danger', 'success', 'neutral', 'unknown
 class AlertIconAndTypesService {
     constructor(commonStrings) {
         this.commonStrings = commonStrings;
-        this.defaultIconShape = 'info-circle';
+        this.defaultIconShape = 'info-standard';
         this._alertIconShape = '';
         this._alertType = 'info';
     }
@@ -19704,22 +19736,22 @@ class AlertIconAndTypesService {
         const returnObj = { shape: '', cssClass: '', title: '' };
         switch (type) {
             case 'warning':
-                returnObj.shape = 'exclamation-triangle';
+                returnObj.shape = 'warning-standard';
                 returnObj.cssClass = 'alert-warning';
                 returnObj.title = this.commonStrings.keys.warning;
                 break;
             case 'danger':
-                returnObj.shape = 'exclamation-circle';
+                returnObj.shape = 'error-standard';
                 returnObj.cssClass = 'alert-danger';
                 returnObj.title = this.commonStrings.keys.danger;
                 break;
             case 'success':
-                returnObj.shape = 'check-circle';
+                returnObj.shape = 'success-standard';
                 returnObj.cssClass = 'alert-success';
                 returnObj.title = this.commonStrings.keys.success;
                 break;
             case 'neutral':
-                returnObj.shape = 'note-edit';
+                returnObj.shape = 'note';
                 returnObj.cssClass = 'alert-neutral';
                 returnObj.title = this.commonStrings.keys.neutral;
                 break;
@@ -19918,11 +19950,7 @@ class ClrAlert {
         this.subscriptions.forEach(sub => sub.unsubscribe());
     }
     configAlertType(val) {
-        let innerVal = val;
-        if (!this._isLightweight && (innerVal === 'loading' || innerVal === 'unknown')) {
-            innerVal = 'info';
-        }
-        this.iconService.alertType = innerVal;
+        this.iconService.alertType = val;
     }
     open() {
         this._closed = false;
@@ -20226,7 +20254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
 const CLR_ALERT_DIRECTIVES = [ClrAlert, ClrAlertItem, ClrAlerts, ClrAlertsPager, ClrAlertText];
 class ClrAlertModule {
     constructor() {
-        ClarityIcons.addIcons(checkCircleIcon, infoCircleIcon, exclamationCircleIcon, exclamationTriangleIcon, windowCloseIcon);
+        ClarityIcons.addIcons(errorStandardIcon, helpIcon, infoStandardIcon, noteIcon, successStandardIcon, warningStandardIcon, windowCloseIcon);
     }
 }
 ClrAlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });