@clr/angular 17.0.0-next.2 → 17.0.0

package/fesm2020/clr-angular.mjs

@@ -3938,17 +3938,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>
@@ -3986,17 +3986,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>
@@ -4939,24 +4939,25 @@ class WrappedFormControl {
         this.renderer.removeAttribute(this.el.nativeElement, 'aria-describedby');
     }
     getAriaDescribedById(helpers) {
-        let suffix = CONTROL_SUFFIX.HELPER;
-        if (helpers.showInvalid) {
-            suffix = CONTROL_SUFFIX.ERROR;
-        }
-        else if (helpers.showValid) {
-            suffix = CONTROL_SUFFIX.SUCCESS;
-        }
-        if (this.containerIdService) {
-            return this.containerIdService.id.concat('-', suffix);
-        }
-        if (this.controlIdService) {
-            return this.controlIdService.id.concat('-', suffix);
-        }
+        const elementId = this.containerIdService?.id || this.controlIdService?.id;
         /**
          * If ContainerIdService or ControlIdService are missing don't try to guess
          * Don't set anything.
          */
-        return null;
+        if (!elementId) {
+            return null;
+        }
+        /**
+         * As the helper text is now always visible. If we have error/success then we should use both ids.
+         */
+        const describedByIds = [`${elementId}-${CONTROL_SUFFIX.HELPER}`];
+        if (helpers.showInvalid) {
+            describedByIds.push(`${elementId}-${CONTROL_SUFFIX.ERROR}`);
+        }
+        else if (helpers.showValid) {
+            describedByIds.push(`${elementId}-${CONTROL_SUFFIX.SUCCESS}`);
+        }
+        return describedByIds.join(' ');
     }
 }
 WrappedFormControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: WrappedFormControl, deps: [{ token: i0.ViewContainerRef }, { token: i0.Type }, { token: i0.Injector }, { token: i1.NgControl }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });