@clr/angular 13.8.4 → 13.9.1

package/fesm2015/clr-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, NgModule, Optional, Input, Injectable, InjectionToken, Component, ChangeDetectionStrategy, EventEmitter, Inject, Output, ContentChildren, PLATFORM_ID, ViewChild, HostBinding, HostListener, SkipSelf, ContentChild, ComponentFactoryResolver, ElementRef, Self, Attribute, Renderer2, LOCALE_ID, ViewContainerRef, NgZone, ChangeDetectorRef, TemplateRef } from '@angular/core';
+import { Directive, NgModule, Optional, Input, Injectable, Component, ChangeDetectionStrategy, EventEmitter, Output, ContentChildren, PLATFORM_ID, Inject, ViewChild, HostBinding, HostListener, SkipSelf, ContentChild, ComponentFactoryResolver, ElementRef, Self, InjectionToken, Attribute, Renderer2, 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';
@@ -8,7 +8,7 @@ import * as i3 from 'rxjs';
 import { Subject, BehaviorSubject, Observable, fromEvent, isObservable, of, ReplaySubject, combineLatest } from 'rxjs';
 import { trigger, transition, style, animate, keyframes, state } from '@angular/animations';
 import * as i1 from '@angular/forms';
-import { FormControl, FormGroup, FormsModule, SelectMultipleControlValueAccessor } from '@angular/forms';
+import { FormControl, FormGroup, FormsModule, NG_VALIDATORS, SelectMultipleControlValueAccessor } from '@angular/forms';
 import * as i1$1 from '@angular/router';
 import { FocusTrapTrackerService, createId, isFocusable, isHTMLElement } from '@cds/core/internal';
 import '@cds/core/internal-components/close-button/register.js';
@@ -188,14 +188,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 let NB_INSTANCES = 0;
-const UNIQUE_ID = new InjectionToken('UNIQUE_ID');
 function uniqueIdFactory() {
     return 'clr-id-' + NB_INSTANCES++;
 }
-const UNIQUE_ID_PROVIDER = {
-    provide: UNIQUE_ID,
-    useFactory: uniqueIdFactory,
-};
 
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -535,16 +530,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrAccordionPanel {
-    constructor(commonStrings, accordionService, ifExpandService, _id) {
+    constructor(commonStrings, accordionService, ifExpandService) {
         this.commonStrings = commonStrings;
         this.accordionService = accordionService;
         this.ifExpandService = ifExpandService;
-        this._id = _id;
         this.disabled = false;
         this.panelOpen = false;
         this.panelOpenChange = new EventEmitter();
         this.AccordionStatus = AccordionStatus;
         this.isAccordion = true;
+        this._id = uniqueIdFactory();
     }
     get id() {
         return this._id;
@@ -602,17 +597,12 @@ class ClrAccordionPanel {
         }
     }
 }
-ClrAccordionPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrAccordionPanel, deps: [{ token: ClrCommonStringsService }, { token: AccordionService }, { token: IfExpandService }, { token: UNIQUE_ID }], target: i0.ɵɵFactoryTarget.Component });
-ClrAccordionPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrAccordionPanel, selector: "clr-accordion-panel", inputs: { disabled: ["clrAccordionPanelDisabled", "disabled"], panelOpen: ["clrAccordionPanelOpen", "panelOpen"] }, outputs: { panelOpenChange: "clrAccordionPanelOpenChange" }, host: { properties: { "class.clr-accordion-panel": "true" } }, providers: [IfExpandService, UNIQUE_ID_PROVIDER], queries: [{ propertyName: "accordionDescription", predicate: ClrAccordionDescription }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], pipes: { "async": i5.AsyncPipe }, animations: panelAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ClrAccordionPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrAccordionPanel, deps: [{ token: ClrCommonStringsService }, { token: AccordionService }, { token: IfExpandService }], target: i0.ɵɵFactoryTarget.Component });
+ClrAccordionPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrAccordionPanel, selector: "clr-accordion-panel", inputs: { disabled: ["clrAccordionPanelDisabled", "disabled"], panelOpen: ["clrAccordionPanelOpen", "panelOpen"] }, outputs: { panelOpenChange: "clrAccordionPanelOpenChange" }, host: { properties: { "class.clr-accordion-panel": "true" } }, providers: [IfExpandService], queries: [{ propertyName: "accordionDescription", predicate: ClrAccordionDescription }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], pipes: { "async": i5.AsyncPipe }, animations: panelAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrAccordionPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-accordion-panel', host: { '[class.clr-accordion-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: panelAnimation, providers: [IfExpandService, UNIQUE_ID_PROVIDER], template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
-        }], ctorParameters: function () {
-        return [{ type: ClrCommonStringsService }, { type: AccordionService }, { type: IfExpandService }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
-                    }] }];
-    }, propDecorators: { disabled: [{
+            args: [{ selector: 'clr-accordion-panel', host: { '[class.clr-accordion-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: panelAnimation, providers: [IfExpandService], template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: ClrCommonStringsService }, { type: AccordionService }, { type: IfExpandService }]; }, propDecorators: { disabled: [{
                 type: Input,
                 args: ['clrAccordionPanelDisabled']
             }], panelOpen: [{
@@ -1057,8 +1047,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrStepperPanel extends ClrAccordionPanel {
-    constructor(platformId, commonStrings, formGroupName, ngModelGroup, stepperService, ifExpandService, id) {
-        super(commonStrings, stepperService, ifExpandService, id);
+    constructor(platformId, commonStrings, formGroupName, ngModelGroup, stepperService, ifExpandService) {
+        super(commonStrings, stepperService, ifExpandService);
         this.platformId = platformId;
         this.commonStrings = commonStrings;
         this.formGroupName = formGroupName;
@@ -1104,11 +1094,11 @@ class ClrStepperPanel extends ClrAccordionPanel {
         }
     }
 }
-ClrStepperPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrStepperPanel, deps: [{ token: PLATFORM_ID }, { token: ClrCommonStringsService }, { token: i1.FormGroupName, optional: true }, { token: i1.NgModelGroup, optional: true }, { token: StepperService }, { token: IfExpandService }, { token: UNIQUE_ID }], target: i0.ɵɵFactoryTarget.Component });
-ClrStepperPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrStepperPanel, selector: "clr-stepper-panel", host: { properties: { "class.clr-accordion-panel": "true" } }, providers: [IfExpandService, UNIQUE_ID_PROVIDER], viewQueries: [{ propertyName: "headerButton", first: true, predicate: ["headerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], pipes: { "async": i5.AsyncPipe }, animations: stepAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ClrStepperPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrStepperPanel, deps: [{ token: PLATFORM_ID }, { token: ClrCommonStringsService }, { token: i1.FormGroupName, optional: true }, { token: i1.NgModelGroup, optional: true }, { token: StepperService }, { token: IfExpandService }], target: i0.ɵɵFactoryTarget.Component });
+ClrStepperPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrStepperPanel, selector: "clr-stepper-panel", host: { properties: { "class.clr-accordion-panel": "true" } }, providers: [IfExpandService], viewQueries: [{ propertyName: "headerButton", first: true, predicate: ["headerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], pipes: { "async": i5.AsyncPipe }, animations: stepAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrStepperPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-stepper-panel', host: { '[class.clr-accordion-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: stepAnimation, providers: [IfExpandService, UNIQUE_ID_PROVIDER], template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
+            args: [{ selector: 'clr-stepper-panel', host: { '[class.clr-accordion-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: stepAnimation, providers: [IfExpandService], template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -1117,10 +1107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         type: Optional
                     }] }, { type: i1.NgModelGroup, decorators: [{
                         type: Optional
-                    }] }, { type: StepperService }, { type: IfExpandService }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
-                    }] }];
+                    }] }, { type: StepperService }, { type: IfExpandService }];
     }, propDecorators: { headerButton: [{
                 type: ViewChild,
                 args: ['headerButton']
@@ -2630,12 +2617,12 @@ ClrPopoverPositions['left-bottom'] = {
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrButtonGroup {
-    constructor(buttonGroupNewService, toggleService, popoverId, commonStrings, destroy$) {
+    constructor(buttonGroupNewService, toggleService, commonStrings, destroy$) {
         this.buttonGroupNewService = buttonGroupNewService;
         this.toggleService = toggleService;
-        this.popoverId = popoverId;
         this.commonStrings = commonStrings;
         this.destroy$ = destroy$;
+        this.popoverId = uniqueIdFactory();
         this.popoverPosition = ClrPopoverPositions['bottom-left'];
         this.inlineButtons = [];
         this.menuButtons = [];
@@ -2720,10 +2707,9 @@ class ClrButtonGroup {
         this.popoverPosition = ClrPopoverPositions[this._menuPosition];
     }
 }
-ClrButtonGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrButtonGroup, deps: [{ token: ButtonInGroupService }, { token: ClrPopoverToggleService }, { token: UNIQUE_ID }, { token: ClrCommonStringsService }, { token: ClrDestroyService }], target: i0.ɵɵFactoryTarget.Component });
+ClrButtonGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrButtonGroup, deps: [{ token: ButtonInGroupService }, { token: ClrPopoverToggleService }, { token: ClrCommonStringsService }, { token: ClrDestroyService }], target: i0.ɵɵFactoryTarget.Component });
 ClrButtonGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrButtonGroup, selector: "clr-button-group", inputs: { menuPosition: ["clrMenuPosition", "menuPosition"] }, host: { properties: { "class.btn-group": "true" } }, providers: [
         ButtonInGroupService,
-        UNIQUE_ID_PROVIDER,
         ClrPopoverToggleService,
         ClrPopoverEventsService,
         ClrPopoverPositionService,
@@ -2733,18 +2719,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             type: Component,
             args: [{ selector: 'clr-button-group', providers: [
                         ButtonInGroupService,
-                        UNIQUE_ID_PROVIDER,
                         ClrPopoverToggleService,
                         ClrPopoverEventsService,
                         ClrPopoverPositionService,
                         ClrDestroyService,
                     ], host: { '[class.btn-group]': 'true' }, template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<ng-container *ngFor=\"let inlineButton of inlineButtons\">\n  <ng-template [ngTemplateOutlet]=\"inlineButton.templateRef\"></ng-template>\n</ng-container>\n<ng-container *ngIf=\"menuButtons.length > 0\">\n  <div class=\"btn-group-overflow open\" [ngClass]=\"menuPosition\" #anchor>\n    <button\n      class=\"btn dropdown-toggle\"\n      clrPopoverAnchor\n      clrPopoverOpenCloseButton\n      [attr.aria-controls]=\"popoverId\"\n      [attr.aria-expanded]=\"open\"\n      [attr.aria-label]=\"commonStrings.keys.rowActions\"\n    >\n      <cds-icon shape=\"ellipsis-horizontal\" [attr.title]=\"commonStrings.keys.more\"></cds-icon>\n    </button>\n    <div\n      role=\"menu\"\n      class=\"dropdown-menu clr-button-group-menu\"\n      [id]=\"popoverId\"\n      [attr.id]=\"popoverId\"\n      [attr.aria-hidden]=\"!open\"\n      *clrPopoverContent=\"open at popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n    >\n      <ng-template [ngTemplateOutlet]=\"ref\"></ng-template>\n    </div>\n  </div>\n</ng-container>\n<ng-template #ref>\n  <ng-container *ngFor=\"let menuButton of menuButtons\">\n    <ng-template [ngTemplateOutlet]=\"menuButton.templateRef\"></ng-template>\n  </ng-container>\n</ng-template>\n" }]
-        }], ctorParameters: function () {
-        return [{ type: ButtonInGroupService }, { type: ClrPopoverToggleService }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
-                    }] }, { type: ClrCommonStringsService }, { type: ClrDestroyService }];
-    }, propDecorators: { buttons: [{
+        }], ctorParameters: function () { return [{ type: ButtonInGroupService }, { type: ClrPopoverToggleService }, { type: ClrCommonStringsService }, { type: ClrDestroyService }]; }, propDecorators: { buttons: [{
                 type: ContentChildren,
                 args: [ClrButton]
             }], menuPosition: [{
@@ -3755,13 +3735,6 @@ class WrappedFormControl {
     }
     triggerValidation() {
         if (this.ifControlStateService) {
-            /**
-             * For some reason the <input type="number" /> on blur ngControl doesn't set the control to 'touched'
-             * This one is a workaround to provide the control to be 'touched' on blur and fix #4480.
-             */
-            if (this.ngControl && !this.ngControl.touched) {
-                this.markAsTouched();
-            }
             this.ifControlStateService.triggerStatusChange();
         }
     }
@@ -5257,20 +5230,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 const POPOVER_HOST_ANCHOR = new InjectionToken('POPOVER_HOST_ANCHOR');
 
-/*
- * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-// TODO: if we find more components that could use this, consider moving this to utils
-class AriaService {
-}
-AriaService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AriaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-AriaService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AriaService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AriaService, decorators: [{
-            type: Injectable
-        }] });
-
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
@@ -5656,7 +5615,6 @@ class FocusableItem {
  */
 function customFocusableItemProvider(implementation) {
     return [
-        UNIQUE_ID_PROVIDER,
         implementation,
         {
             provide: FocusableItem,
@@ -5769,8 +5727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ComboboxFocusHandler {
-    constructor(id, rendererFactory, toggleService, selectionService, platformId) {
-        this.id = id;
+    constructor(rendererFactory, toggleService, selectionService, platformId) {
         this.toggleService = toggleService;
         this.selectionService = selectionService;
         this.platformId = platformId;
@@ -5948,15 +5905,12 @@ class ComboboxFocusHandler {
         this.optionData = options;
     }
 }
-ComboboxFocusHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ComboboxFocusHandler, deps: [{ token: UNIQUE_ID }, { token: i0.RendererFactory2 }, { token: ClrPopoverToggleService }, { token: OptionSelectionService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+ComboboxFocusHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ComboboxFocusHandler, deps: [{ token: i0.RendererFactory2 }, { token: ClrPopoverToggleService }, { token: OptionSelectionService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
 ComboboxFocusHandler.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ComboboxFocusHandler });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ComboboxFocusHandler, decorators: [{
             type: Injectable
         }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
-                    }] }, { type: i0.RendererFactory2 }, { type: ClrPopoverToggleService }, { type: OptionSelectionService }, { type: undefined, decorators: [{
+        return [{ type: i0.RendererFactory2 }, { type: ClrPopoverToggleService }, { type: OptionSelectionService }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [PLATFORM_ID]
                     }] }];
@@ -5975,13 +5929,240 @@ class OptionData {
     }
 }
 
+/*
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ClrOption {
+    constructor(elRef, commonStrings, focusHandler, optionSelectionService) {
+        this.elRef = elRef;
+        this.commonStrings = commonStrings;
+        this.focusHandler = focusHandler;
+        this.optionSelectionService = optionSelectionService;
+        // A proxy with only the necessary data to be used for a11y and the focus handler service.
+        this.optionProxy = new OptionData(null, null);
+        this.optionProxy.el = this.elRef.nativeElement;
+    }
+    set optionId(id) {
+        this._id = id;
+        this.optionProxy.id = this._id;
+    }
+    get optionId() {
+        return this._id;
+    }
+    set value(value) {
+        this._value = value;
+        this.optionProxy.value = value;
+    }
+    get value() {
+        return this._value;
+    }
+    get selected() {
+        return (this.optionSelectionService.selectionModel && this.optionSelectionService.selectionModel.containsItem(this.value));
+    }
+    ngOnInit() {
+        if (!this._id) {
+            this._id = 'clr-option-' + uniqueIdFactory();
+            this.optionProxy.id = this._id;
+        }
+    }
+    onClick() {
+        if (this.optionSelectionService.multiselectable) {
+            this.optionSelectionService.toggle(this.value);
+        }
+        else {
+            this.optionSelectionService.select(this.value);
+        }
+        // As the popover stays open in multi-select mode now, we have to take focus back to the input
+        // This way we achieve two things:
+        // - do not lose focus
+        // - we're still able to use onBlur for "outside-click" handling
+        this.focusHandler.focusInput();
+    }
+    get focusClass() {
+        return this.focusHandler.pseudoFocus.containsItem(this.optionProxy);
+    }
+}
+ClrOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrOption, deps: [{ token: i0.ElementRef }, { token: ClrCommonStringsService }, { token: ComboboxFocusHandler }, { token: OptionSelectionService }], target: i0.ɵɵFactoryTarget.Component });
+ClrOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrOption, selector: "clr-option", inputs: { optionId: ["id", "optionId"], value: ["clrValue", "value"] }, host: { listeners: { "click": "onClick()" }, properties: { "class.clr-combobox-option": "true", "attr.role": "\"option\"", "attr.tabindex": "-1", "attr.id": "optionId", "class.active": "this.selected", "class.clr-focus": "this.focusClass" } }, ngImport: i0, template: `
+    <ng-content></ng-content>
+    <span *ngIf="selected" class="clr-sr-only">{{ commonStrings.keys.comboboxSelected }}</span>
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrOption, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-option',
+                    template: `
+    <ng-content></ng-content>
+    <span *ngIf="selected" class="clr-sr-only">{{ commonStrings.keys.comboboxSelected }}</span>
+  `,
+                    host: {
+                        '[class.clr-combobox-option]': 'true',
+                        '[attr.role]': '"option"',
+                        // Do not remove. Or click-selection will not work.
+                        '[attr.tabindex]': '-1',
+                        '[attr.id]': 'optionId',
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ClrCommonStringsService }, { type: ComboboxFocusHandler }, { type: OptionSelectionService }]; }, propDecorators: { optionId: [{
+                type: Input,
+                args: ['id']
+            }], value: [{
+                type: Input,
+                args: ['clrValue']
+            }], selected: [{
+                type: HostBinding,
+                args: ['class.active']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], focusClass: [{
+                type: HostBinding,
+                args: ['class.clr-focus']
+            }] } });
+
+/*
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+let nbOptionsComponents = 0;
+class ClrOptions {
+    constructor(optionSelectionService, id, el, commonStrings, focusHandler, toggleService, parentHost, document) {
+        this.optionSelectionService = optionSelectionService;
+        this.id = id;
+        this.el = el;
+        this.commonStrings = commonStrings;
+        this.focusHandler = focusHandler;
+        this.toggleService = toggleService;
+        this.document = document;
+        this.loading = false;
+        this.subscriptions = [];
+        if (!parentHost) {
+            throw new Error('clr-options should only be used inside of a clr-combobox');
+        }
+        if (!this.optionsId) {
+            this.optionsId = 'clr-options-' + nbOptionsComponents++;
+        }
+    }
+    searchText(input) {
+        return this.commonStrings.parse(this.commonStrings.keys.comboboxSearching, { INPUT: input });
+    }
+    /**
+     * Tests if the list of options is empty, meaning it doesn't contain any items
+     */
+    get emptyOptions() {
+        return !this.optionSelectionService.loading && this.items.length === 0;
+    }
+    set items(items) {
+        this._items = items;
+        this.focusHandler.addOptionValues(this._items.map(option => option.optionProxy));
+    }
+    get items() {
+        return this._items;
+    }
+    loadingStateChange(state) {
+        this.loading = state === ClrLoadingState.LOADING;
+    }
+    ngAfterViewInit() {
+        this.focusHandler.listbox = this.el.nativeElement;
+        this.subscriptions.push(fromEvent(this.document, 'scroll', { capture: true }).subscribe(event => {
+            if (this.toggleService.open &&
+                event.target !== this.el.nativeElement &&
+                event.target !== this.focusHandler.textInput) {
+                this.toggleService.open = false;
+            }
+        }), this.items.changes.subscribe(() => {
+            setTimeout(() => {
+                this.focusHandler.focusFirstActive();
+            });
+        }));
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(sub => sub.unsubscribe());
+    }
+}
+ClrOptions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrOptions, deps: [{ token: OptionSelectionService }, { token: IF_ACTIVE_ID }, { token: i0.ElementRef }, { token: ClrCommonStringsService }, { token: ComboboxFocusHandler }, { token: ClrPopoverToggleService }, { token: POPOVER_HOST_ANCHOR, optional: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+ClrOptions.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrOptions, selector: "clr-options", inputs: { optionsId: ["id", "optionsId"] }, host: { properties: { "class.clr-combobox-options": "true", "attr.role": "\"listbox\"", "id": "optionsId" } }, providers: [{ provide: LoadingListener, useExisting: ClrOptions }], queries: [{ propertyName: "items", predicate: ClrOption }], ngImport: i0, template: `
+    <div *ngIf="optionSelectionService.loading" class="clr-combobox-options-loading">
+      <clr-spinner clrInline>
+        {{ commonStrings.keys.loading }}
+      </clr-spinner>
+      <span class="clr-combobox-options-text">
+        {{ searchText(optionSelectionService.currentInput) }}
+      </span>
+    </div>
+
+    <!-- Rendered if data set is empty -->
+    <div *ngIf="emptyOptions">
+      <span class="clr-combobox-options-empty-text">
+        {{ commonStrings.keys.comboboxNoResults }}
+      </span>
+    </div>
+
+    <!--Option Groups and Options will be projected here-->
+    <ng-content></ng-content>
+  `, isInline: true, components: [{ type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrOptions, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-options',
+                    template: `
+    <div *ngIf="optionSelectionService.loading" class="clr-combobox-options-loading">
+      <clr-spinner clrInline>
+        {{ commonStrings.keys.loading }}
+      </clr-spinner>
+      <span class="clr-combobox-options-text">
+        {{ searchText(optionSelectionService.currentInput) }}
+      </span>
+    </div>
+
+    <!-- Rendered if data set is empty -->
+    <div *ngIf="emptyOptions">
+      <span class="clr-combobox-options-empty-text">
+        {{ commonStrings.keys.comboboxNoResults }}
+      </span>
+    </div>
+
+    <!--Option Groups and Options will be projected here-->
+    <ng-content></ng-content>
+  `,
+                    providers: [{ provide: LoadingListener, useExisting: ClrOptions }],
+                    host: {
+                        '[class.clr-combobox-options]': 'true',
+                        '[attr.role]': '"listbox"',
+                        '[id]': 'optionsId',
+                    },
+                }]
+        }], ctorParameters: function () {
+        return [{ type: OptionSelectionService }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [IF_ACTIVE_ID]
+                    }] }, { type: i0.ElementRef }, { type: ClrCommonStringsService }, { type: ComboboxFocusHandler }, { type: ClrPopoverToggleService }, { type: i0.ElementRef, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [POPOVER_HOST_ANCHOR]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }];
+    }, propDecorators: { optionsId: [{
+                type: Input,
+                args: ['id']
+            }], items: [{
+                type: ContentChildren,
+                args: [ClrOption]
+            }] } });
+
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrCombobox extends WrappedFormControl {
-    constructor(vcr, injector, control, renderer, el, optionSelectionService, commonStrings, toggleService, positionService, controlStateService, containerService, platformId, ariaService, focusHandler, cdr) {
+    constructor(vcr, injector, control, renderer, el, optionSelectionService, commonStrings, toggleService, positionService, controlStateService, containerService, platformId, focusHandler, cdr) {
         super(vcr, ClrComboboxContainer, injector, control, renderer, el);
         this.control = control;
         this.renderer = renderer;
@@ -5993,7 +6174,6 @@ class ClrCombobox extends WrappedFormControl {
         this.controlStateService = controlStateService;
         this.containerService = containerService;
         this.platformId = platformId;
-        this.ariaService = ariaService;
         this.focusHandler = focusHandler;
         this.cdr = cdr;
         this.index = 1;
@@ -6081,10 +6261,12 @@ class ClrCombobox extends WrappedFormControl {
         return this.optionSelectionService.multiselectable;
     }
     get ariaControls() {
-        return this.ariaService.ariaControls;
+        var _a;
+        return (_a = this.options) === null || _a === void 0 ? void 0 : _a.optionsId;
     }
     get ariaOwns() {
-        return this.ariaService.ariaOwns;
+        var _a;
+        return (_a = this.options) === null || _a === void 0 ? void 0 : _a.optionsId;
     }
     get ariaDescribedBySelection() {
         return 'selection-' + this.id;
@@ -6222,20 +6404,19 @@ class ClrCombobox extends WrappedFormControl {
         this.el = this.textbox;
     }
 }
-ClrCombobox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrCombobox, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i1.NgControl, optional: true, self: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: OptionSelectionService }, { token: ClrCommonStringsService }, { token: ClrPopoverToggleService }, { token: ClrPopoverPositionService }, { token: IfControlStateService, optional: true }, { token: ComboboxContainerService, optional: true }, { token: PLATFORM_ID }, { token: AriaService }, { token: ComboboxFocusHandler }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ClrCombobox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrCombobox, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i1.NgControl, optional: true, self: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: OptionSelectionService }, { token: ClrCommonStringsService }, { token: ClrPopoverToggleService }, { token: ClrPopoverPositionService }, { token: IfControlStateService, optional: true }, { token: ComboboxContainerService, optional: true }, { token: PLATFORM_ID }, { token: ComboboxFocusHandler }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ClrCombobox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrCombobox, selector: "clr-combobox", inputs: { placeholder: "placeholder", multiSelect: ["clrMulti", "multiSelect"] }, outputs: { clrInputChange: "clrInputChange", clrOpenChange: "clrOpenChange", clrSelectionChange: "clrSelectionChange" }, host: { listeners: { "keydown": "onKeyUp($event)" }, properties: { "class.aria-required": "true", "class.clr-combobox": "true", "class.clr-combobox-disabled": "control?.disabled" } }, providers: [
         ClrPopoverToggleService,
         { provide: POPOVER_HOST_ANCHOR, useExisting: ElementRef },
         OptionSelectionService,
         { provide: LoadingListener, useExisting: ClrCombobox },
         IF_ACTIVE_ID_PROVIDER,
-        AriaService,
         FOCUS_SERVICE_PROVIDER,
         COMBOBOX_FOCUS_HANDLER_PROVIDER,
         ClrPopoverToggleService,
         ClrPopoverEventsService,
         ClrPopoverPositionService,
-    ], queries: [{ propertyName: "optionSelected", first: true, predicate: ClrOptionSelected, descendants: true }], viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textboxInput"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!--\n* Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n* This software is released under MIT license.\n* The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<!-- The (click) handler is needed to auto-focus on input field which can not currently occupy the whole\n     width of the component, after being wrapped to a new line -->\n<div\n  class=\"clr-combobox-wrapper\"\n  clrPopoverAnchor\n  (click)=\"focusInput()\"\n  [class.multi]=\"multiSelect\"\n  [class.invalid]=\"invalid\"\n>\n  <span\n    *ngIf=\"multiSelect && optionSelectionService.selectionModel.model\"\n    role=\"grid\"\n    clrRovingTabindex\n    [clrRovingTabindexDisabled]=\"control?.disabled\"\n    clrDirection=\"both\"\n    [attr.aria-label]=\"getSelectionAriaLabel()\"\n    [attr.aria-disabled]=\"control?.disabled? true: null\"\n  >\n    <span *ngFor=\"let item of multiSelectModel; let i = index\" class=\"label label-combobox-pill\" role=\"row\">\n      <span role=\"gridcell\">\n        <span class=\"clr-combobox-pill-content\" clrKeyFocusItem>\n          <ng-container\n            *ngIf=\"optionSelected\"\n            [ngTemplateOutlet]=\"optionSelected.template\"\n            [ngTemplateOutletContext]=\"{$implicit: optionSelectionService.selectionModel.model[i]}\"\n          ></ng-container>\n        </span>\n      </span>\n      <span role=\"gridcell\">\n        <button\n          clrKeyFocusItem\n          type=\"button\"\n          class=\"clr-combobox-remove-btn\"\n          [disabled]=\"control?.disabled? true: null\"\n          [attr.aria-label]=\"commonStrings.keys.comboboxDelete + ' ' + optionSelectionService.selectionModel.toString(displayField, i)\"\n          (click)=\"unselect(item)\"\n        >\n          <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n        </button>\n      </span>\n    </span>\n  </span>\n\n  <span class=\"clr-combobox-input-wrapper\" role=\"combobox\">\n    <input\n      #textboxInput\n      type=\"text\"\n      [id]=\"inputId()\"\n      class=\"clr-input clr-combobox-input\"\n      [(ngModel)]=\"searchText\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      [attr.aria-expanded]=\"openState\"\n      [attr.aria-owns]=\"ariaOwns\"\n      aria-haspopup=\"listbox\"\n      aria-autocomplete=\"list\"\n      autocomplete=\"off\"\n      [attr.aria-invalid]=\"control?.invalid? true: null\"\n      [disabled]=\"control?.disabled? true: null\"\n      [attr.aria-activedescendant]=\"getActiveDescendant()\"\n      [attr.placeholder]=\"placeholder\"\n    />\n  </span>\n\n  <!-- No click handler, as it uses the handler on the .clr-combobox-wrapper -->\n  <button\n    clrPopoverOpenCloseButton\n    #trigger\n    type=\"button\"\n    class=\"clr-combobox-trigger\"\n    tabindex=\"-1\"\n    [disabled]=\"control?.disabled || null\"\n    [attr.aria-label]=\"commonStrings.keys.comboboxOpen\"\n  >\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n  </button>\n\n  <div class=\"clr-focus-indicator\" [class.clr-focus]=\"focused\"></div>\n</div>\n\n<!-- Both close handlers are handled manually due to issues in Edge browser.\n     Additionally 'outsideClickToClose' has complex handling that's necessary\n     to be manual due to the component architecture -->\n<div role=\"dialog\" *clrPopoverContent=\"openState at smartPosition; outsideClickToClose: false; scrollToClose: false\">\n  <ng-content></ng-content>\n</div>\n", components: [{ type: ClrRovingTabindex, selector: "[clrRovingTabindex]", inputs: ["clrRovingTabindex", "clrRovingTabindexDisabled"] }], directives: [{ type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ClrKeyFocusItem, selector: "[clrKeyFocusItem]" }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: CdsIconCustomTag, selector: "cds-icon" }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }] });
+    ], queries: [{ propertyName: "optionSelected", first: true, predicate: ClrOptionSelected, descendants: true }, { propertyName: "options", first: true, predicate: ClrOptions, descendants: true }], viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textboxInput"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!--\n* Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n* This software is released under MIT license.\n* The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<!-- The (click) handler is needed to auto-focus on input field which can not currently occupy the whole\n     width of the component, after being wrapped to a new line -->\n<div\n  class=\"clr-combobox-wrapper\"\n  clrPopoverAnchor\n  (click)=\"focusInput()\"\n  [class.multi]=\"multiSelect\"\n  [class.invalid]=\"invalid\"\n>\n  <span\n    *ngIf=\"multiSelect && optionSelectionService.selectionModel.model\"\n    role=\"grid\"\n    clrRovingTabindex\n    [clrRovingTabindexDisabled]=\"control?.disabled\"\n    clrDirection=\"both\"\n    [attr.aria-label]=\"getSelectionAriaLabel()\"\n    [attr.aria-disabled]=\"control?.disabled? true: null\"\n  >\n    <span *ngFor=\"let item of multiSelectModel; let i = index\" class=\"label label-combobox-pill\" role=\"row\">\n      <span role=\"gridcell\">\n        <span class=\"clr-combobox-pill-content\" clrKeyFocusItem>\n          <ng-container\n            *ngIf=\"optionSelected\"\n            [ngTemplateOutlet]=\"optionSelected.template\"\n            [ngTemplateOutletContext]=\"{$implicit: optionSelectionService.selectionModel.model[i]}\"\n          ></ng-container>\n        </span>\n      </span>\n      <span role=\"gridcell\">\n        <button\n          clrKeyFocusItem\n          type=\"button\"\n          class=\"clr-combobox-remove-btn\"\n          [disabled]=\"control?.disabled? true: null\"\n          [attr.aria-label]=\"commonStrings.keys.comboboxDelete + ' ' + optionSelectionService.selectionModel.toString(displayField, i)\"\n          (click)=\"unselect(item)\"\n        >\n          <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n        </button>\n      </span>\n    </span>\n  </span>\n\n  <span class=\"clr-combobox-input-wrapper\" role=\"combobox\">\n    <input\n      #textboxInput\n      type=\"text\"\n      [id]=\"inputId()\"\n      class=\"clr-input clr-combobox-input\"\n      [(ngModel)]=\"searchText\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      [attr.aria-expanded]=\"openState\"\n      [attr.aria-owns]=\"ariaOwns\"\n      aria-haspopup=\"listbox\"\n      aria-autocomplete=\"list\"\n      autocomplete=\"off\"\n      [attr.aria-invalid]=\"control?.invalid? true: null\"\n      [disabled]=\"control?.disabled? true: null\"\n      [attr.aria-activedescendant]=\"getActiveDescendant()\"\n      [attr.placeholder]=\"placeholder\"\n    />\n  </span>\n\n  <!-- No click handler, as it uses the handler on the .clr-combobox-wrapper -->\n  <button\n    clrPopoverOpenCloseButton\n    #trigger\n    type=\"button\"\n    class=\"clr-combobox-trigger\"\n    tabindex=\"-1\"\n    [disabled]=\"control?.disabled || null\"\n    [attr.aria-label]=\"commonStrings.keys.comboboxOpen\"\n  >\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n  </button>\n\n  <div class=\"clr-focus-indicator\" [class.clr-focus]=\"focused\"></div>\n</div>\n\n<!-- Both close handlers are handled manually due to issues in Edge browser.\n     Additionally 'outsideClickToClose' has complex handling that's necessary\n     to be manual due to the component architecture -->\n<div role=\"dialog\" *clrPopoverContent=\"openState at smartPosition; outsideClickToClose: false; scrollToClose: false\">\n  <ng-content></ng-content>\n</div>\n", components: [{ type: ClrRovingTabindex, selector: "[clrRovingTabindex]", inputs: ["clrRovingTabindex", "clrRovingTabindexDisabled"] }], directives: [{ type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ClrKeyFocusItem, selector: "[clrKeyFocusItem]" }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: CdsIconCustomTag, selector: "cds-icon" }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrCombobox, decorators: [{
             type: Component,
             args: [{ selector: 'clr-combobox', providers: [
@@ -6244,7 +6425,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         OptionSelectionService,
                         { provide: LoadingListener, useExisting: ClrCombobox },
                         IF_ACTIVE_ID_PROVIDER,
-                        AriaService,
                         FOCUS_SERVICE_PROVIDER,
                         COMBOBOX_FOCUS_HANDLER_PROVIDER,
                         ClrPopoverToggleService,
@@ -6267,7 +6447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     }] }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [PLATFORM_ID]
-                    }] }, { type: AriaService }, { type: ComboboxFocusHandler }, { type: i0.ChangeDetectorRef }];
+                    }] }, { type: ComboboxFocusHandler }, { type: i0.ChangeDetectorRef }];
     }, propDecorators: { textbox: [{
                 type: ViewChild,
                 args: ['textboxInput']
@@ -6275,126 +6455,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: ViewChild,
                 args: ['trigger']
             }], optionSelected: [{
-                type: ContentChild,
-                args: [ClrOptionSelected]
-            }], placeholder: [{
-                type: Input,
-                args: ['placeholder']
-            }], multiSelect: [{
-                type: Input,
-                args: ['clrMulti']
-            }], onKeyUp: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], clrInputChange: [{
-                type: Output,
-                args: ['clrInputChange']
-            }], clrOpenChange: [{
-                type: Output,
-                args: ['clrOpenChange']
-            }], clrSelectionChange: [{
-                type: Output,
-                args: ['clrSelectionChange']
-            }] } });
-
-/*
- * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-class ClrOption {
-    constructor(elRef, commonStrings, focusHandler, optionSelectionService, autoId) {
-        this.elRef = elRef;
-        this.commonStrings = commonStrings;
-        this.focusHandler = focusHandler;
-        this.optionSelectionService = optionSelectionService;
-        this.autoId = autoId;
-        // A proxy with only the necessary data to be used for a11y and the focus handler service.
-        this.optionProxy = new OptionData(null, null);
-        this.optionProxy.el = this.elRef.nativeElement;
-    }
-    set optionId(id) {
-        this._id = id;
-        this.optionProxy.id = this._id;
-    }
-    get optionId() {
-        return this._id;
-    }
-    set value(value) {
-        this._value = value;
-        this.optionProxy.value = value;
-    }
-    get value() {
-        return this._value;
-    }
-    get selected() {
-        return (this.optionSelectionService.selectionModel && this.optionSelectionService.selectionModel.containsItem(this.value));
-    }
-    ngOnInit() {
-        if (!this._id) {
-            this._id = 'clr-option-' + this.autoId;
-            this.optionProxy.id = this._id;
-        }
-    }
-    onClick() {
-        if (this.optionSelectionService.multiselectable) {
-            this.optionSelectionService.toggle(this.value);
-        }
-        else {
-            this.optionSelectionService.select(this.value);
-        }
-        // As the popover stays open in multi-select mode now, we have to take focus back to the input
-        // This way we achieve two things:
-        // - do not lose focus
-        // - we're still able to use onBlur for "outside-click" handling
-        this.focusHandler.focusInput();
-    }
-    get focusClass() {
-        return this.focusHandler.pseudoFocus.containsItem(this.optionProxy);
-    }
-}
-ClrOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrOption, deps: [{ token: i0.ElementRef }, { token: ClrCommonStringsService }, { token: ComboboxFocusHandler }, { token: OptionSelectionService }, { token: UNIQUE_ID }], target: i0.ɵɵFactoryTarget.Component });
-ClrOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrOption, selector: "clr-option", inputs: { optionId: ["id", "optionId"], value: ["clrValue", "value"] }, host: { listeners: { "click": "onClick()" }, properties: { "class.clr-combobox-option": "true", "attr.role": "\"option\"", "attr.tabindex": "-1", "attr.id": "optionId", "class.active": "this.selected", "class.clr-focus": "this.focusClass" } }, providers: [UNIQUE_ID_PROVIDER], ngImport: i0, template: `
-    <ng-content></ng-content>
-    <span *ngIf="selected" class="clr-sr-only">{{ commonStrings.keys.comboboxSelected }}</span>
-  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrOption, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'clr-option',
-                    template: `
-    <ng-content></ng-content>
-    <span *ngIf="selected" class="clr-sr-only">{{ commonStrings.keys.comboboxSelected }}</span>
-  `,
-                    providers: [UNIQUE_ID_PROVIDER],
-                    host: {
-                        '[class.clr-combobox-option]': 'true',
-                        '[attr.role]': '"option"',
-                        // Do not remove. Or click-selection will not work.
-                        '[attr.tabindex]': '-1',
-                        '[attr.id]': 'optionId',
-                    },
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: ClrCommonStringsService }, { type: ComboboxFocusHandler }, { type: OptionSelectionService }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
-                    }] }];
-    }, propDecorators: { optionId: [{
+                type: ContentChild,
+                args: [ClrOptionSelected]
+            }], options: [{
+                type: ContentChild,
+                args: [ClrOptions]
+            }], placeholder: [{
                 type: Input,
-                args: ['id']
-            }], value: [{
+                args: ['placeholder']
+            }], multiSelect: [{
                 type: Input,
-                args: ['clrValue']
-            }], selected: [{
-                type: HostBinding,
-                args: ['class.active']
-            }], onClick: [{
+                args: ['clrMulti']
+            }], onKeyUp: [{
                 type: HostListener,
-                args: ['click']
-            }], focusClass: [{
-                type: HostBinding,
-                args: ['class.clr-focus']
+                args: ['keydown', ['$event']]
+            }], clrInputChange: [{
+                type: Output,
+                args: ['clrInputChange']
+            }], clrOpenChange: [{
+                type: Output,
+                args: ['clrOpenChange']
+            }], clrSelectionChange: [{
+                type: Output,
+                args: ['clrSelectionChange']
             }] } });
 
 /*
@@ -6489,148 +6572,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['clrOptionItemsField']
             }] } });
 
-/*
- * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-let nbOptionsComponents = 0;
-class ClrOptions {
-    constructor(optionSelectionService, id, ariaService, el, commonStrings, focusHandler, toggleService, parentHost, document) {
-        this.optionSelectionService = optionSelectionService;
-        this.id = id;
-        this.ariaService = ariaService;
-        this.el = el;
-        this.commonStrings = commonStrings;
-        this.focusHandler = focusHandler;
-        this.toggleService = toggleService;
-        this.document = document;
-        this.loading = false;
-        this.subscriptions = [];
-        if (!parentHost) {
-            throw new Error('clr-options should only be used inside of a clr-combobox');
-        }
-        if (!this.optionsId) {
-            this.optionsId = 'clr-options-' + nbOptionsComponents++;
-        }
-    }
-    searchText(input) {
-        return this.commonStrings.parse(this.commonStrings.keys.comboboxSearching, { INPUT: input });
-    }
-    /**
-     * Tests if the list of options is empty, meaning it doesn't contain any items
-     */
-    get emptyOptions() {
-        return !this.optionSelectionService.loading && this.items.length === 0;
-    }
-    set optionsId(id) {
-        this.ariaService.ariaControls = id;
-        this.ariaService.ariaOwns = id;
-    }
-    get optionsId() {
-        return this.ariaService.ariaControls;
-    }
-    set items(items) {
-        this._items = items;
-        this.focusHandler.addOptionValues(this._items.map(option => option.optionProxy));
-    }
-    get items() {
-        return this._items;
-    }
-    loadingStateChange(state) {
-        this.loading = state === ClrLoadingState.LOADING;
-    }
-    ngAfterViewInit() {
-        this.focusHandler.listbox = this.el.nativeElement;
-        this.subscriptions.push(fromEvent(this.document, 'scroll', { capture: true }).subscribe(event => {
-            if (this.toggleService.open &&
-                event.target !== this.el.nativeElement &&
-                event.target !== this.focusHandler.textInput) {
-                this.toggleService.open = false;
-            }
-        }), this.items.changes.subscribe(() => {
-            setTimeout(() => {
-                this.focusHandler.focusFirstActive();
-            });
-        }));
-    }
-    ngOnDestroy() {
-        this.subscriptions.forEach(sub => sub.unsubscribe());
-    }
-}
-ClrOptions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrOptions, deps: [{ token: OptionSelectionService }, { token: IF_ACTIVE_ID }, { token: AriaService }, { token: i0.ElementRef }, { token: ClrCommonStringsService }, { token: ComboboxFocusHandler }, { token: ClrPopoverToggleService }, { token: POPOVER_HOST_ANCHOR, optional: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-ClrOptions.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrOptions, selector: "clr-options", inputs: { optionsId: ["id", "optionsId"] }, host: { properties: { "class.clr-combobox-options": "true", "attr.role": "\"listbox\"", "id": "optionsId" } }, providers: [{ provide: LoadingListener, useExisting: ClrOptions }], queries: [{ propertyName: "items", predicate: ClrOption }], ngImport: i0, template: `
-    <div *ngIf="optionSelectionService.loading" class="clr-combobox-options-loading">
-      <clr-spinner clrInline>
-        {{ commonStrings.keys.loading }}
-      </clr-spinner>
-      <span class="clr-combobox-options-text">
-        {{ searchText(optionSelectionService.currentInput) }}
-      </span>
-    </div>
-
-    <!-- Rendered if data set is empty -->
-    <div *ngIf="emptyOptions">
-      <span class="clr-combobox-options-empty-text">
-        {{ commonStrings.keys.comboboxNoResults }}
-      </span>
-    </div>
-
-    <!--Option Groups and Options will be projected here-->
-    <ng-content></ng-content>
-  `, isInline: true, components: [{ type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrOptions, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'clr-options',
-                    template: `
-    <div *ngIf="optionSelectionService.loading" class="clr-combobox-options-loading">
-      <clr-spinner clrInline>
-        {{ commonStrings.keys.loading }}
-      </clr-spinner>
-      <span class="clr-combobox-options-text">
-        {{ searchText(optionSelectionService.currentInput) }}
-      </span>
-    </div>
-
-    <!-- Rendered if data set is empty -->
-    <div *ngIf="emptyOptions">
-      <span class="clr-combobox-options-empty-text">
-        {{ commonStrings.keys.comboboxNoResults }}
-      </span>
-    </div>
-
-    <!--Option Groups and Options will be projected here-->
-    <ng-content></ng-content>
-  `,
-                    providers: [{ provide: LoadingListener, useExisting: ClrOptions }],
-                    host: {
-                        '[class.clr-combobox-options]': 'true',
-                        '[attr.role]': '"listbox"',
-                        '[id]': 'optionsId',
-                    },
-                }]
-        }], ctorParameters: function () {
-        return [{ type: OptionSelectionService }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [IF_ACTIVE_ID]
-                    }] }, { type: AriaService }, { type: i0.ElementRef }, { type: ClrCommonStringsService }, { type: ComboboxFocusHandler }, { type: ClrPopoverToggleService }, { type: i0.ElementRef, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [POPOVER_HOST_ANCHOR]
-                    }] }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [DOCUMENT]
-                    }] }];
-    }, propDecorators: { optionsId: [{
-                type: Input,
-                args: ['id']
-            }], items: [{
-                type: ContentChildren,
-                args: [ClrOption]
-            }] } });
-
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
@@ -8647,7 +8588,6 @@ class ClrYearpicker {
         this.commonStrings = commonStrings;
         this.yearRangeModel = new YearRangeModel(this.calendarYear);
         this._focusedYear = this.calendarYear;
-        this.updateRange(this.yearRangeModel);
     }
     /**
      * Gets the year which the user is currently on.
@@ -8684,7 +8624,6 @@ class ClrYearpicker {
      */
     previousDecade() {
         this.yearRangeModel = this.yearRangeModel.previousDecade();
-        this.updateRange(this.yearRangeModel);
         // Year in the yearpicker is not focused because while navigating to a different decade,
         // you want the focus to remain on the decade switcher arrows.
     }
@@ -8696,14 +8635,12 @@ class ClrYearpicker {
             this.yearRangeModel = this.yearRangeModel.currentDecade();
         }
         this._datepickerFocusService.focusCell(this._elRef);
-        this.updateRange(this.yearRangeModel);
     }
     /**
      * Updates the YearRangeModel to the next decade.
      */
     nextDecade() {
         this.yearRangeModel = this.yearRangeModel.nextDecade();
-        this.updateRange(this.yearRangeModel);
         // Year in the yearpicker is not focused because while navigating to a different decade,
         // you want the focus to remain on the decade switcher arrows.
     }
@@ -8748,11 +8685,6 @@ class ClrYearpicker {
             }
         }
     }
-    updateRange(yrm) {
-        const floor = yrm.yearRange[0];
-        const ceil = yrm.yearRange[yrm.yearRange.length - 1];
-        this.decadeRange = `${floor} to ${ceil}`;
-    }
     /**
      * Focuses on the current calendar year when the View is initialized.
      */
@@ -9475,6 +9407,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['disabled']
             }] } });
 
+/*
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ClrDateInputValidator {
+    constructor(dateIOService) {
+        this.dateIOService = dateIOService;
+    }
+    validate(control) {
+        if (this.dateIOService) {
+            const value = this.dateIOService.getDateValueFromDateString(control.value);
+            const minDate = this.dateIOService.disabledDates.minDate.toDate();
+            const maxDate = this.dateIOService.disabledDates.maxDate.toDate();
+            if (value && value < this.dateIOService.disabledDates.minDate.toDate()) {
+                return { min: { min: minDate.toLocaleDateString(), actual: value.toLocaleDateString() } };
+            }
+            else if (value && value > this.dateIOService.disabledDates.maxDate.toDate()) {
+                return { max: { max: maxDate.toLocaleDateString(), actual: value.toLocaleDateString() } };
+            }
+        }
+        return null;
+    }
+}
+ClrDateInputValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDateInputValidator, deps: [{ token: DateIOService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ClrDateInputValidator.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ClrDateInputValidator, selector: "[clrDate]", providers: [{ provide: NG_VALIDATORS, useExisting: ClrDateInputValidator, multi: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDateInputValidator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clrDate]',
+                    providers: [{ provide: NG_VALIDATORS, useExisting: ClrDateInputValidator, multi: true }],
+                }]
+        }], ctorParameters: function () {
+        return [{ type: DateIOService, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
+
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
@@ -9484,6 +9454,7 @@ const CLR_DATEPICKER_DIRECTIVES = [
     ClrDay,
     ClrDateContainer,
     ClrDateInput,
+    ClrDateInputValidator,
     ClrDatepickerViewManager,
     ClrMonthpicker,
     ClrYearpicker,
@@ -9499,6 +9470,7 @@ ClrDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", vers
 ClrDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDatepickerModule, declarations: [ClrDay,
         ClrDateContainer,
         ClrDateInput,
+        ClrDateInputValidator,
         ClrDatepickerViewManager,
         ClrMonthpicker,
         ClrYearpicker,
@@ -9512,6 +9484,7 @@ ClrDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         ClrCommonFormsModule], exports: [ClrDay,
         ClrDateContainer,
         ClrDateInput,
+        ClrDateInputValidator,
         ClrDatepickerViewManager,
         ClrMonthpicker,
         ClrYearpicker,
@@ -12105,14 +12078,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * since it can be anything (not just a text input).
  */
 class ClrDatagridFilter extends DatagridFilterRegistrar {
-    constructor(_filters, commonStrings, smartToggleService, platformId, popoverId) {
+    constructor(_filters, commonStrings, smartToggleService, platformId) {
         super(_filters);
         this.commonStrings = commonStrings;
         this.smartToggleService = smartToggleService;
         this.platformId = platformId;
-        this.popoverId = popoverId;
         this.subs = [];
         this.ariaExpanded = false;
+        this.popoverId = uniqueIdFactory();
         // Smart Popover
         this.smartPosition = {
             axis: ClrAxis.VERTICAL,
@@ -12156,8 +12129,8 @@ class ClrDatagridFilter extends DatagridFilterRegistrar {
         this.subs.forEach(sub => sub.unsubscribe());
     }
 }
-ClrDatagridFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDatagridFilter, deps: [{ token: FiltersProvider }, { token: ClrCommonStringsService }, { token: ClrPopoverToggleService }, { token: PLATFORM_ID }, { token: UNIQUE_ID }], target: i0.ɵɵFactoryTarget.Component });
-ClrDatagridFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrDatagridFilter, selector: "clr-dg-filter", inputs: { open: ["clrDgFilterOpen", "open"], customFilter: ["clrDgFilter", "customFilter"] }, outputs: { openChange: "clrDgFilterOpenChange" }, providers: [{ provide: CustomFilter, useExisting: ClrDatagridFilter }, UNIQUE_ID_PROVIDER], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
+ClrDatagridFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDatagridFilter, deps: [{ token: FiltersProvider }, { token: ClrCommonStringsService }, { token: ClrPopoverToggleService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+ClrDatagridFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrDatagridFilter, selector: "clr-dg-filter", inputs: { open: ["clrDgFilterOpen", "open"], customFilter: ["clrDgFilter", "customFilter"] }, outputs: { openChange: "clrDgFilterOpenChange" }, providers: [{ provide: CustomFilter, useExisting: ClrDatagridFilter }], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
     <button
       class="datagrid-filter-toggle"
       type="button"
@@ -12199,7 +12172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             args: [{
                     selector: 'clr-dg-filter',
                     // We register this component as a CustomFilter, for the parent column to detect it.
-                    providers: [{ provide: CustomFilter, useExisting: ClrDatagridFilter }, UNIQUE_ID_PROVIDER],
+                    providers: [{ provide: CustomFilter, useExisting: ClrDatagridFilter }],
                     template: `
     <button
       class="datagrid-filter-toggle"
@@ -12242,9 +12215,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         return [{ type: FiltersProvider }, { type: ClrCommonStringsService }, { type: ClrPopoverToggleService }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [PLATFORM_ID]
-                    }] }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
                     }] }];
     }, propDecorators: { anchor: [{
                 type: ViewChild,
@@ -13391,14 +13361,14 @@ const KEYBOARD_RESIZE_LENGTH = 12;
 class ClrDatagridColumnSeparator {
     // Every column draggable separator should have its own unique ID
     // in order to not conflict with other draggables/droppables.
-    constructor(columnResizerService, renderer, ngZone, tableSizeService, commonString, document, columnSeparatorId) {
+    constructor(columnResizerService, renderer, ngZone, tableSizeService, commonString, document) {
         this.columnResizerService = columnResizerService;
         this.renderer = renderer;
         this.ngZone = ngZone;
         this.tableSizeService = tableSizeService;
         this.commonString = commonString;
         this.document = document;
-        this.columnSeparatorId = columnSeparatorId;
+        this.columnSeparatorId = uniqueIdFactory();
         this.resizeStartedOnKeyDown = false;
         this.unlisteners = [];
     }
@@ -13484,8 +13454,8 @@ class ClrDatagridColumnSeparator {
         this.unlisteners.forEach(unlistener => unlistener());
     }
 }
-ClrDatagridColumnSeparator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDatagridColumnSeparator, deps: [{ token: ColumnResizerService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TableSizeService }, { token: ClrCommonStringsService }, { token: DOCUMENT }, { token: UNIQUE_ID }], target: i0.ɵɵFactoryTarget.Component });
-ClrDatagridColumnSeparator.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrDatagridColumnSeparator, selector: "clr-dg-column-separator", host: { properties: { "class.datagrid-column-separator": "true" } }, providers: [UNIQUE_ID_PROVIDER], viewQueries: [{ propertyName: "resizeTrackerRef", first: true, predicate: ["resizeTracker"], descendants: true }, { propertyName: "columnHandleRef", first: true, predicate: ["columnHandle"], descendants: true }], ngImport: i0, template: `
+ClrDatagridColumnSeparator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDatagridColumnSeparator, deps: [{ token: ColumnResizerService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TableSizeService }, { token: ClrCommonStringsService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+ClrDatagridColumnSeparator.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrDatagridColumnSeparator, selector: "clr-dg-column-separator", host: { properties: { "class.datagrid-column-separator": "true" } }, viewQueries: [{ propertyName: "resizeTrackerRef", first: true, predicate: ["resizeTracker"], descendants: true }, { propertyName: "columnHandleRef", first: true, predicate: ["columnHandle"], descendants: true }], ngImport: i0, template: `
     <button
       type="button"
       class="datagrid-column-handle"
@@ -13528,15 +13498,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     host: {
                         '[class.datagrid-column-separator]': 'true',
                     },
-                    providers: [UNIQUE_ID_PROVIDER],
                 }]
         }], ctorParameters: function () {
         return [{ type: ColumnResizerService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: TableSizeService }, { type: ClrCommonStringsService }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [DOCUMENT]
-                    }] }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
                     }] }];
     }, propDecorators: { resizeTrackerRef: [{
                 type: ViewChild,
@@ -14640,10 +14606,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 let nbSelection = 0;
 class Selection {
-    constructor(_items, _filters, _zone) {
+    constructor(_items, _filters) {
         this._items = _items;
         this._filters = _filters;
-        this._zone = _zone;
         this.preserveSelection = false;
         this.prevSelectionRefs = []; // Refs of selected items
         this.lockedRefs = []; // Ref of locked items
@@ -14998,11 +14963,11 @@ class Selection {
         }
     }
 }
-Selection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Selection, deps: [{ token: Items }, { token: FiltersProvider }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+Selection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Selection, deps: [{ token: Items }, { token: FiltersProvider }], target: i0.ɵɵFactoryTarget.Injectable });
 Selection.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Selection });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Selection, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: Items }, { type: FiltersProvider }, { type: i0.NgZone }]; } });
+        }], ctorParameters: function () { return [{ type: Items }, { type: FiltersProvider }]; } });
 
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -15620,7 +15585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrDatagrid {
-    constructor(organizer, items, expandableRows, selection, rowActionService, stateProvider, displayMode, renderer, detailService, datagridId, document, el, page, commonStrings, columnsService, keyNavigation, zone) {
+    constructor(organizer, items, expandableRows, selection, rowActionService, stateProvider, displayMode, renderer, detailService, document, el, page, commonStrings, columnsService, keyNavigation, zone) {
         this.organizer = organizer;
         this.items = items;
         this.expandableRows = expandableRows;
@@ -15654,6 +15619,7 @@ class ClrDatagrid {
          * Subscriptions to all the services and queries changes
          */
         this._subscriptions = [];
+        const datagridId = uniqueIdFactory();
         this.selectAllId = 'clr-dg-select-all-' + datagridId;
         this.detailService.id = datagridId;
     }
@@ -15842,7 +15808,7 @@ class ClrDatagrid {
         this.organizer.resize();
     }
 }
-ClrDatagrid.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDatagrid, deps: [{ token: DatagridRenderOrganizer }, { token: Items }, { token: ExpandableRowsCount }, { token: Selection }, { token: RowActionService }, { token: StateProvider }, { token: DisplayModeService }, { token: i0.Renderer2 }, { token: DetailService }, { token: UNIQUE_ID }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: Page }, { token: ClrCommonStringsService }, { token: ColumnsService }, { token: KeyNavigationGridController }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ClrDatagrid.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDatagrid, deps: [{ token: DatagridRenderOrganizer }, { token: Items }, { token: ExpandableRowsCount }, { token: Selection }, { token: RowActionService }, { token: StateProvider }, { token: DisplayModeService }, { token: i0.Renderer2 }, { token: DetailService }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: Page }, { token: ClrCommonStringsService }, { token: ColumnsService }, { token: KeyNavigationGridController }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 ClrDatagrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrDatagrid, selector: "clr-datagrid", inputs: { loading: ["clrDgLoading", "loading"], selected: ["clrDgSelected", "selected"], singleSelected: ["clrDgSingleSelected", "singleSelected"], clrDgSingleSelectionAriaLabel: "clrDgSingleSelectionAriaLabel", clrDgSingleActionableAriaLabel: "clrDgSingleActionableAriaLabel", clrDetailExpandableAriaLabel: "clrDetailExpandableAriaLabel", clrDgDisablePageFocus: "clrDgDisablePageFocus", clrDgPreserveSelection: "clrDgPreserveSelection", rowSelectionMode: ["clrDgRowSelection", "rowSelectionMode"] }, outputs: { refresh: "clrDgRefresh", selectedChanged: "clrDgSelectedChange", singleSelectedChanged: "clrDgSingleSelectedChange" }, host: { properties: { "class.datagrid-host": "true", "class.datagrid-detail-open": "detailService.isOpen" } }, providers: [
         Selection,
         Sort,
@@ -15854,7 +15820,6 @@ ClrDatagrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "
         ExpandableRowsCount,
         StateDebouncer,
         DetailService,
-        UNIQUE_ID_PROVIDER,
         StateProvider,
         TableSizeService,
         ColumnsService,
@@ -15874,7 +15839,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         ExpandableRowsCount,
                         StateDebouncer,
                         DetailService,
-                        UNIQUE_ID_PROVIDER,
                         StateProvider,
                         TableSizeService,
                         ColumnsService,
@@ -15886,9 +15850,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     }, template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<ng-content select=\"clr-dg-action-bar\"></ng-content>\n<div class=\"datagrid-outer-wrapper\">\n  <div class=\"datagrid-inner-wrapper\">\n    <div class=\"datagrid\" #datagrid [attr.aria-hidden]=\"detailService.isOpen ? true : null\">\n      <div class=\"datagrid-table-wrapper\">\n        <div role=\"grid\" class=\"datagrid-table\" tabindex=\"-1\" #datagridTable>\n          <div role=\"rowgroup\" class=\"datagrid-header\">\n            <div role=\"row\" class=\"datagrid-row\">\n              <div class=\"datagrid-row-master datagrid-row-flex\">\n                <div class=\"datagrid-row-sticky\">\n                  <!--header for datagrid where you can select multiple rows -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n                    (keydown.space)=\"allSelected = !allSelected; $event.preventDefault()\"\n                  >\n                    <div class=\"clr-checkbox-wrapper\">\n                      <!-- We need to move focus and space-key handling to the parent because of keyboard arrow key navigation,\n                           which is not able to transfer focus directly on the input when focused with the tab key -->\n                      <input\n                        type=\"checkbox\"\n                        [id]=\"selectAllId\"\n                        [(ngModel)]=\"allSelected\"\n                        [attr.aria-label]=\"commonStrings.keys.selectAll\"\n                        tabindex=\"-1\"\n                      />\n                      <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n                      <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n                        <span class=\"clr-sr-only\">{{commonStrings.keys.selectAll}}</span>\n                      </label>\n                    </div>\n\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for datagrid where you can select one row only -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n                    [attr.aria-label]=\"clrDgSingleSelectionAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n                    *ngIf=\"rowActionService.hasActionableRow\"\n                    [attr.aria-label]=\"clrDgSingleActionableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n                    *ngIf=\"expandableRows.hasExpandableRow || detailService.enabled\"\n                    [attr.aria-label]=\"clrDetailExpandableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                </div>\n                <div class=\"datagrid-row-scrollable\">\n                  <ng-container #projectedDisplayColumns></ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n          <ng-container #displayedRows></ng-container>\n          <!-- Custom placeholder overrides the default empty one -->\n          <ng-content select=\"clr-dg-placeholder\"></ng-content>\n          <clr-dg-placeholder *ngIf=\"!placeholder\"></clr-dg-placeholder>\n        </div>\n      </div>\n    </div>\n    <ng-content select=\"clr-dg-footer\"></ng-content>\n    <div class=\"datagrid-spinner\" *ngIf=\"loading\">\n      <clr-spinner clrMedium>Loading</clr-spinner>\n    </div>\n  </div>\n  <ng-content select=\"[clrIfDetail],clr-dg-detail\"></ng-content>\n</div>\n\n<div class=\"datagrid-calculation-table\">\n  <div class=\"datagrid-calculation-header\">\n    <ng-container #projectedCalculationColumns></ng-container>\n  </div>\n  <ng-container #calculationRows></ng-container>\n</div>\n" }]
         }], ctorParameters: function () {
         return [{ type: DatagridRenderOrganizer }, { type: Items }, { type: ExpandableRowsCount }, { type: Selection }, { type: RowActionService }, { type: StateProvider }, { type: DisplayModeService }, { type: i0.Renderer2 }, { type: DetailService }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
-                    }] }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [DOCUMENT]
                     }] }, { type: i0.ElementRef }, { type: Page }, { type: ClrCommonStringsService }, { type: ColumnsService }, { type: KeyNavigationGridController }, { type: i0.NgZone }];
@@ -15986,13 +15947,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 let clrDgActionId = 0;
 class ClrDatagridActionOverflow {
-    constructor(rowActionService, commonStrings, platformId, zone, smartToggleService, popoverId) {
+    constructor(rowActionService, commonStrings, platformId, zone, smartToggleService) {
         this.rowActionService = rowActionService;
         this.commonStrings = commonStrings;
         this.platformId = platformId;
         this.zone = zone;
         this.smartToggleService = smartToggleService;
-        this.popoverId = popoverId;
         this.subscriptions = [];
         this.smartPosition = {
             axis: ClrAxis.HORIZONTAL,
@@ -16000,6 +15960,7 @@ class ClrDatagridActionOverflow {
             anchor: ClrAlignment.CENTER,
             content: ClrAlignment.CENTER,
         };
+        this.popoverId = uniqueIdFactory();
         this._open = false;
         this.openChange = new EventEmitter(false);
         this.rowActionService.register();
@@ -16045,8 +16006,8 @@ class ClrDatagridActionOverflow {
         }
     }
 }
-ClrDatagridActionOverflow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDatagridActionOverflow, deps: [{ token: RowActionService }, { token: ClrCommonStringsService }, { token: PLATFORM_ID }, { token: i0.NgZone }, { token: ClrPopoverToggleService }, { token: UNIQUE_ID }], target: i0.ɵɵFactoryTarget.Component });
-ClrDatagridActionOverflow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrDatagridActionOverflow, selector: "clr-dg-action-overflow", inputs: { open: ["clrDgActionOverflowOpen", "open"] }, outputs: { openChange: "clrDgActionOverflowOpenChange" }, providers: [UNIQUE_ID_PROVIDER, ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService], viewQueries: [{ propertyName: "keyFocus", first: true, predicate: ClrKeyFocus, descendants: true }], ngImport: i0, template: `
+ClrDatagridActionOverflow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDatagridActionOverflow, deps: [{ token: RowActionService }, { token: ClrCommonStringsService }, { token: PLATFORM_ID }, { token: i0.NgZone }, { token: ClrPopoverToggleService }], target: i0.ɵɵFactoryTarget.Component });
+ClrDatagridActionOverflow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrDatagridActionOverflow, selector: "clr-dg-action-overflow", inputs: { open: ["clrDgActionOverflowOpen", "open"] }, outputs: { openChange: "clrDgActionOverflowOpenChange" }, providers: [ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService], viewQueries: [{ propertyName: "keyFocus", first: true, predicate: ClrKeyFocus, descendants: true }], ngImport: i0, template: `
     <button
       class="datagrid-action-toggle"
       type="button"
@@ -16079,7 +16040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             type: Component,
             args: [{
                     selector: 'clr-dg-action-overflow',
-                    providers: [UNIQUE_ID_PROVIDER, ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService],
+                    providers: [ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService],
                     template: `
     <button
       class="datagrid-action-toggle"
@@ -16114,10 +16075,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         return [{ type: RowActionService }, { type: ClrCommonStringsService }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [PLATFORM_ID]
-                    }] }, { type: i0.NgZone }, { type: ClrPopoverToggleService }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
-                    }] }];
+                    }] }, { type: i0.NgZone }, { type: ClrPopoverToggleService }];
     }, propDecorators: { keyFocus: [{
                 type: ViewChild,
                 args: [ClrKeyFocus]
@@ -16244,14 +16202,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 /** @deprecated since 2.0, remove in 3.0 */
 class ClrDatagridColumnToggle {
-    constructor(commonStrings, columnsService, columnSwitchId, platformId, zone, popoverId, popoverToggleService) {
+    constructor(commonStrings, columnsService, popoverToggleService) {
         this.commonStrings = commonStrings;
         this.columnsService = columnsService;
-        this.columnSwitchId = columnSwitchId;
-        this.platformId = platformId;
-        this.zone = zone;
-        this.popoverId = popoverId;
-        this.popoverToggleService = popoverToggleService;
+        this.popoverId = uniqueIdFactory();
         // Smart Popover
         this.smartPosition = {
             axis: ClrAxis.VERTICAL,
@@ -16298,8 +16252,8 @@ class ClrDatagridColumnToggle {
         return index;
     }
 }
-ClrDatagridColumnToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDatagridColumnToggle, deps: [{ token: ClrCommonStringsService }, { token: ColumnsService }, { token: UNIQUE_ID }, { token: PLATFORM_ID }, { token: i0.NgZone }, { token: UNIQUE_ID }, { token: ClrPopoverToggleService }], target: i0.ɵɵFactoryTarget.Component });
-ClrDatagridColumnToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrDatagridColumnToggle, selector: "clr-dg-column-toggle", host: { properties: { "class.column-switch-wrapper": "true", "class.active": "openState" } }, providers: [UNIQUE_ID_PROVIDER, ClrPopoverEventsService, ClrPopoverPositionService, ClrPopoverToggleService], queries: [{ propertyName: "customToggleTitle", first: true, predicate: ClrDatagridColumnToggleTitle, descendants: true }, { propertyName: "customToggleButton", first: true, predicate: ClrDatagridColumnToggleButton, descendants: true }], viewQueries: [{ propertyName: "allSelectedElement", first: true, predicate: ["allSelected"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+ClrDatagridColumnToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDatagridColumnToggle, deps: [{ token: ClrCommonStringsService }, { token: ColumnsService }, { token: ClrPopoverToggleService }], target: i0.ɵɵFactoryTarget.Component });
+ClrDatagridColumnToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrDatagridColumnToggle, selector: "clr-dg-column-toggle", host: { properties: { "class.column-switch-wrapper": "true", "class.active": "openState" } }, providers: [ClrPopoverEventsService, ClrPopoverPositionService, ClrPopoverToggleService], queries: [{ propertyName: "customToggleTitle", first: true, predicate: ClrDatagridColumnToggleTitle, descendants: true }, { propertyName: "customToggleButton", first: true, predicate: ClrDatagridColumnToggleButton, descendants: true }], viewQueries: [{ propertyName: "allSelectedElement", first: true, predicate: ["allSelected"], descendants: true, read: ElementRef }], ngImport: i0, template: `
     <button
       role="button"
       type="button"
@@ -16428,20 +16382,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
     </div>
   `,
                     host: { '[class.column-switch-wrapper]': 'true', '[class.active]': 'openState' },
-                    providers: [UNIQUE_ID_PROVIDER, ClrPopoverEventsService, ClrPopoverPositionService, ClrPopoverToggleService],
+                    providers: [ClrPopoverEventsService, ClrPopoverPositionService, ClrPopoverToggleService],
                 }]
-        }], ctorParameters: function () {
-        return [{ type: ClrCommonStringsService }, { type: ColumnsService }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
-                    }] }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [PLATFORM_ID]
-                    }] }, { type: i0.NgZone }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
-                    }] }, { type: ClrPopoverToggleService }];
-    }, propDecorators: { customToggleTitle: [{
+        }], ctorParameters: function () { return [{ type: ClrCommonStringsService }, { type: ColumnsService }, { type: ClrPopoverToggleService }]; }, propDecorators: { customToggleTitle: [{
                 type: ContentChild,
                 args: [ClrDatagridColumnToggleTitle]
             }], customToggleButton: [{
@@ -17287,12 +17230,21 @@ class ClrIfDetail {
     }
     togglePanel(showPanel) {
         let stateChangeParams = null;
-        this.viewContainer.clear();
         if (showPanel === true) {
-            this.viewContainer.createEmbeddedView(this.templateRef, { $implicit: this.detailService.state });
+            const embeddedViewContext = { $implicit: this.detailService.state };
+            if (this.embeddedViewRef) {
+                this.embeddedViewRef.context = embeddedViewContext;
+            }
+            else {
+                this.embeddedViewRef = this.viewContainer.createEmbeddedView(this.templateRef, embeddedViewContext);
+            }
             this.skip = true;
             stateChangeParams = this.detailService.state;
         }
+        else {
+            this.viewContainer.clear();
+            this.embeddedViewRef = null;
+        }
         this.stateChange.emit(stateChangeParams);
     }
     ngOnDestroy() {
@@ -18518,8 +18470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 class ClrStackViewLabel {
-    constructor(uniqueId) {
-        this.uniqueId = uniqueId;
+    constructor() {
         this._generatedId = null;
         this._id = null;
     }
@@ -18535,30 +18486,24 @@ class ClrStackViewLabel {
         return this._id;
     }
     ngOnInit() {
-        this._generatedId = 'clr-stack-label-' + this.uniqueId;
+        this._generatedId = 'clr-stack-label-' + uniqueIdFactory();
         if (!this.id) {
             this._id = this._generatedId + '';
         }
     }
 }
-ClrStackViewLabel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrStackViewLabel, deps: [{ token: UNIQUE_ID }], target: i0.ɵɵFactoryTarget.Component });
-ClrStackViewLabel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrStackViewLabel, selector: "clr-stack-label", inputs: { id: "id" }, host: { properties: { "attr.id": "id" } }, providers: [UNIQUE_ID_PROVIDER], ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+ClrStackViewLabel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrStackViewLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrStackViewLabel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrStackViewLabel, selector: "clr-stack-label", inputs: { id: "id" }, host: { properties: { "attr.id": "id" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrStackViewLabel, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-stack-label',
                     template: '<ng-content></ng-content>',
-                    providers: [UNIQUE_ID_PROVIDER],
                     host: {
                         '[attr.id]': 'id',
                     },
                 }]
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
-                    }] }];
-    }, propDecorators: { id: [{
+        }], propDecorators: { id: [{
                 type: Input
             }] } });
 
@@ -18573,9 +18518,8 @@ class ClrStackBlock {
      * querying for children StackBlocks, but this feature is not available when downgrading
      * the component for Angular 1.
      */
-    constructor(parent, uniqueId, commonStrings) {
+    constructor(parent, commonStrings) {
         this.parent = parent;
-        this.uniqueId = uniqueId;
         this.commonStrings = commonStrings;
         this.expanded = false;
         this.expandedChange = new EventEmitter(false);
@@ -18584,6 +18528,7 @@ class ClrStackBlock {
         this._changedChildren = 0;
         this._fullyInitialized = false;
         this._changed = false;
+        this.uniqueId = uniqueIdFactory();
         if (parent) {
             parent.addChild();
         }
@@ -18649,13 +18594,16 @@ class ClrStackBlock {
         return this.expanded ? `clr-stack-children-${this.uniqueId}` : null;
     }
 }
-ClrStackBlock.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrStackBlock, deps: [{ token: ClrStackBlock, optional: true, skipSelf: true }, { token: UNIQUE_ID }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrStackBlock.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrStackBlock, selector: "clr-stack-block", inputs: { expanded: ["clrSbExpanded", "expanded"], expandable: ["clrSbExpandable", "expandable"], setChangedValue: ["clrSbNotifyChange", "setChangedValue"], ariaLevel: ["clrStackViewLevel", "ariaLevel"], ariaSetsize: ["clrStackViewSetsize", "ariaSetsize"], ariaPosinset: ["clrStackViewPosinset", "ariaPosinset"] }, outputs: { expandedChange: "clrSbExpandedChange" }, host: { properties: { "class.stack-block": "true", "attr.role": "\"heading\"", "attr.aria-level": "headingLevel", "class.stack-block-expanded": "this.expanded", "class.stack-block-expandable": "this.expandable", "class.stack-block-changed": "this.getChangedValue", "class.on-focus": "this.onStackLabelFocus" } }, providers: [UNIQUE_ID_PROVIDER], queries: [{ propertyName: "stackBlockTitle", first: true, predicate: ClrStackViewLabel, descendants: true }], ngImport: i0, template: `
+ClrStackBlock.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrStackBlock, deps: [{ token: ClrStackBlock, optional: true, skipSelf: true }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
+ClrStackBlock.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrStackBlock, selector: "clr-stack-block", inputs: { expanded: ["clrSbExpanded", "expanded"], expandable: ["clrSbExpandable", "expandable"], setChangedValue: ["clrSbNotifyChange", "setChangedValue"], ariaLevel: ["clrStackViewLevel", "ariaLevel"], ariaSetsize: ["clrStackViewSetsize", "ariaSetsize"], ariaPosinset: ["clrStackViewPosinset", "ariaPosinset"] }, outputs: { expandedChange: "clrSbExpandedChange" }, host: { properties: { "class.stack-block": "true", "attr.role": "\"heading\"", "attr.aria-level": "headingLevel", "class.stack-block-expanded": "this.expanded", "class.stack-block-expandable": "this.expandable", "class.stack-block-changed": "this.getChangedValue", "class.on-focus": "this.onStackLabelFocus" } }, queries: [{ propertyName: "stackBlockTitle", first: true, predicate: ClrStackViewLabel, descendants: true }], ngImport: i0, template: `
+    <!-- The 'preventDefault' for the space keydown event prevents the page
+         from scrolling when a stack block is toggled via the space key. -->
     <div
       class="stack-block-label"
       (click)="toggleExpand()"
       (keyup.enter)="toggleExpand()"
       (keyup.space)="toggleExpand()"
+      (keydown.space)="$event.preventDefault()"
       (focus)="focused = true"
       (blur)="focused = false"
       [id]="uniqueId"
@@ -18693,11 +18641,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             args: [{
                     selector: 'clr-stack-block',
                     template: `
+    <!-- The 'preventDefault' for the space keydown event prevents the page
+         from scrolling when a stack block is toggled via the space key. -->
     <div
       class="stack-block-label"
       (click)="toggleExpand()"
       (keyup.enter)="toggleExpand()"
       (keyup.space)="toggleExpand()"
+      (keydown.space)="$event.preventDefault()"
       (focus)="focused = true"
       (blur)="focused = false"
       [id]="uniqueId"
@@ -18744,16 +18695,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         '[attr.role]': '"heading"',
                         '[attr.aria-level]': 'headingLevel',
                     },
-                    providers: [UNIQUE_ID_PROVIDER],
                 }]
         }], ctorParameters: function () {
         return [{ type: ClrStackBlock, decorators: [{
                         type: SkipSelf
                     }, {
                         type: Optional
-                    }] }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
                     }] }, { type: ClrCommonStringsService }];
     }, propDecorators: { expanded: [{
                 type: HostBinding,
@@ -18799,11 +18746,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrStackContentInput {
-    constructor(uniqueId) {
-        this.uniqueId = uniqueId;
+    constructor() {
+        this.uniqueId = uniqueIdFactory();
     }
 }
-ClrStackContentInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrStackContentInput, deps: [{ token: UNIQUE_ID }], target: i0.ɵɵFactoryTarget.Directive });
+ClrStackContentInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrStackContentInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
 ClrStackContentInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ClrStackContentInput, selector: "[clrStackInput]", host: { properties: { "class.clr-input": "true", "attr.aria-labelledby": "uniqueId" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrStackContentInput, decorators: [{
             type: Directive,
@@ -18814,12 +18761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         '[attr.aria-labelledby]': 'uniqueId',
                     },
                 }]
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
-                    }] }];
-    } });
+        }] });
 
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -19706,8 +19648,7 @@ const LVIEW_CONTEXT_INDEX = 8;
 // then those keys are sent together in one request.
 const TREE_TYPE_AHEAD_TIMEOUT = 200;
 class ClrTreeNode {
-    constructor(nodeId, platformId, parent, forTypeAheadProvider, featuresService, expandService, commonStrings, focusManager, injector) {
-        this.nodeId = nodeId;
+    constructor(platformId, parent, forTypeAheadProvider, featuresService, expandService, commonStrings, focusManager, injector) {
         this.platformId = platformId;
         this.forTypeAheadProvider = forTypeAheadProvider;
         this.featuresService = featuresService;
@@ -19717,6 +19658,7 @@ class ClrTreeNode {
         this.STATES = ClrSelectedState;
         this.skipEmitChange = false;
         this.isModelLoading = false;
+        this.nodeId = uniqueIdFactory();
         this.typeAheadKeyEvent = new Subject();
         this.typeAheadKeyBuffer = '';
         this.selectedChange = new EventEmitter(false);
@@ -19931,13 +19873,8 @@ class ClrTreeNode {
         }
     }
 }
-ClrTreeNode.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrTreeNode, deps: [{ token: UNIQUE_ID }, { token: PLATFORM_ID }, { token: ClrTreeNode, optional: true, skipSelf: true }, { token: ForTypeAheadProvider, optional: true, self: true }, { token: TreeFeaturesService }, { token: IfExpandService }, { token: ClrCommonStringsService }, { token: TreeFocusManagerService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ClrTreeNode.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrTreeNode, selector: "clr-tree-node", inputs: { selected: ["clrSelected", "selected"], expandable: ["clrExpandable", "expandable"], expanded: ["clrExpanded", "expanded"] }, outputs: { selectedChange: "clrSelectedChange", expandedChange: "clrExpandedChange" }, host: { properties: { "class.clr-tree-node": "true" } }, providers: [
-        UNIQUE_ID_PROVIDER,
-        TREE_FEATURES_PROVIDER,
-        IfExpandService,
-        { provide: LoadingListener, useExisting: IfExpandService },
-    ], queries: [{ propertyName: "treeNodeLinkList", predicate: ClrTreeNodeLink }], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div\n  #contentContainer\n  role=\"treeitem\"\n  class=\"clr-tree-node-content-container\"\n  tabindex=\"-1\"\n  [attr.aria-expanded]=\"isExpandable() ? expanded : null\"\n  [attr.aria-selected]=\"ariaSelected\"\n  (keydown)=\"onKeyDown($event)\"\n  (focus)=\"broadcastFocusOnContainer()\"\n>\n  <button\n    *ngIf=\"isExpandable() && !isModelLoading && !expandService.loading\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n    class=\"clr-treenode-caret\"\n    (click)=\"expandService.toggle();\"\n    (focus)=\"focusTreeNode()\"\n  >\n    <cds-icon\n      class=\"clr-treenode-caret-icon\"\n      shape=\"angle\"\n      [attr.direction]=\"expandService.expanded ? 'down' : 'right'\"\n    ></cds-icon>\n  </button>\n  <div class=\"clr-treenode-spinner-container\" *ngIf=\"expandService.loading || isModelLoading\">\n    <span class=\"clr-treenode-spinner spinner\"></span>\n  </div>\n  <div class=\"clr-checkbox-wrapper clr-treenode-checkbox\" *ngIf=\"featuresService.selectable\">\n    <input\n      aria-hidden=\"true\"\n      type=\"checkbox\"\n      id=\"{{nodeId}}-check\"\n      class=\"clr-checkbox\"\n      [checked]=\"_model.selected.value === STATES.SELECTED\"\n      [indeterminate]=\"_model.selected.value === STATES.INDETERMINATE\"\n      (change)=\"_model.toggleSelection(featuresService.eager)\"\n      (focus)=\"focusTreeNode()\"\n      tabindex=\"-1\"\n    />\n    <label for=\"{{nodeId}}-check\" class=\"clr-control-label\"></label>\n  </div>\n  <div class=\"clr-treenode-content\" (mousedown)=\"focusTreeNode()\">\n    <ng-content></ng-content>\n    <div class=\"clr-sr-only\" *ngIf=\"featuresService.selectable\">\n      <span *ngIf=\"ariaSelected\">selected</span>\n      <span *ngIf=\"!ariaSelected\">unselected</span>\n    </div>\n  </div>\n</div>\n<div\n  class=\"clr-treenode-children\"\n  [@toggleChildrenAnim]=\"expandService.expanded ? 'expanded' : 'collapsed'\"\n  [attr.role]=\"isExpandable() && !featuresService.recursion ? 'group' : null\"\n>\n  <ng-content select=\"clr-tree-node\"></ng-content>\n  <ng-content select=\"[clrIfExpanded]\"></ng-content>\n  <clr-recursive-children [parent]=\"_model\"></clr-recursive-children>\n</div>\n", components: [{ type: RecursiveChildren, selector: "clr-recursive-children", inputs: ["parent", "children"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], animations: [
+ClrTreeNode.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrTreeNode, deps: [{ token: PLATFORM_ID }, { token: ClrTreeNode, optional: true, skipSelf: true }, { token: ForTypeAheadProvider, optional: true, self: true }, { token: TreeFeaturesService }, { token: IfExpandService }, { token: ClrCommonStringsService }, { token: TreeFocusManagerService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ClrTreeNode.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrTreeNode, selector: "clr-tree-node", inputs: { selected: ["clrSelected", "selected"], expandable: ["clrExpandable", "expandable"], expanded: ["clrExpanded", "expanded"] }, outputs: { selectedChange: "clrSelectedChange", expandedChange: "clrExpandedChange" }, host: { properties: { "class.clr-tree-node": "true" } }, providers: [TREE_FEATURES_PROVIDER, IfExpandService, { provide: LoadingListener, useExisting: IfExpandService }], queries: [{ propertyName: "treeNodeLinkList", predicate: ClrTreeNodeLink }], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div\n  #contentContainer\n  role=\"treeitem\"\n  class=\"clr-tree-node-content-container\"\n  tabindex=\"-1\"\n  [attr.aria-expanded]=\"isExpandable() ? expanded : null\"\n  [attr.aria-selected]=\"ariaSelected\"\n  (keydown)=\"onKeyDown($event)\"\n  (focus)=\"broadcastFocusOnContainer()\"\n>\n  <button\n    *ngIf=\"isExpandable() && !isModelLoading && !expandService.loading\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n    class=\"clr-treenode-caret\"\n    (click)=\"expandService.toggle();\"\n    (focus)=\"focusTreeNode()\"\n  >\n    <cds-icon\n      class=\"clr-treenode-caret-icon\"\n      shape=\"angle\"\n      [attr.direction]=\"expandService.expanded ? 'down' : 'right'\"\n    ></cds-icon>\n  </button>\n  <div class=\"clr-treenode-spinner-container\" *ngIf=\"expandService.loading || isModelLoading\">\n    <span class=\"clr-treenode-spinner spinner\"></span>\n  </div>\n  <div class=\"clr-checkbox-wrapper clr-treenode-checkbox\" *ngIf=\"featuresService.selectable\">\n    <input\n      aria-hidden=\"true\"\n      type=\"checkbox\"\n      id=\"{{nodeId}}-check\"\n      class=\"clr-checkbox\"\n      [checked]=\"_model.selected.value === STATES.SELECTED\"\n      [indeterminate]=\"_model.selected.value === STATES.INDETERMINATE\"\n      (change)=\"_model.toggleSelection(featuresService.eager)\"\n      (focus)=\"focusTreeNode()\"\n      tabindex=\"-1\"\n    />\n    <label for=\"{{nodeId}}-check\" class=\"clr-control-label\"></label>\n  </div>\n  <div class=\"clr-treenode-content\" (mousedown)=\"focusTreeNode()\">\n    <ng-content></ng-content>\n    <div class=\"clr-sr-only\" *ngIf=\"featuresService.selectable\">\n      <span *ngIf=\"ariaSelected\">selected</span>\n      <span *ngIf=\"!ariaSelected\">unselected</span>\n    </div>\n  </div>\n</div>\n<div\n  class=\"clr-treenode-children\"\n  [@toggleChildrenAnim]=\"expandService.expanded ? 'expanded' : 'collapsed'\"\n  [attr.role]=\"isExpandable() && !featuresService.recursion ? 'group' : null\"\n>\n  <ng-content select=\"clr-tree-node\"></ng-content>\n  <ng-content select=\"[clrIfExpanded]\"></ng-content>\n  <clr-recursive-children [parent]=\"_model\"></clr-recursive-children>\n</div>\n", components: [{ type: RecursiveChildren, selector: "clr-recursive-children", inputs: ["parent", "children"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], animations: [
         trigger('toggleChildrenAnim', [
             transition('collapsed => expanded', [style({ height: 0 }), animate(200, style({ height: '*' }))]),
             transition('expanded => collapsed', [style({ height: '*' }), animate(200, style({ height: 0 }))]),
@@ -19947,12 +19884,7 @@ ClrTreeNode.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrTreeNode, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-tree-node', providers: [
-                        UNIQUE_ID_PROVIDER,
-                        TREE_FEATURES_PROVIDER,
-                        IfExpandService,
-                        { provide: LoadingListener, useExisting: IfExpandService },
-                    ], animations: [
+            args: [{ selector: 'clr-tree-node', providers: [TREE_FEATURES_PROVIDER, IfExpandService, { provide: LoadingListener, useExisting: IfExpandService }], animations: [
                         trigger('toggleChildrenAnim', [
                             transition('collapsed => expanded', [style({ height: 0 }), animate(200, style({ height: '*' }))]),
                             transition('expanded => collapsed', [style({ height: '*' }), animate(200, style({ height: 0 }))]),
@@ -19964,9 +19896,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     }, template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div\n  #contentContainer\n  role=\"treeitem\"\n  class=\"clr-tree-node-content-container\"\n  tabindex=\"-1\"\n  [attr.aria-expanded]=\"isExpandable() ? expanded : null\"\n  [attr.aria-selected]=\"ariaSelected\"\n  (keydown)=\"onKeyDown($event)\"\n  (focus)=\"broadcastFocusOnContainer()\"\n>\n  <button\n    *ngIf=\"isExpandable() && !isModelLoading && !expandService.loading\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n    class=\"clr-treenode-caret\"\n    (click)=\"expandService.toggle();\"\n    (focus)=\"focusTreeNode()\"\n  >\n    <cds-icon\n      class=\"clr-treenode-caret-icon\"\n      shape=\"angle\"\n      [attr.direction]=\"expandService.expanded ? 'down' : 'right'\"\n    ></cds-icon>\n  </button>\n  <div class=\"clr-treenode-spinner-container\" *ngIf=\"expandService.loading || isModelLoading\">\n    <span class=\"clr-treenode-spinner spinner\"></span>\n  </div>\n  <div class=\"clr-checkbox-wrapper clr-treenode-checkbox\" *ngIf=\"featuresService.selectable\">\n    <input\n      aria-hidden=\"true\"\n      type=\"checkbox\"\n      id=\"{{nodeId}}-check\"\n      class=\"clr-checkbox\"\n      [checked]=\"_model.selected.value === STATES.SELECTED\"\n      [indeterminate]=\"_model.selected.value === STATES.INDETERMINATE\"\n      (change)=\"_model.toggleSelection(featuresService.eager)\"\n      (focus)=\"focusTreeNode()\"\n      tabindex=\"-1\"\n    />\n    <label for=\"{{nodeId}}-check\" class=\"clr-control-label\"></label>\n  </div>\n  <div class=\"clr-treenode-content\" (mousedown)=\"focusTreeNode()\">\n    <ng-content></ng-content>\n    <div class=\"clr-sr-only\" *ngIf=\"featuresService.selectable\">\n      <span *ngIf=\"ariaSelected\">selected</span>\n      <span *ngIf=\"!ariaSelected\">unselected</span>\n    </div>\n  </div>\n</div>\n<div\n  class=\"clr-treenode-children\"\n  [@toggleChildrenAnim]=\"expandService.expanded ? 'expanded' : 'collapsed'\"\n  [attr.role]=\"isExpandable() && !featuresService.recursion ? 'group' : null\"\n>\n  <ng-content select=\"clr-tree-node\"></ng-content>\n  <ng-content select=\"[clrIfExpanded]\"></ng-content>\n  <clr-recursive-children [parent]=\"_model\"></clr-recursive-children>\n</div>\n" }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
-                    }] }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [PLATFORM_ID]
                     }] }, { type: ClrTreeNode, decorators: [{
@@ -20177,13 +20106,13 @@ function wrapObservable(observable, onSubscribe, onUnsubscribe) {
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class DropdownFocusHandler {
-    constructor(id, renderer, parent, toggleService, focusService, platformId) {
-        this.id = id;
+    constructor(renderer, parent, toggleService, focusService, platformId) {
         this.renderer = renderer;
         this.parent = parent;
         this.toggleService = toggleService;
         this.focusService = focusService;
         this.platformId = platformId;
+        this.id = uniqueIdFactory();
         this._unlistenFuncs = [];
         this.focusBackOnTrigger = false;
         this.resetChildren();
@@ -20330,15 +20259,12 @@ class DropdownFocusHandler {
         this.focusService.detachListeners();
     }
 }
-DropdownFocusHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropdownFocusHandler, deps: [{ token: UNIQUE_ID }, { token: i0.Renderer2 }, { token: DropdownFocusHandler, optional: true, skipSelf: true }, { token: ClrPopoverToggleService }, { token: FocusService$1 }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+DropdownFocusHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropdownFocusHandler, deps: [{ token: i0.Renderer2 }, { token: DropdownFocusHandler, optional: true, skipSelf: true }, { token: ClrPopoverToggleService }, { token: FocusService$1 }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
 DropdownFocusHandler.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropdownFocusHandler });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropdownFocusHandler, decorators: [{
             type: Injectable
         }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
-                    }] }, { type: i0.Renderer2 }, { type: DropdownFocusHandler, decorators: [{
+        return [{ type: i0.Renderer2 }, { type: DropdownFocusHandler, decorators: [{
                         type: SkipSelf
                     }, {
                         type: Optional
@@ -20440,13 +20366,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class BasicFocusableItem {
-    constructor(id, el, renderer, platformId) {
-        this.id = id;
+    constructor(el, renderer, platformId) {
         this.el = el;
         this.renderer = renderer;
         this.platformId = platformId;
+        this.id = uniqueIdFactory();
         this.disabled = false;
-        renderer.setAttribute(el.nativeElement, 'id', id);
+        renderer.setAttribute(el.nativeElement, 'id', this.id);
         renderer.setAttribute(el.nativeElement, 'tabindex', '-1');
     }
     focus() {
@@ -20468,21 +20394,17 @@ class BasicFocusableItem {
         }
     }
 }
-BasicFocusableItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BasicFocusableItem, deps: [{ token: UNIQUE_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+BasicFocusableItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BasicFocusableItem, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
 BasicFocusableItem.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BasicFocusableItem });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BasicFocusableItem, decorators: [{
             type: Injectable
         }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
-                    }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+        return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [PLATFORM_ID]
                     }] }];
     } });
 const BASIC_FOCUSABLE_ITEM_PROVIDER = [
-    UNIQUE_ID_PROVIDER,
     {
         provide: FocusableItem,
         useClass: BasicFocusableItem,
@@ -22584,10 +22506,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 let nbTabContentComponents = 0;
 class ClrTabContent {
-    constructor(ifActiveService, id, ariaService, tabsService) {
+    constructor(ifActiveService, id, tabsService) {
         this.ifActiveService = ifActiveService;
         this.id = id;
-        this.ariaService = ariaService;
         this.tabsService = tabsService;
         if (!this.tabContentId) {
             this.tabContentId = 'clr-tab-content-' + nbTabContentComponents++;
@@ -22600,13 +22521,8 @@ class ClrTabContent {
         this.viewRef = this.tabsService.tabContentViewContainer.createEmbeddedView(value);
     }
     get ariaLabelledBy() {
-        return this.ariaService.ariaLabelledBy;
-    }
-    get tabContentId() {
-        return this.ariaService.ariaControls;
-    }
-    set tabContentId(id) {
-        this.ariaService.ariaControls = id;
+        var _a, _b;
+        return (_b = (_a = this.tabsService.children.find(tab => tab.tabContent === this)) === null || _a === void 0 ? void 0 : _a.tabLink) === null || _b === void 0 ? void 0 : _b.tabLinkId;
     }
     get active() {
         return this.ifActiveService.current === this.id;
@@ -22618,7 +22534,7 @@ class ClrTabContent {
         }
     }
 }
-ClrTabContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrTabContent, deps: [{ token: IfActiveService }, { token: IF_ACTIVE_ID }, { token: AriaService }, { token: TabsService }], target: i0.ɵɵFactoryTarget.Component });
+ClrTabContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrTabContent, deps: [{ token: IfActiveService }, { token: IF_ACTIVE_ID }, { token: TabsService }], target: i0.ɵɵFactoryTarget.Component });
 ClrTabContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrTabContent, selector: "clr-tab-content", inputs: { tabContentId: ["id", "tabContentId"] }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["tabContentProjectedRef"], descendants: true, static: true }], ngImport: i0, template: `
     <ng-template #tabContentProjectedRef>
       <section
@@ -22658,7 +22574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         return [{ type: IfActiveService }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [IF_ACTIVE_ID]
-                    }] }, { type: AriaService }, { type: TabsService }];
+                    }] }, { type: TabsService }];
     }, propDecorators: { templateRef: [{
                 type: ViewChild,
                 args: ['tabContentProjectedRef', { static: true }]
@@ -22689,10 +22605,9 @@ const TABS_ID_PROVIDER = {
  */
 let nbTabLinkComponents = 0;
 class ClrTabLink {
-    constructor(ifActiveService, id, ariaService, el, cfr, viewContainerRef, tabsService, tabsId) {
+    constructor(ifActiveService, id, el, cfr, viewContainerRef, tabsService, tabsId) {
         this.ifActiveService = ifActiveService;
         this.id = id;
-        this.ariaService = ariaService;
         this.el = el;
         this.cfr = cfr;
         this.viewContainerRef = viewContainerRef;
@@ -22719,13 +22634,8 @@ class ClrTabLink {
         return !this.inOverflow;
     }
     get ariaControls() {
-        return this.ariaService.ariaControls;
-    }
-    get tabLinkId() {
-        return this.ariaService.ariaLabelledBy;
-    }
-    set tabLinkId(id) {
-        this.ariaService.ariaLabelledBy = id;
+        var _a, _b;
+        return (_b = (_a = this.tabsService.children.find(tab => tab.tabLink === this)) === null || _a === void 0 ? void 0 : _a.tabContent) === null || _b === void 0 ? void 0 : _b.tabContentId;
     }
     activate() {
         this.ifActiveService.current = this.id;
@@ -22737,7 +22647,7 @@ class ClrTabLink {
         return this.active ? 0 : -1;
     }
 }
-ClrTabLink.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrTabLink, deps: [{ token: IfActiveService }, { token: IF_ACTIVE_ID }, { token: AriaService }, { token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: TabsService }, { token: TABS_ID }], target: i0.ɵɵFactoryTarget.Directive });
+ClrTabLink.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrTabLink, deps: [{ token: IfActiveService }, { token: IF_ACTIVE_ID }, { token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: TabsService }, { token: TABS_ID }], target: i0.ɵɵFactoryTarget.Directive });
 ClrTabLink.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ClrTabLink, selector: "[clrTabLink]", inputs: { inOverflow: ["clrTabLinkInOverflow", "inOverflow"], tabLinkId: ["id", "tabLinkId"] }, host: { attributes: { "role": "tab", "type": "button" }, listeners: { "click": "activate()" }, properties: { "class.btn": "true", "class.btn-link": "this.addLinkClasses", "class.nav-link": "this.addLinkClasses", "attr.aria-controls": "this.ariaControls", "id": "this.tabLinkId", "class.active": "this.active", "attr.aria-selected": "this.active", "attr.tabindex": "this.tabindex" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrTabLink, decorators: [{
             type: Directive,
@@ -22753,7 +22663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         return [{ type: IfActiveService }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [IF_ACTIVE_ID]
-                    }] }, { type: AriaService }, { type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: TabsService }, { type: undefined, decorators: [{
+                    }] }, { type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: TabsService }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [TABS_ID]
                     }] }];
@@ -22809,13 +22719,13 @@ class ClrTab {
     }
 }
 ClrTab.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrTab, deps: [{ token: IfActiveService }, { token: IF_ACTIVE_ID }, { token: TabsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrTab.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrTab, selector: "clr-tab", providers: [IF_ACTIVE_ID_PROVIDER, AriaService], queries: [{ propertyName: "tabLink", first: true, predicate: ClrTabLink, descendants: true, static: true }, { propertyName: "tabContent", first: true, predicate: ClrTabContent, descendants: true, static: true }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+ClrTab.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrTab, selector: "clr-tab", providers: [IF_ACTIVE_ID_PROVIDER], queries: [{ propertyName: "tabLink", first: true, predicate: ClrTabLink, descendants: true, static: true }, { propertyName: "tabContent", first: true, predicate: ClrTabContent, descendants: true, static: true }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrTab, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tab',
                     template: `<ng-content></ng-content>`,
-                    providers: [IF_ACTIVE_ID_PROVIDER, AriaService],
+                    providers: [IF_ACTIVE_ID_PROVIDER],
                 }]
         }], ctorParameters: function () {
         return [{ type: IfActiveService }, { type: undefined, decorators: [{
@@ -23709,13 +23619,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrModal {
-    constructor(_scrollingService, commonStrings, modalId) {
+    constructor(_scrollingService, commonStrings) {
         this._scrollingService = _scrollingService;
         this.commonStrings = commonStrings;
-        this.modalId = modalId;
+        this.modalId = uniqueIdFactory();
         this._open = false;
         this._openChanged = new EventEmitter(false);
         this.closable = true;
+        this.closeButtonAriaLabel = this.commonStrings.keys.close;
         this.staticBackdrop = true;
         this.skipAnimation = 'false';
         // presently this is only used by wizards
@@ -23764,8 +23675,8 @@ class ClrModal {
         }
     }
 }
-ClrModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrModal, deps: [{ token: ScrollingService }, { token: ClrCommonStringsService }, { token: UNIQUE_ID }], target: i0.ɵɵFactoryTarget.Component });
-ClrModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrModal, selector: "clr-modal", inputs: { _open: ["clrModalOpen", "_open"], closable: ["clrModalClosable", "closable"], size: ["clrModalSize", "size"], staticBackdrop: ["clrModalStaticBackdrop", "staticBackdrop"], skipAnimation: ["clrModalSkipAnimation", "skipAnimation"], bypassScrollService: ["clrModalOverrideScrollService", "bypassScrollService"], stopClose: ["clrModalPreventClose", "stopClose"], labelledBy: ["clrModalLabelledById", "labelledBy"] }, outputs: { _openChanged: "clrModalOpenChange", altClose: "clrModalAlternateClose" }, host: { listeners: { "body:keyup.escape": "close()" }, properties: { "class.open": "this._open" } }, providers: [UNIQUE_ID_PROVIDER], viewQueries: [{ propertyName: "focusTrap", first: true, predicate: FocusTrapDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div clrFocusTrap class=\"modal\" *ngIf=\"_open\">\n  <!--fixme: revisit when ngClass works with exit animation-->\n  <div\n    [@fadeDown]=\"skipAnimation\"\n    (@fadeDown.done)=\"fadeDone($event)\"\n    class=\"modal-dialog\"\n    [class.modal-sm]=\"size == 'sm'\"\n    [class.modal-lg]=\"size == 'lg'\"\n    [class.modal-xl]=\"size == 'xl'\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-hidden]=\"!_open\"\n    [attr.aria-labelledby]=\"labelledBy\"\n  >\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n    <div class=\"modal-content-wrapper\">\n      <!-- only used in wizards -->\n      <ng-content select=\".modal-nav\"></ng-content>\n\n      <div class=\"modal-content\">\n        <div class=\"modal-header--accessible\">\n          <div class=\"modal-title-wrapper\" id=\"{{modalId}}\" clrFocusOnViewInit>\n            <ng-content select=\".modal-title\"></ng-content>\n          </div>\n          <button\n            type=\"button\"\n            [attr.aria-label]=\"commonStrings.keys.close\"\n            class=\"close\"\n            *ngIf=\"closable\"\n            (click)=\"close()\"\n          >\n            <cds-icon shape=\"window-close\"></cds-icon>\n          </button>\n        </div>\n        <div class=\"modal-body-wrapper\">\n          <ng-content select=\".modal-body\"></ng-content>\n        </div>\n        <ng-content select=\".modal-footer\"></ng-content>\n      </div>\n    </div>\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n  </div>\n\n  <div [@fade] class=\"modal-backdrop\" aria-hidden=\"true\" (click)=\"staticBackdrop || close()\"></div>\n</div>\n", styles: [":host{display:none}:host.open{display:inline}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusTrapDirective, selector: "[clrFocusTrap]", inputs: ["clrFocusTrap"] }, { type: ClrFocusOnViewInit, selector: "[clrFocusOnViewInit]", inputs: ["clrFocusOnViewInit"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], viewProviders: [ScrollingService], animations: [
+ClrModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrModal, deps: [{ token: ScrollingService }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
+ClrModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrModal, selector: "clr-modal", inputs: { _open: ["clrModalOpen", "_open"], closable: ["clrModalClosable", "closable"], closeButtonAriaLabel: ["clrModalCloseButtonAriaLabel", "closeButtonAriaLabel"], size: ["clrModalSize", "size"], staticBackdrop: ["clrModalStaticBackdrop", "staticBackdrop"], skipAnimation: ["clrModalSkipAnimation", "skipAnimation"], bypassScrollService: ["clrModalOverrideScrollService", "bypassScrollService"], stopClose: ["clrModalPreventClose", "stopClose"], labelledBy: ["clrModalLabelledById", "labelledBy"] }, outputs: { _openChanged: "clrModalOpenChange", altClose: "clrModalAlternateClose" }, host: { listeners: { "body:keyup.escape": "close()" }, properties: { "class.open": "this._open" } }, viewQueries: [{ propertyName: "focusTrap", first: true, predicate: FocusTrapDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div clrFocusTrap class=\"modal\" *ngIf=\"_open\">\n  <!--fixme: revisit when ngClass works with exit animation-->\n  <div\n    [@fadeDown]=\"skipAnimation\"\n    (@fadeDown.done)=\"fadeDone($event)\"\n    class=\"modal-dialog\"\n    [class.modal-sm]=\"size == 'sm'\"\n    [class.modal-lg]=\"size == 'lg'\"\n    [class.modal-xl]=\"size == 'xl'\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-hidden]=\"!_open\"\n    [attr.aria-labelledby]=\"labelledBy\"\n  >\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n    <div class=\"modal-content-wrapper\">\n      <!-- only used in wizards -->\n      <ng-content select=\".modal-nav\"></ng-content>\n\n      <div class=\"modal-content\">\n        <div class=\"modal-header--accessible\">\n          <div class=\"modal-title-wrapper\" id=\"{{modalId}}\" clrFocusOnViewInit>\n            <ng-content select=\".modal-title\"></ng-content>\n          </div>\n          <button\n            type=\"button\"\n            [attr.aria-label]=\"closeButtonAriaLabel || commonStrings.keys.close\"\n            class=\"close\"\n            *ngIf=\"closable\"\n            (click)=\"close()\"\n          >\n            <cds-icon shape=\"window-close\"></cds-icon>\n          </button>\n        </div>\n        <div class=\"modal-body-wrapper\">\n          <ng-content select=\".modal-body\"></ng-content>\n        </div>\n        <ng-content select=\".modal-footer\"></ng-content>\n      </div>\n    </div>\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n  </div>\n\n  <div [@fade] class=\"modal-backdrop\" aria-hidden=\"true\" (click)=\"staticBackdrop || close()\"></div>\n</div>\n", styles: [":host{display:none}:host.open{display:inline}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusTrapDirective, selector: "[clrFocusTrap]", inputs: ["clrFocusTrap"] }, { type: ClrFocusOnViewInit, selector: "[clrFocusOnViewInit]", inputs: ["clrFocusOnViewInit"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], viewProviders: [ScrollingService], animations: [
         trigger('fadeDown', [
             transition('* => false', [style({ opacity: 0, transform: 'translate(0, -25%)' }), animate('0.2s ease-in-out')]),
             transition('false => *', [animate('0.2s ease-in-out', style({ opacity: 0, transform: 'translate(0, -25%)' }))]),
@@ -23795,13 +23706,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                             transition('void => *', [style({ opacity: 0 }), animate('0.2s ease-in-out', style({ opacity: 0.85 }))]),
                             transition('* => void', [animate('0.2s ease-in-out', style({ opacity: 0 }))]),
                         ]),
-                    ], providers: [UNIQUE_ID_PROVIDER], template: "<!--\n  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div clrFocusTrap class=\"modal\" *ngIf=\"_open\">\n  <!--fixme: revisit when ngClass works with exit animation-->\n  <div\n    [@fadeDown]=\"skipAnimation\"\n    (@fadeDown.done)=\"fadeDone($event)\"\n    class=\"modal-dialog\"\n    [class.modal-sm]=\"size == 'sm'\"\n    [class.modal-lg]=\"size == 'lg'\"\n    [class.modal-xl]=\"size == 'xl'\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-hidden]=\"!_open\"\n    [attr.aria-labelledby]=\"labelledBy\"\n  >\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n    <div class=\"modal-content-wrapper\">\n      <!-- only used in wizards -->\n      <ng-content select=\".modal-nav\"></ng-content>\n\n      <div class=\"modal-content\">\n        <div class=\"modal-header--accessible\">\n          <div class=\"modal-title-wrapper\" id=\"{{modalId}}\" clrFocusOnViewInit>\n            <ng-content select=\".modal-title\"></ng-content>\n          </div>\n          <button\n            type=\"button\"\n            [attr.aria-label]=\"commonStrings.keys.close\"\n            class=\"close\"\n            *ngIf=\"closable\"\n            (click)=\"close()\"\n          >\n            <cds-icon shape=\"window-close\"></cds-icon>\n          </button>\n        </div>\n        <div class=\"modal-body-wrapper\">\n          <ng-content select=\".modal-body\"></ng-content>\n        </div>\n        <ng-content select=\".modal-footer\"></ng-content>\n      </div>\n    </div>\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n  </div>\n\n  <div [@fade] class=\"modal-backdrop\" aria-hidden=\"true\" (click)=\"staticBackdrop || close()\"></div>\n</div>\n" }]
-        }], ctorParameters: function () {
-        return [{ type: ScrollingService }, { type: ClrCommonStringsService }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
-                    }] }];
-    }, propDecorators: { focusTrap: [{
+                    ], template: "<!--\n  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div clrFocusTrap class=\"modal\" *ngIf=\"_open\">\n  <!--fixme: revisit when ngClass works with exit animation-->\n  <div\n    [@fadeDown]=\"skipAnimation\"\n    (@fadeDown.done)=\"fadeDone($event)\"\n    class=\"modal-dialog\"\n    [class.modal-sm]=\"size == 'sm'\"\n    [class.modal-lg]=\"size == 'lg'\"\n    [class.modal-xl]=\"size == 'xl'\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-hidden]=\"!_open\"\n    [attr.aria-labelledby]=\"labelledBy\"\n  >\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n    <div class=\"modal-content-wrapper\">\n      <!-- only used in wizards -->\n      <ng-content select=\".modal-nav\"></ng-content>\n\n      <div class=\"modal-content\">\n        <div class=\"modal-header--accessible\">\n          <div class=\"modal-title-wrapper\" id=\"{{modalId}}\" clrFocusOnViewInit>\n            <ng-content select=\".modal-title\"></ng-content>\n          </div>\n          <button\n            type=\"button\"\n            [attr.aria-label]=\"closeButtonAriaLabel || commonStrings.keys.close\"\n            class=\"close\"\n            *ngIf=\"closable\"\n            (click)=\"close()\"\n          >\n            <cds-icon shape=\"window-close\"></cds-icon>\n          </button>\n        </div>\n        <div class=\"modal-body-wrapper\">\n          <ng-content select=\".modal-body\"></ng-content>\n        </div>\n        <ng-content select=\".modal-footer\"></ng-content>\n      </div>\n    </div>\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n  </div>\n\n  <div [@fade] class=\"modal-backdrop\" aria-hidden=\"true\" (click)=\"staticBackdrop || close()\"></div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: ScrollingService }, { type: ClrCommonStringsService }]; }, propDecorators: { focusTrap: [{
                 type: ViewChild,
                 args: [FocusTrapDirective]
             }], _open: [{
@@ -23816,6 +23722,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], closable: [{
                 type: Input,
                 args: ['clrModalClosable']
+            }], closeButtonAriaLabel: [{
+                type: Input,
+                args: ['clrModalCloseButtonAriaLabel']
             }], size: [{
                 type: Input,
                 args: ['clrModalSize']
@@ -23969,20 +23878,20 @@ const POSITIONS$1 = [
     'left-top',
 ];
 class ClrSignpostContent extends AbstractPopover {
-    constructor(injector, parentHost, commonStrings, signpostContentId, signpostIdService, signpostFocusManager, platformId, document) {
+    constructor(injector, parentHost, commonStrings, signpostIdService, signpostFocusManager, platformId, document) {
         super(injector, parentHost);
         this.commonStrings = commonStrings;
-        this.signpostContentId = signpostContentId;
         this.signpostIdService = signpostIdService;
         this.signpostFocusManager = signpostFocusManager;
         this.platformId = platformId;
+        this.signpostContentId = uniqueIdFactory();
         if (!parentHost) {
             throw new Error('clr-signpost-content should only be used inside of a clr-signpost');
         }
         // Defaults
         this.position = 'right-middle';
         this.closeOnOutsideClick = true;
-        this.signpostIdService.setId(signpostContentId);
+        this.signpostIdService.setId(this.signpostContentId);
         this.document = document;
     }
     /**********
@@ -24050,8 +23959,8 @@ class ClrSignpostContent extends AbstractPopover {
         }
     }
 }
-ClrSignpostContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrSignpostContent, deps: [{ token: i0.Injector }, { token: POPOVER_HOST_ANCHOR, optional: true }, { token: ClrCommonStringsService }, { token: UNIQUE_ID }, { token: SignpostIdService }, { token: SignpostFocusManager }, { token: PLATFORM_ID }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-ClrSignpostContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrSignpostContent, selector: "clr-signpost-content", inputs: { position: ["clrPosition", "position"] }, host: { properties: { "class.signpost-content": "true", "id": "signpostContentId" } }, providers: [UNIQUE_ID_PROVIDER], usesInheritance: true, ngImport: i0, template: `
+ClrSignpostContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrSignpostContent, deps: [{ token: i0.Injector }, { token: POPOVER_HOST_ANCHOR, optional: true }, { token: ClrCommonStringsService }, { token: SignpostIdService }, { token: SignpostFocusManager }, { token: PLATFORM_ID }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+ClrSignpostContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrSignpostContent, selector: "clr-signpost-content", inputs: { position: ["clrPosition", "position"] }, host: { properties: { "class.signpost-content": "true", "id": "signpostContentId" } }, usesInheritance: true, ngImport: i0, template: `
     <div class="signpost-wrap">
       <div class="popover-pointer"></div>
       <div class="signpost-content-header">
@@ -24094,7 +24003,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
     </div>
   `,
                     host: { '[class.signpost-content]': 'true', '[id]': 'signpostContentId' },
-                    providers: [UNIQUE_ID_PROVIDER],
                 }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: i0.ElementRef, decorators: [{
@@ -24102,10 +24010,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     }, {
                         type: Inject,
                         args: [POPOVER_HOST_ANCHOR]
-                    }] }, { type: ClrCommonStringsService }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
-                    }] }, { type: SignpostIdService }, { type: SignpostFocusManager }, { type: undefined, decorators: [{
+                    }] }, { type: ClrCommonStringsService }, { type: SignpostIdService }, { type: SignpostFocusManager }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [PLATFORM_ID]
                     }] }, { type: undefined, decorators: [{
@@ -24170,14 +24075,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class ClrTooltip {
 }
 ClrTooltip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrTooltip.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrTooltip, selector: "clr-tooltip", host: { properties: { "class.tooltip": "true" } }, providers: [
-        ClrPopoverToggleService,
-        { provide: POPOVER_HOST_ANCHOR, useExisting: ElementRef },
-        // TODO: consider centralizing the unique id string on a service that provides ariaAttributes that need it
-        // AriaService in layout/tabs/providers might be a good starting point.
-        UNIQUE_ID_PROVIDER,
-        TooltipIdService,
-    ], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+ClrTooltip.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrTooltip, selector: "clr-tooltip", host: { properties: { "class.tooltip": "true" } }, providers: [ClrPopoverToggleService, { provide: POPOVER_HOST_ANCHOR, useExisting: ElementRef }, TooltipIdService], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrTooltip, decorators: [{
             type: Component,
             args: [{
@@ -24186,14 +24084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     host: {
                         '[class.tooltip]': 'true',
                     },
-                    providers: [
-                        ClrPopoverToggleService,
-                        { provide: POPOVER_HOST_ANCHOR, useExisting: ElementRef },
-                        // TODO: consider centralizing the unique id string on a service that provides ariaAttributes that need it
-                        // AriaService in layout/tabs/providers might be a good starting point.
-                        UNIQUE_ID_PROVIDER,
-                        TooltipIdService,
-                    ],
+                    providers: [ClrPopoverToggleService, { provide: POPOVER_HOST_ANCHOR, useExisting: ElementRef }, TooltipIdService],
                 }]
         }] });
 
@@ -24216,9 +24107,8 @@ const SIZES = ['xs', 'sm', 'md', 'lg'];
 const defaultPosition = 'right';
 const defaultSize = 'sm';
 class ClrTooltipContent extends AbstractPopover {
-    constructor(injector, parentHost, uniqueId, tooltipIdService) {
+    constructor(injector, parentHost, tooltipIdService) {
         super(injector, parentHost);
-        this.uniqueId = uniqueId;
         this.tooltipIdService = tooltipIdService;
         this._position = defaultPosition;
         this._size = defaultSize;
@@ -24226,7 +24116,7 @@ class ClrTooltipContent extends AbstractPopover {
             throw new Error('clr-tooltip-content should only be used inside of a clr-tooltip');
         }
         // Set the default id in case consumer does not supply a custom id.
-        this.id = uniqueId;
+        this.id = uniqueIdFactory();
     }
     get id() {
         return this._id;
@@ -24288,7 +24178,7 @@ class ClrTooltipContent extends AbstractPopover {
         this.renderer.addClass(this.el.nativeElement, newClass);
     }
 }
-ClrTooltipContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrTooltipContent, deps: [{ token: i0.Injector }, { token: POPOVER_HOST_ANCHOR, optional: true }, { token: UNIQUE_ID }, { token: TooltipIdService }], target: i0.ɵɵFactoryTarget.Component });
+ClrTooltipContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrTooltipContent, deps: [{ token: i0.Injector }, { token: POPOVER_HOST_ANCHOR, optional: true }, { token: TooltipIdService }], target: i0.ɵɵFactoryTarget.Component });
 ClrTooltipContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrTooltipContent, selector: "clr-tooltip-content", inputs: { id: "id", position: ["clrPosition", "position"], size: ["clrSize", "size"] }, host: { properties: { "class.tooltip-content": "true", "style.opacity": "1", "attr.role": "\"tooltip\"", "id": "id" } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrTooltipContent, decorators: [{
             type: Component,
@@ -24308,9 +24198,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     }, {
                         type: Inject,
                         args: [POPOVER_HOST_ANCHOR]
-                    }] }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
                     }] }, { type: TooltipIdService }];
     }, propDecorators: { id: [{
                 type: Input
@@ -26911,14 +26798,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrWizard {
-    constructor(platformId, navService, pageCollection, buttonService, headerActionService, elementRef, differs, wizardId) {
+    constructor(platformId, navService, pageCollection, buttonService, headerActionService, elementRef, differs) {
         this.platformId = platformId;
         this.navService = navService;
         this.pageCollection = pageCollection;
         this.buttonService = buttonService;
         this.headerActionService = headerActionService;
         this.elementRef = elementRef;
-        this.wizardId = wizardId;
         /**
          * Set the modal size of the wizard. Set using `[clrWizardSize]` input.
          */
@@ -26978,6 +26864,7 @@ class ClrWizard {
          * Listen via `(clrWizardOnPrevious)` event.
          */
         this.onMovePrevious = new EventEmitter(false);
+        this.wizardId = uniqueIdFactory();
         this.subscriptions = [];
         this.subscriptions.push(this.listenForNextPageChanges(), this.listenForPreviousPageChanges(), this.listenForCancelChanges(), this.listenForFinishedChanges(), this.listenForPageChanges());
         this.differ = differs.find([]).create(null);
@@ -27299,23 +27186,11 @@ class ClrWizard {
         this.wizardFinished.emit();
     }
 }
-ClrWizard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrWizard, deps: [{ token: PLATFORM_ID }, { token: WizardNavigationService }, { token: PageCollectionService }, { token: ButtonHubService }, { token: HeaderActionService }, { token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: UNIQUE_ID }], target: i0.ɵɵFactoryTarget.Component });
-ClrWizard.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrWizard, selector: "clr-wizard", inputs: { size: ["clrWizardSize", "size"], closable: ["clrWizardClosable", "closable"], forceForward: ["clrWizardForceForwardNavigation", "forceForward"], clrWizardOpen: "clrWizardOpen", stopNext: ["clrWizardPreventDefaultNext", "stopNext"], stopCancel: ["clrWizardPreventDefaultCancel", "stopCancel"], stopNavigation: ["clrWizardPreventNavigation", "stopNavigation"], disableStepnav: ["clrWizardDisableStepnav", "disableStepnav"], _stopModalAnimations: ["clrWizardPreventModalAnimation", "_stopModalAnimations"] }, outputs: { _openChanged: "clrWizardOpenChange", onCancel: "clrWizardOnCancel", wizardFinished: "clrWizardOnFinish", onReset: "clrWizardOnReset", currentPageChanged: "clrWizardCurrentPageChanged", onMoveNext: "clrWizardOnNext", onMovePrevious: "clrWizardOnPrevious" }, host: { properties: { "class.clr-wizard": "true", "class.wizard-md": "size == 'md'", "class.wizard-lg": "size == 'lg'", "class.wizard-xl": "size == 'xl'", "class.lastPage": "navService.currentPageIsLast" } }, providers: [
-        WizardNavigationService,
-        PageCollectionService,
-        ButtonHubService,
-        HeaderActionService,
-        UNIQUE_ID_PROVIDER,
-    ], queries: [{ propertyName: "pages", predicate: ClrWizardPage, descendants: true }, { propertyName: "headerActions", predicate: ClrWizardHeaderAction }], viewQueries: [{ propertyName: "wizardTitle", first: true, predicate: ["wizardTitle"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<clr-modal\n  [clrModalOpen]=\"_open\"\n  [clrModalSize]=\"size\"\n  [clrModalClosable]=\"closable\"\n  [clrModalStaticBackdrop]=\"true\"\n  [clrModalSkipAnimation]=\"stopModalAnimations\"\n  [clrModalOverrideScrollService]=\"isStatic\"\n  [clrModalPreventClose]=\"true\"\n  (clrModalAlternateClose)=\"modalCancel()\"\n  [clrModalLabelledById]=\"wizardId\"\n>\n  <nav class=\"modal-nav clr-wizard-stepnav-wrapper\">\n    <h1 class=\"clr-wizard-title\" id=\"{{wizardId}}\"><ng-content select=\"clr-wizard-title\"></ng-content></h1>\n    <clr-wizard-stepnav></clr-wizard-stepnav>\n  </nav>\n\n  <h2 class=\"modal-title\">\n    <span tabindex=\"-1\" #wizardTitle class=\"modal-title-text\">\n      <ng-template [ngTemplateOutlet]=\"navService.currentPageTitle\"></ng-template>\n    </span>\n\n    <div class=\"modal-header-actions-wrapper\" *ngIf=\"headerActionService.displayHeaderActionsWrapper\">\n      <div *ngIf=\"headerActionService.showWizardHeaderActions\">\n        <ng-content select=\"clr-wizard-header-action\"></ng-content>\n      </div>\n      <div *ngIf=\"headerActionService.currentPageHasHeaderActions\">\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.headerActions\"></ng-template>\n      </div>\n    </div>\n  </h2>\n\n  <div class=\"modal-body\">\n    <main clr-wizard-pages-wrapper class=\"clr-wizard-content\">\n      <ng-content></ng-content>\n    </main>\n  </div>\n  <div class=\"modal-footer clr-wizard-footer\">\n    <div class=\"clr-wizard-footer-buttons\">\n      <div\n        *ngIf=\"navService.currentPage && !navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-content select=\"clr-wizard-button\"></ng-content>\n      </div>\n      <div\n        *ngIf=\"navService.currentPage && navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.buttons\"></ng-template>\n      </div>\n    </div>\n  </div>\n</clr-modal>\n", components: [{ type: ClrModal, selector: "clr-modal", inputs: ["clrModalOpen", "clrModalClosable", "clrModalSize", "clrModalStaticBackdrop", "clrModalSkipAnimation", "clrModalOverrideScrollService", "clrModalPreventClose", "clrModalLabelledById"], outputs: ["clrModalOpenChange", "clrModalAlternateClose"] }, { type: ClrWizardStepnav, selector: "clr-wizard-stepnav" }], directives: [{ type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrModalBody, selector: ".modal-body" }] });
+ClrWizard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrWizard, deps: [{ token: PLATFORM_ID }, { token: WizardNavigationService }, { token: PageCollectionService }, { token: ButtonHubService }, { token: HeaderActionService }, { token: i0.ElementRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
+ClrWizard.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrWizard, selector: "clr-wizard", inputs: { size: ["clrWizardSize", "size"], closable: ["clrWizardClosable", "closable"], forceForward: ["clrWizardForceForwardNavigation", "forceForward"], clrWizardOpen: "clrWizardOpen", stopNext: ["clrWizardPreventDefaultNext", "stopNext"], stopCancel: ["clrWizardPreventDefaultCancel", "stopCancel"], stopNavigation: ["clrWizardPreventNavigation", "stopNavigation"], disableStepnav: ["clrWizardDisableStepnav", "disableStepnav"], _stopModalAnimations: ["clrWizardPreventModalAnimation", "_stopModalAnimations"] }, outputs: { _openChanged: "clrWizardOpenChange", onCancel: "clrWizardOnCancel", wizardFinished: "clrWizardOnFinish", onReset: "clrWizardOnReset", currentPageChanged: "clrWizardCurrentPageChanged", onMoveNext: "clrWizardOnNext", onMovePrevious: "clrWizardOnPrevious" }, host: { properties: { "class.clr-wizard": "true", "class.wizard-md": "size == 'md'", "class.wizard-lg": "size == 'lg'", "class.wizard-xl": "size == 'xl'", "class.lastPage": "navService.currentPageIsLast" } }, providers: [WizardNavigationService, PageCollectionService, ButtonHubService, HeaderActionService], queries: [{ propertyName: "pages", predicate: ClrWizardPage, descendants: true }, { propertyName: "headerActions", predicate: ClrWizardHeaderAction }], viewQueries: [{ propertyName: "wizardTitle", first: true, predicate: ["wizardTitle"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<clr-modal\n  [clrModalOpen]=\"_open\"\n  [clrModalSize]=\"size\"\n  [clrModalClosable]=\"closable\"\n  [clrModalStaticBackdrop]=\"true\"\n  [clrModalSkipAnimation]=\"stopModalAnimations\"\n  [clrModalOverrideScrollService]=\"isStatic\"\n  [clrModalPreventClose]=\"true\"\n  (clrModalAlternateClose)=\"modalCancel()\"\n  [clrModalLabelledById]=\"wizardId\"\n>\n  <nav class=\"modal-nav clr-wizard-stepnav-wrapper\">\n    <h1 class=\"clr-wizard-title\" id=\"{{wizardId}}\"><ng-content select=\"clr-wizard-title\"></ng-content></h1>\n    <clr-wizard-stepnav></clr-wizard-stepnav>\n  </nav>\n\n  <h2 class=\"modal-title\">\n    <span tabindex=\"-1\" #wizardTitle class=\"modal-title-text\">\n      <ng-template [ngTemplateOutlet]=\"navService.currentPageTitle\"></ng-template>\n    </span>\n\n    <div class=\"modal-header-actions-wrapper\" *ngIf=\"headerActionService.displayHeaderActionsWrapper\">\n      <div *ngIf=\"headerActionService.showWizardHeaderActions\">\n        <ng-content select=\"clr-wizard-header-action\"></ng-content>\n      </div>\n      <div *ngIf=\"headerActionService.currentPageHasHeaderActions\">\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.headerActions\"></ng-template>\n      </div>\n    </div>\n  </h2>\n\n  <div class=\"modal-body\">\n    <main clr-wizard-pages-wrapper class=\"clr-wizard-content\">\n      <ng-content></ng-content>\n    </main>\n  </div>\n  <div class=\"modal-footer clr-wizard-footer\">\n    <div class=\"clr-wizard-footer-buttons\">\n      <div\n        *ngIf=\"navService.currentPage && !navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-content select=\"clr-wizard-button\"></ng-content>\n      </div>\n      <div\n        *ngIf=\"navService.currentPage && navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.buttons\"></ng-template>\n      </div>\n    </div>\n  </div>\n</clr-modal>\n", components: [{ type: ClrModal, selector: "clr-modal", inputs: ["clrModalOpen", "clrModalClosable", "clrModalCloseButtonAriaLabel", "clrModalSize", "clrModalStaticBackdrop", "clrModalSkipAnimation", "clrModalOverrideScrollService", "clrModalPreventClose", "clrModalLabelledById"], outputs: ["clrModalOpenChange", "clrModalAlternateClose"] }, { type: ClrWizardStepnav, selector: "clr-wizard-stepnav" }], directives: [{ type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrModalBody, selector: ".modal-body" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrWizard, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-wizard', providers: [
-                        WizardNavigationService,
-                        PageCollectionService,
-                        ButtonHubService,
-                        HeaderActionService,
-                        UNIQUE_ID_PROVIDER,
-                    ], host: {
+            args: [{ selector: 'clr-wizard', providers: [WizardNavigationService, PageCollectionService, ButtonHubService, HeaderActionService], host: {
                         '[class.clr-wizard]': 'true',
                         '[class.wizard-md]': "size == 'md'",
                         '[class.wizard-lg]': "size == 'lg'",
@@ -27326,10 +27201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         return [{ type: undefined, decorators: [{
                         type: Inject,
                         args: [PLATFORM_ID]
-                    }] }, { type: WizardNavigationService }, { type: PageCollectionService }, { type: ButtonHubService }, { type: HeaderActionService }, { type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [UNIQUE_ID]
-                    }] }];
+                    }] }, { type: WizardNavigationService }, { type: PageCollectionService }, { type: ButtonHubService }, { type: HeaderActionService }, { type: i0.ElementRef }, { type: i0.IterableDiffers }];
     }, propDecorators: { size: [{
                 type: Input,
                 args: ['clrWizardSize']
@@ -27985,5 +27857,5 @@ const CLR_MENU_POSITIONS = [
  * Generated bundle index. Do not edit.
  */
 
-export { CLR_ALERT_DIRECTIVES, CLR_BUTTON_GROUP_DIRECTIVES, CLR_DATAGRID_DIRECTIVES, CLR_DATEPICKER_DIRECTIVES, CLR_DRAG_AND_DROP_DIRECTIVES, CLR_DROPDOWN_DIRECTIVES, CLR_ICON_DIRECTIVES, CLR_LAYOUT_DIRECTIVES, CLR_LOADING_BUTTON_DIRECTIVES, CLR_LOADING_DIRECTIVES, CLR_MENU_POSITIONS, CLR_MODAL_DIRECTIVES, CLR_NAVIGATION_DIRECTIVES, CLR_PROGRESS_BAR_DIRECTIVES, CLR_SIGNPOST_DIRECTIVES, CLR_SPINNER_DIRECTIVES, CLR_STACK_VIEW_DIRECTIVES, CLR_TABS_DIRECTIVES, CLR_TOOLTIP_DIRECTIVES, CLR_TREE_VIEW_DIRECTIVES, CLR_VERTICAL_NAV_DIRECTIVES, CLR_WIZARD_DIRECTIVES, CONDITIONAL_DIRECTIVES, CUSTOM_BUTTON_TYPES, CdsIconCustomTag, ClarityModule, ClrAbstractContainer, ClrAccordion, ClrAccordionContent, ClrAccordionDescription, ClrAccordionModule, ClrAccordionPanel, ClrAccordionTitle, ClrAlert, ClrAlertItem, ClrAlertModule, ClrAlertText, ClrAlerts, ClrAlertsPager, ClrAlignment, ClrAriaCurrentLink, ClrAriaLivePoliteness, ClrAriaLiveService, ClrAxis, ClrButton, ClrButtonGroup, ClrButtonGroupModule, ClrButtonModule, ClrCalendar, ClrCheckbox, ClrCheckboxContainer, ClrCheckboxModule, ClrCheckboxWrapper, ClrCombobox, ClrComboboxContainer, ClrComboboxModule, ClrCommonFormsModule, ClrCommonStringsService, ClrConditionalModule, ClrControl, ClrControlContainer, ClrControlError, ClrControlHelper, ClrControlSuccess, ClrDataModule, ClrDatagrid, ClrDatagridActionBar, ClrDatagridActionOverflow, ClrDatagridCell, ClrDatagridColumn, ClrDatagridColumnSeparator, ClrDatagridColumnToggle, ClrDatagridColumnToggleButton, ClrDatagridColumnToggleTitle, ClrDatagridDetail, ClrDatagridDetailBody, ClrDatagridDetailHeader, ClrDatagridFilter, ClrDatagridFooter, ClrDatagridHideableColumn, ClrDatagridItems, ClrDatagridItemsTrackBy, ClrDatagridModule, ClrDatagridPageSize, ClrDatagridPagination, ClrDatagridPlaceholder, ClrDatagridRow, ClrDatagridRowDetail, ClrDatagridSortOrder, ClrDatalist, ClrDatalistContainer, ClrDatalistInput, ClrDatalistModule, ClrDateContainer, ClrDateInput, ClrDatepickerModule, ClrDatepickerViewManager, ClrDay, ClrDaypicker, ClrDestroyService, ClrDragAndDropModule, ClrDragEvent, ClrDragHandle, ClrDraggable, ClrDraggableGhost, ClrDropdown, ClrDropdownItem, ClrDropdownMenu, ClrDropdownModule, ClrDropdownTrigger, ClrDroppable, ClrEmphasisModule, ClrExpandableAnimation, ClrFocusOnViewInit, ClrFocusOnViewInitModule, ClrForTypeAhead, ClrForTypeAheadModule, ClrForm, ClrFormLayout, ClrFormsModule, ClrHeader, ClrIconCustomTag, ClrIconModule, ClrIfActive, ClrIfDetail, ClrIfDragged, ClrIfError, ClrIfExpanded, ClrIfOpen, ClrIfSuccess, ClrInput, ClrInputContainer, ClrInputModule, ClrLabel, ClrLayout, ClrLayoutModule, ClrLoading, ClrLoadingButton, ClrLoadingButtonModule, ClrLoadingModule, ClrLoadingState, ClrMainContainer, ClrMainContainerModule, ClrModal, ClrModalBody, ClrModalModule, ClrMonthpicker, ClrNavLevel, ClrNavigationModule, ClrOption, ClrOptionItems, ClrOptionSelected, ClrOptions, ClrPassword, ClrPasswordContainer, ClrPasswordModule, ClrPopoverAnchor, ClrPopoverContent, ClrPopoverEventsService, ClrPopoverModule, ClrPopoverPositionService, ClrPopoverToggleService, ClrProgressBar, ClrProgressBarModule, ClrRadio, ClrRadioContainer, ClrRadioModule, ClrRadioWrapper, ClrRange, ClrRangeContainer, ClrRangeModule, ClrRecursiveForOf, ClrSelect, ClrSelectContainer, ClrSelectModule, ClrSelectedState, ClrSide, ClrSignpost, ClrSignpostContent, ClrSignpostModule, ClrSignpostTrigger, ClrSpinner, ClrSpinnerModule, ClrStackBlock, ClrStackContentInput, ClrStackHeader, ClrStackInput, ClrStackSelect, ClrStackView, ClrStackViewCustomTags, ClrStackViewLabel, ClrStackViewModule, ClrStepButton, ClrStepButtonType, ClrStepper, ClrStepperModule, ClrStepperPanel, ClrTab, ClrTabContent, ClrTabLink, ClrTabOverflowContent, ClrTabs, ClrTabsModule, ClrTextarea, ClrTextareaContainer, ClrTextareaModule, ClrTimeline, ClrTimelineLayout, ClrTimelineModule, ClrTimelineStep, ClrTimelineStepDescription, ClrTimelineStepHeader, ClrTimelineStepState, ClrTimelineStepTitle, ClrTooltip, ClrTooltipContent, ClrTooltipModule, ClrTooltipTrigger, ClrTree, ClrTreeNode, ClrTreeNodeLink, ClrTreeViewModule, ClrVerticalNav, ClrVerticalNavGroup, ClrVerticalNavGroupChildren, ClrVerticalNavIcon, ClrVerticalNavLink, ClrVerticalNavModule, ClrWizard, ClrWizardButton, ClrWizardCustomTags, ClrWizardHeaderAction, ClrWizardModule, ClrWizardPage, ClrWizardPageButtons, ClrWizardPageHeaderActions, ClrWizardPageNavTitle, ClrWizardPageTitle, ClrWizardStepnav, ClrWizardStepnavItem, ClrYearpicker, DEFAULT_BUTTON_TYPES, DatagridNumericFilter, DatagridPropertyComparator, DatagridPropertyNumericFilter, DatagridPropertyStringFilter, DatagridStringFilter, EXPANDABLE_ANIMATION_DIRECTIVES, FOCUS_ON_VIEW_INIT, FOCUS_ON_VIEW_INIT_DIRECTIVES, IS_TOGGLE, IS_TOGGLE_PROVIDER, LoadingListener, MainContainerWillyWonka, NavDetectionOompaLoompa, TOGGLE_SERVICE, TOGGLE_SERVICE_PROVIDER, ToggleServiceFactory, WrappedFormControl, collapse, commonStringsDefault, fade, fadeSlide, isToggleFactory, slide, AccordionOompaLoompa as ÇlrAccordionOompaLoompa, AccordionWillyWonka as ÇlrAccordionWillyWonka, ActionableOompaLoompa as ÇlrActionableOompaLoompa, ActiveOompaLoompa as ÇlrActiveOompaLoompa, ClrFocusTrapModule as ÇlrClrFocusTrapModule, ClrPopoverCloseButton as ÇlrClrPopoverCloseButton, ClrPopoverModuleNext as ÇlrClrPopoverModuleNext, ClrPopoverOpenCloseButton as ÇlrClrPopoverOpenCloseButton, DatagridCellRenderer as ÇlrDatagridCellRenderer, DatagridDetailRegisterer as ÇlrDatagridDetailRegisterer, DatagridHeaderRenderer as ÇlrDatagridHeaderRenderer, DatagridMainRenderer as ÇlrDatagridMainRenderer, DatagridRowRenderer as ÇlrDatagridRowRenderer, DatagridWillyWonka as ÇlrDatagridWillyWonka, ExpandableOompaLoompa as ÇlrExpandableOompaLoompa, FocusTrapDirective as ÇlrFocusTrapDirective, FocusTrapTracker as ÇlrFocusTrapTracker, StepperOompaLoompa as ÇlrStepperOompaLoompa, StepperWillyWonka as ÇlrStepperWillyWonka, TabsWillyWonka as ÇlrTabsWillyWonka, WrappedCell as ÇlrWrappedCell, WrappedColumn as ÇlrWrappedColumn, WrappedRow as ÇlrWrappedRow };
+export { CLR_ALERT_DIRECTIVES, CLR_BUTTON_GROUP_DIRECTIVES, CLR_DATAGRID_DIRECTIVES, CLR_DATEPICKER_DIRECTIVES, CLR_DRAG_AND_DROP_DIRECTIVES, CLR_DROPDOWN_DIRECTIVES, CLR_ICON_DIRECTIVES, CLR_LAYOUT_DIRECTIVES, CLR_LOADING_BUTTON_DIRECTIVES, CLR_LOADING_DIRECTIVES, CLR_MENU_POSITIONS, CLR_MODAL_DIRECTIVES, CLR_NAVIGATION_DIRECTIVES, CLR_PROGRESS_BAR_DIRECTIVES, CLR_SIGNPOST_DIRECTIVES, CLR_SPINNER_DIRECTIVES, CLR_STACK_VIEW_DIRECTIVES, CLR_TABS_DIRECTIVES, CLR_TOOLTIP_DIRECTIVES, CLR_TREE_VIEW_DIRECTIVES, CLR_VERTICAL_NAV_DIRECTIVES, CLR_WIZARD_DIRECTIVES, CONDITIONAL_DIRECTIVES, CUSTOM_BUTTON_TYPES, CdsIconCustomTag, ClarityModule, ClrAbstractContainer, ClrAccordion, ClrAccordionContent, ClrAccordionDescription, ClrAccordionModule, ClrAccordionPanel, ClrAccordionTitle, ClrAlert, ClrAlertItem, ClrAlertModule, ClrAlertText, ClrAlerts, ClrAlertsPager, ClrAlignment, ClrAriaCurrentLink, ClrAriaLivePoliteness, ClrAriaLiveService, ClrAxis, ClrButton, ClrButtonGroup, ClrButtonGroupModule, ClrButtonModule, ClrCalendar, ClrCheckbox, ClrCheckboxContainer, ClrCheckboxModule, ClrCheckboxWrapper, ClrCombobox, ClrComboboxContainer, ClrComboboxModule, ClrCommonFormsModule, ClrCommonStringsService, ClrConditionalModule, ClrControl, ClrControlContainer, ClrControlError, ClrControlHelper, ClrControlSuccess, ClrDataModule, ClrDatagrid, ClrDatagridActionBar, ClrDatagridActionOverflow, ClrDatagridCell, ClrDatagridColumn, ClrDatagridColumnSeparator, ClrDatagridColumnToggle, ClrDatagridColumnToggleButton, ClrDatagridColumnToggleTitle, ClrDatagridDetail, ClrDatagridDetailBody, ClrDatagridDetailHeader, ClrDatagridFilter, ClrDatagridFooter, ClrDatagridHideableColumn, ClrDatagridItems, ClrDatagridItemsTrackBy, ClrDatagridModule, ClrDatagridPageSize, ClrDatagridPagination, ClrDatagridPlaceholder, ClrDatagridRow, ClrDatagridRowDetail, ClrDatagridSortOrder, ClrDatalist, ClrDatalistContainer, ClrDatalistInput, ClrDatalistModule, ClrDateContainer, ClrDateInput, ClrDateInputValidator, ClrDatepickerModule, ClrDatepickerViewManager, ClrDay, ClrDaypicker, ClrDestroyService, ClrDragAndDropModule, ClrDragEvent, ClrDragHandle, ClrDraggable, ClrDraggableGhost, ClrDropdown, ClrDropdownItem, ClrDropdownMenu, ClrDropdownModule, ClrDropdownTrigger, ClrDroppable, ClrEmphasisModule, ClrExpandableAnimation, ClrFocusOnViewInit, ClrFocusOnViewInitModule, ClrForTypeAhead, ClrForTypeAheadModule, ClrForm, ClrFormLayout, ClrFormsModule, ClrHeader, ClrIconCustomTag, ClrIconModule, ClrIfActive, ClrIfDetail, ClrIfDragged, ClrIfError, ClrIfExpanded, ClrIfOpen, ClrIfSuccess, ClrInput, ClrInputContainer, ClrInputModule, ClrLabel, ClrLayout, ClrLayoutModule, ClrLoading, ClrLoadingButton, ClrLoadingButtonModule, ClrLoadingModule, ClrLoadingState, ClrMainContainer, ClrMainContainerModule, ClrModal, ClrModalBody, ClrModalModule, ClrMonthpicker, ClrNavLevel, ClrNavigationModule, ClrOption, ClrOptionItems, ClrOptionSelected, ClrOptions, ClrPassword, ClrPasswordContainer, ClrPasswordModule, ClrPopoverAnchor, ClrPopoverContent, ClrPopoverEventsService, ClrPopoverModule, ClrPopoverPositionService, ClrPopoverToggleService, ClrProgressBar, ClrProgressBarModule, ClrRadio, ClrRadioContainer, ClrRadioModule, ClrRadioWrapper, ClrRange, ClrRangeContainer, ClrRangeModule, ClrRecursiveForOf, ClrSelect, ClrSelectContainer, ClrSelectModule, ClrSelectedState, ClrSide, ClrSignpost, ClrSignpostContent, ClrSignpostModule, ClrSignpostTrigger, ClrSpinner, ClrSpinnerModule, ClrStackBlock, ClrStackContentInput, ClrStackHeader, ClrStackInput, ClrStackSelect, ClrStackView, ClrStackViewCustomTags, ClrStackViewLabel, ClrStackViewModule, ClrStepButton, ClrStepButtonType, ClrStepper, ClrStepperModule, ClrStepperPanel, ClrTab, ClrTabContent, ClrTabLink, ClrTabOverflowContent, ClrTabs, ClrTabsModule, ClrTextarea, ClrTextareaContainer, ClrTextareaModule, ClrTimeline, ClrTimelineLayout, ClrTimelineModule, ClrTimelineStep, ClrTimelineStepDescription, ClrTimelineStepHeader, ClrTimelineStepState, ClrTimelineStepTitle, ClrTooltip, ClrTooltipContent, ClrTooltipModule, ClrTooltipTrigger, ClrTree, ClrTreeNode, ClrTreeNodeLink, ClrTreeViewModule, ClrVerticalNav, ClrVerticalNavGroup, ClrVerticalNavGroupChildren, ClrVerticalNavIcon, ClrVerticalNavLink, ClrVerticalNavModule, ClrWizard, ClrWizardButton, ClrWizardCustomTags, ClrWizardHeaderAction, ClrWizardModule, ClrWizardPage, ClrWizardPageButtons, ClrWizardPageHeaderActions, ClrWizardPageNavTitle, ClrWizardPageTitle, ClrWizardStepnav, ClrWizardStepnavItem, ClrYearpicker, DEFAULT_BUTTON_TYPES, DatagridNumericFilter, DatagridPropertyComparator, DatagridPropertyNumericFilter, DatagridPropertyStringFilter, DatagridStringFilter, EXPANDABLE_ANIMATION_DIRECTIVES, FOCUS_ON_VIEW_INIT, FOCUS_ON_VIEW_INIT_DIRECTIVES, IS_TOGGLE, IS_TOGGLE_PROVIDER, LoadingListener, MainContainerWillyWonka, NavDetectionOompaLoompa, TOGGLE_SERVICE, TOGGLE_SERVICE_PROVIDER, ToggleServiceFactory, WrappedFormControl, collapse, commonStringsDefault, fade, fadeSlide, isToggleFactory, slide, AccordionOompaLoompa as ÇlrAccordionOompaLoompa, AccordionWillyWonka as ÇlrAccordionWillyWonka, ActionableOompaLoompa as ÇlrActionableOompaLoompa, ActiveOompaLoompa as ÇlrActiveOompaLoompa, ClrFocusTrapModule as ÇlrClrFocusTrapModule, ClrPopoverCloseButton as ÇlrClrPopoverCloseButton, ClrPopoverModuleNext as ÇlrClrPopoverModuleNext, ClrPopoverOpenCloseButton as ÇlrClrPopoverOpenCloseButton, DatagridCellRenderer as ÇlrDatagridCellRenderer, DatagridDetailRegisterer as ÇlrDatagridDetailRegisterer, DatagridHeaderRenderer as ÇlrDatagridHeaderRenderer, DatagridMainRenderer as ÇlrDatagridMainRenderer, DatagridRowRenderer as ÇlrDatagridRowRenderer, DatagridWillyWonka as ÇlrDatagridWillyWonka, ExpandableOompaLoompa as ÇlrExpandableOompaLoompa, FocusTrapDirective as ÇlrFocusTrapDirective, FocusTrapTracker as ÇlrFocusTrapTracker, StepperOompaLoompa as ÇlrStepperOompaLoompa, StepperWillyWonka as ÇlrStepperWillyWonka, TabsWillyWonka as ÇlrTabsWillyWonka, WrappedCell as ÇlrWrappedCell, WrappedColumn as ÇlrWrappedColumn, WrappedRow as ÇlrWrappedRow };
 //# sourceMappingURL=clr-angular.mjs.map