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

package/fesm2015/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';
@@ -365,8 +365,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.
      */
@@ -951,6 +951,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));
     }
@@ -1034,6 +1040,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();
@@ -1096,11 +1110,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);
                 }
             }));
         }
@@ -1945,12 +1964,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
@@ -1982,6 +2001,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) {
@@ -3914,7 +3941,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: `
-    <div @parent [ngSwitch]="state">
+    <span @parent [ngSwitch]="state">
       <span *ngSwitchCase="buttonState.LOADING">
         <span @spinner class="spinner spinner-inline"></span>
       </span>
@@ -3928,7 +3955,7 @@ ClrLoadingButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
       <span *ngSwitchCase="buttonState.DEFAULT" @defaultButton>
         <ng-content></ng-content>
       </span>
-    </div>
+    </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.
@@ -3962,7 +3989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             args: [{
                     selector: 'button[clrLoading]',
                     template: `
-    <div @parent [ngSwitch]="state">
+    <span @parent [ngSwitch]="state">
       <span *ngSwitchCase="buttonState.LOADING">
         <span @spinner class="spinner spinner-inline"></span>
       </span>
@@ -3976,7 +4003,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
       <span *ngSwitchCase="buttonState.DEFAULT" @defaultButton>
         <ng-content></ng-content>
       </span>
-    </div>
+    </span>
   `,
                     providers: [{ provide: LoadingListener, useExisting: ClrLoadingButton }],
                     animations: [
@@ -5808,7 +5835,7 @@ class ClrKeyFocus {
             }
             if (this.focusOnLoad) {
                 this.currentItem.focus();
-                this.focusChange.next();
+                this.focusChange.emit();
             }
         }
     }
@@ -7194,25 +7221,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;
             });
@@ -7237,6 +7263,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.
@@ -8458,7 +8491,7 @@ class DateIOService {
         return '';
     }
     getDateValueFromDateString(date) {
-        if (!date) {
+        if (!date || typeof date !== 'string') {
             return null;
         }
         const dateParts = date.match(USER_INPUT_REGEX);
@@ -10054,6 +10087,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: [
@@ -10079,7 +10118,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>
@@ -10123,7 +10162,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>
@@ -13638,6 +13677,7 @@ class ClrSignpostTrigger {
         this.signpostIdService = signpostIdService;
         this.signpostFocusManager = signpostFocusManager;
         this.platformId = platformId;
+        this.ariaExpanded = false;
         this.subscriptions = [];
         this.document = document;
     }
@@ -19794,7 +19834,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';
     }
@@ -19827,22 +19867,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;
@@ -20041,11 +20081,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;
@@ -20352,7 +20388,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 });
@@ -25797,7 +25833,7 @@ class ClrWizard {
      */
     reset() {
         this.pageCollection.reset();
-        this.onReset.next();
+        this.onReset.emit();
     }
     listenForNextPageChanges() {
         return this.navService.movedToNextPage.pipe(filter(() => isPlatformBrowser(this.platformId))).subscribe(() => {