@microsoft/windows-admin-center-sdk 4.123.0 → 4.232.0

package/angular/fesm2020/microsoft-windows-admin-center-sdk-angular.mjs

@@ -7,7 +7,7 @@ import { LogLevel } from '@microsoft/windows-admin-center-sdk/core/diagnostics/l
 import { Logging } from '@microsoft/windows-admin-center-sdk/core/diagnostics/logging';
 import { __decorate, __metadata, __param } from 'tslib';
 import { Debounce as Debounce$1 } from '@microsoft/windows-admin-center-sdk/core/base/decorators/debounce.decorators';
-import { Dom, ElementPosition } from '@microsoft/windows-admin-center-sdk/core/dom/dom';
+import { Dom } from '@microsoft/windows-admin-center-sdk/core/dom/dom';
 import { marked } from 'marked';
 import * as i1$1 from '@angular/common';
 import { Location, CommonModule, DatePipe } from '@angular/common';
@@ -20,6 +20,7 @@ import { ActiveConnection } from '@microsoft/windows-admin-center-sdk/core/secur
 import { CimConnection } from '@microsoft/windows-admin-center-sdk/core/data/cim-connection';
 import { BatchConnection } from '@microsoft/windows-admin-center-sdk/core/data/batch-connection';
 import { AuthorizationManager } from '@microsoft/windows-admin-center-sdk/core/security/authorization-manager';
+import * as i1$3 from '@microsoft/windows-admin-center-sdk/core/rpc/rpc';
 import { Rpc } from '@microsoft/windows-admin-center-sdk/core/rpc/rpc';
 import { GatewayConnection } from '@microsoft/windows-admin-center-sdk/core/data/gateway-connection';
 import { Http } from '@microsoft/windows-admin-center-sdk/core/data/http';
@@ -44,10 +45,12 @@ import { Globalization } from '@microsoft/windows-admin-center-sdk/core/data/glo
 import { KeyCode } from '@microsoft/windows-admin-center-sdk/core/data/accessibility-manager';
 import { Yield as Yield$1 } from '@microsoft/windows-admin-center-sdk/core/base/decorators/yield.decorator';
 import { TagManager } from '@microsoft/windows-admin-center-sdk/core/security/tag-manager';
+import * as i2 from '@microsoft/windows-admin-center-sdk/core/data/extension-broker/extension-broker';
 import { ExtensionBroker } from '@microsoft/windows-admin-center-sdk/core/data/extension-broker/extension-broker';
 import * as i1$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, ControlContainer, Validators, FormsModule, ReactiveFormsModule, FormGroup, FormControl, FormArray, FormBuilder } from '@angular/forms';
 import { Net } from '@microsoft/windows-admin-center-sdk/core/data/net';
+import { Debounce as Debounce$2 } from '@microsoft/windows-admin-center-sdk/core/index';
 import { DateTime } from '@microsoft/windows-admin-center-sdk/core/base/date/date-time';
 import { DateType } from '@microsoft/windows-admin-center-sdk/core/base/date/date-type';
 import { TimeUnit } from '@microsoft/windows-admin-center-sdk/core/base/date/time-unit';
@@ -83,6 +86,7 @@ import { ScheduleRebootManager } from '@microsoft/windows-admin-center-sdk/core/
 import { headerConstants } from '@microsoft/windows-admin-center-sdk/core/data/http-constants';
 import { RpcObservableExtensionDataClient } from '@microsoft/windows-admin-center-sdk/core/rpc/extension-data/rpc-observable-extension-data-client';
 import { SmeExtension } from '@microsoft/windows-admin-center-sdk/core/data/sme-extension';
+import { ExtensionClientListener } from '@microsoft/windows-admin-center-sdk/core/data/extension-broker/extension-listener';
 
 /**
  * Directive to provide notification or state changes for angulars @see RouterLink directive.
@@ -137,7 +141,7 @@ class SmeRouterLinkDirective {
         this.updateIsActive();
     }
     ngOnDestroy() {
-        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.subscriptions.forEach(sub => sub?.unsubscribe());
     }
     /**
      * Updates the isActive state and fires appropriate events if that state has changed.
@@ -3547,7 +3551,7 @@ class TooltipHostInstance {
     }], null, null); })();
 
 const _c0$1I = ["tooltipContainer"];
-const _c1$T = ["tooltipPointer"];
+const _c1$V = ["tooltipPointer"];
 function TooltipHostComponent_div_5_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵelementContainer(1, 10);
@@ -3918,7 +3922,7 @@ TooltipHostComponent.SCREEN_EDGE_MARGIN = 16;
 /** @nocollapse */ TooltipHostComponent.ɵfac = function TooltipHostComponent_Factory(t) { return new (t || TooltipHostComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.NgZone)); };
 /** @nocollapse */ TooltipHostComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TooltipHostComponent, selectors: [["sme-tooltip-host"]], viewQuery: function TooltipHostComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$1I, 5);
-        i0.ɵɵviewQuery(_c1$T, 5);
+        i0.ɵɵviewQuery(_c1$V, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tooltipContainer = _t.first);
@@ -5151,12 +5155,12 @@ class ExtensionRootModule {
         BackgroundExtensionRootComponent] }); })();
 
 const _c0$1G = ["*"];
-const _c1$S = function (a0, a1) { return { "sme-icon-chevronDown": a0, "sme-icon-chevronRight": a1 }; };
+const _c1$U = function (a0, a1) { return { "sme-icon-chevronDown": a0, "sme-icon-chevronRight": a1 }; };
 function AccordionPanelComponent_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 7);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c1$S, ctx_r1.opened, !ctx_r1.opened));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c1$U, ctx_r1.opened, !ctx_r1.opened));
 } }
 function AccordionPanelComponent_div_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 8);
@@ -5169,9 +5173,17 @@ function AccordionPanelComponent_div_8_Template(rf, ctx) { if (rf & 1) {
 const _c2$n = [[["sme-panel-control"]], "*"];
 const _c3$e = ["sme-panel-control", "*"];
 class PanelControlComponent {
+    constructor() {
+        /**
+         * Best effort to make sure the buttons, texts can be focused.
+         */
+        this.defaultFocusZone = true;
+    }
 }
 /** @nocollapse */ PanelControlComponent.ɵfac = function PanelControlComponent_Factory(t) { return new (t || PanelControlComponent)(); };
-/** @nocollapse */ PanelControlComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: PanelControlComponent, selectors: [["sme-panel-control"]], ngContentSelectors: _c0$1G, decls: 1, vars: 0, template: function PanelControlComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ PanelControlComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: PanelControlComponent, selectors: [["sme-panel-control"]], hostVars: 2, hostBindings: function PanelControlComponent_HostBindings(rf, ctx) { if (rf & 2) {
+        i0.ɵɵclassProp("sme-focus-zone", ctx.defaultFocusZone);
+    } }, ngContentSelectors: _c0$1G, decls: 1, vars: 0, template: function PanelControlComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵprojection(0);
     } }, encapsulation: 2 });
@@ -5181,9 +5193,21 @@ class PanelControlComponent {
                 selector: 'sme-panel-control',
                 template: '<ng-content></ng-content>'
             }]
-    }], null, null); })();
+    }], null, { defaultFocusZone: [{
+            type: HostBinding,
+            args: ['class.sme-focus-zone']
+        }] }); })();
 class AccordionPanelComponent {
     constructor() {
+        /**
+         * It indicates whether the panel is opened.
+         */
+        this.opened = true;
+        /**
+         * It indicates whether the panel is initially opened.
+         * This value will no longer be respected after the control fully loaded.
+         */
+        this.initialOpened = true;
         /**
          * It indicates whether the panel is expandable.
          */
@@ -5199,21 +5223,24 @@ class AccordionPanelComponent {
          */
         this.paddingInset = false;
         this.toggled = new EventEmitter();
-        this.opened = true;
+    }
+    ngOnInit() {
+        this.opened = !!this.initialOpened;
         this.canClose = this.isExpandable;
     }
     /**
      * The on toggle function implementation.
      */
     onToggle() {
-        if (this.isExpandable) {
-            this.opened = !this.opened;
-            this.toggled.emit(this);
+        if (!this.isExpandable) {
+            return;
         }
+        this.opened = !this.opened;
+        this.toggled.emit(this);
     }
 }
 /** @nocollapse */ AccordionPanelComponent.ɵfac = function AccordionPanelComponent_Factory(t) { return new (t || AccordionPanelComponent)(); };
-/** @nocollapse */ AccordionPanelComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: AccordionPanelComponent, selectors: [["sme-accordion-panel"]], inputs: { header: "header", opened: "opened", isExpandable: "isExpandable", borderRadius: "borderRadius", paddingInset: "paddingInset" }, outputs: { toggled: "toggled" }, ngContentSelectors: _c3$e, decls: 9, vars: 14, consts: [[1, "sme-accordion-panel"], [1, "sme-arrange-stack-h", "sme-panel-header", "sme-layout-flex", "sme-position-flex-align-center"], [1, "sme-button", "sme-button-align-left", "sme-button-trigger", "sme-position-flex-auto", "sme-panel-expander", 3, "click"], ["accordionPanelButton", ""], ["class", "sme-position-flex-none sme-icon sme-position-stretch-v", 3, "ngClass", 4, "ngIf"], [1, "sme-arrange-ellipsis", "sme-position-stretch-v", 3, "title"], ["class", "sme-panel-body", 3, "sme-padding-inset-sm", 4, "ngIf"], [1, "sme-position-flex-none", "sme-icon", "sme-position-stretch-v", 3, "ngClass"], [1, "sme-panel-body"]], template: function AccordionPanelComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ AccordionPanelComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: AccordionPanelComponent, selectors: [["sme-accordion-panel"]], inputs: { header: "header", initialOpened: "initialOpened", isExpandable: "isExpandable", borderRadius: "borderRadius", paddingInset: "paddingInset" }, outputs: { toggled: "toggled" }, ngContentSelectors: _c3$e, decls: 9, vars: 16, consts: [[1, "sme-accordion-panel"], [1, "sme-arrange-stack-h", "sme-panel-header", "sme-layout-flex", "sme-position-flex-align-center"], ["tabindex", "0", 1, "sme-button", "sme-button-align-left", "sme-button-trigger", "sme-position-flex-auto", "sme-panel-expander", 3, "click"], ["accordionPanelButton", ""], ["class", "sme-position-flex-none sme-icon sme-position-stretch-v", 3, "ngClass", 4, "ngIf"], [1, "sme-arrange-ellipsis", "sme-position-stretch-v", 3, "title"], ["class", "sme-panel-body", 3, "sme-padding-inset-sm", 4, "ngIf"], [1, "sme-position-flex-none", "sme-icon", "sme-position-stretch-v", 3, "ngClass"], [1, "sme-panel-body"]], template: function AccordionPanelComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef(_c2$n);
         i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2, 3);
         i0.ɵɵlistener("click", function AccordionPanelComponent_Template_div_click_2_listener() { return ctx.onToggle(); });
@@ -5230,6 +5257,7 @@ class AccordionPanelComponent {
         i0.ɵɵclassProp("sme-panel-header-border-radius", ctx.borderRadius)("sme-panel-header-border-radius-opened", ctx.borderRadius && ctx.opened);
         i0.ɵɵadvance(1);
         i0.ɵɵclassProp("sme-focus-zone", ctx.canClose)("sme-panel-header-border-radius", ctx.borderRadius)("sme-panel-header-border-radius-opened", ctx.borderRadius && ctx.opened);
+        i0.ɵɵattribute("aria-expanded", !!ctx.opened)("aria-label", ctx.header);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx.canClose);
         i0.ɵɵadvance(1);
@@ -5241,10 +5269,10 @@ class AccordionPanelComponent {
     } }, dependencies: [i1$1.NgClass, i1$1.NgIf], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccordionPanelComponent, [{
         type: Component,
-        args: [{ selector: 'sme-accordion-panel', template: "<div class=\"sme-accordion-panel\">\r\n  <div class=\"sme-arrange-stack-h sme-panel-header sme-layout-flex sme-position-flex-align-center\" [class.sme-panel-header-border-radius]=\"borderRadius\"\r\n    [class.sme-panel-header-border-radius-opened]=\"borderRadius && opened\">\r\n    <div #accordionPanelButton [class.sme-focus-zone]=\"canClose\" [class.sme-panel-header-border-radius]=\"borderRadius\"\r\n      [class.sme-panel-header-border-radius-opened]=\"borderRadius && opened\"\r\n      class=\"sme-button sme-button-align-left sme-button-trigger sme-position-flex-auto sme-panel-expander\"\r\n      (click)=\"onToggle()\">\r\n      <span *ngIf=\"canClose\" class=\"sme-position-flex-none sme-icon sme-position-stretch-v\"\r\n        [ngClass]=\"{'sme-icon-chevronDown':opened, 'sme-icon-chevronRight': !opened}\"></span>\r\n      <span class=\"sme-arrange-ellipsis sme-position-stretch-v\" [title]=\"header\">{{ header }}</span>\r\n    </div>\r\n    <ng-content select=\"sme-panel-control\"></ng-content>\r\n  </div>\r\n  <div class=\"sme-panel-body\" *ngIf=\"opened\" [class.sme-padding-inset-sm]=\"paddingInset\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n" }]
-    }], function () { return []; }, { header: [{
+        args: [{ selector: 'sme-accordion-panel', template: "<div class=\"sme-accordion-panel\">\r\n  <div class=\"sme-arrange-stack-h sme-panel-header sme-layout-flex sme-position-flex-align-center\" [class.sme-panel-header-border-radius]=\"borderRadius\"\r\n    [class.sme-panel-header-border-radius-opened]=\"borderRadius && opened\">\r\n    <div #accordionPanelButton [class.sme-focus-zone]=\"canClose\" [class.sme-panel-header-border-radius]=\"borderRadius\"\r\n      [class.sme-panel-header-border-radius-opened]=\"borderRadius && opened\" [attr.aria-expanded]=\"!!opened\"\r\n      [attr.aria-label]=\"header\" tabindex=\"0\"\r\n      class=\"sme-button sme-button-align-left sme-button-trigger sme-position-flex-auto sme-panel-expander\"\r\n      (click)=\"onToggle()\">\r\n      <span *ngIf=\"canClose\" class=\"sme-position-flex-none sme-icon sme-position-stretch-v\"\r\n        [ngClass]=\"{'sme-icon-chevronDown':opened, 'sme-icon-chevronRight': !opened}\"></span>\r\n      <span class=\"sme-arrange-ellipsis sme-position-stretch-v\" [title]=\"header\">{{ header }}</span>\r\n    </div>\r\n    <ng-content select=\"sme-panel-control\"></ng-content>\r\n  </div>\r\n  <div class=\"sme-panel-body\" *ngIf=\"opened\" [class.sme-padding-inset-sm]=\"paddingInset\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n" }]
+    }], null, { header: [{
             type: Input
-        }], opened: [{
+        }], initialOpened: [{
             type: Input
         }], isExpandable: [{
             type: Input
@@ -5955,7 +5983,7 @@ __decorate([
     }], null, { closeNestedHelper: [] }); })();
 
 const _c0$1E = ["smeDropdownContent"];
-const _c1$R = ["smeDropdownToggle"];
+const _c1$T = ["smeDropdownToggle"];
 const _c2$m = [[["", 8, "sme-dropdown-toggle"]], [["", 8, "sme-dropdown-content"]]];
 const _c3$d = function (a0, a1, a2, a3) { return { "sme-layout-hidden": a0, "sme-layout-inline-block": a1, "sme-arrange-overflow-auto-x": a2, "sme-arrange-overflow-auto-y": a3 }; };
 const _c4$9 = [".sme-dropdown-toggle", ".sme-dropdown-content"];
@@ -6044,7 +6072,6 @@ class DropdownComponent {
     ngAfterViewInit() {
         // load the context menu code here so as to allow all child views to be completely initialized
         if (!this.isContextMenu) {
-            this.renderer.setAttribute(this.toggleElement.nativeElement, 'aria-haspopup', 'true');
             this.unsubscribeToggleClick = this.renderer.listen(this.toggleElement.nativeElement, 'click', (event) => this.onToggleClick(event));
         }
         else {
@@ -6112,7 +6139,6 @@ class DropdownComponent {
         if (this.isOpen) {
             // close if opened
             this.dropdownService.close(this);
-            this.renderer.setAttribute(this.toggleElement.nativeElement, 'aria-expanded', 'false');
             if (event) {
                 this.dropdownService.closeNested(this, event);
             }
@@ -6122,7 +6148,6 @@ class DropdownComponent {
         else {
             // open if closed
             this.dropdownService.open(this, calculateHeight, displayToSide).then(() => {
-                this.renderer.setAttribute(this.toggleElement.nativeElement, 'aria-expanded', 'true');
                 this.toggleElement.nativeElement.addEventListener('closeEvent', () => {
                     this.isOpen = false;
                 }, false);
@@ -6150,7 +6175,7 @@ class DropdownComponent {
 /** @nocollapse */ DropdownComponent.ɵfac = function DropdownComponent_Factory(t) { return new (t || DropdownComponent)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(DropdownService), i0.ɵɵdirectiveInject(SME_LAYOUT_PROVIDER, 8)); };
 /** @nocollapse */ DropdownComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DropdownComponent, selectors: [["sme-dropdown"]], viewQuery: function DropdownComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$1E, 5);
-        i0.ɵɵviewQuery(_c1$R, 7);
+        i0.ɵɵviewQuery(_c1$T, 7);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentElement = _t.first);
@@ -6250,7 +6275,6 @@ class ActionContainerComponent extends CoreBaseComponent {
         /**
          * Event emitter fired whenever an error occurs within a child ActionItem.
          */
-        // eslint-disable-next-line @angular-eslint/no-output-native
         this.error = new EventEmitter();
         /**
          * Event emitter fired whenever a child ActionItem is executed.
@@ -6335,7 +6359,7 @@ class ActionContainerComponent extends CoreBaseComponent {
      * Callback method run when ActionContainerComponent is destroyed.
      */
     ngOnDestroy() {
-        this.completedSubscription.unsubscribe();
+        this.completedSubscription?.unsubscribe();
     }
     /**
      * Callback method run immediately after Angular has completed initialization of all of ActionContainerComponent's content.
@@ -6681,7 +6705,7 @@ class ActionMenuComponent extends ActionContainerComponent {
             }] }, { type: i0.Injector }]; }, null); })();
 
 const _c0$1B = ["actionBarElement"];
-const _c1$Q = ["dropDownButton"];
+const _c1$S = ["dropDownButton"];
 const _c2$l = ["dropDown"];
 function ActionBarComponent_sme_dynamic_action_item_2_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
@@ -7042,7 +7066,7 @@ class ActionBarComponent extends ActionContainerComponent {
 /** @nocollapse */ ActionBarComponent.ɵfac = function ActionBarComponent_Factory(t) { return new (t || ActionBarComponent)(i0.ɵɵdirectiveInject(i0.IterableDiffers), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(SME_LAYOUT_PROVIDER, 8), i0.ɵɵdirectiveInject(i0.Injector)); };
 /** @nocollapse */ ActionBarComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ActionBarComponent, selectors: [["sme-action-bar"]], viewQuery: function ActionBarComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$1B, 5);
-        i0.ɵɵviewQuery(_c1$Q, 5);
+        i0.ɵɵviewQuery(_c1$S, 5);
         i0.ɵɵviewQuery(_c2$l, 5);
     } if (rf & 2) {
         let _t;
@@ -7726,7 +7750,7 @@ class ActionButtonAsyncComponent extends ActionItemComponent {
         }] }); })();
 
 const _c0$1A = ["dropDown"];
-const _c1$P = ["dropDownButton"];
+const _c1$R = ["dropDownButton"];
 function ActionDropdownRendererComponent_p_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 10);
     i0.ɵɵtext(1);
@@ -7838,7 +7862,7 @@ ActionDropdownRendererComponent.dropdownUtaIdSuffix = '-dropdown';
 /** @nocollapse */ ActionDropdownRendererComponent.ɵfac = function ActionDropdownRendererComponent_Factory(t) { return new (t || ActionDropdownRendererComponent)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
 /** @nocollapse */ ActionDropdownRendererComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ActionDropdownRendererComponent, selectors: [["sme-action-dropdown-renderer"]], viewQuery: function ActionDropdownRendererComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$1A, 5);
-        i0.ɵɵviewQuery(_c1$P, 5);
+        i0.ɵɵviewQuery(_c1$R, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropDown = _t.first);
@@ -8376,8 +8400,8 @@ function IconTextComponent_input_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("value", ctx_r1.title);
     i0.ɵɵattribute("aria-label", ctx_r1.readOnlyFormFieldLabel);
 } }
-function IconTextComponent_span_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 8);
+function IconTextComponent_h3_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "h3", 8);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -8393,7 +8417,7 @@ class IconTextComponent extends CoreBaseComponent {
          */
         this.title = '';
         /**
-         * The text in string.
+         * It determines whether to show title
          */
         this.showTitle = true;
         this.layoutFlex = true;
@@ -8422,7 +8446,7 @@ class IconTextComponent extends CoreBaseComponent {
     } }, inputs: { title: "title", showTitle: "showTitle", urlIcon: "urlIcon", smeIconClassName: "smeIconClassName", readOnlyFormField: "readOnlyFormField", readOnlyFormFieldLabel: "readOnlyFormFieldLabel" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 3, consts: [[4, "ngIf"], ["type", "text", "readonly", "", "class", "sme-icon-text-text sme-position-flex-auto", "tabindex", "-1", 3, "value", 4, "ngIf"], ["class", "sme-icon-text-text sme-position-flex-align-center", 4, "ngIf"], ["class", "sme-icon-text-icon sme-position-flex-align-center sme-icon sme-margin-right-xs", 3, "class", 4, "ngIf"], ["class", "sme-icon-text-icon sme-position-flex-align-center sme-url-icon sme-margin-right-xs", 3, "background-image", 4, "ngIf"], [1, "sme-icon-text-icon", "sme-position-flex-align-center", "sme-icon", "sme-margin-right-xs"], [1, "sme-icon-text-icon", "sme-position-flex-align-center", "sme-url-icon", "sme-margin-right-xs"], ["type", "text", "readonly", "", "tabindex", "-1", 1, "sme-icon-text-text", "sme-position-flex-auto", 3, "value"], [1, "sme-icon-text-text", "sme-position-flex-align-center"]], template: function IconTextComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵtemplate(0, IconTextComponent_ng_container_0_Template, 3, 2, "ng-container", 0);
         i0.ɵɵtemplate(1, IconTextComponent_input_1_Template, 1, 2, "input", 1);
-        i0.ɵɵtemplate(2, IconTextComponent_span_2_Template, 2, 1, "span", 2);
+        i0.ɵɵtemplate(2, IconTextComponent_h3_2_Template, 2, 1, "h3", 2);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.smeIconClassName || ctx.urlIcon);
         i0.ɵɵadvance(1);
@@ -8432,7 +8456,7 @@ class IconTextComponent extends CoreBaseComponent {
     } }, dependencies: [i1$1.NgIf], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(IconTextComponent, [{
         type: Component,
-        args: [{ selector: 'sme-icon-text', template: "<ng-container *ngIf=\"smeIconClassName || urlIcon\">\r\n  <span *ngIf=\"smeIconClassName\" class=\"sme-icon-text-icon sme-position-flex-align-center sme-icon sme-margin-right-xs\" [class]=\"smeIconClassName ? smeIconClassName : ''\"></span>\r\n  <span *ngIf=\"urlIcon && !smeIconClassName\" class=\"sme-icon-text-icon sme-position-flex-align-center sme-url-icon sme-margin-right-xs\" [style.background-image]=\"urlIcon\"></span>\r\n</ng-container>\r\n<input *ngIf=\"readOnlyFormField\" type=\"text\" readonly class=\"sme-icon-text-text sme-position-flex-auto\" [attr.aria-label]=\"readOnlyFormFieldLabel\" tabindex=\"-1\" [value]=\"title\" />\r\n<span *ngIf=\"!readOnlyFormField && showTitle\" class=\"sme-icon-text-text sme-position-flex-align-center\">{{ title }}</span>\r\n" }]
+        args: [{ selector: 'sme-icon-text', template: "<ng-container *ngIf=\"smeIconClassName || urlIcon\">\r\n  <span *ngIf=\"smeIconClassName\" class=\"sme-icon-text-icon sme-position-flex-align-center sme-icon sme-margin-right-xs\" [class]=\"smeIconClassName ? smeIconClassName : ''\"></span>\r\n  <span *ngIf=\"urlIcon && !smeIconClassName\" class=\"sme-icon-text-icon sme-position-flex-align-center sme-url-icon sme-margin-right-xs\" [style.background-image]=\"urlIcon\"></span>\r\n</ng-container>\r\n<input *ngIf=\"readOnlyFormField\" type=\"text\" readonly class=\"sme-icon-text-text sme-position-flex-auto\" [attr.aria-label]=\"readOnlyFormFieldLabel\" tabindex=\"-1\" [value]=\"title\" />\r\n<h3 *ngIf=\"!readOnlyFormField && showTitle\" class=\"sme-icon-text-text sme-position-flex-align-center\">{{ title }}</h3>\r\n" }]
     }], function () { return [{ type: i0.Injector }]; }, { title: [{
             type: Input
         }], showTitle: [{
@@ -8811,7 +8835,7 @@ function EditableLayoutItemComponent_p_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate1(" ", ctx_r0.displayName, " ");
 } }
 const _c0$1v = function (a0) { return { "sme-cursor-pointer": a0 }; };
-const _c1$O = function (a0) { return { "sme-corner-resizer-disabled": a0 }; };
+const _c1$Q = function (a0) { return { "sme-corner-resizer-disabled": a0 }; };
 const _c2$j = ["*"];
 /**
  * Individual Layout Items that can be added on demand with as -
@@ -8914,7 +8938,7 @@ class EditableLayoutItemComponent extends CoreBaseComponent {
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.isLayoutItemDraggable);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _c1$O, !ctx.isLayoutItemDraggable));
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _c1$Q, !ctx.isLayoutItemDraggable));
     } }, dependencies: [i1$1.NgClass, i1$1.NgIf], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EditableLayoutItemComponent, [{
         type: Component,
@@ -9512,7 +9536,7 @@ __decorate([
 ], LayoutResponsiveWindowManager.prototype, "onWindowSizeChanged", null);
 
 const _c0$1t = [[["sme-layout-item"]]];
-const _c1$N = ["sme-layout-item"];
+const _c1$P = ["sme-layout-item"];
 /**
  * Layout component
  */
@@ -9958,7 +9982,7 @@ class LayoutComponent extends CoreBaseComponent {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.layoutItems = _t);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.definitions = _t);
-    } }, inputs: { itemHorizontalSpace: "itemHorizontalSpace", itemVerticalSpace: "itemVerticalSpace", oneColumn: "oneColumn", tryToFillWholeRow: "tryToFillWholeRow", definition: "definition", padLastItem: "padLastItem", noExtraRightPaddingOneItemPerRow: "noExtraRightPaddingOneItemPerRow", layoutConfig: "layoutConfig" }, outputs: { layoutChanged: "layoutChanged", windowBreakpointChanged: "windowBreakpointChanged" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$N, decls: 1, vars: 0, template: function LayoutComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { itemHorizontalSpace: "itemHorizontalSpace", itemVerticalSpace: "itemVerticalSpace", oneColumn: "oneColumn", tryToFillWholeRow: "tryToFillWholeRow", definition: "definition", padLastItem: "padLastItem", noExtraRightPaddingOneItemPerRow: "noExtraRightPaddingOneItemPerRow", layoutConfig: "layoutConfig" }, outputs: { layoutChanged: "layoutChanged", windowBreakpointChanged: "windowBreakpointChanged" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$P, decls: 1, vars: 0, template: function LayoutComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef(_c0$1t);
         i0.ɵɵprojection(0);
     } }, encapsulation: 2 });
@@ -10015,7 +10039,7 @@ __decorate([
         }], refresh: [], deferredOnLayoutChanged: [], onWindowBreakpointChanged: [] }); })();
 
 const _c0$1s = [[["sme-editable-layout-item"]]];
-const _c1$M = ["sme-editable-layout-item"];
+const _c1$O = ["sme-editable-layout-item"];
 class EditableLayoutComponent extends LayoutComponent {
     /**
      * The source name to use for logging
@@ -10183,7 +10207,7 @@ EditableLayoutComponent.gridPaddingSize = 8;
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.editableLayoutItems = _t);
-    } }, inputs: { isEditMode: "isEditMode" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c1$M, decls: 2, vars: 4, consts: [[1, "sme-editable-layout-grid"]], template: function EditableLayoutComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { isEditMode: "isEditMode" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c1$O, decls: 2, vars: 4, consts: [[1, "sme-editable-layout-grid"]], template: function EditableLayoutComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef(_c0$1s);
         i0.ɵɵelementStart(0, "div", 0);
         i0.ɵɵprojection(1);
@@ -10243,7 +10267,7 @@ function LoadingWheelComponent_a_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(ctx_r1.buttonLabel);
 } }
 const _c0$1r = function (a0, a1, a2) { return { "sme-scheme-loading-wheel": a0, "sme-layout-absolute": a1, "sme-position-inset-none": a2 }; };
-const _c1$L = function (a0, a1) { return { "sme-layout-absolute": a0, "sme-position-center": a1 }; };
+const _c1$N = function (a0, a1) { return { "sme-layout-absolute": a0, "sme-position-center": a1 }; };
 const _c2$i = function (a0, a1) { return { "sme-progress-center": a0, "sme-progress-center-h": a1 }; };
 var LoadingWheelSize;
 (function (LoadingWheelSize) {
@@ -10389,7 +10413,7 @@ class LoadingWheelComponent extends CoreBaseComponent {
     } if (rf & 2) {
         i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(11, _c0$1r, !ctx.isBackgroundTransparent, !ctx.inline, !ctx.inline));
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(15, _c1$L, !ctx.inline, !ctx.inline));
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(15, _c1$N, !ctx.inline, !ctx.inline));
         i0.ɵɵadvance(1);
         i0.ɵɵclassMapInterpolate1("sme-progress sme-progress-indeterminate-local ", ctx.sizeClass, " sme-focus-zone");
         i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(18, _c2$i, ctx.inline, !ctx.inline));
@@ -12007,7 +12031,7 @@ class SmeInternalFormFieldComponent extends FormFieldComponent {
     }], null, null); })();
 
 const _c0$1q = ["fieldHost"];
-const _c1$K = ["field"];
+const _c1$M = ["field"];
 /**
  * Schema Form Component
  * It takes the schema and data and other necessary inputs then dynamically renders the form UI.
@@ -12315,7 +12339,7 @@ SchemaFieldLoaderComponentBase.resourceActualTextPrefix = 'actual_string:';
 SchemaFieldLoaderComponentBase.localizationCache = {};
 /** @nocollapse */ SchemaFieldLoaderComponentBase.ɵfac = function SchemaFieldLoaderComponentBase_Factory(t) { return new (t || SchemaFieldLoaderComponentBase)(); };
 /** @nocollapse */ SchemaFieldLoaderComponentBase.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: SchemaFieldLoaderComponentBase, viewQuery: function SchemaFieldLoaderComponentBase_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c1$K, 5);
+        i0.ɵɵviewQuery(_c1$M, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.formFieldComponent = _t.first);
@@ -14505,7 +14529,7 @@ function DialogComponent_sme_backdrop_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", ctx_r0.ariaDescription);
 } }
-const _c1$J = [[["sme-dialog-header"]], [["sme-dialog-content"]], [["sme-dialog-footer"]]];
+const _c1$L = [[["sme-dialog-header"]], [["sme-dialog-content"]], [["sme-dialog-footer"]]];
 const _c2$h = ["sme-dialog-header", "sme-dialog-content", "sme-dialog-footer"];
 /**
  *
@@ -14823,7 +14847,7 @@ DialogComponent.nextDialogId = 0;
 /** @nocollapse */ DialogComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DialogComponent, selectors: [["sme-dialog"]], hostBindings: function DialogComponent_HostBindings(rf, ctx) { if (rf & 1) {
         i0.ɵɵlistener("keyup.escape", function DialogComponent_keyup_escape_HostBindingHandler() { return ctx.onKeyUp(); }, false, i0.ɵɵresolveDocument);
     } }, inputs: { allowBackgroundInteraction: "allowBackgroundInteraction", showBackdrop: "showBackdrop", clickBackdrop: "clickBackdrop", ariaLabel: "ariaLabel", ariaDescription: "ariaDescription", actionPane: "actionPane", dialogMode: "dialogMode", dialogType: "dialogType", closeButton: "closeButton", compactFullHeight: "compactFullHeight" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c2$h, decls: 1, vars: 1, consts: [["class", "sme-layout-absolute sme-position-inset-none", 3, "level", "showBackdrop", "allowBackgroundInteraction", "clicked", 4, "ngIf"], [1, "sme-layout-absolute", "sme-position-inset-none", 3, "level", "showBackdrop", "allowBackgroundInteraction", "clicked"], ["aria-modal", "true", 3, "ngClass"], ["class", "sme-button-trigger sme-button-auto-width sme-dialog-close-button", 3, "title", "click", 4, "ngIf"], [1, "sme-position-flex-none", "sme-focus-zone"], [1, "sme-layout-relative", "sme-position-flex-auto", "sme-padding-horizontal-lg", "sme-arrange-overflow-auto-y", "sme-arrange-overflow-hide-x", "sme-focus-zone", "sme-layout-responsive-zone-xs", "sme-dialog-content-wrapper"], [1, "sme-position-flex-none", "sme-focus-zone", "sme-padding-horizontal-lg", "sme-padding-vertical-sm"], ["class", "sme-screen-reader", 3, "id", 4, "ngIf"], [1, "sme-button-trigger", "sme-button-auto-width", "sme-dialog-close-button", 3, "title", "click"], [1, "sme-icon", "sme-icon-cancel"], [1, "sme-screen-reader", 3, "id"]], template: function DialogComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵprojectionDef(_c1$J);
+        i0.ɵɵprojectionDef(_c1$L);
         i0.ɵɵtemplate(0, DialogComponent_sme_backdrop_0_Template, 11, 11, "sme-backdrop", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.visible);
@@ -15594,7 +15618,7 @@ class TabbedFormLoaderComponent extends ObjectPropertySchemaFieldLoaderComponent
         });
     }
     ngOnDestroy() {
-        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.subscriptions.forEach(sub => sub?.unsubscribe());
     }
     setupSchema(schema) {
         for (let i = 0; i < schema.properties.length; i++) {
@@ -15872,6 +15896,162 @@ class SchemaFieldHostModule {
         DisabledModule,
         TooltipModule], exports: [SchemaFieldHostComponent] }); })();
 
+/**
+ * A re-usable form field accessibility manager.
+ */
+class FormFieldAccessibilityManagerBaseService {
+    /**
+     * The focus handler on delete/add if the form field is a list.
+     * @param value The value for the list form field.
+     * @param addButton The component reference for the add button.
+     * @param hostElement The host element reference.
+     * @param isDelete Determine if the action is delete.
+     * @returns void
+     */
+    listFormFieldFocusHandlerOnKeyboardAction(value, addButton, hostElement, isDelete = true) {
+        // If there are no items in the list, focus on the add button.
+        if (!value || !value.length) {
+            this.deferredFocusOnAddButton(addButton);
+            return;
+        }
+        // Otherwise focus on the either the first input fields when it is delete or the last input field when it is add.
+        this.deferredFocusOnInputFields(hostElement, value, isDelete);
+    }
+    /**
+     * The focus handler on delete/add if the form field is a list. And the list is built with a specific selector.
+     * @param value The value for the list form field.
+     * @param addButton The component reference for the add button.
+     * @param hostElement The host element reference.
+     * @param selector The selector for the input fields.
+     * @returns void
+     */
+    listFormFieldFocusHandlerOnKeyboardActionBySelector(value, addButton, hostElement, selector) {
+        // If there are no items in the list, focus on the add button.
+        if (!value || !value.length) {
+            this.deferredFocusOnAddButton(addButton);
+            return;
+        }
+        // Otherwise focus on the either the first input fields when it is delete or the last input field when it is add.
+        this.deferredFocusOnTargetBySelector(value, hostElement, selector);
+    }
+    /**
+     * It handles the focus on the input field by index if value is type of any[].
+     * @param hostElement the host form field element.
+     * @param index the index of the input field to focus on.
+     * @returns void.
+     */
+    focusOnInputByIndex(hostElement, index) {
+        const inputs = hostElement.nativeElement.querySelectorAll('input');
+        if (index < 0 || index >= inputs.length) {
+            return;
+        }
+        inputs[index].focus();
+    }
+    deferredFocusOnTargetBySelector(value, hostElement, selector) {
+        if (!value || !value.length) {
+            return;
+        }
+        const targets = hostElement.nativeElement.querySelectorAll(selector);
+        if (!targets || !targets.length) {
+            return;
+        }
+        targets[0].focus();
+    }
+    deferredFocusOnAddButton(addButton) {
+        if (!addButton) {
+            return;
+        }
+        addButton.nativeElement.focus();
+    }
+    deferredFocusOnInputFields(hostElement, value, isDelete = true) {
+        if (!value || !value.length) {
+            return;
+        }
+        this.focusOnInputByIndex(hostElement, isDelete ? 0 : value.length - 1);
+    }
+}
+/** @nocollapse */ FormFieldAccessibilityManagerBaseService.ɵfac = function FormFieldAccessibilityManagerBaseService_Factory(t) { return new (t || FormFieldAccessibilityManagerBaseService)(); };
+/** @nocollapse */ FormFieldAccessibilityManagerBaseService.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: FormFieldAccessibilityManagerBaseService, factory: FormFieldAccessibilityManagerBaseService.ɵfac, providedIn: 'root' });
+__decorate([
+    Debounce$2(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Array, ElementRef, String]),
+    __metadata("design:returntype", void 0)
+], FormFieldAccessibilityManagerBaseService.prototype, "deferredFocusOnTargetBySelector", null);
+__decorate([
+    Debounce$2(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [ElementRef]),
+    __metadata("design:returntype", void 0)
+], FormFieldAccessibilityManagerBaseService.prototype, "deferredFocusOnAddButton", null);
+__decorate([
+    Debounce$2(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [ElementRef, Array, Object]),
+    __metadata("design:returntype", void 0)
+], FormFieldAccessibilityManagerBaseService.prototype, "deferredFocusOnInputFields", null);
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormFieldAccessibilityManagerBaseService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], null, { deferredFocusOnTargetBySelector: [], deferredFocusOnAddButton: [], deferredFocusOnInputFields: [] }); })();
+
+class ArrayFormFieldAccessibilityManagerService {
+    constructor(formFieldAccessibilityManagerBaseService) {
+        this.formFieldAccessibilityManagerBaseService = formFieldAccessibilityManagerBaseService;
+        this.firstFormFieldInArrayItemSelector = 'sme-accordion sme-accordion-panel:last-of-type input';
+    }
+    /**
+     * It handles the focus when deleting an item from the list.
+     * @param value the value for the list.
+     * @param addButton the element reference for the add button.
+     * @param hostElement the element reference for the host element.
+     * @returns void
+     */
+    delete(value, addButton, hostElement) {
+        this.formFieldAccessibilityManagerBaseService.listFormFieldFocusHandlerOnKeyboardActionBySelector(value, addButton, hostElement, this.firstFormFieldInArrayItemSelector);
+    }
+    /**
+     * It handles the focus when adding an item to the list.
+     * @param value the value for the list.
+     * @param addButton the element reference for the add button.
+     * @param hostElement the element reference for the host element.
+     * @returns void
+     */
+    add(value, addButton, hostElement) {
+        this.formFieldAccessibilityManagerBaseService.listFormFieldFocusHandlerOnKeyboardActionBySelector(value, addButton, hostElement, this.firstFormFieldInArrayItemSelector);
+    }
+    /**
+     * It handles the focus when promoting an item in the list.
+     * @param hostElement The element reference for the host element.
+     * @param index the current index.
+     */
+    promote(value, hostElement, index) {
+        this.formFieldAccessibilityManagerBaseService.deferredFocusOnTargetBySelector(value, hostElement, 
+        // nth means index - 1 + 1 = index
+        `sme-accordion sme-accordion-panel:nth-of-type(${index}) button:nth-of-type(2)`);
+    }
+    /**
+     * It handles the focus when demoting an item in the list.
+     * @param hostElement The element reference for the host element.
+     * @param index the current index.
+     */
+    demote(value, hostElement, index) {
+        this.formFieldAccessibilityManagerBaseService.deferredFocusOnTargetBySelector(value, hostElement, 
+        // nth means index + 1 + 1 = index + 2
+        `sme-accordion sme-accordion-panel:nth-of-type(${index + 2}) button:nth-of-type(3)`);
+    }
+}
+/** @nocollapse */ ArrayFormFieldAccessibilityManagerService.ɵfac = function ArrayFormFieldAccessibilityManagerService_Factory(t) { return new (t || ArrayFormFieldAccessibilityManagerService)(i0.ɵɵinject(FormFieldAccessibilityManagerBaseService)); };
+/** @nocollapse */ ArrayFormFieldAccessibilityManagerService.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: ArrayFormFieldAccessibilityManagerService, factory: ArrayFormFieldAccessibilityManagerService.ɵfac, providedIn: 'root' });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArrayFormFieldAccessibilityManagerService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], function () { return [{ type: FormFieldAccessibilityManagerBaseService }]; }, null); })();
+
 /**
  * Provider that hides any existing ControlContainers from NgModel
  */
@@ -16005,7 +16185,7 @@ function ArrayFormFieldLoaderComponent_ng_template_2_Template(rf, ctx) { if (rf
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("propertySchema", ctx_r1.propertySchema.item)("context", ctx_r1.context)("data", model_r2);
 } }
-const _c1$I = ["addButton"];
+const _c1$K = ["addButton"];
 const _c2$g = ["type", "array"];
 const _c3$b = function (a0, a1) { return { index: a0, ariaLabelId: a1 }; };
 function ArrayFormFieldComponent_sme_accordion_panel_3_ng_container_2_Template(rf, ctx) { if (rf & 1) {
@@ -16103,7 +16283,6 @@ function ArrayFormFieldComponent_button_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(ctx_r1.addButtonText);
 } }
 /* eslint-disable max-len */
-/* eslint-enable max-len */
 class ArrayFormFieldLoaderComponent extends ArrayPropertySchemaFieldLoaderComponent {
     askForNewItem($event) {
         const item = SchemaUtilities.generateDataBasedOnSchemaProperty(this.propertySchema.item);
@@ -16172,8 +16351,9 @@ let ArrayFormFieldComponent = class ArrayFormFieldComponent extends SmeInternalF
     /**
      * Initializes a new instance of the JsonFormFieldComponent
      */
-    constructor(injector) {
+    constructor(injector, arrayFormFieldAccessibilityManagerService) {
         super(injector);
+        this.arrayFormFieldAccessibilityManagerService = arrayFormFieldAccessibilityManagerService;
         /**
          * When no "newItem" is provided. This output will be called anytime a new item is required.
          */
@@ -16259,35 +16439,19 @@ let ArrayFormFieldComponent = class ArrayFormFieldComponent extends SmeInternalF
      */
     add() {
         const item = this.getNewItem();
-        const index = this.value.length;
         this.value.push(item);
         this.triggerValueChange();
-        setTimeout(() => {
-            const itemId = this.getItemAriaId(index, 'itemContainer');
-            const itemContainer = document.getElementById(itemId);
-            const firstInput = itemContainer.querySelector('input');
-            if (firstInput) {
-                firstInput.focus();
-            }
-            itemContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        });
+        this.arrayFormFieldAccessibilityManagerService.add(this.value, this.addButton, this.hostElement);
     }
     /**
      * Deletes an item from the array
      */
     delete(item) {
         const index = this.value.indexOf(item);
-        // return the view to the previous item in the list.
-        const prevItemId = this.getItemAriaId(index - 1, 'itemContainer');
-        const prevContainer = document.getElementById(prevItemId);
-        if (prevContainer) {
-            prevContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }
-        // focus on the add button, otherwise focus is reset to the beginning of the page
-        this.addButton.nativeElement.focus();
         this.value.splice(index, 1);
         this.triggerValueChange();
         this.updateScreenReaderEvent(this.strings.MsftSmeShell.Angular.Form.Array.removeButtonEvent);
+        this.arrayFormFieldAccessibilityManagerService.delete(this.value, this.addButton, this.hostElement);
     }
     /**
      * Decreases the index of an item by 1
@@ -16299,6 +16463,7 @@ let ArrayFormFieldComponent = class ArrayFormFieldComponent extends SmeInternalF
             this.value[index] = { ...this.value[index - 1] };
             this.value[index - 1] = temp;
             this.updateScreenReaderEvent(this.strings.MsftSmeShell.Angular.Form.Array.promoteButtonEvent);
+            this.arrayFormFieldAccessibilityManagerService.promote(this.value, this.hostElement, index);
         }
         else {
             this.updateScreenReaderEvent(this.strings.MsftSmeShell.Angular.Form.Array.promoteButtonPreventedEvent);
@@ -16314,6 +16479,7 @@ let ArrayFormFieldComponent = class ArrayFormFieldComponent extends SmeInternalF
             this.value[index] = { ...this.value[index + 1] };
             this.value[index + 1] = temp;
             this.updateScreenReaderEvent(this.strings.MsftSmeShell.Angular.Form.Array.demoteButtonEvent);
+            this.arrayFormFieldAccessibilityManagerService.demote(this.value, this.hostElement, index);
         }
         else {
             this.updateScreenReaderEvent(this.strings.MsftSmeShell.Angular.Form.Array.demoteButtonPreventedEvent);
@@ -16393,14 +16559,14 @@ let ArrayFormFieldComponent = class ArrayFormFieldComponent extends SmeInternalF
         }
     }
 };
-/** @nocollapse */ ArrayFormFieldComponent.ɵfac = function ArrayFormFieldComponent_Factory(t) { return new (t || ArrayFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
+/** @nocollapse */ ArrayFormFieldComponent.ɵfac = function ArrayFormFieldComponent_Factory(t) { return new (t || ArrayFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(ArrayFormFieldAccessibilityManagerService)); };
 /** @nocollapse */ ArrayFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ArrayFormFieldComponent, selectors: [["sme-form-field", "type", "array"]], contentQueries: function ArrayFormFieldComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
         i0.ɵɵcontentQuery(dirIndex, FormFieldIsolatorComponent, 7);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.subFieldIsolator = _t.first);
     } }, viewQuery: function ArrayFormFieldComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c1$I, 5);
+        i0.ɵɵviewQuery(_c1$K, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.addButton = _t.first);
@@ -16437,12 +16603,13 @@ ArrayFormFieldComponent = __decorate([
         description: `A form field control binding to array data.`,
         loaderComponent: ArrayFormFieldLoaderComponent
     }),
-    __metadata("design:paramtypes", [Injector])
+    __metadata("design:paramtypes", [Injector,
+        ArrayFormFieldAccessibilityManagerService])
 ], ArrayFormFieldComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArrayFormFieldComponent, [{
         type: Component,
-        args: [{ selector: 'sme-form-field[type="array"]', template: "<sme-form-field-layout [formField]=\"this\">\r\n\r\n  <div class=\"sme-array\">\r\n    <sme-accordion [canCloseAny]=\"canCloseAny\" [canCloseAll]=\"canCloseAll\" [canOpenMultiple]=\"canOpenMultiple\">\r\n      <sme-accordion-panel *ngFor=\"let item of value; let i = index\" [header]=\"getItemTitle(item, i)\" [isExpandable]=\"false\" [attr.data-uta-id]=\"'array-form-field-item-' + i\">\r\n        <sme-panel-control>\r\n          <ng-container *ngIf=\"headerTemplate\" smeTemplateOutlet [template]=\"headerTemplate\" [data]=\"item\" hostDataName=\"context\"\r\n            [hostData]=\"{index: i, ariaLabelId: getItemAriaId(i, 'itemHeader')}\"></ng-container>\r\n          <button *ngIf=\"showMove\" type=\"button\"\r\n            class=\"sme-button-trigger sme-button-auto-width sme-form-field-height sme-padding-horizontal-xs\"\r\n            [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.Array.promoteButtonAriaLabel\"\r\n            [title]=\"strings.MsftSmeShell.Angular.Form.Array.promoteButtonTooltip\" (click)=\"moveUp(item)\"\r\n            [smeDisabled]=\"loadingOrDisabled\" data-uta-id=\"promote-button\">\r\n            <span class=\"sme-icon sme-icon-up\"></span>\r\n          </button>\r\n          <button *ngIf=\"showMove\" type=\"button\"\r\n            class=\"sme-button-trigger sme-button-auto-width sme-form-field-height sme-padding-horizontal-xs\"\r\n            [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.Array.demoteButtonAriaLabel\"\r\n            [title]=\"strings.MsftSmeShell.Angular.Form.Array.demoteButtonTooltip\" (click)=\"moveDown(item)\"\r\n            [smeDisabled]=\"loadingOrDisabled\" data-uta-id=\"demote-button\">\r\n            <span class=\"sme-icon sme-icon-down\"></span>\r\n          </button>\r\n          <button *ngIf=\"getShowRemove(item, i)\" type=\"button\"\r\n            class=\"sme-button-trigger sme-button-auto-width sme-form-field-height sme-padding-horizontal-xs\"\r\n            [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.Array.removeButtonAriaLabel\"\r\n            [title]=\"strings.MsftSmeShell.Angular.Form.Array.removeButtonTooltip\" (click)=\"delete(item)\"\r\n            [smeDisabled]=\"loadingOrDisabled\" data-uta-id=\"remove-button\">\r\n            <span class=\"sme-icon sme-icon-delete sme-color-red\"></span>\r\n          </button>\r\n        </sme-panel-control>\r\n\r\n        <span class=\"sme-screen-reader\" [id]=\"getItemAriaId(i, 'item')\">{{itemTitle}}</span>\r\n        <fieldset [attr.aria-labelledby]=\"getItemAriaId(i, 'item')\"\r\n          class=\"sme-arrange-stack-h sme-margin-bottom-lg sme-array-item\"\r\n          [class.sme-subform-indent-none]=\"orientation==='horizontal'\">\r\n\r\n          <div class=\"sme-position-flex-auto sme-padding-inset-md\" [id]=\"getItemAriaId(i, 'itemContainer')\">\r\n            <ng-container smeTemplateOutlet [template]=\"itemTemplate\" [data]=\"item\" hostDataName=\"context\"\r\n              [hostData]=\"{index: i, ariaLabelId: getItemAriaId(i, 'item')}\"></ng-container>\r\n          </div>\r\n        </fieldset>\r\n\r\n      </sme-accordion-panel>\r\n    </sme-accordion>\r\n\r\n    <button #addButton *ngIf=\"showAdd\" type=\"button\" data-uta-id=\"add-button\"\r\n      [smeDisabled]=\"loadingOrDisabled || (maxItems !== -1 && value.length >= maxItems)\"\r\n      class=\"sme-button-trigger sme-button-auto-width sme-icon sme-icon-add sme-margin-bottom-xs\"\r\n      [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.Array.addButtonAriaLabel\"\r\n      [title]=\"strings.MsftSmeShell.Angular.Form.Array.addButtonTooltip\" (click)=\"add()\">{{addButtonText}}</button>\r\n  </div>\r\n\r\n  <sme-validation-alert [alert]=\"alert\"></sme-validation-alert>\r\n  <div class=\"sme-screen-reader\" aria-live=\"assertive\" aria-relevant=\"all\">{{screenReaderEvent}}</div>\r\n</sme-form-field-layout>\r\n" }]
-    }], function () { return [{ type: i0.Injector }]; }, { subFieldIsolator: [{
+        args: [{ selector: 'sme-form-field[type="array"]', template: "<sme-form-field-layout [formField]=\"this\">\r\n  <div class=\"sme-array\">\r\n    <sme-accordion [canCloseAny]=\"canCloseAny\" [canCloseAll]=\"canCloseAll\" [canOpenMultiple]=\"canOpenMultiple\">\r\n      <sme-accordion-panel *ngFor=\"let item of value; let i = index\" [header]=\"getItemTitle(item, i)\" [isExpandable]=\"false\" [attr.data-uta-id]=\"'array-form-field-item-' + i\">\r\n        <sme-panel-control>\r\n          <ng-container *ngIf=\"headerTemplate\" smeTemplateOutlet [template]=\"headerTemplate\" [data]=\"item\" hostDataName=\"context\"\r\n            [hostData]=\"{index: i, ariaLabelId: getItemAriaId(i, 'itemHeader')}\"></ng-container>\r\n          <button *ngIf=\"showMove\" type=\"button\"\r\n            class=\"sme-button-trigger sme-button-auto-width sme-form-field-height sme-padding-horizontal-xs\"\r\n            [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.Array.promoteButtonAriaLabel\"\r\n            [title]=\"strings.MsftSmeShell.Angular.Form.Array.promoteButtonTooltip\" (click)=\"moveUp(item)\"\r\n            [smeDisabled]=\"loadingOrDisabled\" data-uta-id=\"promote-button\">\r\n            <span class=\"sme-icon sme-icon-up\"></span>\r\n          </button>\r\n          <button *ngIf=\"showMove\" type=\"button\"\r\n            class=\"sme-button-trigger sme-button-auto-width sme-form-field-height sme-padding-horizontal-xs\"\r\n            [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.Array.demoteButtonAriaLabel\"\r\n            [title]=\"strings.MsftSmeShell.Angular.Form.Array.demoteButtonTooltip\" (click)=\"moveDown(item)\"\r\n            [smeDisabled]=\"loadingOrDisabled\" data-uta-id=\"demote-button\">\r\n            <span class=\"sme-icon sme-icon-down\"></span>\r\n          </button>\r\n          <button *ngIf=\"getShowRemove(item, i)\" type=\"button\"\r\n            class=\"sme-button-trigger sme-button-auto-width sme-form-field-height sme-padding-horizontal-xs\"\r\n            [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.Array.removeButtonAriaLabel\"\r\n            [title]=\"strings.MsftSmeShell.Angular.Form.Array.removeButtonTooltip\" (click)=\"delete(item)\"\r\n            [smeDisabled]=\"loadingOrDisabled\" data-uta-id=\"remove-button\">\r\n            <span class=\"sme-icon sme-icon-delete sme-color-red\"></span>\r\n          </button>\r\n        </sme-panel-control>\r\n        <span class=\"sme-screen-reader\" [id]=\"getItemAriaId(i, 'item')\">{{itemTitle}}</span>\r\n        <fieldset [attr.aria-labelledby]=\"getItemAriaId(i, 'item')\"\r\n          class=\"sme-arrange-stack-h sme-margin-bottom-lg sme-array-item\"\r\n          [class.sme-subform-indent-none]=\"orientation==='horizontal'\">\r\n          <div class=\"sme-position-flex-auto sme-padding-inset-md\" [id]=\"getItemAriaId(i, 'itemContainer')\">\r\n            <ng-container smeTemplateOutlet [template]=\"itemTemplate\" [data]=\"item\" hostDataName=\"context\"\r\n              [hostData]=\"{index: i, ariaLabelId: getItemAriaId(i, 'item')}\"></ng-container>\r\n          </div>\r\n        </fieldset>\r\n      </sme-accordion-panel>\r\n    </sme-accordion>\r\n    <button #addButton *ngIf=\"showAdd\" type=\"button\" data-uta-id=\"add-button\"\r\n      [smeDisabled]=\"loadingOrDisabled || (maxItems !== -1 && value.length >= maxItems)\"\r\n      class=\"sme-button-trigger sme-button-auto-width sme-icon sme-icon-add sme-margin-bottom-xs\"\r\n      [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.Array.addButtonAriaLabel\"\r\n      [title]=\"strings.MsftSmeShell.Angular.Form.Array.addButtonTooltip\" (click)=\"add()\">{{addButtonText}}</button>\r\n  </div>\r\n  <sme-validation-alert [alert]=\"alert\"></sme-validation-alert>\r\n  <div class=\"sme-screen-reader\" aria-live=\"assertive\" aria-relevant=\"all\">{{screenReaderEvent}}</div>\r\n</sme-form-field-layout>\r\n" }]
+    }], function () { return [{ type: i0.Injector }, { type: ArrayFormFieldAccessibilityManagerService }]; }, { subFieldIsolator: [{
             type: ContentChild,
             args: [FormFieldIsolatorComponent, { static: true }]
         }], askForNewItem: [{
@@ -17489,8 +17656,10 @@ function ClockFormFieldComponent_div_12_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
+    i0.ɵɵproperty("title", ctx_r3.strings.MsftSmeShell.Angular.Common.apply);
     i0.ɵɵattribute("aria-label", ctx_r3.strings.MsftSmeShell.Angular.Common.apply);
     i0.ɵɵadvance(2);
+    i0.ɵɵproperty("title", ctx_r3.strings.MsftSmeShell.Angular.Common.clear);
     i0.ɵɵattribute("aria-label", ctx_r3.strings.MsftSmeShell.Angular.Common.clear);
 } }
 function ClockFormFieldComponent_sme_validation_alert_13_Template(rf, ctx) { if (rf & 1) {
@@ -18053,7 +18222,7 @@ class ClockFormFieldComponent extends DateLikeFormFieldComponent {
     }
 }
 /** @nocollapse */ ClockFormFieldComponent.ɵfac = function ClockFormFieldComponent_Factory(t) { return new (t || ClockFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
-/** @nocollapse */ ClockFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ClockFormFieldComponent, selectors: [["sme-form-field", "type", "clock"]], inputs: { showConfirmation: "showConfirmation" }, outputs: { accepted: "accepted", cleared: "cleared" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$1g, decls: 14, vars: 9, consts: [["role", "region", 3, "formField"], [1, "sme-clock", "sme-focus-zone", "sme-form-field-editor"], [1, "sme-clock-main-content"], [1, "sme-clock-column", "sme-clock-column-hours", 3, "wheel", "scroll"], [1, "sme-clock-column-header"], ["type", "button", 3, "sme-selected", "tabindex", "click", "keydown", 4, "ngFor", "ngForOf"], [1, "sme-clock-column", "sme-clock-column-minutes", 3, "wheel", "scroll"], ["class", "sme-clock-column sme-clock-column-meridiem", 3, "wheel", "scroll", 4, "ngIf"], ["class", "sme-clock-confirmation", 4, "ngIf"], [3, "alert", 4, "ngIf"], ["type", "button", 3, "tabindex", "click", "keydown"], [1, "sme-clock-column", "sme-clock-column-meridiem", 3, "wheel", "scroll"], ["type", "button", 3, "class", "sme-selected", "tabindex", "click", "keydown", 4, "ngFor", "ngForOf"], [1, "sme-clock-confirmation"], ["type", "button", "tabindex", "0", 3, "click"], [1, "sme-icon", "sme-icon-size-xxs", "sme-icon-accept"], [1, "sme-icon", "sme-icon-size-xxs", "sme-icon-clear"], [3, "alert"]], template: function ClockFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ ClockFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ClockFormFieldComponent, selectors: [["sme-form-field", "type", "clock"]], inputs: { showConfirmation: "showConfirmation" }, outputs: { accepted: "accepted", cleared: "cleared" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$1g, decls: 14, vars: 9, consts: [["role", "region", 3, "formField"], [1, "sme-clock", "sme-focus-zone", "sme-form-field-editor"], [1, "sme-clock-main-content"], [1, "sme-clock-column", "sme-clock-column-hours", 3, "wheel", "scroll"], [1, "sme-clock-column-header"], ["type", "button", 3, "sme-selected", "tabindex", "click", "keydown", 4, "ngFor", "ngForOf"], [1, "sme-clock-column", "sme-clock-column-minutes", 3, "wheel", "scroll"], ["class", "sme-clock-column sme-clock-column-meridiem", 3, "wheel", "scroll", 4, "ngIf"], ["class", "sme-clock-confirmation", 4, "ngIf"], [3, "alert", 4, "ngIf"], ["type", "button", 3, "tabindex", "click", "keydown"], [1, "sme-clock-column", "sme-clock-column-meridiem", 3, "wheel", "scroll"], ["type", "button", 3, "class", "sme-selected", "tabindex", "click", "keydown", 4, "ngFor", "ngForOf"], [1, "sme-clock-confirmation"], ["type", "button", "tabindex", "0", 3, "title", "click"], [1, "sme-icon", "sme-icon-size-xxs", "sme-icon-accept"], [1, "sme-icon", "sme-icon-size-xxs", "sme-icon-clear"], [3, "alert"]], template: function ClockFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "sme-form-field-layout", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
         i0.ɵɵlistener("wheel", function ClockFormFieldComponent_Template_div_wheel_3_listener($event) { return ctx.onHourWheel($event); })("scroll", function ClockFormFieldComponent_Template_div_scroll_3_listener($event) { return ctx.onColumnScroll($event); });
         i0.ɵɵelementStart(4, "div", 4);
@@ -18070,7 +18239,7 @@ class ClockFormFieldComponent extends DateLikeFormFieldComponent {
         i0.ɵɵelementEnd();
         i0.ɵɵtemplate(11, ClockFormFieldComponent_div_11_Template, 4, 2, "div", 7);
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(12, ClockFormFieldComponent_div_12_Template, 5, 2, "div", 8);
+        i0.ɵɵtemplate(12, ClockFormFieldComponent_div_12_Template, 5, 4, "div", 8);
         i0.ɵɵelementEnd();
         i0.ɵɵtemplate(13, ClockFormFieldComponent_sme_validation_alert_13_Template, 1, 1, "sme-validation-alert", 9);
         i0.ɵɵelementEnd();
@@ -18091,7 +18260,7 @@ class ClockFormFieldComponent extends DateLikeFormFieldComponent {
         i0.ɵɵproperty("ngIf", ctx.showConfirmation);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", !ctx.compact);
-    } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, ValidationAlertComponent, FormFieldLayoutComponent], encapsulation: 2 });
+    } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, TooltipDirective, ValidationAlertComponent, FormFieldLayoutComponent], encapsulation: 2 });
 __decorate([
     Debounce$1(10),
     __metadata("design:type", Function),
@@ -18106,7 +18275,7 @@ __decorate([
 ], ClockFormFieldComponent.prototype, "focusOnHostElement", null);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ClockFormFieldComponent, [{
         type: Component,
-        args: [{ selector: 'sme-form-field[type="clock"]', template: "<sme-form-field-layout [formField]=\"this\" role=\"region\" [attr.aria-label]=\"ariaLabel\">\r\n  <div class=\"sme-clock sme-focus-zone sme-form-field-editor \">\r\n    <div class=\"sme-clock-main-content\">\r\n      <div class=\"sme-clock-column sme-clock-column-hours\" (wheel)=\"onHourWheel($event)\"\r\n           (scroll)=\"onColumnScroll($event)\">\r\n        <div class=\"sme-clock-column-header\">{{this.strings.MsftSmeShell.Angular.Clock.Headings.hour}}</div>\r\n        <button type=\"button\" *ngFor=\"let hour of hours\" [class.sme-selected]=\"hour.isSelected\" [tabindex]=\"hour.isSelected ? 0 : -1\"\r\n                (click)=\"onHourClicked($event, hour)\" (keydown)=\"onHourKeydown($event)\" [attr.aria-label]=\"strings.MsftSmeShell.Angular.Clock.Headings.hour + hour.display\">{{hour.display}}</button>\r\n      </div>\r\n      <div class=\"sme-clock-column sme-clock-column-minutes\" (wheel)=\"onMinuteWheel($event)\"\r\n           (scroll)=\"onColumnScroll($event)\">\r\n        <div class=\"sme-clock-column-header\">{{this.strings.MsftSmeShell.Angular.Clock.Headings.minute}}</div>\r\n        <button type=\"button\" *ngFor=\"let minute of minutes\" [class.sme-selected]=\"minute.isSelected\"\r\n                [tabindex]=\"minute.isSelected ? 0 : -1\" (click)=\"onMinuteClicked($event, minute)\"\r\n                (keydown)=\"onMinuteKeydown($event)\" [attr.aria-label]=\"strings.MsftSmeShell.Angular.Clock.Headings.minute + minute.display\">{{minute.display}}</button>\r\n      </div>\r\n      <div *ngIf=\"!!viewportMeridiem\" class=\"sme-clock-column sme-clock-column-meridiem\"\r\n           (wheel)=\"onMeridiemWheel($event)\" (scroll)=\"onColumnScroll($event)\">\r\n        <div class=\"sme-clock-column-header\">{{this.strings.MsftSmeShell.Angular.Clock.Headings.meridiem}}</div>\r\n        <button type=\"button\" *ngFor=\"let meridiem of meridiems\" class=\"sme-clock-meridiem-{{meridiem.value}}\"\r\n                [class.sme-selected]=\"meridiem.isSelected\" [tabindex]=\"meridiem.isSelected ? 0 : -1\"\r\n                (click)=\"onMeridiemClicked($event, meridiem.value)\"\r\n                (keydown)=\"onMeridiemKeydown($event)\">{{meridiem.display}}</button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"showConfirmation\" class=\"sme-clock-confirmation\">\r\n      <button type=\"button\" [attr.aria-label]=\"this.strings.MsftSmeShell.Angular.Common.apply\" tabindex=\"0\"\r\n              (click)=\"onAcceptClicked($event)\">\r\n        <span class=\"sme-icon sme-icon-size-xxs sme-icon-accept\"></span>\r\n      </button>\r\n      <button type=\"button\" [attr.aria-label]=\"this.strings.MsftSmeShell.Angular.Common.clear\" tabindex=\"0\"\r\n              (click)=\"cleared.emit($event)\">\r\n        <span class=\"sme-icon sme-icon-size-xxs sme-icon-clear\"></span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <sme-validation-alert *ngIf=\"!compact\" [alert]=\"alert\"></sme-validation-alert>\r\n</sme-form-field-layout>\r\n" }]
+        args: [{ selector: 'sme-form-field[type="clock"]', template: "<sme-form-field-layout [formField]=\"this\" role=\"region\" [attr.aria-label]=\"ariaLabel\">\r\n  <div class=\"sme-clock sme-focus-zone sme-form-field-editor \">\r\n    <div class=\"sme-clock-main-content\">\r\n      <div class=\"sme-clock-column sme-clock-column-hours\" (wheel)=\"onHourWheel($event)\"\r\n           (scroll)=\"onColumnScroll($event)\">\r\n        <div class=\"sme-clock-column-header\">{{this.strings.MsftSmeShell.Angular.Clock.Headings.hour}}</div>\r\n        <button type=\"button\" *ngFor=\"let hour of hours\" [class.sme-selected]=\"hour.isSelected\" [tabindex]=\"hour.isSelected ? 0 : -1\"\r\n                (click)=\"onHourClicked($event, hour)\" (keydown)=\"onHourKeydown($event)\" [attr.aria-label]=\"strings.MsftSmeShell.Angular.Clock.Headings.hour + hour.display\">{{hour.display}}</button>\r\n      </div>\r\n      <div class=\"sme-clock-column sme-clock-column-minutes\" (wheel)=\"onMinuteWheel($event)\"\r\n           (scroll)=\"onColumnScroll($event)\">\r\n        <div class=\"sme-clock-column-header\">{{this.strings.MsftSmeShell.Angular.Clock.Headings.minute}}</div>\r\n        <button type=\"button\" *ngFor=\"let minute of minutes\" [class.sme-selected]=\"minute.isSelected\"\r\n                [tabindex]=\"minute.isSelected ? 0 : -1\" (click)=\"onMinuteClicked($event, minute)\"\r\n                (keydown)=\"onMinuteKeydown($event)\" [attr.aria-label]=\"strings.MsftSmeShell.Angular.Clock.Headings.minute + minute.display\">{{minute.display}}</button>\r\n      </div>\r\n      <div *ngIf=\"!!viewportMeridiem\" class=\"sme-clock-column sme-clock-column-meridiem\"\r\n           (wheel)=\"onMeridiemWheel($event)\" (scroll)=\"onColumnScroll($event)\">\r\n        <div class=\"sme-clock-column-header\">{{this.strings.MsftSmeShell.Angular.Clock.Headings.meridiem}}</div>\r\n        <button type=\"button\" *ngFor=\"let meridiem of meridiems\" class=\"sme-clock-meridiem-{{meridiem.value}}\"\r\n                [class.sme-selected]=\"meridiem.isSelected\" [tabindex]=\"meridiem.isSelected ? 0 : -1\"\r\n                (click)=\"onMeridiemClicked($event, meridiem.value)\"\r\n                (keydown)=\"onMeridiemKeydown($event)\">{{meridiem.display}}</button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"showConfirmation\" class=\"sme-clock-confirmation\">\r\n      <button type=\"button\" [title]=\"this.strings.MsftSmeShell.Angular.Common.apply\"\r\n        [attr.aria-label]=\"this.strings.MsftSmeShell.Angular.Common.apply\" tabindex=\"0\"\r\n        (click)=\"onAcceptClicked($event)\">\r\n        <span class=\"sme-icon sme-icon-size-xxs sme-icon-accept\"></span>\r\n      </button>\r\n      <button type=\"button\" [title]=\"this.strings.MsftSmeShell.Angular.Common.clear\"\r\n        [attr.aria-label]=\"this.strings.MsftSmeShell.Angular.Common.clear\" tabindex=\"0\"\r\n        (click)=\"cleared.emit($event)\">\r\n        <span class=\"sme-icon sme-icon-size-xxs sme-icon-clear\"></span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <sme-validation-alert *ngIf=\"!compact\" [alert]=\"alert\"></sme-validation-alert>\r\n</sme-form-field-layout>\r\n" }]
     }], function () { return [{ type: i0.Injector }]; }, { showConfirmation: [{
             type: Input
         }], accepted: [{
@@ -18215,7 +18384,7 @@ function fromMonacoEvent(emitter) {
 }
 
 const _c0$1f = ["editor"];
-const _c1$H = ["type", "code"];
+const _c1$J = ["type", "code"];
 function CodeFormFieldComponent_sme_validation_alert_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "sme-validation-alert", 4);
 } if (rf & 2) {
@@ -18513,7 +18682,7 @@ let CodeFormFieldComponent = class CodeFormFieldComponent extends SmeInternalFor
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.editorHost = _t.first);
     } }, hostBindings: function CodeFormFieldComponent_HostBindings(rf, ctx) { if (rf & 1) {
         i0.ɵɵlistener("keydown", function CodeFormFieldComponent_keydown_HostBindingHandler($event) { return ctx.onKeyDown($event); });
-    } }, inputs: { language: "language", options: "options" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], attrs: _c1$H, decls: 4, vars: 2, consts: [[3, "formField"], ["sme-lint-disable", "", 1, "sme-code-editor", "sme-form-field-editor"], ["editor", ""], [3, "alert", 4, "ngIf"], [3, "alert"]], template: function CodeFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { language: "language", options: "options" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], attrs: _c1$J, decls: 4, vars: 2, consts: [[3, "formField"], ["sme-lint-disable", "", 1, "sme-code-editor", "sme-form-field-editor"], ["editor", ""], [3, "alert", 4, "ngIf"], [3, "alert"]], template: function CodeFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "sme-form-field-layout", 0);
         i0.ɵɵelement(1, "div", 1, 2);
         i0.ɵɵtemplate(3, CodeFormFieldComponent_sme_validation_alert_3_Template, 1, 1, "sme-validation-alert", 3);
@@ -18863,7 +19032,7 @@ function ComboboxFormFieldLoaderComponent_ng_container_3_Template(rf, ctx) { if
     i0.ɵɵproperty("ngForOf", ctx_r2.resolveComponentMember(ctx_r2.propertySchema.options.itemsBinding));
 } }
 const _c0$1d = ["singleSelectTemplate"];
-const _c1$G = ["multiSelectTemplate"];
+const _c1$I = ["multiSelectTemplate"];
 const _c2$f = ["listbox"];
 const _c3$a = ["dropDown"];
 const _c4$8 = ["type", "combobox"];
@@ -19274,7 +19443,7 @@ let ComboboxFormFieldComponent = class ComboboxFormFieldComponent extends SmeInt
 /** @nocollapse */ ComboboxFormFieldComponent.ɵfac = function ComboboxFormFieldComponent_Factory(t) { return new (t || ComboboxFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
 /** @nocollapse */ ComboboxFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ComboboxFormFieldComponent, selectors: [["sme-form-field", "type", "combobox"], ["sme-form-field", "type", "select"]], viewQuery: function ComboboxFormFieldComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$1d, 7);
-        i0.ɵɵviewQuery(_c1$G, 7);
+        i0.ɵɵviewQuery(_c1$I, 7);
         i0.ɵɵviewQuery(_c2$f, 5);
         i0.ɵɵviewQuery(_c3$a, 5);
     } if (rf & 2) {
@@ -19447,7 +19616,7 @@ class SelectFormFieldDirective {
     }], null, null); })();
 
 const _c0$1c = ["dropDown"];
-const _c1$F = ["calendar"];
+const _c1$H = ["calendar"];
 const _c2$e = ["type", "date"];
 /**
  * Date Form Field Component
@@ -19568,7 +19737,7 @@ class DateFormFieldComponent extends DateLikeFormFieldComponent {
 /** @nocollapse */ DateFormFieldComponent.ɵfac = function DateFormFieldComponent_Factory(t) { return new (t || DateFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
 /** @nocollapse */ DateFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DateFormFieldComponent, selectors: [["sme-form-field", "type", "date"]], viewQuery: function DateFormFieldComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$1c, 5);
-        i0.ɵɵviewQuery(_c1$F, 5);
+        i0.ɵɵviewQuery(_c1$H, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropDown = _t.first);
@@ -19621,7 +19790,7 @@ class DateFormFieldComponent extends DateLikeFormFieldComponent {
         }] }); })();
 
 const _c0$1b = ["dropDown"];
-const _c1$E = ["calendar"];
+const _c1$G = ["calendar"];
 const _c2$d = ["clock"];
 const _c3$9 = ["type", "datetime"];
 /**
@@ -19772,7 +19941,7 @@ class DateTimeFormFieldComponent extends DateLikeFormFieldComponent {
 /** @nocollapse */ DateTimeFormFieldComponent.ɵfac = function DateTimeFormFieldComponent_Factory(t) { return new (t || DateTimeFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
 /** @nocollapse */ DateTimeFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DateTimeFormFieldComponent, selectors: [["sme-form-field", "type", "datetime"]], viewQuery: function DateTimeFormFieldComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$1b, 5);
-        i0.ɵɵviewQuery(_c1$E, 5);
+        i0.ɵɵviewQuery(_c1$G, 5);
         i0.ɵɵviewQuery(_c2$d, 5);
     } if (rf & 2) {
         let _t;
@@ -19888,7 +20057,7 @@ class DateTimeRangeOptionComponent {
         }] }); })();
 
 const _c0$1a = ["listbox"];
-const _c1$D = ["dropDown"];
+const _c1$F = ["dropDown"];
 const _c2$c = ["startFormField"];
 const _c3$8 = ["endFormField"];
 const _c4$7 = ["type", "datetimerange"];
@@ -20319,7 +20488,7 @@ DateTimeRangeFormFieldComponent.endProperty = 'end';
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.options = _t);
     } }, viewQuery: function DateTimeRangeFormFieldComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$1a, 5);
-        i0.ɵɵviewQuery(_c1$D, 5);
+        i0.ɵɵviewQuery(_c1$F, 5);
         i0.ɵɵviewQuery(_c2$c, 5);
         i0.ɵɵviewQuery(_c3$8, 5);
     } if (rf & 2) {
@@ -20482,7 +20651,7 @@ class WebkitFileSystem {
 WebkitFileSystem.isDirectoryPropertyName = '__SME_isDirectory__';
 
 const _c0$19 = ["file"];
-const _c1$C = ["type", "file"];
+const _c1$E = ["type", "file"];
 function FileFormFieldComponent_ng_container_16_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 12);
@@ -20777,7 +20946,7 @@ let FileFormFieldComponent = class FileFormFieldComponent extends SmeInternalFor
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileInput = _t.first);
-    } }, inputs: { multiple: "multiple", fileTypes: "fileTypes", buttonLabel: "buttonLabel" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c1$C, decls: 18, vars: 19, consts: [[3, "formField"], [1, "sme-file-drop-zone", "sme-subform-indent-none", "sme-subform-no-bottom-margin"], [1, "sme-padding-inset-xs", "sme-margin-bottom-xs", "sme-arrange-stack-v", 3, "smeDrop"], [1, "sme-file-input", "sme-margin-bottom-xxs"], ["type", "file", 1, "sme-layout-none", 3, "disabled", "change"], ["file", ""], ["type", "button", 1, "sme-button-primary", "sme-button-auto-width", "sme-margin-right-xs", 3, "smeDisabled", "click"], [1, "sme-position-flex-align-center"], [1, "sme-margin-bottom-xs"], [4, "ngIf"], [3, "alert"], ["class", "sme-arrange-stack-h sme-margin-bottom-xs", 4, "ngFor", "ngForOf"], [1, "sme-arrange-stack-h", "sme-margin-bottom-xs"], [1, "sme-position-flex-none", "sme-icon", "sme-icon-size-lg"], [1, "sme-position-flex-auto", "sme-padding-left-sm", "sme-arrange-stack-v"], [1, "sme-position-flex-auto", "sme-arrange-ellipsis", "sme-padding-inset-none"], ["type", "button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", 3, "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-cancel", "sme-color-red"]], template: function FileFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { multiple: "multiple", fileTypes: "fileTypes", buttonLabel: "buttonLabel" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c1$E, decls: 18, vars: 19, consts: [[3, "formField"], [1, "sme-file-drop-zone", "sme-subform-indent-none", "sme-subform-no-bottom-margin"], [1, "sme-padding-inset-xs", "sme-margin-bottom-xs", "sme-arrange-stack-v", 3, "smeDrop"], [1, "sme-file-input", "sme-margin-bottom-xxs"], ["type", "file", 1, "sme-layout-none", 3, "disabled", "change"], ["file", ""], ["type", "button", 1, "sme-button-primary", "sme-button-auto-width", "sme-margin-right-xs", 3, "smeDisabled", "click"], [1, "sme-position-flex-align-center"], [1, "sme-margin-bottom-xs"], [4, "ngIf"], [3, "alert"], ["class", "sme-arrange-stack-h sme-margin-bottom-xs", 4, "ngFor", "ngForOf"], [1, "sme-arrange-stack-h", "sme-margin-bottom-xs"], [1, "sme-position-flex-none", "sme-icon", "sme-icon-size-lg"], [1, "sme-position-flex-auto", "sme-padding-left-sm", "sme-arrange-stack-v"], [1, "sme-position-flex-auto", "sme-arrange-ellipsis", "sme-padding-inset-none"], ["type", "button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", 3, "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-cancel", "sme-color-red"]], template: function FileFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
         const _r7 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "sme-form-field-layout", 0)(1, "fieldset", 1)(2, "sme-drop-zone", 2);
         i0.ɵɵlistener("smeDrop", function FileFormFieldComponent_Template_sme_drop_zone_smeDrop_2_listener($event) { return ctx.onDrop($event); });
@@ -20981,35 +21150,70 @@ JsonFormFieldComponent = __decorate([
         args: [{ selector: 'sme-form-field[type="json"]', template: "<sme-form-field-layout [formField]=\"this\">\r\n  <div class=\"sme-json sme-form-field-editor\">\r\n    <textarea [(ngModel)]=\"jsonText\" rows=\"10\">\r\n    </textarea>\r\n  </div>\r\n  <span class=\"sme-screen-reader\" [id]=\"idBag.detailsSpan\">{{details}}</span>\r\n  <sme-validation-alert [alert]=\"alert\"></sme-validation-alert>\r\n</sme-form-field-layout>\r\n" }]
     }], function () { return [{ type: i0.Injector }]; }, null); })();
 
-const _c0$17 = ["type", "list"];
+class ListFormFieldAccessibilityManagerService {
+    constructor(formFieldAccessibilityManagerBaseService) {
+        this.formFieldAccessibilityManagerBaseService = formFieldAccessibilityManagerBaseService;
+    }
+    /**
+     * It handles the focus when deleting an item from the list.
+     * @param value the value for the list.
+     * @param addButton the element reference for the add button.
+     * @param hostElement the element reference for the host element.
+     * @returns void
+     */
+    delete(value, addButton, hostElement) {
+        this.formFieldAccessibilityManagerBaseService.listFormFieldFocusHandlerOnKeyboardAction(value, addButton, hostElement);
+    }
+    /**
+     * It handles the focus when adding an item to the list.
+     * @param value the value for the list.
+     * @param addButton the element reference for the add button.
+     * @param hostElement the element reference for the host element.
+     * @returns void
+     */
+    add(value, addButton, hostElement) {
+        this.formFieldAccessibilityManagerBaseService.listFormFieldFocusHandlerOnKeyboardAction(value, addButton, hostElement, false);
+    }
+}
+/** @nocollapse */ ListFormFieldAccessibilityManagerService.ɵfac = function ListFormFieldAccessibilityManagerService_Factory(t) { return new (t || ListFormFieldAccessibilityManagerService)(i0.ɵɵinject(FormFieldAccessibilityManagerBaseService)); };
+/** @nocollapse */ ListFormFieldAccessibilityManagerService.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: ListFormFieldAccessibilityManagerService, factory: ListFormFieldAccessibilityManagerService.ɵfac, providedIn: 'root' });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListFormFieldAccessibilityManagerService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], function () { return [{ type: FormFieldAccessibilityManagerBaseService }]; }, null); })();
+
+const _c0$17 = ["addButton"];
+const _c1$D = ["type", "list"];
 function ListFormFieldComponent_div_1_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 7)(1, "input", 8);
-    i0.ɵɵlistener("ngModelChange", function ListFormFieldComponent_div_1_div_1_Template_input_ngModelChange_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r5); const i_r3 = restoredCtx.index; const ctx_r4 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r4.value[i_r3] = $event)); })("input", function ListFormFieldComponent_div_1_div_1_Template_input_input_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r6 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r6.triggerValueChange()); });
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 8)(1, "input", 9);
+    i0.ɵɵlistener("ngModelChange", function ListFormFieldComponent_div_1_div_1_Template_input_ngModelChange_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r6); const i_r4 = restoredCtx.index; const ctx_r5 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r5.value[i_r4] = $event)); })("input", function ListFormFieldComponent_div_1_div_1_Template_input_input_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r7 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r7.triggerValueChange()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "button", 9);
-    i0.ɵɵlistener("click", function ListFormFieldComponent_div_1_div_1_Template_button_click_2_listener() { const restoredCtx = i0.ɵɵrestoreView(_r5); const i_r3 = restoredCtx.index; const ctx_r7 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r7.removeItemAt(i_r3)); });
-    i0.ɵɵelement(3, "span", 10);
+    i0.ɵɵelementStart(2, "button", 10);
+    i0.ɵɵlistener("click", function ListFormFieldComponent_div_1_div_1_Template_button_click_2_listener() { const restoredCtx = i0.ɵɵrestoreView(_r6); const i_r4 = restoredCtx.index; const ctx_r8 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r8.removeItemAt(i_r4)); });
+    i0.ɵɵelement(3, "span", 11);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const i_r3 = ctx.index;
+    const i_r4 = ctx.index;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngModel", ctx_r1.value[i_r3]);
-    i0.ɵɵattribute("aria-label", ctx_r1.strings.MsftSmeShell.Angular.Form.List.itemAriaLabel.format(ctx_r1.label, i_r3 + 1, ctx_r1.value.length));
+    i0.ɵɵproperty("ngModel", ctx_r1.value[i_r4]);
+    i0.ɵɵattribute("aria-label", ctx_r1.strings.MsftSmeShell.Angular.Form.List.itemAriaLabel.format(ctx_r1.label, i_r4 + 1, ctx_r1.value.length));
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("title", ctx_r1.strings.MsftSmeShell.Angular.Form.List.removeButtonTooltip);
     i0.ɵɵattribute("aria-label", ctx_r1.strings.MsftSmeShell.Angular.Form.List.removeButtonAriaLabel);
 } }
 function ListFormFieldComponent_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
+    const _r10 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 3);
     i0.ɵɵtemplate(1, ListFormFieldComponent_div_1_div_1_Template, 4, 4, "div", 4);
-    i0.ɵɵelementStart(2, "button", 5);
-    i0.ɵɵlistener("click", function ListFormFieldComponent_div_1_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r9); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.addListItem()); });
-    i0.ɵɵelement(3, "span", 6);
-    i0.ɵɵelementStart(4, "span");
-    i0.ɵɵtext(5);
+    i0.ɵɵelementStart(2, "button", 5, 6);
+    i0.ɵɵlistener("click", function ListFormFieldComponent_div_1_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.addListItem()); });
+    i0.ɵɵelement(4, "span", 7);
+    i0.ɵɵelementStart(5, "span");
+    i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -21017,8 +21221,8 @@ function ListFormFieldComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngForOf", ctx_r0.value)("ngForTrackBy", ctx_r0.trackByIndex);
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("title", ctx_r0.strings.MsftSmeShell.Angular.Form.List.addButtonTooltip);
-    i0.ɵɵattribute("aria-label", ctx_r0.strings.MsftSmeShell.Angular.Form.List.addButtonAriaLabel);
-    i0.ɵɵadvance(3);
+    i0.ɵɵattribute("aria-label", ctx_r0.addButtonAriaLabel);
+    i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.strings.MsftSmeShell.Angular.Form.List.addButtonAriaLabel);
 } }
 /**
@@ -21028,8 +21232,9 @@ class ListFormFieldComponent extends SmeInternalFormFieldComponent {
     /**
      * Initializes a new instance of the ListFormFieldComponent
      */
-    constructor(injector) {
+    constructor(injector, listFormFieldAccessibilityManagerService) {
         super(injector);
+        this.listFormFieldAccessibilityManagerService = listFormFieldAccessibilityManagerService;
     }
     /**
      * The source name to use for logging
@@ -21043,6 +21248,15 @@ class ListFormFieldComponent extends SmeInternalFormFieldComponent {
     get ariaLabel() {
         return this.getMergedDescriptionLabel();
     }
+    /**
+     * It gets the aria label for the add button that can respect when the field is required.
+     */
+    get addButtonAriaLabel() {
+        if (this.required) {
+            return this.strings.MsftSmeShell.Angular.Calendar.AriaLabel.Required.format(this.strings.MsftSmeShell.Angular.Form.List.addButtonAriaLabel);
+        }
+        return this.strings.MsftSmeShell.Angular.Form.List.addButtonAriaLabel;
+    }
     /**
      * The method called after the component is initialized.
      */
@@ -21055,6 +21269,7 @@ class ListFormFieldComponent extends SmeInternalFormFieldComponent {
      */
     addListItem(value = '') {
         this.value = [...this.value, value];
+        this.listFormFieldAccessibilityManagerService.add(this.value, this.addButton, this.hostElement);
     }
     /**
      * Removes an item at the given index
@@ -21063,10 +21278,7 @@ class ListFormFieldComponent extends SmeInternalFormFieldComponent {
         const value = [...this.value];
         value.splice(index, 1);
         this.value = value;
-        const firstFocusable = Dom.getFirstFocusableDescendent(this.hostElement.nativeElement);
-        if (firstFocusable) {
-            firstFocusable.focus();
-        }
+        this.listFormFieldAccessibilityManagerService.delete(this.value, this.addButton, this.hostElement);
     }
     /**
      * The method called when a <select> element's value changes.
@@ -21107,12 +21319,17 @@ class ListFormFieldComponent extends SmeInternalFormFieldComponent {
         return super.validate(c);
     }
 }
-/** @nocollapse */ ListFormFieldComponent.ɵfac = function ListFormFieldComponent_Factory(t) { return new (t || ListFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
-/** @nocollapse */ ListFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ListFormFieldComponent, selectors: [["sme-form-field", "type", "list"]], hostVars: 1, hostBindings: function ListFormFieldComponent_HostBindings(rf, ctx) { if (rf & 2) {
+/** @nocollapse */ ListFormFieldComponent.ɵfac = function ListFormFieldComponent_Factory(t) { return new (t || ListFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(ListFormFieldAccessibilityManagerService)); };
+/** @nocollapse */ ListFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ListFormFieldComponent, selectors: [["sme-form-field", "type", "list"]], viewQuery: function ListFormFieldComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0$17, 5);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.addButton = _t.first);
+    } }, hostVars: 1, hostBindings: function ListFormFieldComponent_HostBindings(rf, ctx) { if (rf & 2) {
         i0.ɵɵattribute("aria-label", ctx.ariaLabel);
-    } }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$17, decls: 3, vars: 3, consts: [[3, "formField"], ["class", "sme-margin-bottom-xs sme-form-field-editor", 4, "ngIf"], [3, "alert"], [1, "sme-margin-bottom-xs", "sme-form-field-editor"], ["class", "sme-arrange-stack-h sme-margin-bottom-xs sme-form-field-width", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["type", "button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-margin-bottom-xs", 3, "title", "click"], [1, "sme-icon", "sme-icon-add"], [1, "sme-arrange-stack-h", "sme-margin-bottom-xs", "sme-form-field-width"], ["type", "text", 1, "sme-position-flex-auto", "sme-margin-right-xs", 3, "ngModel", "ngModelChange", "input"], ["type", "button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", 3, "title", "click"], [1, "sme-icon", "sme-icon-cancel", "sme-color-red"]], template: function ListFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c1$D, decls: 3, vars: 3, consts: [[3, "formField"], ["class", "sme-margin-bottom-xs sme-form-field-editor", 4, "ngIf"], [3, "alert"], [1, "sme-margin-bottom-xs", "sme-form-field-editor"], ["class", "sme-arrange-stack-h sme-margin-bottom-xs sme-form-field-width", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["type", "button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-margin-bottom-xs", 3, "title", "click"], ["addButton", ""], [1, "sme-icon", "sme-icon-add"], [1, "sme-arrange-stack-h", "sme-margin-bottom-xs", "sme-form-field-width"], ["type", "text", 1, "sme-position-flex-auto", "sme-margin-right-xs", 3, "ngModel", "ngModelChange", "input"], ["type", "button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", 3, "title", "click"], [1, "sme-icon", "sme-icon-cancel", "sme-color-red"]], template: function ListFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "sme-form-field-layout", 0);
-        i0.ɵɵtemplate(1, ListFormFieldComponent_div_1_Template, 6, 5, "div", 1);
+        i0.ɵɵtemplate(1, ListFormFieldComponent_div_1_Template, 7, 5, "div", 1);
         i0.ɵɵelement(2, "sme-validation-alert", 2);
         i0.ɵɵelementEnd();
     } if (rf & 2) {
@@ -21124,14 +21341,17 @@ class ListFormFieldComponent extends SmeInternalFormFieldComponent {
     } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgModel, TooltipDirective, ValidationAlertComponent, FormFieldLayoutComponent], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListFormFieldComponent, [{
         type: Component,
-        args: [{ selector: 'sme-form-field[type="list"]', template: "<sme-form-field-layout [formField]=\"this\">\r\n  <div *ngIf=\"value\" class=\"sme-margin-bottom-xs sme-form-field-editor\">\r\n    <div *ngFor=\"let item of value;trackBy: trackByIndex; let i = index\"\r\n      class=\"sme-arrange-stack-h sme-margin-bottom-xs sme-form-field-width\">\r\n      <input class=\"sme-position-flex-auto sme-margin-right-xs\" type=\"text\" [(ngModel)]=\"value[i]\"\r\n        (input)=\"triggerValueChange()\"\r\n        [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.List.itemAriaLabel.format(label, i + 1, value.length)\" />\r\n      <button type=\"button\" class=\"sme-button-trigger sme-position-flex-none sme-button-auto-width\"\r\n        [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.List.removeButtonAriaLabel\"\r\n        [title]=\"strings.MsftSmeShell.Angular.Form.List.removeButtonTooltip\" (click)=\"removeItemAt(i)\">\r\n        <span class=\"sme-icon sme-icon-cancel sme-color-red\"></span>\r\n      </button>\r\n    </div>\r\n    <button type=\"button\" class=\"sme-button-trigger sme-button-auto-width sme-margin-bottom-xs\"\r\n      [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.List.addButtonAriaLabel\"\r\n      [title]=\"strings.MsftSmeShell.Angular.Form.List.addButtonTooltip\" (click)=\"addListItem()\">\r\n      <span class=\"sme-icon sme-icon-add\"></span>\r\n      <span>{{strings.MsftSmeShell.Angular.Form.List.addButtonAriaLabel}}</span>\r\n    </button>\r\n  </div>\r\n  <sme-validation-alert [alert]=\"alert\"></sme-validation-alert>\r\n</sme-form-field-layout>" }]
-    }], function () { return [{ type: i0.Injector }]; }, { ariaLabel: [{
+        args: [{ selector: 'sme-form-field[type="list"]', template: "<sme-form-field-layout [formField]=\"this\">\r\n  <div *ngIf=\"value\" class=\"sme-margin-bottom-xs sme-form-field-editor\">\r\n    <div *ngFor=\"let item of value;trackBy: trackByIndex; let i = index\"\r\n      class=\"sme-arrange-stack-h sme-margin-bottom-xs sme-form-field-width\">\r\n      <input class=\"sme-position-flex-auto sme-margin-right-xs\" type=\"text\" [(ngModel)]=\"value[i]\"\r\n        (input)=\"triggerValueChange()\"\r\n        [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.List.itemAriaLabel.format(label, i + 1, value.length)\" />\r\n      <button type=\"button\" class=\"sme-button-trigger sme-position-flex-none sme-button-auto-width\"\r\n        [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.List.removeButtonAriaLabel\"\r\n        [title]=\"strings.MsftSmeShell.Angular.Form.List.removeButtonTooltip\" (click)=\"removeItemAt(i)\">\r\n        <span class=\"sme-icon sme-icon-cancel sme-color-red\"></span>\r\n      </button>\r\n    </div>\r\n    <button #addButton type=\"button\" class=\"sme-button-trigger sme-button-auto-width sme-margin-bottom-xs\"\r\n      [attr.aria-label]=\"addButtonAriaLabel\"\r\n      [title]=\"strings.MsftSmeShell.Angular.Form.List.addButtonTooltip\" (click)=\"addListItem()\">\r\n      <span class=\"sme-icon sme-icon-add\"></span>\r\n      <span>{{ strings.MsftSmeShell.Angular.Form.List.addButtonAriaLabel }}</span>\r\n    </button>\r\n  </div>\r\n  <sme-validation-alert [alert]=\"alert\"></sme-validation-alert>\r\n</sme-form-field-layout>" }]
+    }], function () { return [{ type: i0.Injector }, { type: ListFormFieldAccessibilityManagerService }]; }, { addButton: [{
+            type: ViewChild,
+            args: ['addButton']
+        }], ariaLabel: [{
             type: HostBinding,
             args: ['attr.aria-label']
         }] }); })();
 
 const _c0$16 = ["input"];
-const _c1$B = ["container"];
+const _c1$C = ["container"];
 const _c2$b = ["incrementButton"];
 const _c3$7 = ["decrementButton"];
 const _c4$6 = ["type", "number"];
@@ -21154,19 +21374,25 @@ function NumberFormFieldComponent_div_3_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵlistener("click", function NumberFormFieldComponent_div_3_span_4_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r8); const ctx_r9 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r9.decrement()); });
     i0.ɵɵelement(6, "span", 15);
     i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r4 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(1);
+    i0.ɵɵattribute("aria-label", ctx_r4.ariaLabelIncrease);
+    i0.ɵɵadvance(3);
+    i0.ɵɵattribute("aria-label", ctx_r4.ariaLabelDecrease);
 } }
 function NumberFormFieldComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 5, 6)(2, "input", 7, 8);
     i0.ɵɵlistener("ngModelChange", function NumberFormFieldComponent_div_3_Template_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.value = $event); })("focus", function NumberFormFieldComponent_div_3_Template_input_focus_2_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.onInputFocus($event)); })("focusout", function NumberFormFieldComponent_div_3_Template_input_focusout_2_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.onInputFocusOut($event)); })("keydown", function NumberFormFieldComponent_div_3_Template_input_keydown_2_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r14 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r14.onInputKeydown($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, NumberFormFieldComponent_div_3_span_4_Template, 7, 0, "span", 9);
+    i0.ɵɵtemplate(4, NumberFormFieldComponent_div_3_span_4_Template, 7, 2, "span", 9);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngModel", ctx_r1.value)("required", ctx_r1.required)("disabled", ctx_r1.loadingOrDisabled)("max", ctx_r1.max)("min", ctx_r1.min)("step", ctx_r1.step)("placeholder", ctx_r1.placeholder);
-    i0.ɵɵattribute("role", ctx_r1.showSpinButton ? "spinButton" : null)("aria-valuemax", ctx_r1.max)("aria-valuemin", ctx_r1.min)("aria-label", ctx_r1.label)("aria-required", ctx_r1.required);
+    i0.ɵɵattribute("role", ctx_r1.showSpinButton ? "spinbutton" : null)("aria-valuemax", ctx_r1.max)("aria-valuemin", ctx_r1.min)("aria-label", ctx_r1.label)("aria-required", ctx_r1.required);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.showSpinButton);
 } }
@@ -21215,6 +21441,18 @@ let NumberFormFieldComponent = class NumberFormFieldComponent extends SmeInterna
             ? MsftSme.isNullOrUndefined(this.step) ? 1 : this.step
             : this.incrementBy;
     }
+    /**
+     * Getter aria label increase for spin button increase.
+     */
+    get ariaLabelIncrease() {
+        return this.strings.MsftSmeShell.Angular.Form.SpinButton.increase.format(this.incrementBy);
+    }
+    /**
+     * Getter aria label increase for spin button decrease.
+     */
+    get ariaLabelDecrease() {
+        return this.strings.MsftSmeShell.Angular.Form.SpinButton.decrease.format(this.incrementBy);
+    }
     /**
      * Handle keydown events on the number input
      */
@@ -21387,7 +21625,7 @@ let NumberFormFieldComponent = class NumberFormFieldComponent extends SmeInterna
 /** @nocollapse */ NumberFormFieldComponent.ɵfac = function NumberFormFieldComponent_Factory(t) { return new (t || NumberFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
 /** @nocollapse */ NumberFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: NumberFormFieldComponent, selectors: [["sme-form-field", "type", "number"]], viewQuery: function NumberFormFieldComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$16, 5);
-        i0.ɵɵviewQuery(_c1$B, 5);
+        i0.ɵɵviewQuery(_c1$C, 5);
         i0.ɵɵviewQuery(_c2$b, 5);
         i0.ɵɵviewQuery(_c3$7, 5);
     } if (rf & 2) {
@@ -21459,7 +21697,7 @@ NumberFormFieldComponent = __decorate([
 ], NumberFormFieldComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NumberFormFieldComponent, [{
         type: Component,
-        args: [{ selector: 'sme-form-field[type="number"]', template: "<sme-form-field-layout [formField]=\"this\">\r\n  <div class=\"sme-form-field-editor\">\r\n    <span *ngIf=\"readonly\">{{ value }}</span>\r\n    <div #container *ngIf=\"!readonly\" class=\"sme-number-form-field-container\">\r\n      <input #input type=\"number\" autocomplete=\"off\" [(ngModel)]=\"value\" class=\"sme-hidden-focus\" [attr.role]=\"showSpinButton ? 'spinButton': null\"\r\n        [required]=\"required\" [disabled]=\"loadingOrDisabled\" [max]=\"max\" [min]=\"min\" [step]=\"step\" [placeholder]=\"placeholder\"\r\n        [attr.aria-valuemax]=\"max\"  [attr.aria-valuemin]=\"min\" [attr.aria-label]=\"label\" [attr.aria-required]=\"required\"\r\n        (focus)=\"onInputFocus($event)\" (focusout)=\"onInputFocusOut($event)\" (keydown)=\"onInputKeydown($event)\">\r\n      <span *ngIf=\"showSpinButton\" class=\"sme-arrange-stack-v sme-form-field-number-button-group\">\r\n        <button #incrementButton type=\"button\" class=\"sme-button-auto-width\" tabindex=\"-1\" (click)=\"increment()\">\r\n          <span class=\"sme-icon sme-icon-chevronUpSmall\"></span>\r\n        </button>\r\n        <button #decrementButton type=\"button\" class=\"sme-button-auto-width\" tabindex=\"-1\" (click)=\"decrement()\">\r\n          <span class=\"sme-icon sme-icon-chevronDownSmall\"></span>\r\n        </button>\r\n      </span>\r\n    </div>\r\n  </div>\r\n  <sme-validation-alert [alert]=\"alert\"></sme-validation-alert>\r\n</sme-form-field-layout>\r\n" }]
+        args: [{ selector: 'sme-form-field[type="number"]', template: "<sme-form-field-layout [formField]=\"this\">\r\n  <div class=\"sme-form-field-editor\">\r\n    <span *ngIf=\"readonly\">{{ value }}</span>\r\n    <div #container *ngIf=\"!readonly\" class=\"sme-number-form-field-container\">\r\n      <input #input type=\"number\" autocomplete=\"off\" [(ngModel)]=\"value\" class=\"sme-hidden-focus\" [attr.role]=\"showSpinButton ? 'spinbutton': null\"\r\n        [required]=\"required\" [disabled]=\"loadingOrDisabled\" [max]=\"max\" [min]=\"min\" [step]=\"step\" [placeholder]=\"placeholder\"\r\n        [attr.aria-valuemax]=\"max\"  [attr.aria-valuemin]=\"min\" [attr.aria-label]=\"label\" [attr.aria-required]=\"required\"\r\n        (focus)=\"onInputFocus($event)\" (focusout)=\"onInputFocusOut($event)\" (keydown)=\"onInputKeydown($event)\">\r\n      <span *ngIf=\"showSpinButton\" class=\"sme-arrange-stack-v sme-form-field-number-button-group\">\r\n        <button #incrementButton type=\"button\" class=\"sme-button-auto-width\" tabindex=\"-1\" (click)=\"increment()\" [attr.aria-label]=\"ariaLabelIncrease\">\r\n          <span class=\"sme-icon sme-icon-chevronUpSmall\"></span>\r\n        </button>\r\n        <button #decrementButton type=\"button\" class=\"sme-button-auto-width\" tabindex=\"-1\" (click)=\"decrement()\" [attr.aria-label]=\"ariaLabelDecrease\">\r\n          <span class=\"sme-icon sme-icon-chevronDownSmall\"></span>\r\n        </button>\r\n      </span>\r\n    </div>\r\n  </div>\r\n  <sme-validation-alert [alert]=\"alert\"></sme-validation-alert>\r\n</sme-form-field-layout>\r\n" }]
     }], function () { return [{ type: i0.Injector }]; }, { input: [{
             type: ViewChild,
             args: ['input']
@@ -21484,6 +21722,56 @@ NumberFormFieldComponent = __decorate([
             type: Input
         }] }); })();
 
+class OrderedListFormFieldAccessibilityManagerService {
+    constructor(formFieldAccessibilityManagerBaseService) {
+        this.formFieldAccessibilityManagerBaseService = formFieldAccessibilityManagerBaseService;
+    }
+    /**
+     * It handles the focus when deleting an item from the list.
+     * @param value the value for the list.
+     * @param addButton the element reference for the add button.
+     * @param hostElement the element reference for the host element.
+     * @returns void
+     */
+    delete(value, addButton, hostElement) {
+        this.formFieldAccessibilityManagerBaseService.listFormFieldFocusHandlerOnKeyboardAction(value, addButton, hostElement);
+    }
+    /**
+     * It handles the focus when adding an item to the list.
+     * @param value the value for the list.
+     * @param addButton the element reference for the add button.
+     * @param hostElement the element reference for the host element.
+     * @returns void
+     */
+    add(value, addButton, hostElement) {
+        this.formFieldAccessibilityManagerBaseService.listFormFieldFocusHandlerOnKeyboardAction(value, addButton, hostElement, false);
+    }
+    /**
+     * It handles the focus when promoting an item in the list.
+     * @param hostElement The element reference for the host element.
+     * @param index the current index.
+     */
+    promote(value, hostElement, buttonId) {
+        this.formFieldAccessibilityManagerBaseService.deferredFocusOnTargetBySelector(value, hostElement, buttonId);
+    }
+    /**
+     * It handles the focus when demoting an item in the list.
+     * @param hostElement The element reference for the host element.
+     * @param index the current index.
+     */
+    demote(value, hostElement, buttonId) {
+        this.formFieldAccessibilityManagerBaseService.deferredFocusOnTargetBySelector(value, hostElement, buttonId);
+    }
+}
+/** @nocollapse */ OrderedListFormFieldAccessibilityManagerService.ɵfac = function OrderedListFormFieldAccessibilityManagerService_Factory(t) { return new (t || OrderedListFormFieldAccessibilityManagerService)(i0.ɵɵinject(FormFieldAccessibilityManagerBaseService)); };
+/** @nocollapse */ OrderedListFormFieldAccessibilityManagerService.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: OrderedListFormFieldAccessibilityManagerService, factory: OrderedListFormFieldAccessibilityManagerService.ɵfac, providedIn: 'root' });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OrderedListFormFieldAccessibilityManagerService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], function () { return [{ type: FormFieldAccessibilityManagerBaseService }]; }, null); })();
+
 function OrderedListFormFieldLoaderComponent_sme_option_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "sme-option", 4);
 } if (rf & 2) {
@@ -21507,7 +21795,8 @@ function OrderedListFormFieldLoaderComponent_ng_container_3_Template(rf, ctx) {
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngForOf", ctx_r2.resolveComponentMember(ctx_r2.propertySchema.options.itemsBinding));
 } }
-const _c0$15 = ["type", "orderedlist"];
+const _c0$15 = ["addButton"];
+const _c1$B = ["type", "orderedlist"];
 function OrderedListFormFieldComponent_div_1_div_1_p_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 14);
     i0.ɵɵtext(1);
@@ -21515,9 +21804,9 @@ function OrderedListFormFieldComponent_div_1_div_1_p_3_Template(rf, ctx) { if (r
 } if (rf & 2) {
     const i_r4 = i0.ɵɵnextContext().index;
     const ctx_r5 = i0.ɵɵnextContext(2);
-    i0.ɵɵattribute("aria-describedby", ctx_r5.idBag.detailsSpan + i_r4);
+    i0.ɵɵattribute("aria-label", ctx_r5.idBag.detailsSpan + i_r4);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r5.arrayGetValueDisplayString(ctx_r5.value[i_r4]));
+    i0.ɵɵtextInterpolate1(" ", ctx_r5.arrayGetValueDisplayString(ctx_r5.value[i_r4]), "");
 } }
 function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_ng_container_1_sme_option_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "sme-option", 18);
@@ -21539,22 +21828,22 @@ function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_ng_container
 function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "sme-form-field", 15);
-    i0.ɵɵlistener("ngModelChange", function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_Template_sme_form_field_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r17); const i_r4 = i0.ɵɵnextContext().index; const ctx_r16 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r16.value[i_r4] = $event)); })("ngModelChange", function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_Template_sme_form_field_ngModelChange_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r19 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r19.triggerValueChange()); })("customValidate", function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_Template_sme_form_field_customValidate_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r20 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r20.newItemCheck()); });
+    i0.ɵɵlistener("ngModelChange", function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_Template_sme_form_field_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r17); const i_r4 = i0.ɵɵnextContext().index; const ctx_r16 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r16.value[i_r4] = $event)); })("ngModelChange", function OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_Template_sme_form_field_ngModelChange_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r19 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r19.triggerValueChange()); });
     i0.ɵɵtemplate(1, OrderedListFormFieldComponent_div_1_div_1_sme_form_field_5_ng_container_1_Template, 2, 1, "ng-container", 16);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r21 = i0.ɵɵnextContext();
-    const item_r3 = ctx_r21.$implicit;
-    const i_r4 = ctx_r21.index;
+    const ctx_r20 = i0.ɵɵnextContext();
+    const item_r3 = ctx_r20.$implicit;
+    const i_r4 = ctx_r20.index;
     const ctx_r6 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("utaId", item_r3 ? item_r3.toString() + "-combobox" : "new-combobox")("hideHeader", true)("valueComparator", ctx_r6.valueComparator)("ngModel", ctx_r6.value[i_r4])("label", ctx_r6.label)("searchable", ctx_r6.searchable);
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngForOf", ctx_r6.options);
 } }
 function OrderedListFormFieldComponent_div_1_div_1_button_6_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
+    const _r23 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 19);
-    i0.ɵɵlistener("click", function OrderedListFormFieldComponent_div_1_div_1_button_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r24); const i_r4 = i0.ɵɵnextContext().index; const ctx_r22 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r22.promoteItemAt(i_r4)); });
+    i0.ɵɵlistener("click", function OrderedListFormFieldComponent_div_1_div_1_button_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r23); const i_r4 = i0.ɵɵnextContext().index; const ctx_r21 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r21.promoteItemAt(i_r4)); });
     i0.ɵɵelement(1, "span", 20);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -21564,9 +21853,9 @@ function OrderedListFormFieldComponent_div_1_div_1_button_6_Template(rf, ctx) {
     i0.ɵɵattribute("aria-label", ctx_r7.strings.MsftSmeShell.Angular.Form.OrderedList.promoteButtonAriaLabel);
 } }
 function OrderedListFormFieldComponent_div_1_div_1_button_7_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
+    const _r27 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 21);
-    i0.ɵɵlistener("click", function OrderedListFormFieldComponent_div_1_div_1_button_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r28); const i_r4 = i0.ɵɵnextContext().index; const ctx_r26 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r26.demoteItemAt(i_r4)); });
+    i0.ɵɵlistener("click", function OrderedListFormFieldComponent_div_1_div_1_button_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r27); const i_r4 = i0.ɵɵnextContext().index; const ctx_r25 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r25.demoteItemAt(i_r4)); });
     i0.ɵɵelement(1, "span", 22);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -21576,9 +21865,9 @@ function OrderedListFormFieldComponent_div_1_div_1_button_7_Template(rf, ctx) {
     i0.ɵɵattribute("aria-label", ctx_r8.strings.MsftSmeShell.Angular.Form.OrderedList.demoteButtonAriaLabel);
 } }
 function OrderedListFormFieldComponent_div_1_div_1_button_8_Template(rf, ctx) { if (rf & 1) {
-    const _r32 = i0.ɵɵgetCurrentView();
+    const _r31 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 23);
-    i0.ɵɵlistener("click", function OrderedListFormFieldComponent_div_1_div_1_button_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r32); const i_r4 = i0.ɵɵnextContext().index; const ctx_r30 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r30.removeItemAt(i_r4)); });
+    i0.ɵɵlistener("click", function OrderedListFormFieldComponent_div_1_div_1_button_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r31); const i_r4 = i0.ɵɵnextContext().index; const ctx_r29 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r29.removeItemAt(i_r4)); });
     i0.ɵɵelement(1, "span", 24);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -21622,21 +21911,21 @@ function OrderedListFormFieldComponent_div_1_div_1_Template(rf, ctx) { if (rf &
 } }
 function OrderedListFormFieldComponent_div_1_button_2_Template(rf, ctx) { if (rf & 1) {
     const _r34 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 25);
+    i0.ɵɵelementStart(0, "button", 25, 26);
     i0.ɵɵlistener("click", function OrderedListFormFieldComponent_div_1_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r34); const ctx_r33 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r33.addListItem()); });
-    i0.ɵɵtext(1);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("smeDisabled", ctx_r2.loadingOrDisabled || ctx_r2.value.length === ctx_r2.options.length)("title", ctx_r2.strings.MsftSmeShell.Angular.Form.OrderedList.addButtonTooltip);
-    i0.ɵɵattribute("aria-label", ctx_r2.strings.MsftSmeShell.Angular.Form.OrderedList.addButtonAriaLabel);
-    i0.ɵɵadvance(1);
+    i0.ɵɵattribute("aria-label", ctx_r2.addRemoveButtonArialLabel);
+    i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.addButtonText, " ");
 } }
 function OrderedListFormFieldComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
     i0.ɵɵtemplate(1, OrderedListFormFieldComponent_div_1_div_1_Template, 9, 10, "div", 4);
-    i0.ɵɵtemplate(2, OrderedListFormFieldComponent_div_1_button_2_Template, 2, 4, "button", 5);
+    i0.ɵɵtemplate(2, OrderedListFormFieldComponent_div_1_button_2_Template, 3, 4, "button", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -21709,8 +21998,9 @@ let OrderedListFormFieldComponent = class OrderedListFormFieldComponent extends
     /**
      * Initializes a new instance of the OrderedListFormFieldComponent
      */
-    constructor(injector) {
+    constructor(injector, orderedListFormFieldAccessibilityManagerService) {
         super(injector);
+        this.orderedListFormFieldAccessibilityManagerService = orderedListFormFieldAccessibilityManagerService;
         /**
          * Single selection is not supported by ordered list
          */
@@ -21727,10 +22017,6 @@ let OrderedListFormFieldComponent = class OrderedListFormFieldComponent extends
          * Indicates allow empty selection
          */
         this.allowEmpty = true;
-        /**
-         * Tracks when new item is added to place focus on.
-         */
-        this.newItemAdded = false;
         this.instructions = this.strings.MsftSmeShell.Angular.Form.OrderedList.instructions;
         this.showAddRemove = true;
         this.showMove = true;
@@ -21754,6 +22040,17 @@ let OrderedListFormFieldComponent = class OrderedListFormFieldComponent extends
     get ariaLabel() {
         return this.getMergedDescriptionLabel();
     }
+    /**
+     * The aria label for the add/remove button when aria label is passed in.
+     * The aria label needs to be in sync with the add button text so that narrator can read the correct content.
+     * It should also respect the required state.
+     */
+    get addRemoveButtonArialLabel() {
+        if (this.addButtonText) {
+            return this.required ? this.strings.MsftSmeShell.Angular.Calendar.AriaLabel.Required.format(this.addButtonText) : this.addButtonText;
+        }
+        return this.required ? this.strings.MsftSmeShell.Angular.Calendar.AriaLabel.Required.format(this.strings.MsftSmeShell.Angular.Form.OrderedList.addButtonAriaLabel) : this.strings.MsftSmeShell.Angular.Form.OrderedList.addButtonAriaLabel;
+    }
     /**
      * The method called after the component is initialized.
      */
@@ -21791,7 +22088,7 @@ let OrderedListFormFieldComponent = class OrderedListFormFieldComponent extends
             return false;
         }
         this.value = [...this.value, value];
-        this.newItemAdded = true;
+        this.orderedListFormFieldAccessibilityManagerService.add(this.value, this.addButton, this.hostElement);
         return true;
     }
     /**
@@ -21799,26 +22096,22 @@ let OrderedListFormFieldComponent = class OrderedListFormFieldComponent extends
      * @param index The index of the item being demoted.
      */
     demoteItemAt(index) {
-        if (index !== this.value.length - 1) {
-            this.moveItem(index, index + 1);
-            const focusable = document.getElementById(`${this.idBag.demote}${index + 1}`);
-            if (focusable) {
-                focusable.focus();
-            }
+        if (index === this.value.length - 1) {
+            return;
         }
+        this.moveItem(index, index + 1);
+        this.orderedListFormFieldAccessibilityManagerService.demote(this.value, this.hostElement, `#${this.idBag.demote}${index + 1}`);
     }
     /**
      * Promotes an item at the given index by 1
      * @param index The index of the item being promoted.
      */
     promoteItemAt(index) {
-        if (index !== 0) {
-            this.moveItem(index, index - 1);
-            const focusable = document.getElementById(`${this.idBag.promote}${index - 1}`);
-            if (focusable) {
-                focusable.focus();
-            }
+        if (index === 0) {
+            return;
         }
+        this.moveItem(index, index - 1);
+        this.orderedListFormFieldAccessibilityManagerService.promote(this.value, this.hostElement, `#${this.idBag.promote}${index - 1}`);
     }
     /**
      * Returns the index to track items in the array.
@@ -21830,10 +22123,7 @@ let OrderedListFormFieldComponent = class OrderedListFormFieldComponent extends
     removeItemAt(index) {
         this.value.splice(index, 1);
         this.triggerValueChange();
-        const firstFocusable = Dom.getFirstFocusableDescendent(this.hostElement.nativeElement);
-        if (firstFocusable) {
-            firstFocusable.focus();
-        }
+        this.orderedListFormFieldAccessibilityManagerService.delete(this.value, this.addButton, this.hostElement);
     }
     /**
      * Moves an element of an array from a starting index to a destination index.
@@ -21856,18 +22146,6 @@ let OrderedListFormFieldComponent = class OrderedListFormFieldComponent extends
         }
         this.value = value;
     }
-    /**
-     * Places focus on new item when it is added.
-     */
-    newItemCheck() {
-        if (this.newItemAdded) {
-            const focusable = Dom.findChildElementDFS(this.hostElement.nativeElement, (element) => element.tagName.toUpperCase() === 'INPUT', ElementPosition.Last);
-            if (focusable) {
-                focusable.focus();
-            }
-            this.newItemAdded = false;
-        }
-    }
     /**
      * The method called when a <select> element's value changes.
      */
@@ -21905,10 +22183,15 @@ let OrderedListFormFieldComponent = class OrderedListFormFieldComponent extends
         return super.validate(c);
     }
 };
-/** @nocollapse */ OrderedListFormFieldComponent.ɵfac = function OrderedListFormFieldComponent_Factory(t) { return new (t || OrderedListFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
-/** @nocollapse */ OrderedListFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: OrderedListFormFieldComponent, selectors: [["sme-form-field", "type", "orderedlist"]], hostVars: 1, hostBindings: function OrderedListFormFieldComponent_HostBindings(rf, ctx) { if (rf & 2) {
+/** @nocollapse */ OrderedListFormFieldComponent.ɵfac = function OrderedListFormFieldComponent_Factory(t) { return new (t || OrderedListFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(OrderedListFormFieldAccessibilityManagerService)); };
+/** @nocollapse */ OrderedListFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: OrderedListFormFieldComponent, selectors: [["sme-form-field", "type", "orderedlist"]], viewQuery: function OrderedListFormFieldComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0$15, 5);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.addButton = _t.first);
+    } }, hostVars: 1, hostBindings: function OrderedListFormFieldComponent_HostBindings(rf, ctx) { if (rf & 2) {
         i0.ɵɵattribute("aria-label", ctx.ariaLabel);
-    } }, inputs: { showAddRemove: "showAddRemove", showMove: "showMove", showSelect: "showSelect", addButtonText: "addButtonText", searchable: "searchable", allowEmpty: "allowEmpty" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$15, decls: 3, vars: 3, consts: [[3, "formField"], ["class", "sme-margin-bottom-xs sme-form-field-editor", 4, "ngIf"], [3, "alert"], [1, "sme-margin-bottom-xs", "sme-form-field-editor"], ["class", "sme-arrange-stack-h sme-margin-bottom-xs sme-form-field-width", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["type", "button", "class", "sme-button-trigger sme-button-auto-width sme-icon sme-icon-add sme-margin-bottom-xs", "data-uta-id", "add-button", 3, "smeDisabled", "title", "click", 4, "ngIf"], [1, "sme-arrange-stack-h", "sme-margin-bottom-xs", "sme-form-field-width"], [1, "sme-screen-reader", 3, "id"], ["class", "sme-position-flex-auto", "role", "textbox", 4, "ngIf"], [1, "sme-layout-relative", "sme-position-flex-auto"], ["type", "combobox", 3, "utaId", "hideHeader", "valueComparator", "ngModel", "label", "searchable", "ngModelChange", "customValidate", 4, "ngIf"], ["type", "button", "class", "sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height", "data-uta-id", "promote-button", 3, "id", "title", "smeDisabled", "click", 4, "ngIf"], ["type", "button", "class", "sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height", "data-uta-id", "demote-button", 3, "id", "title", "smeDisabled", "click", 4, "ngIf"], ["type", "button", "class", "sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height", "data-uta-id", "remove-button", 3, "title", "smeDisabled", "click", 4, "ngIf"], ["role", "textbox", 1, "sme-position-flex-auto"], ["type", "combobox", 3, "utaId", "hideHeader", "valueComparator", "ngModel", "label", "searchable", "ngModelChange", "customValidate"], [4, "ngFor", "ngForOf"], [3, "utaId", "value", "label", "disabled", 4, "ngIf"], [3, "utaId", "value", "label", "disabled"], ["type", "button", "data-uta-id", "promote-button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", "sme-form-field-height", 3, "id", "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-up"], ["type", "button", "data-uta-id", "demote-button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", "sme-form-field-height", 3, "id", "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-down"], ["type", "button", "data-uta-id", "remove-button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", "sme-form-field-height", 3, "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-cancel", "sme-color-red"], ["type", "button", "data-uta-id", "add-button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-icon", "sme-icon-add", "sme-margin-bottom-xs", 3, "smeDisabled", "title", "click"]], template: function OrderedListFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { showAddRemove: "showAddRemove", showMove: "showMove", showSelect: "showSelect", addButtonText: "addButtonText", searchable: "searchable", allowEmpty: "allowEmpty" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c1$B, decls: 3, vars: 3, consts: [[3, "formField"], ["class", "sme-margin-bottom-xs sme-form-field-editor", 4, "ngIf"], [3, "alert"], [1, "sme-margin-bottom-xs", "sme-form-field-editor"], ["class", "sme-arrange-stack-h sme-margin-bottom-xs sme-form-field-width", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["type", "button", "class", "sme-button-trigger sme-button-auto-width sme-icon sme-icon-add sme-margin-bottom-xs", "data-uta-id", "add-button", 3, "smeDisabled", "title", "click", 4, "ngIf"], [1, "sme-arrange-stack-h", "sme-margin-bottom-xs", "sme-form-field-width"], [1, "sme-screen-reader", 3, "id"], ["class", "sme-position-flex-auto", "role", "textbox", 4, "ngIf"], [1, "sme-layout-relative", "sme-position-flex-auto"], ["type", "combobox", 3, "utaId", "hideHeader", "valueComparator", "ngModel", "label", "searchable", "ngModelChange", 4, "ngIf"], ["type", "button", "class", "sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height", "data-uta-id", "promote-button", 3, "id", "title", "smeDisabled", "click", 4, "ngIf"], ["type", "button", "class", "sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height", "data-uta-id", "demote-button", 3, "id", "title", "smeDisabled", "click", 4, "ngIf"], ["type", "button", "class", "sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height", "data-uta-id", "remove-button", 3, "title", "smeDisabled", "click", 4, "ngIf"], ["role", "textbox", 1, "sme-position-flex-auto"], ["type", "combobox", 3, "utaId", "hideHeader", "valueComparator", "ngModel", "label", "searchable", "ngModelChange"], [4, "ngFor", "ngForOf"], [3, "utaId", "value", "label", "disabled", 4, "ngIf"], [3, "utaId", "value", "label", "disabled"], ["type", "button", "data-uta-id", "promote-button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", "sme-form-field-height", 3, "id", "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-up"], ["type", "button", "data-uta-id", "demote-button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", "sme-form-field-height", 3, "id", "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-down"], ["type", "button", "data-uta-id", "remove-button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", "sme-form-field-height", 3, "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-cancel", "sme-color-red"], ["type", "button", "data-uta-id", "add-button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-icon", "sme-icon-add", "sme-margin-bottom-xs", 3, "smeDisabled", "title", "click"], ["addButton", ""]], template: function OrderedListFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "sme-form-field-layout", 0);
         i0.ɵɵtemplate(1, OrderedListFormFieldComponent_div_1_Template, 3, 3, "div", 1);
         i0.ɵɵelement(2, "sme-validation-alert", 2);
@@ -21964,12 +22247,16 @@ OrderedListFormFieldComponent = __decorate([
             }
         ]
     }),
-    __metadata("design:paramtypes", [Injector])
+    __metadata("design:paramtypes", [Injector,
+        OrderedListFormFieldAccessibilityManagerService])
 ], OrderedListFormFieldComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OrderedListFormFieldComponent, [{
         type: Component,
-        args: [{ selector: 'sme-form-field[type="orderedlist"]', template: "<sme-form-field-layout [formField]=\"this\">\r\n  <div *ngIf=\"value\" class=\"sme-margin-bottom-xs sme-form-field-editor\">\r\n    <div *ngFor=\"let item of value; trackBy: trackByIndex; let i = index\"\r\n      class=\"sme-arrange-stack-h sme-margin-bottom-xs sme-form-field-width\"\r\n      [attr.data-uta-id]=\"item ? item.toString() + '-row' : 'new-item-row'\">\r\n      <label class=\"sme-screen-reader\" [id]=\"idBag.detailsSpan + i\">\r\n        {{strings.MsftSmeShell.Angular.Form.OrderedList.itemAriaDescription.format(i + 1, value.length)}}\r\n      </label>\r\n      <p *ngIf=\"!showSelect\" class=\"sme-position-flex-auto\" role=\"textbox\"\r\n        [attr.aria-describedby]=\"idBag.detailsSpan + i\">{{arrayGetValueDisplayString(value[i])}}</p>\r\n      <div class=\"sme-layout-relative sme-position-flex-auto\" [class.sme-margin-right-xs]=\"showMove || showAddRemove\">\r\n        <sme-form-field *ngIf=\"showSelect\" [utaId]=\"item ? item.toString() + '-combobox' : 'new-combobox'\"\r\n          type=\"combobox\" [hideHeader]=\"true\" [valueComparator]=\"valueComparator\" [(ngModel)]=\"value[i]\"\r\n          (ngModelChange)=\"triggerValueChange()\" (customValidate)=\"newItemCheck()\" [label]=\"label\"\r\n          [searchable]=\"searchable\">\r\n          <ng-container *ngFor=\"let option of options\">\r\n            <sme-option *ngIf=\"!option.isSelected || arrayValueComparator(option.value, value[i])\"\r\n              [utaId]=\"option.utaId ? option.utaId : option.value\" [value]=\"option.value\" [label]=\"option.toString()\"\r\n              [disabled]=\"option.disabled\">\r\n            </sme-option>\r\n          </ng-container>\r\n        </sme-form-field>\r\n      </div>\r\n      <button *ngIf=\"showMove\" [id]=\"idBag.promote + i\" type=\"button\"\r\n        class=\"sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height\"\r\n        [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.OrderedList.promoteButtonAriaLabel\"\r\n        [title]=\"strings.MsftSmeShell.Angular.Form.OrderedList.promoteButtonTooltip\" (click)=\"promoteItemAt(i)\"\r\n        [smeDisabled]=\"loadingOrDisabled || allowEmptyDisableActions\" data-uta-id=\"promote-button\">\r\n        <span class=\"sme-icon sme-icon-up\"></span>\r\n      </button>\r\n      <button *ngIf=\"showMove\" [id]=\"idBag.demote + i\" type=\"button\"\r\n        class=\"sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height\"\r\n        [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.OrderedList.demoteButtonAriaLabel\"\r\n        [title]=\"strings.MsftSmeShell.Angular.Form.OrderedList.demoteButtonTooltip\" (click)=\"demoteItemAt(i)\"\r\n        [smeDisabled]=\"loadingOrDisabled || allowEmptyDisableActions\" data-uta-id=\"demote-button\">\r\n        <span class=\"sme-icon sme-icon-down\"></span>\r\n      </button>\r\n      <button *ngIf=\"showAddRemove\" type=\"button\"\r\n        class=\"sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height\"\r\n        [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.OrderedList.removeButtonAriaLabel\"\r\n        [title]=\"strings.MsftSmeShell.Angular.Form.OrderedList.removeButtonTooltip\" (click)=\"removeItemAt(i)\"\r\n        [smeDisabled]=\"loadingOrDisabled || allowEmptyDisableActions\" data-uta-id=\"remove-button\">\r\n        <span class=\"sme-icon sme-icon-cancel sme-color-red\"></span>\r\n      </button>\r\n    </div>\r\n    <button *ngIf=\"showAddRemove\" type=\"button\" [smeDisabled]=\"loadingOrDisabled || value.length === options.length\"\r\n      class=\"sme-button-trigger sme-button-auto-width sme-icon sme-icon-add sme-margin-bottom-xs\"\r\n      [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.OrderedList.addButtonAriaLabel\" data-uta-id=\"add-button\"\r\n      [title]=\"strings.MsftSmeShell.Angular.Form.OrderedList.addButtonTooltip\" (click)=\"addListItem()\">\r\n      {{addButtonText}}\r\n    </button>\r\n  </div>\r\n  <sme-validation-alert [alert]=\"alert\"></sme-validation-alert>\r\n</sme-form-field-layout>\r\n" }]
-    }], function () { return [{ type: i0.Injector }]; }, { showAddRemove: [{
+        args: [{ selector: 'sme-form-field[type="orderedlist"]', template: "<sme-form-field-layout [formField]=\"this\">\r\n  <div *ngIf=\"value\" class=\"sme-margin-bottom-xs sme-form-field-editor\">\r\n    <div *ngFor=\"let item of value; trackBy: trackByIndex; let i = index\"\r\n      class=\"sme-arrange-stack-h sme-margin-bottom-xs sme-form-field-width\"\r\n      [attr.data-uta-id]=\"item ? item.toString() + '-row' : 'new-item-row'\">\r\n      <label class=\"sme-screen-reader\" [id]=\"idBag.detailsSpan + i\">\r\n        {{ strings.MsftSmeShell.Angular.Form.OrderedList.itemAriaDescription.format(i + 1, value.length) }}\r\n      </label>\r\n      <p *ngIf=\"!showSelect\" class=\"sme-position-flex-auto\" role=\"textbox\" [attr.aria-label]=\"idBag.detailsSpan + i\">\r\n        {{ arrayGetValueDisplayString(value[i]) }}</p>\r\n      <div class=\"sme-layout-relative sme-position-flex-auto\" [class.sme-margin-right-xs]=\"showMove || showAddRemove\">\r\n        <sme-form-field *ngIf=\"showSelect\" [utaId]=\"item ? item.toString() + '-combobox' : 'new-combobox'\"\r\n          type=\"combobox\" [hideHeader]=\"true\" [valueComparator]=\"valueComparator\" [(ngModel)]=\"value[i]\"\r\n          (ngModelChange)=\"triggerValueChange()\" [label]=\"label\"\r\n          [searchable]=\"searchable\">\r\n          <ng-container *ngFor=\"let option of options\">\r\n            <sme-option *ngIf=\"!option.isSelected || arrayValueComparator(option.value, value[i])\"\r\n              [utaId]=\"option.utaId ? option.utaId : option.value\" [value]=\"option.value\" [label]=\"option.toString()\"\r\n              [disabled]=\"option.disabled\">\r\n            </sme-option>\r\n          </ng-container>\r\n        </sme-form-field>\r\n      </div>\r\n      <button *ngIf=\"showMove\" [id]=\"idBag.promote + i\" type=\"button\"\r\n        class=\"sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height\"\r\n        [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.OrderedList.promoteButtonAriaLabel\"\r\n        [title]=\"strings.MsftSmeShell.Angular.Form.OrderedList.promoteButtonTooltip\" (click)=\"promoteItemAt(i)\"\r\n        [smeDisabled]=\"loadingOrDisabled || allowEmptyDisableActions\" data-uta-id=\"promote-button\">\r\n        <span class=\"sme-icon sme-icon-up\"></span>\r\n      </button>\r\n      <button *ngIf=\"showMove\" [id]=\"idBag.demote + i\" type=\"button\"\r\n        class=\"sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height\"\r\n        [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.OrderedList.demoteButtonAriaLabel\"\r\n        [title]=\"strings.MsftSmeShell.Angular.Form.OrderedList.demoteButtonTooltip\" (click)=\"demoteItemAt(i)\"\r\n        [smeDisabled]=\"loadingOrDisabled || allowEmptyDisableActions\" data-uta-id=\"demote-button\">\r\n        <span class=\"sme-icon sme-icon-down\"></span>\r\n      </button>\r\n      <button *ngIf=\"showAddRemove\" type=\"button\"\r\n        class=\"sme-button-trigger sme-position-flex-none sme-button-auto-width sme-form-field-height\"\r\n        [attr.aria-label]=\"strings.MsftSmeShell.Angular.Form.OrderedList.removeButtonAriaLabel\"\r\n        [title]=\"strings.MsftSmeShell.Angular.Form.OrderedList.removeButtonTooltip\" (click)=\"removeItemAt(i)\"\r\n        [smeDisabled]=\"loadingOrDisabled || allowEmptyDisableActions\" data-uta-id=\"remove-button\">\r\n        <span class=\"sme-icon sme-icon-cancel sme-color-red\"></span>\r\n      </button>\r\n    </div>\r\n    <button #addButton *ngIf=\"showAddRemove\" type=\"button\" [smeDisabled]=\"loadingOrDisabled || value.length === options.length\"\r\n      class=\"sme-button-trigger sme-button-auto-width sme-icon sme-icon-add sme-margin-bottom-xs\"\r\n      [attr.aria-label]=\"addRemoveButtonArialLabel\" data-uta-id=\"add-button\"\r\n      [title]=\"strings.MsftSmeShell.Angular.Form.OrderedList.addButtonTooltip\" (click)=\"addListItem()\">\r\n      {{ addButtonText }}\r\n    </button>\r\n  </div>\r\n  <sme-validation-alert [alert]=\"alert\"></sme-validation-alert>\r\n</sme-form-field-layout>\r\n" }]
+    }], function () { return [{ type: i0.Injector }, { type: OrderedListFormFieldAccessibilityManagerService }]; }, { addButton: [{
+            type: ViewChild,
+            args: ['addButton']
+        }], showAddRemove: [{
             type: Input
         }], showMove: [{
             type: Input
@@ -22231,7 +22518,7 @@ function RadioGroupFormFieldLoaderComponent_ng_container_2_sme_option_1_Template
 } if (rf & 2) {
     const item_r2 = i0.ɵɵnextContext().$implicit;
     const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("disabled", ctx_r3.shouldDisable() == item_r2.value)("value", item_r2.value)("label", ctx_r3.localize(item_r2.label))("description", ctx_r3.localize(item_r2.description));
+    i0.ɵɵproperty("disabled", ctx_r3.shouldDisable() === item_r2.value)("value", item_r2.value)("label", ctx_r3.localize(item_r2.label))("description", ctx_r3.localize(item_r2.description));
 } }
 function RadioGroupFormFieldLoaderComponent_ng_container_2_sme_option_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
@@ -22250,7 +22537,7 @@ function RadioGroupFormFieldLoaderComponent_ng_container_2_sme_option_2_Template
 } if (rf & 2) {
     const item_r2 = i0.ɵɵnextContext().$implicit;
     const ctx_r4 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("disabled", ctx_r4.shouldDisable() == item_r2.value)("value", item_r2.value)("label", ctx_r4.localize(item_r2.label))("description", ctx_r4.localize(item_r2.description));
+    i0.ɵɵproperty("disabled", ctx_r4.shouldDisable() === item_r2.value)("value", item_r2.value)("label", ctx_r4.localize(item_r2.label))("description", ctx_r4.localize(item_r2.description));
 } }
 function RadioGroupFormFieldLoaderComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -22521,10 +22808,10 @@ class RadioGroupFormFieldLoaderComponent extends ObjectPropertySchemaFieldLoader
         [disabled]="!!(propertySchema.disabledCondition && evalExpression(propertySchema.disabledCondition))"
         (customValidate)="resolveFunction(propertySchema.customValidation)($event)">
         <ng-container *ngFor="let item of options">
-            <sme-option *ngIf="!getObjectOptionByMainOption(item.value)" [disabled]="shouldDisable()==item.value"
+            <sme-option *ngIf="!getObjectOptionByMainOption(item.value)" [disabled]="shouldDisable()===item.value"
                 [value]="item.value" [label]="localize(item.label)" [description]="localize(item.description)">
             </sme-option>
-            <sme-option *ngIf="getObjectOptionByMainOption(item.value)" [disabled]="shouldDisable()==item.value"
+            <sme-option *ngIf="getObjectOptionByMainOption(item.value)" [disabled]="shouldDisable()===item.value"
                 [value]="item.value" [label]="localize(item.label)" [description]="localize(item.description)">
                 <ng-template>
                     <sme-schema-field-host [propertySchema]="getObjectOptionByMainOption(item.value)"
@@ -24432,7 +24719,13 @@ class SmeFormsModule {
 }
 /** @nocollapse */ SmeFormsModule.ɵfac = function SmeFormsModule_Factory(t) { return new (t || SmeFormsModule)(); };
 /** @nocollapse */ SmeFormsModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: SmeFormsModule });
-/** @nocollapse */ SmeFormsModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ imports: [AccordionModule,
+/** @nocollapse */ SmeFormsModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ providers: [
+        // TODO: each form field should have its own accessibility manager service
+        ArrayFormFieldAccessibilityManagerService,
+        ListFormFieldAccessibilityManagerService,
+        OrderedListFormFieldAccessibilityManagerService,
+        FormFieldAccessibilityManagerBaseService
+    ], imports: [AccordionModule,
         ActionsModule,
         AutofocusModule,
         CommonModule,
@@ -24604,6 +24897,13 @@ class SmeFormsModule {
                     TileDirectivesModule,
                     TooltipModule,
                     TelemetryDirectiveModule
+                ],
+                providers: [
+                    // TODO: each form field should have its own accessibility manager service
+                    ArrayFormFieldAccessibilityManagerService,
+                    ListFormFieldAccessibilityManagerService,
+                    OrderedListFormFieldAccessibilityManagerService,
+                    FormFieldAccessibilityManagerBaseService
                 ]
             }]
     }], null, null); })();
@@ -25525,12 +25825,36 @@ class DataTableColumnComponent {
  *     if we don't initialize from child components.
  */
 class SpacerBaseDirective extends CoreBaseComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * The internal value for showLeftMargin.
+         */
+        this.showLeftMarginInternal = true;
+    }
     /**
      * The log source name for the component.
      */
     get logSourceName() {
         return 'SpacerBaseDirective';
     }
+    /**
+     * Setter showLeftMargin.
+     * The input parameter for determining the component to render left margin.
+     * Custom implementation on control is required.
+     * Migrated from the data-table control, the data-table control will still accept this input but actual implementation will be noLeftMargin.
+     * @deprecated since '05/01/23' Use noLeftMargin instead.
+     */
+    set showLeftMargin(input) {
+        this.showLeftMarginInternal = !!input;
+        this.noLeftMargin = !input;
+    }
+    /**
+     * Getter showLeftMargin.
+     */
+    get showLeftMargin() {
+        return !!this.showLeftMarginInternal;
+    }
 }
 /** @nocollapse */ SpacerBaseDirective.ɵfac = /** @pureOrBreakMyCode */ function () { let ɵSpacerBaseDirective_BaseFactory; return function SpacerBaseDirective_Factory(t) { return (ɵSpacerBaseDirective_BaseFactory || (ɵSpacerBaseDirective_BaseFactory = i0.ɵɵgetInheritedFactory(SpacerBaseDirective)))(t || SpacerBaseDirective); }; }();
 /** @nocollapse */ SpacerBaseDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: SpacerBaseDirective, inputs: { noLeftPadding: "noLeftPadding", noPadding: "noPadding", noHorizontalMargin: "noHorizontalMargin", noSideMargin: "noSideMargin", showLeftMargin: "showLeftMargin", noLeftMargin: "noLeftMargin" }, features: [i0.ɵɵInheritDefinitionFeature] });
@@ -31203,7 +31527,7 @@ DataTableComponent.pxConverter = new PxConverter();
         i0.ɵɵelementEnd();
         i0.ɵɵelement(28, "div", 27, 28);
     } if (rf & 2) {
-        i0.ɵɵclassProp("sme-shadow-scrolled-content", ctx.isScrolledDown)("sme-table-multi-select", ctx.selectionMode === "multiple")("sme-table-selectable", ctx.selectable)("sme-table-indented", ctx.showLeftMargin)("sme-table-select-all-enabled", ctx.selectionMode === "multiple" && ctx.showAllItemCheckbox);
+        i0.ɵɵclassProp("sme-shadow-scrolled-content", ctx.isScrolledDown)("sme-table-multi-select", ctx.selectionMode === "multiple")("sme-table-selectable", ctx.selectable)("sme-table-indented", !ctx.noLeftMargin)("sme-table-select-all-enabled", ctx.selectionMode === "multiple" && ctx.showAllItemCheckbox);
         i0.ɵɵadvance(5);
         i0.ɵɵattribute("role", ctx.selectionMode === "multiple" ? "columnheader" : "presentation");
         i0.ɵɵadvance(1);
@@ -31211,7 +31535,7 @@ DataTableComponent.pxConverter = new PxConverter();
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngForOf", ctx.actualColumns);
         i0.ɵɵadvance(1);
-        i0.ɵɵclassProp("sme-table-multi-select", ctx.selectionMode === "multiple")("sme-table-selectable", ctx.selectable)("sme-margin-top-none", !ctx.showHeader)("sme-table-indented", ctx.showLeftMargin)("sme-table-grid-lines", ctx.showGrid)("sme-table-select-all-enabled", ctx.selectionMode === "multiple" && ctx.showAllItemCheckbox)("sme-table-editable", ctx.editable);
+        i0.ɵɵclassProp("sme-table-multi-select", ctx.selectionMode === "multiple")("sme-table-selectable", ctx.selectable)("sme-margin-top-none", !ctx.showHeader)("sme-table-indented", !ctx.noLeftMargin)("sme-table-grid-lines", ctx.showGrid)("sme-table-select-all-enabled", ctx.selectionMode === "multiple" && ctx.showAllItemCheckbox)("sme-table-editable", ctx.editable);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(38, _c18, ctx.scrollable, ctx.shouldScroll));
         i0.ɵɵadvance(2);
@@ -31287,7 +31611,7 @@ __decorate([
 ], DataTableComponent.prototype, "setIsColumnWidthCalculated", null);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DataTableComponent, [{
         type: Component,
-        args: [{ selector: 'sme-data-table', template: "<div role=\"presentation\" class=\"sme-table-header sme-focus-zone sme-data-table-transition\" #header\r\n  [class.sme-shadow-scrolled-content]=\"isScrolledDown\" [class.sme-table-multi-select]=\"selectionMode==='multiple'\"\r\n  [class.sme-table-selectable]=\"selectable\" [class.sme-table-indented]=\"showLeftMargin\"\r\n  [class.sme-table-select-all-enabled]=\"selectionMode==='multiple' && showAllItemCheckbox\">\r\n  <!-- According to the accessibility team, data-table headers should be accessible by keyboard\r\n  and the resizer should also be accessed by keyboard.-->\r\n  <div #headerTable class=\"sme-table sme-table-virtualized sme-table-auto-width-phone-down\" role=\"rowgroup\">\r\n    <div class=\"sme-table-row sme-arrange-stack-h sme-position-flex-auto\" role=\"row\"\r\n      (keydown)=\"onHeaderTablePressed($event)\">\r\n      <div class=\"sme-table-caption\" [attr.role]=\"selectionMode==='multiple'?'columnheader':'presentation'\"\r\n        data-uta-id=\"checkboxColumn\">\r\n        <div class=\"sme-table-checkbox sme-table-header-checkbox\"\r\n          *ngIf=\"selectionMode==='multiple' && showAllItemCheckbox && showHeader\" role=\"presentation\">\r\n          <input sme-lint-disable-self type=\"checkbox\" [attr.aria-label]=\"getAllItemCheckBoxAriaLabel()\"\r\n            [checked]=\"shouldAllItemCheckBoxChecked()\"\r\n            [attr.aria-checked]=\"shouldAllItemCheckBoxChecked()?'true':'false'\" (change)=\"onAllItemCheckBoxClicked()\" />\r\n          <label role=\"presentation\"></label>\r\n        </div>\r\n      </div>\r\n      <div *ngFor=\"let column of actualColumns; let colIndex = index\" [attr.field]=\"column.field\"\r\n        [ngStyle]=\"{'width': column.width}\"\r\n        class=\"sme-table-caption sme-table-column-header sme-position-flex-auto {{column.styleClass}}\"\r\n        role=\"presentation\" [attr.data-uta-id]=\"column.utaId\" [attr.column-index]=\"colIndex\">\r\n        <div *ngIf=\"column.sortable && column.sortable!='false' && showHeader\"\r\n          class=\"sme-table-header-cell sme-focus-zone\" (click)=\"clickColumn(column)\" role=\"columnheader\"\r\n          [title]=\"column.header\" aria-live=\"polite\" tabindex=\"0\" [attr.aria-sort]=\"columnSortSettings[column.header]\">\r\n          <span>{{column.header}}</span>\r\n          <span class=\"sme-icon sme-margin-left-xxs\" [attr.aria-label]=\"column.sortable ? getSortLabel(column) : null\"\r\n            [ngClass]=\"{'sme-icon-up':column.sortMode===sortModeEnum.Ascend,'sme-icon-down':column.sortMode===sortModeEnum.Descend}\"></span>\r\n        </div>\r\n        <div *ngIf=\"!(column.sortable && column.sortable!='false') && showHeader\" class=\"sme-table-header-cell sme-focus-zone\"\r\n          role=\"columnheader\" [title]=\"column.header\" tabindex=\"0\">\r\n          <span>{{column.header}}</span>\r\n          <span class=\"sme-icon sme-margin-left-xxs\" [attr.aria-label]=\"column.sortable ? getSortLabel(column) : null\"\r\n            [ngClass]=\"{'sme-icon-up':column.sortMode===sortModeEnum.Ascend,'sme-icon-down':column.sortMode===sortModeEnum.Descend}\"></span>\r\n        </div>\r\n        <div *ngIf=\"!showHeader\" class=\"sme-table-header-cell\" role=\"columnheader\">\r\n        </div>\r\n        <sme-resizer [focusable]=\"false\" *ngIf=\"colIndex!==actualColumns.length-1 && showHeader\"\r\n          resizerHostSelector=\"div.sme-table-header\" (resized)=\"onColumnResized(colIndex, $event)\"\r\n          [visibleToScreenReader]=\"true\" [showResizerCover]=\"false\" orientation=\"left\"\r\n          (resizing)=\"onColumnResizing($event)\" class=\"sme-focus-zone\"></sme-resizer>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"sme-focus-zone sme-table-container sme-data-table-transition\" #content role=\"presentation\"\r\n  [class.sme-table-multi-select]=\"selectionMode==='multiple'\" [class.sme-table-selectable]=\"selectable\"\r\n  [class.sme-margin-top-none]=\"!showHeader\" [class.sme-table-indented]=\"showLeftMargin\"\r\n  [class.sme-table-grid-lines]=\"showGrid\"\r\n  [class.sme-table-select-all-enabled]=\"selectionMode==='multiple' && showAllItemCheckbox\"\r\n  [class.sme-table-editable]=\"editable\">\r\n  <div class=\"sme-table-scroll-container sme-layout-absolute sme-position-inset-none\"\r\n    [ngClass]=\"{'sme-layout-absolute sme-position-inset-none': scrollable, 'sme-scrollable': shouldScroll}\"\r\n    #scrollContainer role=\"rowgroup\">\r\n    <div role=\"row\" class=\"sme-table-row sme-table-row-placeholder\" #emptyMessage tabindex=\"0\"\r\n      *ngIf=\"showNoRecordsMessage()\" data-uta-id=\"empty-table-message\">\r\n      <sme-loading-wheel *ngIf=\"isLoading || !isColumnWidthCalculated\" [message]=\"loadingMessage\">\r\n      </sme-loading-wheel>\r\n      <div class=\"sme-table-cell sme-table-cell-placeholder\">&nbsp;</div>\r\n      <div role=\"gridcell\" class=\"sme-table-cell\">{{getNoRecordsMessage()}}</div>\r\n    </div>\r\n    <div class=\"sme-layout-relative sme-position-stretch-h sme-arrange-overflow-hide\" #scrollBody role=\"presentation\">\r\n      <div class=\"sme-table sme-table-scrollable sme-table-virtualized\" #scrollAboveData\r\n        [ngStyle]=\"{top: scrollAboveDataStyleTop}\" [attr.aria-hidden]=\"true\" sme-lint-disable>\r\n        <!-- Above view port -->\r\n        <div *ngFor=\"let renderedItem of renderedItemsAboveViewPort; let rowIndex = index\"\r\n          class=\"sme-table-row sme-table-row-data sme-table-row-selectable\"\r\n          [class.sme-table-row-active]=\"renderedItem.index === getActiveRenderedItemIndex()\"\r\n          [class.sme-table-row-selected]=\"renderedItem.index === getActiveRenderedItemIndex() || isItemSelected(renderedItem)\"\r\n          [class.sme-table-group-item]=\"renderedItem.type === renderedItemTypeEnum.GroupItem\"\r\n          [class.sme-table-group-header]=\"renderedItem.type === renderedItemTypeEnum.GroupHeader\"\r\n          [class.sme-checked]=\"isItemSelected(renderedItem)\">\r\n          <div class=\"sme-arrange-stack-h\">\r\n            <div class=\"sme-table-td sme-position-flex-auto\">\r\n              <div class=\"sme-table-cell\">\r\n                <div *ngIf=\"!showAsTree\" class=\"sme-table-checkbox\" role=\"presentation\">\r\n                  <input type=\"checkbox\" [checked]=\"isItemSelected(renderedItem)\" />\r\n                  <label role=\"presentation\"></label>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngFor=\"let column of actualColumns; let colIndex=index\"\r\n              [ngClass]=\"{'sme-table-column-first': isFirstDataColumn(column), 'sme-table-group-header-cell': renderedItem.type===renderedItemTypeEnum.GroupHeader}\"\r\n              [ngStyle]=\"{'width':column.domWidth+'px'}\"\r\n              class=\"sme-table-td sme-position-flex-auto {{column.styleClass}}\"\r\n              [attr.tabindex]=\"isTreeTableParentNode(renderedItem) ? -1 : 0\">\r\n              <div class=\"sme-screen-reader sme-screen-reader-disable-copy\" *ngIf=\"isFirstDataColumn(column)\">\r\n                {{getAdditionalScreenRecorderContent(renderedItem)}}</div>\r\n              <div *ngIf=\"renderedItem.type===renderedItemTypeEnum.GroupHeader && colIndex===0\" class=\"sme-table-cell\"\r\n                (click)=\"clickGroupToggle(renderedItem)\">\r\n                <span *ngIf=\"useGroupToggle\" class=\"sme-icon sme-icon-size-xxs sme-margin-right-xxs\"\r\n                  [ngClass]=\"{'sme-icon-chevronDown':isGroupExpanded(renderedItem.data), 'sme-icon-chevronRight':!isGroupExpanded(renderedItem.data)}\">\r\n                </span>\r\n                <span *ngIf=\"!this.groupHeaderTemplate\">\r\n                  {{renderedItem.data}}\r\n                </span>\r\n                <span *ngIf=\"this.groupHeaderTemplate\">\r\n                  <sme-data-table-template-loader [template]=\"this.groupHeaderTemplate\" [data]=\"renderedItem.data\">\r\n                  </sme-data-table-template-loader>\r\n                </span>\r\n              </div>\r\n              <div\r\n                *ngIf=\"renderedItem.type===renderedItemTypeEnum.TreeNode && !renderedItem.node.isBusy && colIndex===0\"\r\n                class=\"sme-table-expander-cell\" [ngStyle]=\"{'padding-left':(renderedItem.depth*16+4)+'px'}\"\r\n                [ngClass]=\"{'sme-expandable': renderedItem.hasChildren && !renderedItem.node.isLeaf}\">\r\n                <span class=\"sme-icon sme-icon-size-xxs\" role=\"button\"\r\n                  [attr.aria-expanded]=\"renderedItem.node.expanded?'true':'false'\"\r\n                  (click)=\"clickTreeToggle($event, renderedItem)\"\r\n                  [ngClass]=\"{'sme-icon-chevronDown':renderedItem.node.expanded, 'sme-icon-chevronRight':!renderedItem.node.expanded}\"\r\n                  [attr.aria-label]=\"renderedItem.node.expanded ? this.strings.MsftSmeShell.Angular.DataTable.aria.label.collapse : this.strings.MsftSmeShell.Angular.DataTable.aria.label.expand\">\r\n                </span>\r\n                <span class=\"sme-table-expander-cell-placeholder\"></span>\r\n              </div>\r\n              <div *ngIf=\"renderedItem.type===renderedItemTypeEnum.TreeNode && renderedItem.node.isBusy && colIndex===0\"\r\n                class=\"sme-table-expander-cell\" [ngStyle]=\"{'padding-left':(renderedItem.depth*16+4)+'px'}\">\r\n                <sme-loading-wheel size=\"extra-small\" [inline]=\"true\" [isBackgroundTransparent]=\"true\">\r\n                </sme-loading-wheel>\r\n                <span class=\"sme-table-expander-cell-placeholder\"></span>\r\n              </div>\r\n              <div\r\n                *ngIf=\"showAsTree && selectionMode==='multiple' && renderedItem.type==renderedItemTypeEnum.TreeNode && colIndex==0\"\r\n                class=\"sme-table-cell sme-table-checkbox-container\" role=\"presentation\">\r\n                <div class=\"sme-table-checkbox\" role=\"presentation\">\r\n                  <input type=\"checkbox\" [checked]=\"isItemSelected(renderedItem)\"\r\n                    (change)=\"onItemCheckBoxClicked(renderedItem)\" />\r\n                  <label role=\"presentation\"></label>\r\n                </div>\r\n              </div>\r\n              <ng-container *ngIf=\"!editable\">\r\n                <div *ngIf=\"!column.bodyTemplate && renderedItem.type!=renderedItemTypeEnum.GroupHeader\"\r\n                  class=\"sme-table-cell\" [class.sme-table-cell-full-height]=\"autoRowHeight\">\r\n                  {{renderedItem.data?resolveObjectPath(renderedItem.data,column.field):'.'}}\r\n                </div>\r\n                <div\r\n                  *ngIf=\"renderedItem.type!=renderedItemTypeEnum.GroupHeader && renderedItem.data && column.bodyTemplate\"\r\n                  [class.sme-table-cell-full-height]=\"autoRowHeight\" [class.sme-table-cell-height-auto]=\"autoRowHeight\"\r\n                  class=\"sme-table-cell\">\r\n                  <sme-data-table-template-loader *ngIf=\"!renderedItem.data.placeholder\"\r\n                    [template]=\"column.bodyTemplate\" [data]=\"renderedItem.data\" [rowIndex]=\"rowIndex\">\r\n                  </sme-data-table-template-loader>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"sme-table sme-table-scrollable\" #scrollData [class.sme-table-virtualized]=\"!disableUIVirtualization\"\r\n        [ngStyle]=\"{top: scrollDataStyleTop}\" sme-lint-disable role=\"presentation\">\r\n        <div *ngFor=\"let renderedItem of renderedItemsInAndBelowViewPort; let rowIndex = index\"\r\n          (keydown)=\"onContentTablePressed($event)\" (keyup)=\"onContentTableKeyUp($event)\"\r\n          (contextmenu)=\"enableRightClickSelect ? selectItem($event, renderedItem) : true\"\r\n          (click)=\"selectItem($event, renderedItem)\" class=\"sme-table-row sme-table-row-data sme-table-row-selectable\"\r\n          [class.sme-table-row-active]=\"renderedItem.index === getActiveRenderedItemIndex()\"\r\n          [class.sme-table-row-selected]=\"rowDisplayAsSelected(renderedItem)\"\r\n          [class.sme-table-group-item]=\"renderedItem.type === renderedItemTypeEnum.GroupItem\"\r\n          [class.sme-table-group-header]=\"renderedItem.type === renderedItemTypeEnum.GroupHeader\"\r\n          [class.sme-checked]=\"isItemSelected(renderedItem)\" [class.sme-table-row-editable]=\"editable\"\r\n          [class.sme-has-validation-error]=\"hasValidationError(renderedItem)\"\r\n          [class.sme-data-table-row-new-item]=\"renderedItem?.data?.isNewRow\"\r\n          [attr.tabindex]=\"renderedItem.index >= 0 ? 0 : undefined\" (dblclick)=\"doubleClickRow($event,renderedItem)\"\r\n          (focus)=\"onContentItemFocused($event, renderedItem)\" (focusin)=\"onContentItemFocused($event, renderedItem)\"\r\n          (focusout)=\"onContentItemBlurred($event, renderedItem)\" [attr.data-rendered-item-index]=\"renderedItem.index\"\r\n          [attr.aria-rowindex]=\"renderedItem.index+2\" [attr.aria-selected]=\"isItemSelected(renderedItem)?'true':'false'\"\r\n          (mouseenter)=\"setHoveredRenderedItem(renderedItem)\" (mouseleave)=\"unsetHoveredRenderedItem(renderedItem)\"\r\n          role=\"row\" [attr.aria-expanded]=\"getAriaExpandedAttributeValue(renderedItem)\"\r\n          [attr.aria-level]=\"showAsTree && renderedItem.depth ? (renderedItem.depth+1):undefined\">\r\n          <div class=\"sme-arrange-stack-h\" role=\"presentation\">\r\n            <div class=\"sme-table-td sme-position-flex-auto\"\r\n              [attr.role] = \"selectionMode === 'multiple' ? 'gridcell': 'presentation'\">\r\n              <div *ngIf=\"!showAsTree\" class=\"sme-table-cell sme-table-checkbox-container\" role=\"presentation\"\r\n                [class.sme-table-cell-full-height]=\"autoRowHeight\">\r\n                <div class=\"sme-table-checkbox\" role=\"presentation\">\r\n                  <input type=\"checkbox\" [attr.aria-checked]=\"isItemSelected(renderedItem)?'true':'false'\"\r\n                    [attr.aria-labelledby]=\"idBag.firstDataColumn + renderedItem.index\"\r\n                    [checked]=\"isItemSelected(renderedItem)\" (change)=\"onItemCheckBoxClicked(renderedItem)\" />\r\n                  <label role=\"presentation\"></label>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngFor=\"let column of actualColumns; let colIndex=index\"\r\n              [ngClass]=\"{'sme-table-column-first': isFirstDataColumn(column), 'sme-table-group-header-cell': renderedItem.type===renderedItemTypeEnum.GroupHeader}\"\r\n              [ngStyle]=\"{'width':column.domWidth+'px'}\"\r\n              class=\"sme-table-td sme-position-flex-auto {{column.styleClass}}\"\r\n              role=\"gridcell\" [attr.aria-rowindex]=\"renderedItem.index+2\"\r\n              [attr.tabindex]=\"isTreeTableParentNode(renderedItem) ? -1 : 0\">\r\n              <div class=\"sme-screen-reader sme-screen-reader-disable-copy\" *ngIf=\"isFirstDataColumn(column)\">\r\n                {{getAdditionalScreenRecorderContent(renderedItem)}}</div>\r\n              <div *ngIf=\"renderedItem.type===renderedItemTypeEnum.GroupHeader && colIndex===0\" class=\"sme-table-cell\"\r\n                (click)=\"clickGroupToggle(renderedItem)\" [id]=\"getFirstColumnId(column, renderedItem)\">\r\n                <span *ngIf=\"useGroupToggle\" class=\"sme-icon sme-icon-size-xxs sme-margin-right-xxs\"\r\n                  [ngClass]=\"{'sme-icon-chevronDown':isGroupExpanded(renderedItem.data), 'sme-icon-chevronRight':!isGroupExpanded(renderedItem.data)}\">\r\n                </span>\r\n                <span *ngIf=\"!this.groupHeaderTemplate\">\r\n                  {{renderedItem.data}}\r\n                </span>\r\n                <span *ngIf=\"this.groupHeaderTemplate\">\r\n                  <sme-data-table-template-loader [template]=\"this.groupHeaderTemplate\" [data]=\"renderedItem.data\">\r\n                  </sme-data-table-template-loader>\r\n                </span>\r\n              </div>\r\n              <div\r\n                *ngIf=\"renderedItem.type===renderedItemTypeEnum.TreeNode && !renderedItem.node.isBusy && colIndex===0\"\r\n                class=\"sme-table-expander-cell\" [ngStyle]=\"{'padding-left':(renderedItem.depth*16+4)+'px'}\"\r\n                [ngClass]=\"{'sme-expandable': renderedItem.hasChildren && !renderedItem.node.isLeaf}\">\r\n                <span class=\"sme-icon sme-icon-size-xxs\" role=\"button\"\r\n                  [attr.aria-expanded]=\"renderedItem.node.expanded?'true':'false'\"\r\n                  (click)=\"clickTreeToggle($event, renderedItem)\"\r\n                  [ngClass]=\"{'sme-icon-chevronDown':renderedItem.node.expanded, 'sme-icon-chevronRight':!renderedItem.node.expanded}\"\r\n                  [attr.aria-label]=\"renderedItem.node.expanded ? this.strings.MsftSmeShell.Angular.DataTable.aria.label.collapse : this.strings.MsftSmeShell.Angular.DataTable.aria.label.expand\">\r\n                </span>\r\n                <span class=\"sme-table-expander-cell-placeholder\"></span>\r\n              </div>\r\n              <div *ngIf=\"renderedItem.type===renderedItemTypeEnum.TreeNode && renderedItem.node.isBusy && colIndex===0\"\r\n                class=\"sme-table-expander-cell\" [ngStyle]=\"{'padding-left':(renderedItem.depth*16+4)+'px'}\">\r\n                <sme-loading-wheel size=\"extra-small\" [inline]=\"true\" [isBackgroundTransparent]=\"true\">\r\n                </sme-loading-wheel>\r\n                <span class=\"sme-table-expander-cell-placeholder\"></span>\r\n              </div>\r\n              <div\r\n                *ngIf=\"showAsTree && selectionMode==='multiple' && renderedItem.type==renderedItemTypeEnum.TreeNode && colIndex==0\"\r\n                class=\"sme-table-cell sme-table-checkbox-container\" role=\"presentation\">\r\n                <div class=\"sme-table-checkbox\" role=\"presentation\">\r\n                  <input type=\"checkbox\" [attr.aria-checked]=\"isItemSelected(renderedItem)?'true':'false'\"\r\n                    [attr.aria-labelledby]=\"idBag.firstDataColumn + renderedItem.index\"\r\n                    [checked]=\"isItemSelected(renderedItem)\" (change)=\"onItemCheckBoxClicked(renderedItem)\" />\r\n                  <label role=\"presentation\"></label>\r\n                </div>\r\n              </div>\r\n              <ng-container *ngIf=\"!editable\">\r\n                <div *ngIf=\"!column.bodyTemplate && renderedItem.type!=renderedItemTypeEnum.GroupHeader\"\r\n                  class=\"sme-table-cell\" [class.sme-table-cell-full-height]=\"autoRowHeight\"\r\n                  [id]=\"getFirstColumnId(column, renderedItem)\"\r\n                  [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                  {{renderedItem.data?resolveObjectPath(renderedItem.data,column.field):'.'}}</div>\r\n                <div\r\n                  *ngIf=\"renderedItem.type!=renderedItemTypeEnum.GroupHeader && renderedItem.data && column.bodyTemplate\"\r\n                  class=\"sme-table-cell\" [class.sme-table-cell-height-auto]=\"autoRowHeight\"\r\n                  [class.sme-table-cell-full-height]=\"autoRowHeight\" [id]=\"getFirstColumnId(column, renderedItem)\"\r\n                  [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                  <sme-data-table-template-loader *ngIf=\"!renderedItem.data.placeholder\"\r\n                    [template]=\"column.bodyTemplate\" [data]=\"renderedItem.data\" [rowIndex]=\"rowIndex\">\r\n                  </sme-data-table-template-loader>\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"editable && !column.bodyEditTemplate\">\r\n                <div *ngIf=\"!column.bodyReadTemplate && renderedItem.type!=renderedItemTypeEnum.GroupHeader\"\r\n                  class=\"sme-table-cell\"\r\n                  [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                  {{renderedItem.data?resolveObjectPath(renderedItem.data.content,column.field):'.'}}</div>\r\n                <div\r\n                  *ngIf=\"renderedItem.type!=renderedItemTypeEnum.GroupHeader && renderedItem.data && column.bodyReadTemplate\"\r\n                  class=\"sme-table-cell\"\r\n                  [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                  <sme-data-table-template-loader *ngIf=\"!renderedItem.data.placeholder\" [renderedItem]=\"renderedItem\"\r\n                    [template]=\"column.bodyReadTemplate\" [data]=\"renderedItem.data.content\" [rowIndex]=\"rowIndex\">\r\n                  </sme-data-table-template-loader>\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"editable && column.bodyEditTemplate\">\r\n                <ng-container *ngIf=\"!shouldShowEditRow(renderedItem)\">\r\n                  <div *ngIf=\"!column.bodyReadTemplate && renderedItem.type!=renderedItemTypeEnum.GroupHeader\"\r\n                    class=\"sme-table-cell\"\r\n                    [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                    {{renderedItem.data?resolveObjectPath(renderedItem.data.content,column.field):'.'}}</div>\r\n                  <div\r\n                    *ngIf=\"renderedItem.type!=renderedItemTypeEnum.GroupHeader && renderedItem.data && column.bodyReadTemplate\"\r\n                    class=\"sme-table-cell\"\r\n                    [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                    <sme-data-table-template-loader *ngIf=\"!renderedItem.data.placeholder\"\r\n                      [template]=\"column.bodyReadTemplate\" [data]=\"renderedItem.data.content\" [rowIndex]=\"rowIndex\">\r\n                    </sme-data-table-template-loader>\r\n                  </div>\r\n                </ng-container>\r\n                <div *ngIf=\"shouldShowEditRow(renderedItem)\" class=\"sme-table-cell sme-table-edit-container\"\r\n                  [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                  <sme-data-table-template-loader *ngIf=\"!renderedItem.data.placeholder\"\r\n                    [template]=\"column.bodyEditTemplate\" [field]=\"column.field\" [data]=\"renderedItem.data.content\"\r\n                    [rowIndex]=\"rowIndex\" [renderedItem]=\"renderedItem\"\r\n                    (validationAlert)=\"onValidationAlertHandler(renderedItem, column.field, $event.alert)\"\r\n                    (dataChanged)=\"onEditableDataChanged($event.renderedItem,$event.field)\">\r\n                  </sme-data-table-template-loader>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"hasValidationError(renderedItem)\" class=\"sme-table-row-validation\">\r\n            <div class=\"sme-table-td sme-position-flex-auto\"\r\n              [attr.role] = \"selectionMode === 'multiple' ? 'gridcell' : 'presentation'\"\r\n              [attr.tabindex]=\"selectionMode==='multiple'?'0':'undefined'\">\r\n              <div class=\"sme-table-cell\" role=\"presentation\">\r\n                <div *ngFor=\"let validationResultItem of renderedItem.validationResult\">\r\n                  <sme-validation-alert [alert]=\"validationResultItem.alert\"></sme-validation-alert>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"sme-table-row\" #tempRow>\r\n          <div class=\"sme-table-td\" tabindex=\"0\">\r\n            <div class=\"sme-table-cell\">&nbsp;</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"shouldUseLastFocusableShadowElement\" #lastFocusableShadowElement class=\"sme-focus-zone\"\r\n      data-sme-last-focusable-shadow-element (focus)=\"onLastFocusableShadowElementFocused($event)\" tabindex=\"0\"></div>\r\n  </div>\r\n  <div class=\"sme-layout-absolute sme-position-inset-none\"\r\n    *ngIf=\"isBusy || (this.nodeNavigatingTask && this.nodeNavigatingTask.isRunning)\">\r\n    <sme-loading-wheel [isBackgroundTransparent]=\"true\"></sme-loading-wheel>\r\n  </div>\r\n</div>\r\n<div #resizerIndicator\r\n  class=\"sme-width-xxs sme-layout-absolute sme-position-stretch-v sme-background-color-base-80 sme-layer-flyout sme-layout-none\">\r\n</div>\r\n" }]
+        args: [{ selector: 'sme-data-table', template: "<div role=\"presentation\" class=\"sme-table-header sme-focus-zone sme-data-table-transition\" #header\r\n  [class.sme-shadow-scrolled-content]=\"isScrolledDown\" [class.sme-table-multi-select]=\"selectionMode==='multiple'\"\r\n  [class.sme-table-selectable]=\"selectable\" [class.sme-table-indented]=\"!noLeftMargin\"\r\n  [class.sme-table-select-all-enabled]=\"selectionMode==='multiple' && showAllItemCheckbox\">\r\n  <!-- According to the accessibility team, data-table headers should be accessible by keyboard\r\n  and the resizer should also be accessed by keyboard.-->\r\n  <div #headerTable class=\"sme-table sme-table-virtualized sme-table-auto-width-phone-down\" role=\"rowgroup\">\r\n    <div class=\"sme-table-row sme-arrange-stack-h sme-position-flex-auto\" role=\"row\"\r\n      (keydown)=\"onHeaderTablePressed($event)\">\r\n      <div class=\"sme-table-caption\" [attr.role]=\"selectionMode==='multiple'?'columnheader':'presentation'\"\r\n        data-uta-id=\"checkboxColumn\">\r\n        <div class=\"sme-table-checkbox sme-table-header-checkbox\"\r\n          *ngIf=\"selectionMode==='multiple' && showAllItemCheckbox && showHeader\" role=\"presentation\">\r\n          <input sme-lint-disable-self type=\"checkbox\" [attr.aria-label]=\"getAllItemCheckBoxAriaLabel()\"\r\n            [checked]=\"shouldAllItemCheckBoxChecked()\"\r\n            [attr.aria-checked]=\"shouldAllItemCheckBoxChecked()?'true':'false'\" (change)=\"onAllItemCheckBoxClicked()\" />\r\n          <label role=\"presentation\"></label>\r\n        </div>\r\n      </div>\r\n      <div *ngFor=\"let column of actualColumns; let colIndex = index\" [attr.field]=\"column.field\"\r\n        [ngStyle]=\"{'width': column.width}\"\r\n        class=\"sme-table-caption sme-table-column-header sme-position-flex-auto {{column.styleClass}}\"\r\n        role=\"presentation\" [attr.data-uta-id]=\"column.utaId\" [attr.column-index]=\"colIndex\">\r\n        <div *ngIf=\"column.sortable && column.sortable!='false' && showHeader\"\r\n          class=\"sme-table-header-cell sme-focus-zone\" (click)=\"clickColumn(column)\" role=\"columnheader\"\r\n          [title]=\"column.header\" aria-live=\"polite\" tabindex=\"0\" [attr.aria-sort]=\"columnSortSettings[column.header]\">\r\n          <span>{{column.header}}</span>\r\n          <span class=\"sme-icon sme-margin-left-xxs\" [attr.aria-label]=\"column.sortable ? getSortLabel(column) : null\"\r\n            [ngClass]=\"{'sme-icon-up':column.sortMode===sortModeEnum.Ascend,'sme-icon-down':column.sortMode===sortModeEnum.Descend}\"></span>\r\n        </div>\r\n        <div *ngIf=\"!(column.sortable && column.sortable!='false') && showHeader\" class=\"sme-table-header-cell sme-focus-zone\"\r\n          role=\"columnheader\" [title]=\"column.header\" tabindex=\"0\">\r\n          <span>{{column.header}}</span>\r\n          <span class=\"sme-icon sme-margin-left-xxs\" [attr.aria-label]=\"column.sortable ? getSortLabel(column) : null\"\r\n            [ngClass]=\"{'sme-icon-up':column.sortMode===sortModeEnum.Ascend,'sme-icon-down':column.sortMode===sortModeEnum.Descend}\"></span>\r\n        </div>\r\n        <div *ngIf=\"!showHeader\" class=\"sme-table-header-cell\" role=\"columnheader\">\r\n        </div>\r\n        <sme-resizer [focusable]=\"false\" *ngIf=\"colIndex!==actualColumns.length-1 && showHeader\"\r\n          resizerHostSelector=\"div.sme-table-header\" (resized)=\"onColumnResized(colIndex, $event)\"\r\n          [visibleToScreenReader]=\"true\" [showResizerCover]=\"false\" orientation=\"left\"\r\n          (resizing)=\"onColumnResizing($event)\" class=\"sme-focus-zone\"></sme-resizer>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"sme-focus-zone sme-table-container sme-data-table-transition\" #content role=\"presentation\"\r\n  [class.sme-table-multi-select]=\"selectionMode==='multiple'\" [class.sme-table-selectable]=\"selectable\"\r\n  [class.sme-margin-top-none]=\"!showHeader\" [class.sme-table-indented]=\"!noLeftMargin\"\r\n  [class.sme-table-grid-lines]=\"showGrid\"\r\n  [class.sme-table-select-all-enabled]=\"selectionMode==='multiple' && showAllItemCheckbox\"\r\n  [class.sme-table-editable]=\"editable\">\r\n  <div class=\"sme-table-scroll-container sme-layout-absolute sme-position-inset-none\"\r\n    [ngClass]=\"{'sme-layout-absolute sme-position-inset-none': scrollable, 'sme-scrollable': shouldScroll}\"\r\n    #scrollContainer role=\"rowgroup\">\r\n    <div role=\"row\" class=\"sme-table-row sme-table-row-placeholder\" #emptyMessage tabindex=\"0\"\r\n      *ngIf=\"showNoRecordsMessage()\" data-uta-id=\"empty-table-message\">\r\n      <sme-loading-wheel *ngIf=\"isLoading || !isColumnWidthCalculated\" [message]=\"loadingMessage\">\r\n      </sme-loading-wheel>\r\n      <div class=\"sme-table-cell sme-table-cell-placeholder\">&nbsp;</div>\r\n      <div role=\"gridcell\" class=\"sme-table-cell\">{{getNoRecordsMessage()}}</div>\r\n    </div>\r\n    <div class=\"sme-layout-relative sme-position-stretch-h sme-arrange-overflow-hide\" #scrollBody role=\"presentation\">\r\n      <div class=\"sme-table sme-table-scrollable sme-table-virtualized\" #scrollAboveData\r\n        [ngStyle]=\"{top: scrollAboveDataStyleTop}\" [attr.aria-hidden]=\"true\" sme-lint-disable>\r\n        <!-- Above view port -->\r\n        <div *ngFor=\"let renderedItem of renderedItemsAboveViewPort; let rowIndex = index\"\r\n          class=\"sme-table-row sme-table-row-data sme-table-row-selectable\"\r\n          [class.sme-table-row-active]=\"renderedItem.index === getActiveRenderedItemIndex()\"\r\n          [class.sme-table-row-selected]=\"renderedItem.index === getActiveRenderedItemIndex() || isItemSelected(renderedItem)\"\r\n          [class.sme-table-group-item]=\"renderedItem.type === renderedItemTypeEnum.GroupItem\"\r\n          [class.sme-table-group-header]=\"renderedItem.type === renderedItemTypeEnum.GroupHeader\"\r\n          [class.sme-checked]=\"isItemSelected(renderedItem)\">\r\n          <div class=\"sme-arrange-stack-h\">\r\n            <div class=\"sme-table-td sme-position-flex-auto\">\r\n              <div class=\"sme-table-cell\">\r\n                <div *ngIf=\"!showAsTree\" class=\"sme-table-checkbox\" role=\"presentation\">\r\n                  <input type=\"checkbox\" [checked]=\"isItemSelected(renderedItem)\" />\r\n                  <label role=\"presentation\"></label>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngFor=\"let column of actualColumns; let colIndex=index\"\r\n              [ngClass]=\"{'sme-table-column-first': isFirstDataColumn(column), 'sme-table-group-header-cell': renderedItem.type===renderedItemTypeEnum.GroupHeader}\"\r\n              [ngStyle]=\"{'width':column.domWidth+'px'}\"\r\n              class=\"sme-table-td sme-position-flex-auto {{column.styleClass}}\"\r\n              [attr.tabindex]=\"isTreeTableParentNode(renderedItem) ? -1 : 0\">\r\n              <div class=\"sme-screen-reader sme-screen-reader-disable-copy\" *ngIf=\"isFirstDataColumn(column)\">\r\n                {{getAdditionalScreenRecorderContent(renderedItem)}}</div>\r\n              <div *ngIf=\"renderedItem.type===renderedItemTypeEnum.GroupHeader && colIndex===0\" class=\"sme-table-cell\"\r\n                (click)=\"clickGroupToggle(renderedItem)\">\r\n                <span *ngIf=\"useGroupToggle\" class=\"sme-icon sme-icon-size-xxs sme-margin-right-xxs\"\r\n                  [ngClass]=\"{'sme-icon-chevronDown':isGroupExpanded(renderedItem.data), 'sme-icon-chevronRight':!isGroupExpanded(renderedItem.data)}\">\r\n                </span>\r\n                <span *ngIf=\"!this.groupHeaderTemplate\">\r\n                  {{renderedItem.data}}\r\n                </span>\r\n                <span *ngIf=\"this.groupHeaderTemplate\">\r\n                  <sme-data-table-template-loader [template]=\"this.groupHeaderTemplate\" [data]=\"renderedItem.data\">\r\n                  </sme-data-table-template-loader>\r\n                </span>\r\n              </div>\r\n              <div\r\n                *ngIf=\"renderedItem.type===renderedItemTypeEnum.TreeNode && !renderedItem.node.isBusy && colIndex===0\"\r\n                class=\"sme-table-expander-cell\" [ngStyle]=\"{'padding-left':(renderedItem.depth*16+4)+'px'}\"\r\n                [ngClass]=\"{'sme-expandable': renderedItem.hasChildren && !renderedItem.node.isLeaf}\">\r\n                <span class=\"sme-icon sme-icon-size-xxs\" role=\"button\"\r\n                  [attr.aria-expanded]=\"renderedItem.node.expanded?'true':'false'\"\r\n                  (click)=\"clickTreeToggle($event, renderedItem)\"\r\n                  [ngClass]=\"{'sme-icon-chevronDown':renderedItem.node.expanded, 'sme-icon-chevronRight':!renderedItem.node.expanded}\"\r\n                  [attr.aria-label]=\"renderedItem.node.expanded ? this.strings.MsftSmeShell.Angular.DataTable.aria.label.collapse : this.strings.MsftSmeShell.Angular.DataTable.aria.label.expand\">\r\n                </span>\r\n                <span class=\"sme-table-expander-cell-placeholder\"></span>\r\n              </div>\r\n              <div *ngIf=\"renderedItem.type===renderedItemTypeEnum.TreeNode && renderedItem.node.isBusy && colIndex===0\"\r\n                class=\"sme-table-expander-cell\" [ngStyle]=\"{'padding-left':(renderedItem.depth*16+4)+'px'}\">\r\n                <sme-loading-wheel size=\"extra-small\" [inline]=\"true\" [isBackgroundTransparent]=\"true\">\r\n                </sme-loading-wheel>\r\n                <span class=\"sme-table-expander-cell-placeholder\"></span>\r\n              </div>\r\n              <div\r\n                *ngIf=\"showAsTree && selectionMode==='multiple' && renderedItem.type==renderedItemTypeEnum.TreeNode && colIndex==0\"\r\n                class=\"sme-table-cell sme-table-checkbox-container\" role=\"presentation\">\r\n                <div class=\"sme-table-checkbox\" role=\"presentation\">\r\n                  <input type=\"checkbox\" [checked]=\"isItemSelected(renderedItem)\"\r\n                    (change)=\"onItemCheckBoxClicked(renderedItem)\" />\r\n                  <label role=\"presentation\"></label>\r\n                </div>\r\n              </div>\r\n              <ng-container *ngIf=\"!editable\">\r\n                <div *ngIf=\"!column.bodyTemplate && renderedItem.type!=renderedItemTypeEnum.GroupHeader\"\r\n                  class=\"sme-table-cell\" [class.sme-table-cell-full-height]=\"autoRowHeight\">\r\n                  {{renderedItem.data?resolveObjectPath(renderedItem.data,column.field):'.'}}\r\n                </div>\r\n                <div\r\n                  *ngIf=\"renderedItem.type!=renderedItemTypeEnum.GroupHeader && renderedItem.data && column.bodyTemplate\"\r\n                  [class.sme-table-cell-full-height]=\"autoRowHeight\" [class.sme-table-cell-height-auto]=\"autoRowHeight\"\r\n                  class=\"sme-table-cell\">\r\n                  <sme-data-table-template-loader *ngIf=\"!renderedItem.data.placeholder\"\r\n                    [template]=\"column.bodyTemplate\" [data]=\"renderedItem.data\" [rowIndex]=\"rowIndex\">\r\n                  </sme-data-table-template-loader>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"sme-table sme-table-scrollable\" #scrollData [class.sme-table-virtualized]=\"!disableUIVirtualization\"\r\n        [ngStyle]=\"{top: scrollDataStyleTop}\" sme-lint-disable role=\"presentation\">\r\n        <div *ngFor=\"let renderedItem of renderedItemsInAndBelowViewPort; let rowIndex = index\"\r\n          (keydown)=\"onContentTablePressed($event)\" (keyup)=\"onContentTableKeyUp($event)\"\r\n          (contextmenu)=\"enableRightClickSelect ? selectItem($event, renderedItem) : true\"\r\n          (click)=\"selectItem($event, renderedItem)\" class=\"sme-table-row sme-table-row-data sme-table-row-selectable\"\r\n          [class.sme-table-row-active]=\"renderedItem.index === getActiveRenderedItemIndex()\"\r\n          [class.sme-table-row-selected]=\"rowDisplayAsSelected(renderedItem)\"\r\n          [class.sme-table-group-item]=\"renderedItem.type === renderedItemTypeEnum.GroupItem\"\r\n          [class.sme-table-group-header]=\"renderedItem.type === renderedItemTypeEnum.GroupHeader\"\r\n          [class.sme-checked]=\"isItemSelected(renderedItem)\" [class.sme-table-row-editable]=\"editable\"\r\n          [class.sme-has-validation-error]=\"hasValidationError(renderedItem)\"\r\n          [class.sme-data-table-row-new-item]=\"renderedItem?.data?.isNewRow\"\r\n          [attr.tabindex]=\"renderedItem.index >= 0 ? 0 : undefined\" (dblclick)=\"doubleClickRow($event,renderedItem)\"\r\n          (focus)=\"onContentItemFocused($event, renderedItem)\" (focusin)=\"onContentItemFocused($event, renderedItem)\"\r\n          (focusout)=\"onContentItemBlurred($event, renderedItem)\" [attr.data-rendered-item-index]=\"renderedItem.index\"\r\n          [attr.aria-rowindex]=\"renderedItem.index+2\" [attr.aria-selected]=\"isItemSelected(renderedItem)?'true':'false'\"\r\n          (mouseenter)=\"setHoveredRenderedItem(renderedItem)\" (mouseleave)=\"unsetHoveredRenderedItem(renderedItem)\"\r\n          role=\"row\" [attr.aria-expanded]=\"getAriaExpandedAttributeValue(renderedItem)\"\r\n          [attr.aria-level]=\"showAsTree && renderedItem.depth ? (renderedItem.depth+1):undefined\">\r\n          <div class=\"sme-arrange-stack-h\" role=\"presentation\">\r\n            <div class=\"sme-table-td sme-position-flex-auto\"\r\n              [attr.role] = \"selectionMode === 'multiple' ? 'gridcell': 'presentation'\">\r\n              <div *ngIf=\"!showAsTree\" class=\"sme-table-cell sme-table-checkbox-container\" role=\"presentation\"\r\n                [class.sme-table-cell-full-height]=\"autoRowHeight\">\r\n                <div class=\"sme-table-checkbox\" role=\"presentation\">\r\n                  <input type=\"checkbox\" [attr.aria-checked]=\"isItemSelected(renderedItem)?'true':'false'\"\r\n                    [attr.aria-labelledby]=\"idBag.firstDataColumn + renderedItem.index\"\r\n                    [checked]=\"isItemSelected(renderedItem)\" (change)=\"onItemCheckBoxClicked(renderedItem)\" />\r\n                  <label role=\"presentation\"></label>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngFor=\"let column of actualColumns; let colIndex=index\"\r\n              [ngClass]=\"{'sme-table-column-first': isFirstDataColumn(column), 'sme-table-group-header-cell': renderedItem.type===renderedItemTypeEnum.GroupHeader}\"\r\n              [ngStyle]=\"{'width':column.domWidth+'px'}\"\r\n              class=\"sme-table-td sme-position-flex-auto {{column.styleClass}}\"\r\n              role=\"gridcell\" [attr.aria-rowindex]=\"renderedItem.index+2\"\r\n              [attr.tabindex]=\"isTreeTableParentNode(renderedItem) ? -1 : 0\">\r\n              <div class=\"sme-screen-reader sme-screen-reader-disable-copy\" *ngIf=\"isFirstDataColumn(column)\">\r\n                {{getAdditionalScreenRecorderContent(renderedItem)}}</div>\r\n              <div *ngIf=\"renderedItem.type===renderedItemTypeEnum.GroupHeader && colIndex===0\" class=\"sme-table-cell\"\r\n                (click)=\"clickGroupToggle(renderedItem)\" [id]=\"getFirstColumnId(column, renderedItem)\">\r\n                <span *ngIf=\"useGroupToggle\" class=\"sme-icon sme-icon-size-xxs sme-margin-right-xxs\"\r\n                  [ngClass]=\"{'sme-icon-chevronDown':isGroupExpanded(renderedItem.data), 'sme-icon-chevronRight':!isGroupExpanded(renderedItem.data)}\">\r\n                </span>\r\n                <span *ngIf=\"!this.groupHeaderTemplate\">\r\n                  {{renderedItem.data}}\r\n                </span>\r\n                <span *ngIf=\"this.groupHeaderTemplate\">\r\n                  <sme-data-table-template-loader [template]=\"this.groupHeaderTemplate\" [data]=\"renderedItem.data\">\r\n                  </sme-data-table-template-loader>\r\n                </span>\r\n              </div>\r\n              <div\r\n                *ngIf=\"renderedItem.type===renderedItemTypeEnum.TreeNode && !renderedItem.node.isBusy && colIndex===0\"\r\n                class=\"sme-table-expander-cell\" [ngStyle]=\"{'padding-left':(renderedItem.depth*16+4)+'px'}\"\r\n                [ngClass]=\"{'sme-expandable': renderedItem.hasChildren && !renderedItem.node.isLeaf}\">\r\n                <span class=\"sme-icon sme-icon-size-xxs\" role=\"button\"\r\n                  [attr.aria-expanded]=\"renderedItem.node.expanded?'true':'false'\"\r\n                  (click)=\"clickTreeToggle($event, renderedItem)\"\r\n                  [ngClass]=\"{'sme-icon-chevronDown':renderedItem.node.expanded, 'sme-icon-chevronRight':!renderedItem.node.expanded}\"\r\n                  [attr.aria-label]=\"renderedItem.node.expanded ? this.strings.MsftSmeShell.Angular.DataTable.aria.label.collapse : this.strings.MsftSmeShell.Angular.DataTable.aria.label.expand\">\r\n                </span>\r\n                <span class=\"sme-table-expander-cell-placeholder\"></span>\r\n              </div>\r\n              <div *ngIf=\"renderedItem.type===renderedItemTypeEnum.TreeNode && renderedItem.node.isBusy && colIndex===0\"\r\n                class=\"sme-table-expander-cell\" [ngStyle]=\"{'padding-left':(renderedItem.depth*16+4)+'px'}\">\r\n                <sme-loading-wheel size=\"extra-small\" [inline]=\"true\" [isBackgroundTransparent]=\"true\">\r\n                </sme-loading-wheel>\r\n                <span class=\"sme-table-expander-cell-placeholder\"></span>\r\n              </div>\r\n              <div\r\n                *ngIf=\"showAsTree && selectionMode==='multiple' && renderedItem.type==renderedItemTypeEnum.TreeNode && colIndex==0\"\r\n                class=\"sme-table-cell sme-table-checkbox-container\" role=\"presentation\">\r\n                <div class=\"sme-table-checkbox\" role=\"presentation\">\r\n                  <input type=\"checkbox\" [attr.aria-checked]=\"isItemSelected(renderedItem)?'true':'false'\"\r\n                    [attr.aria-labelledby]=\"idBag.firstDataColumn + renderedItem.index\"\r\n                    [checked]=\"isItemSelected(renderedItem)\" (change)=\"onItemCheckBoxClicked(renderedItem)\" />\r\n                  <label role=\"presentation\"></label>\r\n                </div>\r\n              </div>\r\n              <ng-container *ngIf=\"!editable\">\r\n                <div *ngIf=\"!column.bodyTemplate && renderedItem.type!=renderedItemTypeEnum.GroupHeader\"\r\n                  class=\"sme-table-cell\" [class.sme-table-cell-full-height]=\"autoRowHeight\"\r\n                  [id]=\"getFirstColumnId(column, renderedItem)\"\r\n                  [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                  {{renderedItem.data?resolveObjectPath(renderedItem.data,column.field):'.'}}</div>\r\n                <div\r\n                  *ngIf=\"renderedItem.type!=renderedItemTypeEnum.GroupHeader && renderedItem.data && column.bodyTemplate\"\r\n                  class=\"sme-table-cell\" [class.sme-table-cell-height-auto]=\"autoRowHeight\"\r\n                  [class.sme-table-cell-full-height]=\"autoRowHeight\" [id]=\"getFirstColumnId(column, renderedItem)\"\r\n                  [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                  <sme-data-table-template-loader *ngIf=\"!renderedItem.data.placeholder\"\r\n                    [template]=\"column.bodyTemplate\" [data]=\"renderedItem.data\" [rowIndex]=\"rowIndex\">\r\n                  </sme-data-table-template-loader>\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"editable && !column.bodyEditTemplate\">\r\n                <div *ngIf=\"!column.bodyReadTemplate && renderedItem.type!=renderedItemTypeEnum.GroupHeader\"\r\n                  class=\"sme-table-cell\"\r\n                  [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                  {{renderedItem.data?resolveObjectPath(renderedItem.data.content,column.field):'.'}}</div>\r\n                <div\r\n                  *ngIf=\"renderedItem.type!=renderedItemTypeEnum.GroupHeader && renderedItem.data && column.bodyReadTemplate\"\r\n                  class=\"sme-table-cell\"\r\n                  [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                  <sme-data-table-template-loader *ngIf=\"!renderedItem.data.placeholder\" [renderedItem]=\"renderedItem\"\r\n                    [template]=\"column.bodyReadTemplate\" [data]=\"renderedItem.data.content\" [rowIndex]=\"rowIndex\">\r\n                  </sme-data-table-template-loader>\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"editable && column.bodyEditTemplate\">\r\n                <ng-container *ngIf=\"!shouldShowEditRow(renderedItem)\">\r\n                  <div *ngIf=\"!column.bodyReadTemplate && renderedItem.type!=renderedItemTypeEnum.GroupHeader\"\r\n                    class=\"sme-table-cell\"\r\n                    [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                    {{renderedItem.data?resolveObjectPath(renderedItem.data.content,column.field):'.'}}</div>\r\n                  <div\r\n                    *ngIf=\"renderedItem.type!=renderedItemTypeEnum.GroupHeader && renderedItem.data && column.bodyReadTemplate\"\r\n                    class=\"sme-table-cell\"\r\n                    [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                    <sme-data-table-template-loader *ngIf=\"!renderedItem.data.placeholder\"\r\n                      [template]=\"column.bodyReadTemplate\" [data]=\"renderedItem.data.content\" [rowIndex]=\"rowIndex\">\r\n                    </sme-data-table-template-loader>\r\n                  </div>\r\n                </ng-container>\r\n                <div *ngIf=\"shouldShowEditRow(renderedItem)\" class=\"sme-table-cell sme-table-edit-container\"\r\n                  [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                  <sme-data-table-template-loader *ngIf=\"!renderedItem.data.placeholder\"\r\n                    [template]=\"column.bodyEditTemplate\" [field]=\"column.field\" [data]=\"renderedItem.data.content\"\r\n                    [rowIndex]=\"rowIndex\" [renderedItem]=\"renderedItem\"\r\n                    (validationAlert)=\"onValidationAlertHandler(renderedItem, column.field, $event.alert)\"\r\n                    (dataChanged)=\"onEditableDataChanged($event.renderedItem,$event.field)\">\r\n                  </sme-data-table-template-loader>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"hasValidationError(renderedItem)\" class=\"sme-table-row-validation\">\r\n            <div class=\"sme-table-td sme-position-flex-auto\"\r\n              [attr.role] = \"selectionMode === 'multiple' ? 'gridcell' : 'presentation'\"\r\n              [attr.tabindex]=\"selectionMode==='multiple'?'0':'undefined'\">\r\n              <div class=\"sme-table-cell\" role=\"presentation\">\r\n                <div *ngFor=\"let validationResultItem of renderedItem.validationResult\">\r\n                  <sme-validation-alert [alert]=\"validationResultItem.alert\"></sme-validation-alert>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"sme-table-row\" #tempRow>\r\n          <div class=\"sme-table-td\" tabindex=\"0\">\r\n            <div class=\"sme-table-cell\">&nbsp;</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"shouldUseLastFocusableShadowElement\" #lastFocusableShadowElement class=\"sme-focus-zone\"\r\n      data-sme-last-focusable-shadow-element (focus)=\"onLastFocusableShadowElementFocused($event)\" tabindex=\"0\"></div>\r\n  </div>\r\n  <div class=\"sme-layout-absolute sme-position-inset-none\"\r\n    *ngIf=\"isBusy || (this.nodeNavigatingTask && this.nodeNavigatingTask.isRunning)\">\r\n    <sme-loading-wheel [isBackgroundTransparent]=\"true\"></sme-loading-wheel>\r\n  </div>\r\n</div>\r\n<div #resizerIndicator\r\n  class=\"sme-width-xxs sme-layout-absolute sme-position-stretch-v sme-background-color-base-80 sme-layer-flyout sme-layout-none\">\r\n</div>\r\n" }]
     }], function () { return [{ type: i0.Injector }]; }, { resizerIndicator: [{
             type: ViewChild,
             args: ['resizerIndicator']
@@ -31516,7 +31840,7 @@ class TreeTableComponent extends DataTableComponent {
         i0.ɵɵelementEnd();
         i0.ɵɵelement(28, "div", 27, 28);
     } if (rf & 2) {
-        i0.ɵɵclassProp("sme-shadow-scrolled-content", ctx.isScrolledDown)("sme-table-multi-select", ctx.selectionMode === "multiple")("sme-table-selectable", ctx.selectable)("sme-table-indented", ctx.showLeftMargin)("sme-table-select-all-enabled", ctx.selectionMode === "multiple" && ctx.showAllItemCheckbox);
+        i0.ɵɵclassProp("sme-shadow-scrolled-content", ctx.isScrolledDown)("sme-table-multi-select", ctx.selectionMode === "multiple")("sme-table-selectable", ctx.selectable)("sme-table-indented", !ctx.noLeftMargin)("sme-table-select-all-enabled", ctx.selectionMode === "multiple" && ctx.showAllItemCheckbox);
         i0.ɵɵadvance(5);
         i0.ɵɵattribute("role", ctx.selectionMode === "multiple" ? "columnheader" : "presentation");
         i0.ɵɵadvance(1);
@@ -31524,7 +31848,7 @@ class TreeTableComponent extends DataTableComponent {
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngForOf", ctx.actualColumns);
         i0.ɵɵadvance(1);
-        i0.ɵɵclassProp("sme-table-multi-select", ctx.selectionMode === "multiple")("sme-table-selectable", ctx.selectable)("sme-margin-top-none", !ctx.showHeader)("sme-table-indented", ctx.showLeftMargin)("sme-table-grid-lines", ctx.showGrid)("sme-table-select-all-enabled", ctx.selectionMode === "multiple" && ctx.showAllItemCheckbox)("sme-table-editable", ctx.editable);
+        i0.ɵɵclassProp("sme-table-multi-select", ctx.selectionMode === "multiple")("sme-table-selectable", ctx.selectable)("sme-margin-top-none", !ctx.showHeader)("sme-table-indented", !ctx.noLeftMargin)("sme-table-grid-lines", ctx.showGrid)("sme-table-select-all-enabled", ctx.selectionMode === "multiple" && ctx.showAllItemCheckbox)("sme-table-editable", ctx.editable);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(38, _c18, ctx.scrollable, ctx.shouldScroll));
         i0.ɵɵadvance(2);
@@ -31546,7 +31870,7 @@ class TreeTableComponent extends DataTableComponent {
     } }, dependencies: [i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i1$1.NgStyle, ResizerComponent, LoadingWheelComponent, TooltipDirective, ValidationAlertComponent, DataTableTemplateLoaderComponent], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TreeTableComponent, [{
         type: Component,
-        args: [{ selector: 'sme-tree-table', template: "<div role=\"presentation\" class=\"sme-table-header sme-focus-zone sme-data-table-transition\" #header\r\n  [class.sme-shadow-scrolled-content]=\"isScrolledDown\" [class.sme-table-multi-select]=\"selectionMode==='multiple'\"\r\n  [class.sme-table-selectable]=\"selectable\" [class.sme-table-indented]=\"showLeftMargin\"\r\n  [class.sme-table-select-all-enabled]=\"selectionMode==='multiple' && showAllItemCheckbox\">\r\n  <!-- According to the accessibility team, data-table headers should be accessible by keyboard\r\n  and the resizer should also be accessed by keyboard.-->\r\n  <div #headerTable class=\"sme-table sme-table-virtualized sme-table-auto-width-phone-down\" role=\"rowgroup\">\r\n    <div class=\"sme-table-row sme-arrange-stack-h sme-position-flex-auto\" role=\"row\"\r\n      (keydown)=\"onHeaderTablePressed($event)\">\r\n      <div class=\"sme-table-caption\" [attr.role]=\"selectionMode==='multiple'?'columnheader':'presentation'\"\r\n        data-uta-id=\"checkboxColumn\">\r\n        <div class=\"sme-table-checkbox sme-table-header-checkbox\"\r\n          *ngIf=\"selectionMode==='multiple' && showAllItemCheckbox && showHeader\" role=\"presentation\">\r\n          <input sme-lint-disable-self type=\"checkbox\" [attr.aria-label]=\"getAllItemCheckBoxAriaLabel()\"\r\n            [checked]=\"shouldAllItemCheckBoxChecked()\"\r\n            [attr.aria-checked]=\"shouldAllItemCheckBoxChecked()?'true':'false'\" (change)=\"onAllItemCheckBoxClicked()\" />\r\n          <label role=\"presentation\"></label>\r\n        </div>\r\n      </div>\r\n      <div *ngFor=\"let column of actualColumns; let colIndex = index\" [attr.field]=\"column.field\"\r\n        [ngStyle]=\"{'width': column.width}\"\r\n        class=\"sme-table-caption sme-table-column-header sme-position-flex-auto {{column.styleClass}}\"\r\n        role=\"presentation\" [attr.data-uta-id]=\"column.utaId\" [attr.column-index]=\"colIndex\">\r\n        <div *ngIf=\"column.sortable && column.sortable!='false' && showHeader\"\r\n          class=\"sme-table-header-cell sme-focus-zone\" (click)=\"clickColumn(column)\" role=\"columnheader\"\r\n          [title]=\"column.header\" aria-live=\"polite\" tabindex=\"0\" [attr.aria-sort]=\"columnSortSettings[column.header]\">\r\n          <span>{{column.header}}</span>\r\n          <span class=\"sme-icon sme-margin-left-xxs\" [attr.aria-label]=\"column.sortable ? getSortLabel(column) : null\"\r\n            [ngClass]=\"{'sme-icon-up':column.sortMode===sortModeEnum.Ascend,'sme-icon-down':column.sortMode===sortModeEnum.Descend}\"></span>\r\n        </div>\r\n        <div *ngIf=\"!(column.sortable && column.sortable!='false') && showHeader\" class=\"sme-table-header-cell sme-focus-zone\"\r\n          role=\"columnheader\" [title]=\"column.header\" tabindex=\"0\">\r\n          <span>{{column.header}}</span>\r\n          <span class=\"sme-icon sme-margin-left-xxs\" [attr.aria-label]=\"column.sortable ? getSortLabel(column) : null\"\r\n            [ngClass]=\"{'sme-icon-up':column.sortMode===sortModeEnum.Ascend,'sme-icon-down':column.sortMode===sortModeEnum.Descend}\"></span>\r\n        </div>\r\n        <div *ngIf=\"!showHeader\" class=\"sme-table-header-cell\" role=\"columnheader\">\r\n        </div>\r\n        <sme-resizer [focusable]=\"false\" *ngIf=\"colIndex!==actualColumns.length-1 && showHeader\"\r\n          resizerHostSelector=\"div.sme-table-header\" (resized)=\"onColumnResized(colIndex, $event)\"\r\n          [visibleToScreenReader]=\"true\" [showResizerCover]=\"false\" orientation=\"left\"\r\n          (resizing)=\"onColumnResizing($event)\" class=\"sme-focus-zone\"></sme-resizer>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"sme-focus-zone sme-table-container sme-data-table-transition\" #content role=\"presentation\"\r\n  [class.sme-table-multi-select]=\"selectionMode==='multiple'\" [class.sme-table-selectable]=\"selectable\"\r\n  [class.sme-margin-top-none]=\"!showHeader\" [class.sme-table-indented]=\"showLeftMargin\"\r\n  [class.sme-table-grid-lines]=\"showGrid\"\r\n  [class.sme-table-select-all-enabled]=\"selectionMode==='multiple' && showAllItemCheckbox\"\r\n  [class.sme-table-editable]=\"editable\">\r\n  <div class=\"sme-table-scroll-container sme-layout-absolute sme-position-inset-none\"\r\n    [ngClass]=\"{'sme-layout-absolute sme-position-inset-none': scrollable, 'sme-scrollable': shouldScroll}\"\r\n    #scrollContainer role=\"rowgroup\">\r\n    <div role=\"row\" class=\"sme-table-row sme-table-row-placeholder\" #emptyMessage tabindex=\"0\"\r\n      *ngIf=\"showNoRecordsMessage()\" data-uta-id=\"empty-table-message\">\r\n      <sme-loading-wheel *ngIf=\"isLoading || !isColumnWidthCalculated\" [message]=\"loadingMessage\">\r\n      </sme-loading-wheel>\r\n      <div class=\"sme-table-cell sme-table-cell-placeholder\">&nbsp;</div>\r\n      <div role=\"gridcell\" class=\"sme-table-cell\">{{getNoRecordsMessage()}}</div>\r\n    </div>\r\n    <div class=\"sme-layout-relative sme-position-stretch-h sme-arrange-overflow-hide\" #scrollBody role=\"presentation\">\r\n      <div class=\"sme-table sme-table-scrollable sme-table-virtualized\" #scrollAboveData\r\n        [ngStyle]=\"{top: scrollAboveDataStyleTop}\" [attr.aria-hidden]=\"true\" sme-lint-disable>\r\n        <!-- Above view port -->\r\n        <div *ngFor=\"let renderedItem of renderedItemsAboveViewPort; let rowIndex = index\"\r\n          class=\"sme-table-row sme-table-row-data sme-table-row-selectable\"\r\n          [class.sme-table-row-active]=\"renderedItem.index === getActiveRenderedItemIndex()\"\r\n          [class.sme-table-row-selected]=\"renderedItem.index === getActiveRenderedItemIndex() || isItemSelected(renderedItem)\"\r\n          [class.sme-table-group-item]=\"renderedItem.type === renderedItemTypeEnum.GroupItem\"\r\n          [class.sme-table-group-header]=\"renderedItem.type === renderedItemTypeEnum.GroupHeader\"\r\n          [class.sme-checked]=\"isItemSelected(renderedItem)\">\r\n          <div class=\"sme-arrange-stack-h\">\r\n            <div class=\"sme-table-td sme-position-flex-auto\">\r\n              <div class=\"sme-table-cell\">\r\n                <div *ngIf=\"!showAsTree\" class=\"sme-table-checkbox\" role=\"presentation\">\r\n                  <input type=\"checkbox\" [checked]=\"isItemSelected(renderedItem)\" />\r\n                  <label role=\"presentation\"></label>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngFor=\"let column of actualColumns; let colIndex=index\"\r\n              [ngClass]=\"{'sme-table-column-first': isFirstDataColumn(column), 'sme-table-group-header-cell': renderedItem.type===renderedItemTypeEnum.GroupHeader}\"\r\n              [ngStyle]=\"{'width':column.domWidth+'px'}\"\r\n              class=\"sme-table-td sme-position-flex-auto {{column.styleClass}}\"\r\n              [attr.tabindex]=\"isTreeTableParentNode(renderedItem) ? -1 : 0\">\r\n              <div class=\"sme-screen-reader sme-screen-reader-disable-copy\" *ngIf=\"isFirstDataColumn(column)\">\r\n                {{getAdditionalScreenRecorderContent(renderedItem)}}</div>\r\n              <div *ngIf=\"renderedItem.type===renderedItemTypeEnum.GroupHeader && colIndex===0\" class=\"sme-table-cell\"\r\n                (click)=\"clickGroupToggle(renderedItem)\">\r\n                <span *ngIf=\"useGroupToggle\" class=\"sme-icon sme-icon-size-xxs sme-margin-right-xxs\"\r\n                  [ngClass]=\"{'sme-icon-chevronDown':isGroupExpanded(renderedItem.data), 'sme-icon-chevronRight':!isGroupExpanded(renderedItem.data)}\">\r\n                </span>\r\n                <span *ngIf=\"!this.groupHeaderTemplate\">\r\n                  {{renderedItem.data}}\r\n                </span>\r\n                <span *ngIf=\"this.groupHeaderTemplate\">\r\n                  <sme-data-table-template-loader [template]=\"this.groupHeaderTemplate\" [data]=\"renderedItem.data\">\r\n                  </sme-data-table-template-loader>\r\n                </span>\r\n              </div>\r\n              <div\r\n                *ngIf=\"renderedItem.type===renderedItemTypeEnum.TreeNode && !renderedItem.node.isBusy && colIndex===0\"\r\n                class=\"sme-table-expander-cell\" [ngStyle]=\"{'padding-left':(renderedItem.depth*16+4)+'px'}\"\r\n                [ngClass]=\"{'sme-expandable': renderedItem.hasChildren && !renderedItem.node.isLeaf}\">\r\n                <span class=\"sme-icon sme-icon-size-xxs\" role=\"button\"\r\n                  [attr.aria-expanded]=\"renderedItem.node.expanded?'true':'false'\"\r\n                  (click)=\"clickTreeToggle($event, renderedItem)\"\r\n                  [ngClass]=\"{'sme-icon-chevronDown':renderedItem.node.expanded, 'sme-icon-chevronRight':!renderedItem.node.expanded}\"\r\n                  [attr.aria-label]=\"renderedItem.node.expanded ? this.strings.MsftSmeShell.Angular.DataTable.aria.label.collapse : this.strings.MsftSmeShell.Angular.DataTable.aria.label.expand\">\r\n                </span>\r\n                <span class=\"sme-table-expander-cell-placeholder\"></span>\r\n              </div>\r\n              <div *ngIf=\"renderedItem.type===renderedItemTypeEnum.TreeNode && renderedItem.node.isBusy && colIndex===0\"\r\n                class=\"sme-table-expander-cell\" [ngStyle]=\"{'padding-left':(renderedItem.depth*16+4)+'px'}\">\r\n                <sme-loading-wheel size=\"extra-small\" [inline]=\"true\" [isBackgroundTransparent]=\"true\">\r\n                </sme-loading-wheel>\r\n                <span class=\"sme-table-expander-cell-placeholder\"></span>\r\n              </div>\r\n              <div\r\n                *ngIf=\"showAsTree && selectionMode==='multiple' && renderedItem.type==renderedItemTypeEnum.TreeNode && colIndex==0\"\r\n                class=\"sme-table-cell sme-table-checkbox-container\" role=\"presentation\">\r\n                <div class=\"sme-table-checkbox\" role=\"presentation\">\r\n                  <input type=\"checkbox\" [checked]=\"isItemSelected(renderedItem)\"\r\n                    (change)=\"onItemCheckBoxClicked(renderedItem)\" />\r\n                  <label role=\"presentation\"></label>\r\n                </div>\r\n              </div>\r\n              <ng-container *ngIf=\"!editable\">\r\n                <div *ngIf=\"!column.bodyTemplate && renderedItem.type!=renderedItemTypeEnum.GroupHeader\"\r\n                  class=\"sme-table-cell\" [class.sme-table-cell-full-height]=\"autoRowHeight\">\r\n                  {{renderedItem.data?resolveObjectPath(renderedItem.data,column.field):'.'}}\r\n                </div>\r\n                <div\r\n                  *ngIf=\"renderedItem.type!=renderedItemTypeEnum.GroupHeader && renderedItem.data && column.bodyTemplate\"\r\n                  [class.sme-table-cell-full-height]=\"autoRowHeight\" [class.sme-table-cell-height-auto]=\"autoRowHeight\"\r\n                  class=\"sme-table-cell\">\r\n                  <sme-data-table-template-loader *ngIf=\"!renderedItem.data.placeholder\"\r\n                    [template]=\"column.bodyTemplate\" [data]=\"renderedItem.data\" [rowIndex]=\"rowIndex\">\r\n                  </sme-data-table-template-loader>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"sme-table sme-table-scrollable\" #scrollData [class.sme-table-virtualized]=\"!disableUIVirtualization\"\r\n        [ngStyle]=\"{top: scrollDataStyleTop}\" sme-lint-disable role=\"presentation\">\r\n        <div *ngFor=\"let renderedItem of renderedItemsInAndBelowViewPort; let rowIndex = index\"\r\n          (keydown)=\"onContentTablePressed($event)\" (keyup)=\"onContentTableKeyUp($event)\"\r\n          (contextmenu)=\"enableRightClickSelect ? selectItem($event, renderedItem) : true\"\r\n          (click)=\"selectItem($event, renderedItem)\" class=\"sme-table-row sme-table-row-data sme-table-row-selectable\"\r\n          [class.sme-table-row-active]=\"renderedItem.index === getActiveRenderedItemIndex()\"\r\n          [class.sme-table-row-selected]=\"rowDisplayAsSelected(renderedItem)\"\r\n          [class.sme-table-group-item]=\"renderedItem.type === renderedItemTypeEnum.GroupItem\"\r\n          [class.sme-table-group-header]=\"renderedItem.type === renderedItemTypeEnum.GroupHeader\"\r\n          [class.sme-checked]=\"isItemSelected(renderedItem)\" [class.sme-table-row-editable]=\"editable\"\r\n          [class.sme-has-validation-error]=\"hasValidationError(renderedItem)\"\r\n          [class.sme-data-table-row-new-item]=\"renderedItem?.data?.isNewRow\"\r\n          [attr.tabindex]=\"renderedItem.index >= 0 ? 0 : undefined\" (dblclick)=\"doubleClickRow($event,renderedItem)\"\r\n          (focus)=\"onContentItemFocused($event, renderedItem)\" (focusin)=\"onContentItemFocused($event, renderedItem)\"\r\n          (focusout)=\"onContentItemBlurred($event, renderedItem)\" [attr.data-rendered-item-index]=\"renderedItem.index\"\r\n          [attr.aria-rowindex]=\"renderedItem.index+2\" [attr.aria-selected]=\"isItemSelected(renderedItem)?'true':'false'\"\r\n          (mouseenter)=\"setHoveredRenderedItem(renderedItem)\" (mouseleave)=\"unsetHoveredRenderedItem(renderedItem)\"\r\n          role=\"row\" [attr.aria-expanded]=\"getAriaExpandedAttributeValue(renderedItem)\"\r\n          [attr.aria-level]=\"showAsTree && renderedItem.depth ? (renderedItem.depth+1):undefined\">\r\n          <div class=\"sme-arrange-stack-h\" role=\"presentation\">\r\n            <div class=\"sme-table-td sme-position-flex-auto\"\r\n              [attr.role] = \"selectionMode === 'multiple' ? 'gridcell': 'presentation'\">\r\n              <div *ngIf=\"!showAsTree\" class=\"sme-table-cell sme-table-checkbox-container\" role=\"presentation\"\r\n                [class.sme-table-cell-full-height]=\"autoRowHeight\">\r\n                <div class=\"sme-table-checkbox\" role=\"presentation\">\r\n                  <input type=\"checkbox\" [attr.aria-checked]=\"isItemSelected(renderedItem)?'true':'false'\"\r\n                    [attr.aria-labelledby]=\"idBag.firstDataColumn + renderedItem.index\"\r\n                    [checked]=\"isItemSelected(renderedItem)\" (change)=\"onItemCheckBoxClicked(renderedItem)\" />\r\n                  <label role=\"presentation\"></label>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngFor=\"let column of actualColumns; let colIndex=index\"\r\n              [ngClass]=\"{'sme-table-column-first': isFirstDataColumn(column), 'sme-table-group-header-cell': renderedItem.type===renderedItemTypeEnum.GroupHeader}\"\r\n              [ngStyle]=\"{'width':column.domWidth+'px'}\"\r\n              class=\"sme-table-td sme-position-flex-auto {{column.styleClass}}\"\r\n              role=\"gridcell\" [attr.aria-rowindex]=\"renderedItem.index+2\"\r\n              [attr.tabindex]=\"isTreeTableParentNode(renderedItem) ? -1 : 0\">\r\n              <div class=\"sme-screen-reader sme-screen-reader-disable-copy\" *ngIf=\"isFirstDataColumn(column)\">\r\n                {{getAdditionalScreenRecorderContent(renderedItem)}}</div>\r\n              <div *ngIf=\"renderedItem.type===renderedItemTypeEnum.GroupHeader && colIndex===0\" class=\"sme-table-cell\"\r\n                (click)=\"clickGroupToggle(renderedItem)\" [id]=\"getFirstColumnId(column, renderedItem)\">\r\n                <span *ngIf=\"useGroupToggle\" class=\"sme-icon sme-icon-size-xxs sme-margin-right-xxs\"\r\n                  [ngClass]=\"{'sme-icon-chevronDown':isGroupExpanded(renderedItem.data), 'sme-icon-chevronRight':!isGroupExpanded(renderedItem.data)}\">\r\n                </span>\r\n                <span *ngIf=\"!this.groupHeaderTemplate\">\r\n                  {{renderedItem.data}}\r\n                </span>\r\n                <span *ngIf=\"this.groupHeaderTemplate\">\r\n                  <sme-data-table-template-loader [template]=\"this.groupHeaderTemplate\" [data]=\"renderedItem.data\">\r\n                  </sme-data-table-template-loader>\r\n                </span>\r\n              </div>\r\n              <div\r\n                *ngIf=\"renderedItem.type===renderedItemTypeEnum.TreeNode && !renderedItem.node.isBusy && colIndex===0\"\r\n                class=\"sme-table-expander-cell\" [ngStyle]=\"{'padding-left':(renderedItem.depth*16+4)+'px'}\"\r\n                [ngClass]=\"{'sme-expandable': renderedItem.hasChildren && !renderedItem.node.isLeaf}\">\r\n                <span class=\"sme-icon sme-icon-size-xxs\" role=\"button\"\r\n                  [attr.aria-expanded]=\"renderedItem.node.expanded?'true':'false'\"\r\n                  (click)=\"clickTreeToggle($event, renderedItem)\"\r\n                  [ngClass]=\"{'sme-icon-chevronDown':renderedItem.node.expanded, 'sme-icon-chevronRight':!renderedItem.node.expanded}\"\r\n                  [attr.aria-label]=\"renderedItem.node.expanded ? this.strings.MsftSmeShell.Angular.DataTable.aria.label.collapse : this.strings.MsftSmeShell.Angular.DataTable.aria.label.expand\">\r\n                </span>\r\n                <span class=\"sme-table-expander-cell-placeholder\"></span>\r\n              </div>\r\n              <div *ngIf=\"renderedItem.type===renderedItemTypeEnum.TreeNode && renderedItem.node.isBusy && colIndex===0\"\r\n                class=\"sme-table-expander-cell\" [ngStyle]=\"{'padding-left':(renderedItem.depth*16+4)+'px'}\">\r\n                <sme-loading-wheel size=\"extra-small\" [inline]=\"true\" [isBackgroundTransparent]=\"true\">\r\n                </sme-loading-wheel>\r\n                <span class=\"sme-table-expander-cell-placeholder\"></span>\r\n              </div>\r\n              <div\r\n                *ngIf=\"showAsTree && selectionMode==='multiple' && renderedItem.type==renderedItemTypeEnum.TreeNode && colIndex==0\"\r\n                class=\"sme-table-cell sme-table-checkbox-container\" role=\"presentation\">\r\n                <div class=\"sme-table-checkbox\" role=\"presentation\">\r\n                  <input type=\"checkbox\" [attr.aria-checked]=\"isItemSelected(renderedItem)?'true':'false'\"\r\n                    [attr.aria-labelledby]=\"idBag.firstDataColumn + renderedItem.index\"\r\n                    [checked]=\"isItemSelected(renderedItem)\" (change)=\"onItemCheckBoxClicked(renderedItem)\" />\r\n                  <label role=\"presentation\"></label>\r\n                </div>\r\n              </div>\r\n              <ng-container *ngIf=\"!editable\">\r\n                <div *ngIf=\"!column.bodyTemplate && renderedItem.type!=renderedItemTypeEnum.GroupHeader\"\r\n                  class=\"sme-table-cell\" [class.sme-table-cell-full-height]=\"autoRowHeight\"\r\n                  [id]=\"getFirstColumnId(column, renderedItem)\"\r\n                  [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                  {{renderedItem.data?resolveObjectPath(renderedItem.data,column.field):'.'}}</div>\r\n                <div\r\n                  *ngIf=\"renderedItem.type!=renderedItemTypeEnum.GroupHeader && renderedItem.data && column.bodyTemplate\"\r\n                  class=\"sme-table-cell\" [class.sme-table-cell-height-auto]=\"autoRowHeight\"\r\n                  [class.sme-table-cell-full-height]=\"autoRowHeight\" [id]=\"getFirstColumnId(column, renderedItem)\"\r\n                  [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                  <sme-data-table-template-loader *ngIf=\"!renderedItem.data.placeholder\"\r\n                    [template]=\"column.bodyTemplate\" [data]=\"renderedItem.data\" [rowIndex]=\"rowIndex\">\r\n                  </sme-data-table-template-loader>\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"editable && !column.bodyEditTemplate\">\r\n                <div *ngIf=\"!column.bodyReadTemplate && renderedItem.type!=renderedItemTypeEnum.GroupHeader\"\r\n                  class=\"sme-table-cell\"\r\n                  [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                  {{renderedItem.data?resolveObjectPath(renderedItem.data.content,column.field):'.'}}</div>\r\n                <div\r\n                  *ngIf=\"renderedItem.type!=renderedItemTypeEnum.GroupHeader && renderedItem.data && column.bodyReadTemplate\"\r\n                  class=\"sme-table-cell\"\r\n                  [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                  <sme-data-table-template-loader *ngIf=\"!renderedItem.data.placeholder\" [renderedItem]=\"renderedItem\"\r\n                    [template]=\"column.bodyReadTemplate\" [data]=\"renderedItem.data.content\" [rowIndex]=\"rowIndex\">\r\n                  </sme-data-table-template-loader>\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"editable && column.bodyEditTemplate\">\r\n                <ng-container *ngIf=\"!shouldShowEditRow(renderedItem)\">\r\n                  <div *ngIf=\"!column.bodyReadTemplate && renderedItem.type!=renderedItemTypeEnum.GroupHeader\"\r\n                    class=\"sme-table-cell\"\r\n                    [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                    {{renderedItem.data?resolveObjectPath(renderedItem.data.content,column.field):'.'}}</div>\r\n                  <div\r\n                    *ngIf=\"renderedItem.type!=renderedItemTypeEnum.GroupHeader && renderedItem.data && column.bodyReadTemplate\"\r\n                    class=\"sme-table-cell\"\r\n                    [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                    <sme-data-table-template-loader *ngIf=\"!renderedItem.data.placeholder\"\r\n                      [template]=\"column.bodyReadTemplate\" [data]=\"renderedItem.data.content\" [rowIndex]=\"rowIndex\">\r\n                    </sme-data-table-template-loader>\r\n                  </div>\r\n                </ng-container>\r\n                <div *ngIf=\"shouldShowEditRow(renderedItem)\" class=\"sme-table-cell sme-table-edit-container\"\r\n                  [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                  <sme-data-table-template-loader *ngIf=\"!renderedItem.data.placeholder\"\r\n                    [template]=\"column.bodyEditTemplate\" [field]=\"column.field\" [data]=\"renderedItem.data.content\"\r\n                    [rowIndex]=\"rowIndex\" [renderedItem]=\"renderedItem\"\r\n                    (validationAlert)=\"onValidationAlertHandler(renderedItem, column.field, $event.alert)\"\r\n                    (dataChanged)=\"onEditableDataChanged($event.renderedItem,$event.field)\">\r\n                  </sme-data-table-template-loader>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"hasValidationError(renderedItem)\" class=\"sme-table-row-validation\">\r\n            <div class=\"sme-table-td sme-position-flex-auto\"\r\n              [attr.role] = \"selectionMode === 'multiple' ? 'gridcell' : 'presentation'\"\r\n              [attr.tabindex]=\"selectionMode==='multiple'?'0':'undefined'\">\r\n              <div class=\"sme-table-cell\" role=\"presentation\">\r\n                <div *ngFor=\"let validationResultItem of renderedItem.validationResult\">\r\n                  <sme-validation-alert [alert]=\"validationResultItem.alert\"></sme-validation-alert>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"sme-table-row\" #tempRow>\r\n          <div class=\"sme-table-td\" tabindex=\"0\">\r\n            <div class=\"sme-table-cell\">&nbsp;</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"shouldUseLastFocusableShadowElement\" #lastFocusableShadowElement class=\"sme-focus-zone\"\r\n      data-sme-last-focusable-shadow-element (focus)=\"onLastFocusableShadowElementFocused($event)\" tabindex=\"0\"></div>\r\n  </div>\r\n  <div class=\"sme-layout-absolute sme-position-inset-none\"\r\n    *ngIf=\"isBusy || (this.nodeNavigatingTask && this.nodeNavigatingTask.isRunning)\">\r\n    <sme-loading-wheel [isBackgroundTransparent]=\"true\"></sme-loading-wheel>\r\n  </div>\r\n</div>\r\n<div #resizerIndicator\r\n  class=\"sme-width-xxs sme-layout-absolute sme-position-stretch-v sme-background-color-base-80 sme-layer-flyout sme-layout-none\">\r\n</div>\r\n" }]
+        args: [{ selector: 'sme-tree-table', template: "<div role=\"presentation\" class=\"sme-table-header sme-focus-zone sme-data-table-transition\" #header\r\n  [class.sme-shadow-scrolled-content]=\"isScrolledDown\" [class.sme-table-multi-select]=\"selectionMode==='multiple'\"\r\n  [class.sme-table-selectable]=\"selectable\" [class.sme-table-indented]=\"!noLeftMargin\"\r\n  [class.sme-table-select-all-enabled]=\"selectionMode==='multiple' && showAllItemCheckbox\">\r\n  <!-- According to the accessibility team, data-table headers should be accessible by keyboard\r\n  and the resizer should also be accessed by keyboard.-->\r\n  <div #headerTable class=\"sme-table sme-table-virtualized sme-table-auto-width-phone-down\" role=\"rowgroup\">\r\n    <div class=\"sme-table-row sme-arrange-stack-h sme-position-flex-auto\" role=\"row\"\r\n      (keydown)=\"onHeaderTablePressed($event)\">\r\n      <div class=\"sme-table-caption\" [attr.role]=\"selectionMode==='multiple'?'columnheader':'presentation'\"\r\n        data-uta-id=\"checkboxColumn\">\r\n        <div class=\"sme-table-checkbox sme-table-header-checkbox\"\r\n          *ngIf=\"selectionMode==='multiple' && showAllItemCheckbox && showHeader\" role=\"presentation\">\r\n          <input sme-lint-disable-self type=\"checkbox\" [attr.aria-label]=\"getAllItemCheckBoxAriaLabel()\"\r\n            [checked]=\"shouldAllItemCheckBoxChecked()\"\r\n            [attr.aria-checked]=\"shouldAllItemCheckBoxChecked()?'true':'false'\" (change)=\"onAllItemCheckBoxClicked()\" />\r\n          <label role=\"presentation\"></label>\r\n        </div>\r\n      </div>\r\n      <div *ngFor=\"let column of actualColumns; let colIndex = index\" [attr.field]=\"column.field\"\r\n        [ngStyle]=\"{'width': column.width}\"\r\n        class=\"sme-table-caption sme-table-column-header sme-position-flex-auto {{column.styleClass}}\"\r\n        role=\"presentation\" [attr.data-uta-id]=\"column.utaId\" [attr.column-index]=\"colIndex\">\r\n        <div *ngIf=\"column.sortable && column.sortable!='false' && showHeader\"\r\n          class=\"sme-table-header-cell sme-focus-zone\" (click)=\"clickColumn(column)\" role=\"columnheader\"\r\n          [title]=\"column.header\" aria-live=\"polite\" tabindex=\"0\" [attr.aria-sort]=\"columnSortSettings[column.header]\">\r\n          <span>{{column.header}}</span>\r\n          <span class=\"sme-icon sme-margin-left-xxs\" [attr.aria-label]=\"column.sortable ? getSortLabel(column) : null\"\r\n            [ngClass]=\"{'sme-icon-up':column.sortMode===sortModeEnum.Ascend,'sme-icon-down':column.sortMode===sortModeEnum.Descend}\"></span>\r\n        </div>\r\n        <div *ngIf=\"!(column.sortable && column.sortable!='false') && showHeader\" class=\"sme-table-header-cell sme-focus-zone\"\r\n          role=\"columnheader\" [title]=\"column.header\" tabindex=\"0\">\r\n          <span>{{column.header}}</span>\r\n          <span class=\"sme-icon sme-margin-left-xxs\" [attr.aria-label]=\"column.sortable ? getSortLabel(column) : null\"\r\n            [ngClass]=\"{'sme-icon-up':column.sortMode===sortModeEnum.Ascend,'sme-icon-down':column.sortMode===sortModeEnum.Descend}\"></span>\r\n        </div>\r\n        <div *ngIf=\"!showHeader\" class=\"sme-table-header-cell\" role=\"columnheader\">\r\n        </div>\r\n        <sme-resizer [focusable]=\"false\" *ngIf=\"colIndex!==actualColumns.length-1 && showHeader\"\r\n          resizerHostSelector=\"div.sme-table-header\" (resized)=\"onColumnResized(colIndex, $event)\"\r\n          [visibleToScreenReader]=\"true\" [showResizerCover]=\"false\" orientation=\"left\"\r\n          (resizing)=\"onColumnResizing($event)\" class=\"sme-focus-zone\"></sme-resizer>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"sme-focus-zone sme-table-container sme-data-table-transition\" #content role=\"presentation\"\r\n  [class.sme-table-multi-select]=\"selectionMode==='multiple'\" [class.sme-table-selectable]=\"selectable\"\r\n  [class.sme-margin-top-none]=\"!showHeader\" [class.sme-table-indented]=\"!noLeftMargin\"\r\n  [class.sme-table-grid-lines]=\"showGrid\"\r\n  [class.sme-table-select-all-enabled]=\"selectionMode==='multiple' && showAllItemCheckbox\"\r\n  [class.sme-table-editable]=\"editable\">\r\n  <div class=\"sme-table-scroll-container sme-layout-absolute sme-position-inset-none\"\r\n    [ngClass]=\"{'sme-layout-absolute sme-position-inset-none': scrollable, 'sme-scrollable': shouldScroll}\"\r\n    #scrollContainer role=\"rowgroup\">\r\n    <div role=\"row\" class=\"sme-table-row sme-table-row-placeholder\" #emptyMessage tabindex=\"0\"\r\n      *ngIf=\"showNoRecordsMessage()\" data-uta-id=\"empty-table-message\">\r\n      <sme-loading-wheel *ngIf=\"isLoading || !isColumnWidthCalculated\" [message]=\"loadingMessage\">\r\n      </sme-loading-wheel>\r\n      <div class=\"sme-table-cell sme-table-cell-placeholder\">&nbsp;</div>\r\n      <div role=\"gridcell\" class=\"sme-table-cell\">{{getNoRecordsMessage()}}</div>\r\n    </div>\r\n    <div class=\"sme-layout-relative sme-position-stretch-h sme-arrange-overflow-hide\" #scrollBody role=\"presentation\">\r\n      <div class=\"sme-table sme-table-scrollable sme-table-virtualized\" #scrollAboveData\r\n        [ngStyle]=\"{top: scrollAboveDataStyleTop}\" [attr.aria-hidden]=\"true\" sme-lint-disable>\r\n        <!-- Above view port -->\r\n        <div *ngFor=\"let renderedItem of renderedItemsAboveViewPort; let rowIndex = index\"\r\n          class=\"sme-table-row sme-table-row-data sme-table-row-selectable\"\r\n          [class.sme-table-row-active]=\"renderedItem.index === getActiveRenderedItemIndex()\"\r\n          [class.sme-table-row-selected]=\"renderedItem.index === getActiveRenderedItemIndex() || isItemSelected(renderedItem)\"\r\n          [class.sme-table-group-item]=\"renderedItem.type === renderedItemTypeEnum.GroupItem\"\r\n          [class.sme-table-group-header]=\"renderedItem.type === renderedItemTypeEnum.GroupHeader\"\r\n          [class.sme-checked]=\"isItemSelected(renderedItem)\">\r\n          <div class=\"sme-arrange-stack-h\">\r\n            <div class=\"sme-table-td sme-position-flex-auto\">\r\n              <div class=\"sme-table-cell\">\r\n                <div *ngIf=\"!showAsTree\" class=\"sme-table-checkbox\" role=\"presentation\">\r\n                  <input type=\"checkbox\" [checked]=\"isItemSelected(renderedItem)\" />\r\n                  <label role=\"presentation\"></label>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngFor=\"let column of actualColumns; let colIndex=index\"\r\n              [ngClass]=\"{'sme-table-column-first': isFirstDataColumn(column), 'sme-table-group-header-cell': renderedItem.type===renderedItemTypeEnum.GroupHeader}\"\r\n              [ngStyle]=\"{'width':column.domWidth+'px'}\"\r\n              class=\"sme-table-td sme-position-flex-auto {{column.styleClass}}\"\r\n              [attr.tabindex]=\"isTreeTableParentNode(renderedItem) ? -1 : 0\">\r\n              <div class=\"sme-screen-reader sme-screen-reader-disable-copy\" *ngIf=\"isFirstDataColumn(column)\">\r\n                {{getAdditionalScreenRecorderContent(renderedItem)}}</div>\r\n              <div *ngIf=\"renderedItem.type===renderedItemTypeEnum.GroupHeader && colIndex===0\" class=\"sme-table-cell\"\r\n                (click)=\"clickGroupToggle(renderedItem)\">\r\n                <span *ngIf=\"useGroupToggle\" class=\"sme-icon sme-icon-size-xxs sme-margin-right-xxs\"\r\n                  [ngClass]=\"{'sme-icon-chevronDown':isGroupExpanded(renderedItem.data), 'sme-icon-chevronRight':!isGroupExpanded(renderedItem.data)}\">\r\n                </span>\r\n                <span *ngIf=\"!this.groupHeaderTemplate\">\r\n                  {{renderedItem.data}}\r\n                </span>\r\n                <span *ngIf=\"this.groupHeaderTemplate\">\r\n                  <sme-data-table-template-loader [template]=\"this.groupHeaderTemplate\" [data]=\"renderedItem.data\">\r\n                  </sme-data-table-template-loader>\r\n                </span>\r\n              </div>\r\n              <div\r\n                *ngIf=\"renderedItem.type===renderedItemTypeEnum.TreeNode && !renderedItem.node.isBusy && colIndex===0\"\r\n                class=\"sme-table-expander-cell\" [ngStyle]=\"{'padding-left':(renderedItem.depth*16+4)+'px'}\"\r\n                [ngClass]=\"{'sme-expandable': renderedItem.hasChildren && !renderedItem.node.isLeaf}\">\r\n                <span class=\"sme-icon sme-icon-size-xxs\" role=\"button\"\r\n                  [attr.aria-expanded]=\"renderedItem.node.expanded?'true':'false'\"\r\n                  (click)=\"clickTreeToggle($event, renderedItem)\"\r\n                  [ngClass]=\"{'sme-icon-chevronDown':renderedItem.node.expanded, 'sme-icon-chevronRight':!renderedItem.node.expanded}\"\r\n                  [attr.aria-label]=\"renderedItem.node.expanded ? this.strings.MsftSmeShell.Angular.DataTable.aria.label.collapse : this.strings.MsftSmeShell.Angular.DataTable.aria.label.expand\">\r\n                </span>\r\n                <span class=\"sme-table-expander-cell-placeholder\"></span>\r\n              </div>\r\n              <div *ngIf=\"renderedItem.type===renderedItemTypeEnum.TreeNode && renderedItem.node.isBusy && colIndex===0\"\r\n                class=\"sme-table-expander-cell\" [ngStyle]=\"{'padding-left':(renderedItem.depth*16+4)+'px'}\">\r\n                <sme-loading-wheel size=\"extra-small\" [inline]=\"true\" [isBackgroundTransparent]=\"true\">\r\n                </sme-loading-wheel>\r\n                <span class=\"sme-table-expander-cell-placeholder\"></span>\r\n              </div>\r\n              <div\r\n                *ngIf=\"showAsTree && selectionMode==='multiple' && renderedItem.type==renderedItemTypeEnum.TreeNode && colIndex==0\"\r\n                class=\"sme-table-cell sme-table-checkbox-container\" role=\"presentation\">\r\n                <div class=\"sme-table-checkbox\" role=\"presentation\">\r\n                  <input type=\"checkbox\" [checked]=\"isItemSelected(renderedItem)\"\r\n                    (change)=\"onItemCheckBoxClicked(renderedItem)\" />\r\n                  <label role=\"presentation\"></label>\r\n                </div>\r\n              </div>\r\n              <ng-container *ngIf=\"!editable\">\r\n                <div *ngIf=\"!column.bodyTemplate && renderedItem.type!=renderedItemTypeEnum.GroupHeader\"\r\n                  class=\"sme-table-cell\" [class.sme-table-cell-full-height]=\"autoRowHeight\">\r\n                  {{renderedItem.data?resolveObjectPath(renderedItem.data,column.field):'.'}}\r\n                </div>\r\n                <div\r\n                  *ngIf=\"renderedItem.type!=renderedItemTypeEnum.GroupHeader && renderedItem.data && column.bodyTemplate\"\r\n                  [class.sme-table-cell-full-height]=\"autoRowHeight\" [class.sme-table-cell-height-auto]=\"autoRowHeight\"\r\n                  class=\"sme-table-cell\">\r\n                  <sme-data-table-template-loader *ngIf=\"!renderedItem.data.placeholder\"\r\n                    [template]=\"column.bodyTemplate\" [data]=\"renderedItem.data\" [rowIndex]=\"rowIndex\">\r\n                  </sme-data-table-template-loader>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"sme-table sme-table-scrollable\" #scrollData [class.sme-table-virtualized]=\"!disableUIVirtualization\"\r\n        [ngStyle]=\"{top: scrollDataStyleTop}\" sme-lint-disable role=\"presentation\">\r\n        <div *ngFor=\"let renderedItem of renderedItemsInAndBelowViewPort; let rowIndex = index\"\r\n          (keydown)=\"onContentTablePressed($event)\" (keyup)=\"onContentTableKeyUp($event)\"\r\n          (contextmenu)=\"enableRightClickSelect ? selectItem($event, renderedItem) : true\"\r\n          (click)=\"selectItem($event, renderedItem)\" class=\"sme-table-row sme-table-row-data sme-table-row-selectable\"\r\n          [class.sme-table-row-active]=\"renderedItem.index === getActiveRenderedItemIndex()\"\r\n          [class.sme-table-row-selected]=\"rowDisplayAsSelected(renderedItem)\"\r\n          [class.sme-table-group-item]=\"renderedItem.type === renderedItemTypeEnum.GroupItem\"\r\n          [class.sme-table-group-header]=\"renderedItem.type === renderedItemTypeEnum.GroupHeader\"\r\n          [class.sme-checked]=\"isItemSelected(renderedItem)\" [class.sme-table-row-editable]=\"editable\"\r\n          [class.sme-has-validation-error]=\"hasValidationError(renderedItem)\"\r\n          [class.sme-data-table-row-new-item]=\"renderedItem?.data?.isNewRow\"\r\n          [attr.tabindex]=\"renderedItem.index >= 0 ? 0 : undefined\" (dblclick)=\"doubleClickRow($event,renderedItem)\"\r\n          (focus)=\"onContentItemFocused($event, renderedItem)\" (focusin)=\"onContentItemFocused($event, renderedItem)\"\r\n          (focusout)=\"onContentItemBlurred($event, renderedItem)\" [attr.data-rendered-item-index]=\"renderedItem.index\"\r\n          [attr.aria-rowindex]=\"renderedItem.index+2\" [attr.aria-selected]=\"isItemSelected(renderedItem)?'true':'false'\"\r\n          (mouseenter)=\"setHoveredRenderedItem(renderedItem)\" (mouseleave)=\"unsetHoveredRenderedItem(renderedItem)\"\r\n          role=\"row\" [attr.aria-expanded]=\"getAriaExpandedAttributeValue(renderedItem)\"\r\n          [attr.aria-level]=\"showAsTree && renderedItem.depth ? (renderedItem.depth+1):undefined\">\r\n          <div class=\"sme-arrange-stack-h\" role=\"presentation\">\r\n            <div class=\"sme-table-td sme-position-flex-auto\"\r\n              [attr.role] = \"selectionMode === 'multiple' ? 'gridcell': 'presentation'\">\r\n              <div *ngIf=\"!showAsTree\" class=\"sme-table-cell sme-table-checkbox-container\" role=\"presentation\"\r\n                [class.sme-table-cell-full-height]=\"autoRowHeight\">\r\n                <div class=\"sme-table-checkbox\" role=\"presentation\">\r\n                  <input type=\"checkbox\" [attr.aria-checked]=\"isItemSelected(renderedItem)?'true':'false'\"\r\n                    [attr.aria-labelledby]=\"idBag.firstDataColumn + renderedItem.index\"\r\n                    [checked]=\"isItemSelected(renderedItem)\" (change)=\"onItemCheckBoxClicked(renderedItem)\" />\r\n                  <label role=\"presentation\"></label>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngFor=\"let column of actualColumns; let colIndex=index\"\r\n              [ngClass]=\"{'sme-table-column-first': isFirstDataColumn(column), 'sme-table-group-header-cell': renderedItem.type===renderedItemTypeEnum.GroupHeader}\"\r\n              [ngStyle]=\"{'width':column.domWidth+'px'}\"\r\n              class=\"sme-table-td sme-position-flex-auto {{column.styleClass}}\"\r\n              role=\"gridcell\" [attr.aria-rowindex]=\"renderedItem.index+2\"\r\n              [attr.tabindex]=\"isTreeTableParentNode(renderedItem) ? -1 : 0\">\r\n              <div class=\"sme-screen-reader sme-screen-reader-disable-copy\" *ngIf=\"isFirstDataColumn(column)\">\r\n                {{getAdditionalScreenRecorderContent(renderedItem)}}</div>\r\n              <div *ngIf=\"renderedItem.type===renderedItemTypeEnum.GroupHeader && colIndex===0\" class=\"sme-table-cell\"\r\n                (click)=\"clickGroupToggle(renderedItem)\" [id]=\"getFirstColumnId(column, renderedItem)\">\r\n                <span *ngIf=\"useGroupToggle\" class=\"sme-icon sme-icon-size-xxs sme-margin-right-xxs\"\r\n                  [ngClass]=\"{'sme-icon-chevronDown':isGroupExpanded(renderedItem.data), 'sme-icon-chevronRight':!isGroupExpanded(renderedItem.data)}\">\r\n                </span>\r\n                <span *ngIf=\"!this.groupHeaderTemplate\">\r\n                  {{renderedItem.data}}\r\n                </span>\r\n                <span *ngIf=\"this.groupHeaderTemplate\">\r\n                  <sme-data-table-template-loader [template]=\"this.groupHeaderTemplate\" [data]=\"renderedItem.data\">\r\n                  </sme-data-table-template-loader>\r\n                </span>\r\n              </div>\r\n              <div\r\n                *ngIf=\"renderedItem.type===renderedItemTypeEnum.TreeNode && !renderedItem.node.isBusy && colIndex===0\"\r\n                class=\"sme-table-expander-cell\" [ngStyle]=\"{'padding-left':(renderedItem.depth*16+4)+'px'}\"\r\n                [ngClass]=\"{'sme-expandable': renderedItem.hasChildren && !renderedItem.node.isLeaf}\">\r\n                <span class=\"sme-icon sme-icon-size-xxs\" role=\"button\"\r\n                  [attr.aria-expanded]=\"renderedItem.node.expanded?'true':'false'\"\r\n                  (click)=\"clickTreeToggle($event, renderedItem)\"\r\n                  [ngClass]=\"{'sme-icon-chevronDown':renderedItem.node.expanded, 'sme-icon-chevronRight':!renderedItem.node.expanded}\"\r\n                  [attr.aria-label]=\"renderedItem.node.expanded ? this.strings.MsftSmeShell.Angular.DataTable.aria.label.collapse : this.strings.MsftSmeShell.Angular.DataTable.aria.label.expand\">\r\n                </span>\r\n                <span class=\"sme-table-expander-cell-placeholder\"></span>\r\n              </div>\r\n              <div *ngIf=\"renderedItem.type===renderedItemTypeEnum.TreeNode && renderedItem.node.isBusy && colIndex===0\"\r\n                class=\"sme-table-expander-cell\" [ngStyle]=\"{'padding-left':(renderedItem.depth*16+4)+'px'}\">\r\n                <sme-loading-wheel size=\"extra-small\" [inline]=\"true\" [isBackgroundTransparent]=\"true\">\r\n                </sme-loading-wheel>\r\n                <span class=\"sme-table-expander-cell-placeholder\"></span>\r\n              </div>\r\n              <div\r\n                *ngIf=\"showAsTree && selectionMode==='multiple' && renderedItem.type==renderedItemTypeEnum.TreeNode && colIndex==0\"\r\n                class=\"sme-table-cell sme-table-checkbox-container\" role=\"presentation\">\r\n                <div class=\"sme-table-checkbox\" role=\"presentation\">\r\n                  <input type=\"checkbox\" [attr.aria-checked]=\"isItemSelected(renderedItem)?'true':'false'\"\r\n                    [attr.aria-labelledby]=\"idBag.firstDataColumn + renderedItem.index\"\r\n                    [checked]=\"isItemSelected(renderedItem)\" (change)=\"onItemCheckBoxClicked(renderedItem)\" />\r\n                  <label role=\"presentation\"></label>\r\n                </div>\r\n              </div>\r\n              <ng-container *ngIf=\"!editable\">\r\n                <div *ngIf=\"!column.bodyTemplate && renderedItem.type!=renderedItemTypeEnum.GroupHeader\"\r\n                  class=\"sme-table-cell\" [class.sme-table-cell-full-height]=\"autoRowHeight\"\r\n                  [id]=\"getFirstColumnId(column, renderedItem)\"\r\n                  [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                  {{renderedItem.data?resolveObjectPath(renderedItem.data,column.field):'.'}}</div>\r\n                <div\r\n                  *ngIf=\"renderedItem.type!=renderedItemTypeEnum.GroupHeader && renderedItem.data && column.bodyTemplate\"\r\n                  class=\"sme-table-cell\" [class.sme-table-cell-height-auto]=\"autoRowHeight\"\r\n                  [class.sme-table-cell-full-height]=\"autoRowHeight\" [id]=\"getFirstColumnId(column, renderedItem)\"\r\n                  [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                  <sme-data-table-template-loader *ngIf=\"!renderedItem.data.placeholder\"\r\n                    [template]=\"column.bodyTemplate\" [data]=\"renderedItem.data\" [rowIndex]=\"rowIndex\">\r\n                  </sme-data-table-template-loader>\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"editable && !column.bodyEditTemplate\">\r\n                <div *ngIf=\"!column.bodyReadTemplate && renderedItem.type!=renderedItemTypeEnum.GroupHeader\"\r\n                  class=\"sme-table-cell\"\r\n                  [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                  {{renderedItem.data?resolveObjectPath(renderedItem.data.content,column.field):'.'}}</div>\r\n                <div\r\n                  *ngIf=\"renderedItem.type!=renderedItemTypeEnum.GroupHeader && renderedItem.data && column.bodyReadTemplate\"\r\n                  class=\"sme-table-cell\"\r\n                  [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                  <sme-data-table-template-loader *ngIf=\"!renderedItem.data.placeholder\" [renderedItem]=\"renderedItem\"\r\n                    [template]=\"column.bodyReadTemplate\" [data]=\"renderedItem.data.content\" [rowIndex]=\"rowIndex\">\r\n                  </sme-data-table-template-loader>\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"editable && column.bodyEditTemplate\">\r\n                <ng-container *ngIf=\"!shouldShowEditRow(renderedItem)\">\r\n                  <div *ngIf=\"!column.bodyReadTemplate && renderedItem.type!=renderedItemTypeEnum.GroupHeader\"\r\n                    class=\"sme-table-cell\"\r\n                    [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                    {{renderedItem.data?resolveObjectPath(renderedItem.data.content,column.field):'.'}}</div>\r\n                  <div\r\n                    *ngIf=\"renderedItem.type!=renderedItemTypeEnum.GroupHeader && renderedItem.data && column.bodyReadTemplate\"\r\n                    class=\"sme-table-cell\"\r\n                    [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                    <sme-data-table-template-loader *ngIf=\"!renderedItem.data.placeholder\"\r\n                      [template]=\"column.bodyReadTemplate\" [data]=\"renderedItem.data.content\" [rowIndex]=\"rowIndex\">\r\n                    </sme-data-table-template-loader>\r\n                  </div>\r\n                </ng-container>\r\n                <div *ngIf=\"shouldShowEditRow(renderedItem)\" class=\"sme-table-cell sme-table-edit-container\"\r\n                  [title]=\"getColumnTooltipText(column, renderedItem)\">\r\n                  <sme-data-table-template-loader *ngIf=\"!renderedItem.data.placeholder\"\r\n                    [template]=\"column.bodyEditTemplate\" [field]=\"column.field\" [data]=\"renderedItem.data.content\"\r\n                    [rowIndex]=\"rowIndex\" [renderedItem]=\"renderedItem\"\r\n                    (validationAlert)=\"onValidationAlertHandler(renderedItem, column.field, $event.alert)\"\r\n                    (dataChanged)=\"onEditableDataChanged($event.renderedItem,$event.field)\">\r\n                  </sme-data-table-template-loader>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"hasValidationError(renderedItem)\" class=\"sme-table-row-validation\">\r\n            <div class=\"sme-table-td sme-position-flex-auto\"\r\n              [attr.role] = \"selectionMode === 'multiple' ? 'gridcell' : 'presentation'\"\r\n              [attr.tabindex]=\"selectionMode==='multiple'?'0':'undefined'\">\r\n              <div class=\"sme-table-cell\" role=\"presentation\">\r\n                <div *ngFor=\"let validationResultItem of renderedItem.validationResult\">\r\n                  <sme-validation-alert [alert]=\"validationResultItem.alert\"></sme-validation-alert>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"sme-table-row\" #tempRow>\r\n          <div class=\"sme-table-td\" tabindex=\"0\">\r\n            <div class=\"sme-table-cell\">&nbsp;</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"shouldUseLastFocusableShadowElement\" #lastFocusableShadowElement class=\"sme-focus-zone\"\r\n      data-sme-last-focusable-shadow-element (focus)=\"onLastFocusableShadowElementFocused($event)\" tabindex=\"0\"></div>\r\n  </div>\r\n  <div class=\"sme-layout-absolute sme-position-inset-none\"\r\n    *ngIf=\"isBusy || (this.nodeNavigatingTask && this.nodeNavigatingTask.isRunning)\">\r\n    <sme-loading-wheel [isBackgroundTransparent]=\"true\"></sme-loading-wheel>\r\n  </div>\r\n</div>\r\n<div #resizerIndicator\r\n  class=\"sme-width-xxs sme-layout-absolute sme-position-stretch-v sme-background-color-base-80 sme-layer-flyout sme-layout-none\">\r\n</div>\r\n" }]
     }], function () { return [{ type: i0.Injector }]; }, null); })();
 
 const _c0$U = ["deleteTemplate"];
@@ -33465,7 +33789,7 @@ class SplitViewComponent extends CoreBaseComponent {
      * The Angular ngOnDestroy function.
      */
     ngOnDestroy() {
-        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.subscriptions.forEach(sub => sub?.unsubscribe());
     }
     /**
      * The method called after content is initialized.
@@ -35661,7 +35985,7 @@ class AlertBarComponent extends CoreBaseComponent {
     ngOnDestroy() {
         this.alertBarService.unregister(this.id);
         if (this.dialogSubscriptions) {
-            this.dialogSubscriptions.forEach(sub => sub.unsubscribe());
+            this.dialogSubscriptions.forEach(sub => sub?.unsubscribe());
         }
     }
     /**
@@ -39035,9 +39359,7 @@ class BaseDialogComponent {
      * The method to run when the component is destroyed.
      */
     ngOnDestroy() {
-        this.dialogService.unregister(this.id);
-        // the close subscription is created in ngAfterViewInit, if the component is destroyed before that
-        // then the subscription will not exist and causing an error.
+        this.dialogService?.unregister(this.id);
         this.closeSubscription?.unsubscribe();
     }
     /**
@@ -39482,7 +39804,7 @@ class ConfirmationListDialogComponent extends BaseDialogComponent {
         return result;
     }
     hide(result) {
-        this.dataSourceSubscription.unsubscribe();
+        this.dataSourceSubscription?.unsubscribe();
         super.hide(result);
     }
     onConfirm() {
@@ -42932,7 +43254,7 @@ function PageAlertBarComponent_a_5_Template(rf, ctx) { if (rf & 1) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("title", !!ctx_r2.alert.detailsCaption ? ctx_r2.alert.detailsCaption : ctx_r2.defaultDetailsLabel);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", !!ctx_r2.alert.detailsLabel ? ctx_r2.alert.detailsLabel : ctx_r2.defaultDetailsLabel, "\n");
+    i0.ɵɵtextInterpolate1(" ", !!ctx_r2.alert.detailsLabel ? ctx_r2.alert.detailsLabel : ctx_r2.defaultDetailsLabel, " ");
 } }
 /**
  *
@@ -43083,8 +43405,8 @@ class PageAlertBarComponent extends SpacerBaseDirective {
         i0.ɵɵelementStart(2, "span");
         i0.ɵɵtext(3);
         i0.ɵɵtemplate(4, PageAlertBarComponent_a_4_Template, 2, 6, "a", 1);
-        i0.ɵɵelementEnd();
         i0.ɵɵtemplate(5, PageAlertBarComponent_a_5_Template, 2, 2, "a", 2);
+        i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵclassMapInterpolate1("sme-margin-right-xs sme-position-flex-none ", ctx.iconClass, "");
         i0.ɵɵclassProp("sme-icon", !!ctx.iconClass);
@@ -43099,7 +43421,7 @@ class PageAlertBarComponent extends SpacerBaseDirective {
     } }, dependencies: [i1$1.NgIf, StatusIconComponent, TooltipDirective], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PageAlertBarComponent, [{
         type: Component,
-        args: [{ selector: 'sme-page-alert-bar', template: "<span class=\"sme-margin-right-xs sme-position-flex-none {{iconClass}}\" [class.sme-icon]=\"!!iconClass\">\r\n  <sme-status-icon *ngIf=\"statusIcon !== null\" class=\"sme-layout-inline-block\" [status]=\"statusIcon\" size=\"16px\">\r\n  </sme-status-icon>\r\n</span>\r\n\r\n<span>\r\n  {{ alert.message }}\r\n  <a *ngIf=\"alert.externalLink\" class=\"sme-link sme-focus-zone sme-icon-after\" [class]=\"alert?.externalLink?.iconClass\"\r\n    [class.sme-icon]=\"!!alert?.externalLink?.iconClass\" href=\"{{alert.externalLink.url}}\"\r\n    target=\"_blank\">{{ alert.externalLink.title }}</a>\r\n</span>\r\n\r\n<a *ngIf=\"!!alert.detailsCommand\" class=\"sme-margin-left-xs sme-position-flex-none sme-link sme-focus-zone\" tabindex=\"0\" role=\"link\"\r\n  [title]=\"!!alert.detailsCaption ? alert.detailsCaption : defaultDetailsLabel\" (click)=\"alert.detailsCommand($event)\">\r\n  {{ !!alert.detailsLabel ? alert.detailsLabel : defaultDetailsLabel }}\r\n</a>\r\n" }]
+        args: [{ selector: 'sme-page-alert-bar', template: "<span class=\"sme-margin-right-xs sme-position-flex-none {{iconClass}}\" [class.sme-icon]=\"!!iconClass\">\r\n  <sme-status-icon *ngIf=\"statusIcon !== null\" class=\"sme-layout-inline-block\" [status]=\"statusIcon\" size=\"16px\">\r\n  </sme-status-icon>\r\n</span>\r\n\r\n<span>\r\n  {{ alert.message }}\r\n  <a *ngIf=\"alert.externalLink\" class=\"sme-link sme-focus-zone sme-icon-after\" [class]=\"alert?.externalLink?.iconClass\"\r\n    [class.sme-icon]=\"!!alert?.externalLink?.iconClass\" href=\"{{alert.externalLink.url}}\" target=\"_blank\">{{\r\n    alert.externalLink.title }}</a>\r\n  <a *ngIf=\"!!alert.detailsCommand\" class=\"sme-margin-left-xs sme-position-flex-none sme-link sme-focus-zone\"\r\n    tabindex=\"0\" role=\"link\" [title]=\"!!alert.detailsCaption ? alert.detailsCaption : defaultDetailsLabel\"\r\n    (click)=\"alert.detailsCommand($event)\">\r\n    {{ !!alert.detailsLabel ? alert.detailsLabel : defaultDetailsLabel }}\r\n  </a>\r\n</span>\r\n" }]
     }], function () { return [{ type: i0.Injector }]; }, { isBackgroundTransparent: [{
             type: Input
         }], isCritical: [{
@@ -43444,6 +43766,9 @@ function PropertyGridComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(2, PropertyGridComponent_ng_template_10_span_2_Template, 2, 1, "span", 25);
     i0.ɵɵelementStart(3, "a", 28);
     i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 29);
+    i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const item_r35 = ctx.$implicit;
@@ -43451,14 +43776,18 @@ function PropertyGridComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
     const ctx_r9 = i0.ɵɵnextContext();
     const _r12 = i0.ɵɵreference(15);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", _r12)("ngTemplateOutletContext", i0.ɵɵpureFunction2(7, _c4$2, item_r35, i_r36));
+    i0.ɵɵproperty("ngTemplateOutlet", _r12)("ngTemplateOutletContext", i0.ɵɵpureFunction2(8, _c4$2, item_r35, i_r36));
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", item_r35.prefixString);
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("routerLink", item_r35.link);
-    i0.ɵɵattribute("aria-labelledby", ctx_r9.idBag.labelSpan + i_r36 + " " + (ctx_r9.idBag.valueSpan + i_r36))("aria-describedby", ctx_r9.idBag.detailsSpan + i_r36);
+    i0.ɵɵattribute("aria-describedby", ctx_r9.idBag.detailsSpan + i_r36);
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(item_r35.value);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("id", ctx_r9.idBag.detailsSpan + i_r36);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate(ctx_r9.getInternalLinkDescription(item_r35));
 } }
 function PropertyGridComponent_ng_template_12_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -43476,8 +43805,11 @@ function PropertyGridComponent_ng_template_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p");
     i0.ɵɵtemplate(1, PropertyGridComponent_ng_template_12_ng_container_1_Template, 1, 0, "ng-container", 19);
     i0.ɵɵtemplate(2, PropertyGridComponent_ng_template_12_span_2_Template, 2, 1, "span", 25);
-    i0.ɵɵelementStart(3, "a", 29);
+    i0.ɵɵelementStart(3, "a", 30);
     i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 29);
+    i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const item_r40 = ctx.$implicit;
@@ -43485,14 +43817,18 @@ function PropertyGridComponent_ng_template_12_Template(rf, ctx) { if (rf & 1) {
     const ctx_r11 = i0.ɵɵnextContext();
     const _r12 = i0.ɵɵreference(15);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", _r12)("ngTemplateOutletContext", i0.ɵɵpureFunction2(7, _c4$2, item_r40, i_r41));
+    i0.ɵɵproperty("ngTemplateOutlet", _r12)("ngTemplateOutletContext", i0.ɵɵpureFunction2(8, _c4$2, item_r40, i_r41));
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", item_r40.prefixString);
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("href", item_r40.link, i0.ɵɵsanitizeUrl);
-    i0.ɵɵattribute("aria-labelledby", ctx_r11.idBag.labelSpan + i_r41 + " " + (ctx_r11.idBag.valueSpan + i_r41))("aria-describedby", ctx_r11.idBag.detailsSpan + i_r41);
+    i0.ɵɵattribute("aria-describedby", ctx_r11.idBag.detailsSpan + i_r41);
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(item_r40.value);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("id", ctx_r11.idBag.detailsSpan + i_r41);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate(ctx_r11.getExternalLinkDescription(item_r40));
 } }
 function PropertyGridComponent_ng_template_14_span_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span");
@@ -43501,14 +43837,14 @@ function PropertyGridComponent_ng_template_14_span_0_Template(rf, ctx) { if (rf
     i0.ɵɵclassMapInterpolate1("sme-margin-right-xs sme-icon ", item_r45.iconClass, "");
 } }
 function PropertyGridComponent_ng_template_14_sme_status_icon_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "sme-status-icon", 32);
+    i0.ɵɵelement(0, "sme-status-icon", 33);
 } if (rf & 2) {
     const item_r45 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵproperty("status", item_r45.status);
 } }
 function PropertyGridComponent_ng_template_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PropertyGridComponent_ng_template_14_span_0_Template, 1, 3, "span", 30);
-    i0.ɵɵtemplate(1, PropertyGridComponent_ng_template_14_sme_status_icon_1_Template, 1, 1, "sme-status-icon", 31);
+    i0.ɵɵtemplate(0, PropertyGridComponent_ng_template_14_span_0_Template, 1, 3, "span", 31);
+    i0.ɵɵtemplate(1, PropertyGridComponent_ng_template_14_sme_status_icon_1_Template, 1, 1, "sme-status-icon", 32);
 } if (rf & 2) {
     const item_r45 = ctx.$implicit;
     i0.ɵɵproperty("ngIf", !!item_r45.iconClass);
@@ -43644,6 +43980,12 @@ class PropertyGridComponent extends CoreBaseComponent {
             item.loading = false;
         }
     }
+    getInternalLinkDescription(item) {
+        return this.strings.MsftSmeShell.Angular.PropertyGrid.InternalLink.label.format(item.link);
+    }
+    getExternalLinkDescription(item) {
+        return this.strings.MsftSmeShell.Angular.PropertyGrid.ExternalLink.label.format(item.link);
+    }
     /**
      * Creates the idBag used by this component to store unique element ids.
      * id values will be assigned be the @see BaseComponent super class.
@@ -43685,7 +44027,7 @@ class PropertyGridComponent extends CoreBaseComponent {
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.externalLinkTemplate = _t.first);
     } }, inputs: { orientation: "orientation" }, outputs: { layoutChanged: "layoutChanged", windowBreakpointChanged: "windowBreakpointChanged" }, features: [i0.ɵɵProvidersFeature([
             { provide: SME_LAYOUT_PROVIDER, useExisting: forwardRef((() => PropertyGridComponent)) }
-        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 16, vars: 7, consts: [[1, "sme-position-inset-none", "sme-position-stretch-h", 3, "padLastItem", "oneColumn"], ["layout", ""], ["name", "narrow", 3, "until", "columns"], ["name", "medium", 3, "until", "columns", 4, "ngIf"], ["name", "wide", 3, "columns", 4, "ngIf"], [3, "columnSpan", "maxWidth", 4, "ngFor", "ngForOf"], ["readonlyTemplate", ""], ["actionLinkTemplate", ""], ["internalLinkTemplate", ""], ["externalLinkTemplate", ""], ["iconTemplate", ""], ["name", "medium", 3, "until", "columns"], ["name", "wide", 3, "columns"], [3, "columnSpan", "maxWidth"], ["tabindex", "0", "aria-live", "polite", "aria-atomic", "true", "smeTooltipZone", "", 1, "sme-property-grid-item"], ["zone", "smeTooltipZone"], [1, "sme-arrange-stack-h"], ["class", "sme-position-flex-none sme-icon sme-icon-info sme-info-bubble sme-margin-left-xs", "aria-hidden", "true", "tabindex", "0", 3, "title", "tooltipZone", 4, "ngIf"], [1, "sme-screen-reader"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["aria-hidden", "true", "tabindex", "0", 1, "sme-position-flex-none", "sme-icon", "sme-icon-info", "sme-info-bubble", "sme-margin-left-xs", 3, "title", "tooltipZone"], ["size", "extra-small", 3, "inline", "isBackgroundTransparent", 4, "ngIf"], [4, "ngIf"], ["size", "extra-small", 3, "inline", "isBackgroundTransparent"], [1, "sme-read-only-template"], ["class", "sme-padding-right-xs", 4, "ngIf"], ["tabindex", "0", "role", "link", 1, "sme-link", "sme-focus-zone", "sme-action-link-template", 3, "click"], [1, "sme-padding-right-xs"], ["role", "link", 1, "sme-link", "sme-focus-zone", 3, "routerLink"], ["role", "link", "target", "_blank", 1, "sme-link", "sme-focus-zone", "sme-icon", "sme-icon-after", "sme-icon-openInNewWindow", 3, "href"], [3, "class", 4, "ngIf"], ["class", "sme-layout-inline-block sme-margin-right-xs ", "size", "16px", 3, "status", 4, "ngIf"], ["size", "16px", 1, "sme-layout-inline-block", "sme-margin-right-xs", 3, "status"]], template: function PropertyGridComponent_Template(rf, ctx) { if (rf & 1) {
+        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 16, vars: 7, consts: [[1, "sme-position-inset-none", "sme-position-stretch-h", 3, "padLastItem", "oneColumn"], ["layout", ""], ["name", "narrow", 3, "until", "columns"], ["name", "medium", 3, "until", "columns", 4, "ngIf"], ["name", "wide", 3, "columns", 4, "ngIf"], [3, "columnSpan", "maxWidth", 4, "ngFor", "ngForOf"], ["readonlyTemplate", ""], ["actionLinkTemplate", ""], ["internalLinkTemplate", ""], ["externalLinkTemplate", ""], ["iconTemplate", ""], ["name", "medium", 3, "until", "columns"], ["name", "wide", 3, "columns"], [3, "columnSpan", "maxWidth"], ["tabindex", "0", "aria-live", "polite", "aria-atomic", "true", "smeTooltipZone", "", 1, "sme-property-grid-item"], ["zone", "smeTooltipZone"], [1, "sme-arrange-stack-h"], ["class", "sme-position-flex-none sme-icon sme-icon-info sme-info-bubble sme-margin-left-xs", "aria-hidden", "true", "tabindex", "0", 3, "title", "tooltipZone", 4, "ngIf"], [1, "sme-screen-reader"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["aria-hidden", "true", "tabindex", "0", 1, "sme-position-flex-none", "sme-icon", "sme-icon-info", "sme-info-bubble", "sme-margin-left-xs", 3, "title", "tooltipZone"], ["size", "extra-small", 3, "inline", "isBackgroundTransparent", 4, "ngIf"], [4, "ngIf"], ["size", "extra-small", 3, "inline", "isBackgroundTransparent"], [1, "sme-read-only-template"], ["class", "sme-padding-right-xs", 4, "ngIf"], ["tabindex", "0", "role", "link", 1, "sme-link", "sme-focus-zone", "sme-action-link-template", 3, "click"], [1, "sme-padding-right-xs"], ["role", "link", 1, "sme-link", "sme-focus-zone", 3, "routerLink"], [1, "sme-screen-reader", 3, "id"], ["role", "link", "target", "_blank", 1, "sme-link", "sme-focus-zone", "sme-icon", "sme-icon-after", "sme-icon-openInNewWindow", 3, "href"], [3, "class", 4, "ngIf"], ["class", "sme-layout-inline-block sme-margin-right-xs ", "size", "16px", 3, "status", 4, "ngIf"], ["size", "16px", 1, "sme-layout-inline-block", "sme-margin-right-xs", 3, "status"]], template: function PropertyGridComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "sme-layout", 0, 1);
         i0.ɵɵelement(2, "sme-layout-definition", 2);
         i0.ɵɵtemplate(3, PropertyGridComponent_sme_layout_definition_3_Template, 1, 2, "sme-layout-definition", 3);
@@ -43694,8 +44036,8 @@ class PropertyGridComponent extends CoreBaseComponent {
         i0.ɵɵelementEnd();
         i0.ɵɵtemplate(6, PropertyGridComponent_ng_template_6_Template, 2, 2, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
         i0.ɵɵtemplate(8, PropertyGridComponent_ng_template_8_Template, 5, 9, "ng-template", null, 7, i0.ɵɵtemplateRefExtractor);
-        i0.ɵɵtemplate(10, PropertyGridComponent_ng_template_10_Template, 5, 10, "ng-template", null, 8, i0.ɵɵtemplateRefExtractor);
-        i0.ɵɵtemplate(12, PropertyGridComponent_ng_template_12_Template, 5, 10, "ng-template", null, 9, i0.ɵɵtemplateRefExtractor);
+        i0.ɵɵtemplate(10, PropertyGridComponent_ng_template_10_Template, 7, 11, "ng-template", null, 8, i0.ɵɵtemplateRefExtractor);
+        i0.ɵɵtemplate(12, PropertyGridComponent_ng_template_12_Template, 7, 11, "ng-template", null, 9, i0.ɵɵtemplateRefExtractor);
         i0.ɵɵtemplate(14, PropertyGridComponent_ng_template_14_Template, 2, 2, "ng-template", null, 10, i0.ɵɵtemplateRefExtractor);
     } if (rf & 2) {
         i0.ɵɵproperty("padLastItem", true)("oneColumn", ctx.orientation === "vertical");
@@ -43712,7 +44054,7 @@ class PropertyGridComponent extends CoreBaseComponent {
         type: Component,
         args: [{ selector: 'sme-property-grid', providers: [
                     { provide: SME_LAYOUT_PROVIDER, useExisting: forwardRef((() => PropertyGridComponent)) }
-                ], template: "<sme-layout #layout [padLastItem]=\"true\" class=\"sme-position-inset-none sme-position-stretch-h\" [oneColumn]=\"orientation === 'vertical'\">\r\n  <sme-layout-definition name=\"narrow\" [until]=\"layoutItemWidth\" [columns]=\"1\"></sme-layout-definition>\r\n  <sme-layout-definition *ngIf=\"orientation !== 'vertical'\" name=\"medium\" [until]=\"layoutItemWidth*2\" [columns]=\"2\"></sme-layout-definition>\r\n  <sme-layout-definition *ngIf=\"orientation !== 'vertical'\" name=\"wide\" [columns]=\"3\"></sme-layout-definition>\r\n  <sme-layout-item *ngFor=\"let item of items; index as i\" [columnSpan]=\"item.columnSpan\"\r\n    [maxWidth]=\"orientation === 'vertical' ? null : item.columnSpan * layoutItemWidth\">\r\n    <div class=\"sme-property-grid-item\" tabindex=\"0\" aria-live=\"polite\" aria-atomic=\"true\" #zone=\"smeTooltipZone\" smeTooltipZone>\r\n      <label class=\"sme-arrange-stack-h\">\r\n        <span>{{ item.label }}</span>\r\n        <span *ngIf=\"item.tooltip\" class=\"sme-position-flex-none sme-icon sme-icon-info sme-info-bubble sme-margin-left-xs\"\r\n          [title]=\"item.tooltip\" [tooltipZone]=\"zone\" aria-hidden=\"true\" tabindex=\"0\"></span>\r\n        <!-- in scan mode screen reader does not focus on the info icon properly to read the title -->\r\n        <span class=\"sme-screen-reader\">{{ item.tooltip }}</span>\r\n      </label>\r\n      <ng-container *ngTemplateOutlet=\"getTemplate(item);context:{$implicit:item, index: i}\"></ng-container>\r\n    </div>\r\n  </sme-layout-item>\r\n</sme-layout>\r\n\r\n<!-- Read only -->\r\n<ng-template #readonlyTemplate let-item let-i=\"index\">\r\n  <sme-loading-wheel *ngIf=\"item.loading && item.isAsync\" size=\"extra-small\" [inline]=\"true\" [isBackgroundTransparent]=\"true\"></sme-loading-wheel>\r\n  <ng-container *ngIf=\"!item.loading || !item.isAsync\">\r\n    <p class=\"sme-read-only-template\" [attr.aria-labelledby]=\"idBag.labelSpan + i\" [attr.aria-describedby]=\"idBag.detailsSpan + i\">\r\n      <ng-container *ngTemplateOutlet=\"iconTemplate;context:{$implicit:item, index: i}\"></ng-container>\r\n      <span *ngIf=\"!item.link && !item.action\">{{ stringifyValue(item.value) }}</span>\r\n    </p>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<!-- Action link (role button) -->\r\n<ng-template #actionLinkTemplate let-item let-i=\"index\">\r\n  <p>\r\n    <ng-container *ngTemplateOutlet=\"iconTemplate;context:{$implicit:item, index: i}\"></ng-container>\r\n    <span *ngIf=\"item.prefixString\" class=\"sme-padding-right-xs\">{{ item.prefixString }}</span>\r\n    <a tabindex=\"0\" class=\"sme-link sme-focus-zone sme-action-link-template\" role=\"link\" (click)=\"item.action(item)\"\r\n      [attr.aria-labelledby]=\"(idBag.labelSpan + i) + ' ' + (idBag.valueSpan + i)\"\r\n      [attr.aria-describedby]=\"idBag.detailsSpan + i\">{{ item.value }}</a>\r\n  </p>\r\n</ng-template>\r\n\r\n<!-- Internal link -->\r\n<ng-template #internalLinkTemplate let-item let-i=\"index\">\r\n  <p>\r\n    <ng-container *ngTemplateOutlet=\"iconTemplate;context:{$implicit:item, index: i}\"></ng-container>\r\n    <span *ngIf=\"item.prefixString\" class=\"sme-padding-right-xs\">{{ item.prefixString }}</span>\r\n    <a class=\"sme-link sme-focus-zone\" role=\"link\" [routerLink]=\"item.link\" [attr.aria-labelledby]=\"(idBag.labelSpan + i) + ' ' + (idBag.valueSpan + i)\"\r\n      [attr.aria-describedby]=\"idBag.detailsSpan + i\">{{ item.value }}</a>\r\n  </p>\r\n</ng-template>\r\n\r\n<!-- External link -->\r\n<ng-template #externalLinkTemplate let-item let-i=\"index\">\r\n  <p>\r\n    <ng-container *ngTemplateOutlet=\"iconTemplate;context:{$implicit:item, index: i}\"></ng-container>\r\n    <span *ngIf=\"item.prefixString\" class=\"sme-padding-right-xs\">{{ item.prefixString }}</span>\r\n    <a class=\"sme-link sme-focus-zone sme-icon sme-icon-after sme-icon-openInNewWindow\" role=\"link\" [href]=\"item.link\" target=\"_blank\"\r\n      [attr.aria-labelledby]=\"(idBag.labelSpan + i) + ' ' + (idBag.valueSpan + i)\" [attr.aria-describedby]=\"idBag.detailsSpan + i\">{{ item.value }}</a>\r\n  </p>\r\n</ng-template>\r\n\r\n<!-- Icon Template -->\r\n<ng-template #iconTemplate let-item let-i=\"index\">\r\n  <span *ngIf=\"!!item.iconClass\" class=\"sme-margin-right-xs sme-icon {{item.iconClass}}\"></span>\r\n  <sme-status-icon *ngIf=\"item.status !== undefined && item.status !== null && !item.iconClass\" class=\"sme-layout-inline-block sme-margin-right-xs \"\r\n    [status]=\"item.status\" size=\"16px\"></sme-status-icon>\r\n</ng-template>\r\n" }]
+                ], template: "<sme-layout #layout [padLastItem]=\"true\" class=\"sme-position-inset-none sme-position-stretch-h\" [oneColumn]=\"orientation === 'vertical'\">\r\n  <sme-layout-definition name=\"narrow\" [until]=\"layoutItemWidth\" [columns]=\"1\"></sme-layout-definition>\r\n  <sme-layout-definition *ngIf=\"orientation !== 'vertical'\" name=\"medium\" [until]=\"layoutItemWidth*2\" [columns]=\"2\"></sme-layout-definition>\r\n  <sme-layout-definition *ngIf=\"orientation !== 'vertical'\" name=\"wide\" [columns]=\"3\"></sme-layout-definition>\r\n  <sme-layout-item *ngFor=\"let item of items; index as i\" [columnSpan]=\"item.columnSpan\"\r\n    [maxWidth]=\"orientation === 'vertical' ? null : item.columnSpan * layoutItemWidth\">\r\n    <div class=\"sme-property-grid-item\" tabindex=\"0\" aria-live=\"polite\" aria-atomic=\"true\" #zone=\"smeTooltipZone\" smeTooltipZone>\r\n      <label class=\"sme-arrange-stack-h\">\r\n        <span>{{ item.label }}</span>\r\n        <span *ngIf=\"item.tooltip\" class=\"sme-position-flex-none sme-icon sme-icon-info sme-info-bubble sme-margin-left-xs\"\r\n          [title]=\"item.tooltip\" [tooltipZone]=\"zone\" aria-hidden=\"true\" tabindex=\"0\"></span>\r\n        <!-- in scan mode screen reader does not focus on the info icon properly to read the title -->\r\n        <span class=\"sme-screen-reader\">{{ item.tooltip }}</span>\r\n      </label>\r\n      <ng-container *ngTemplateOutlet=\"getTemplate(item);context:{$implicit:item, index: i}\"></ng-container>\r\n    </div>\r\n  </sme-layout-item>\r\n</sme-layout>\r\n\r\n<!-- Read only -->\r\n<ng-template #readonlyTemplate let-item let-i=\"index\">\r\n  <sme-loading-wheel *ngIf=\"item.loading && item.isAsync\" size=\"extra-small\" [inline]=\"true\" [isBackgroundTransparent]=\"true\"></sme-loading-wheel>\r\n  <ng-container *ngIf=\"!item.loading || !item.isAsync\">\r\n    <p class=\"sme-read-only-template\" [attr.aria-labelledby]=\"idBag.labelSpan + i\" [attr.aria-describedby]=\"idBag.detailsSpan + i\">\r\n      <ng-container *ngTemplateOutlet=\"iconTemplate;context:{$implicit:item, index: i}\"></ng-container>\r\n      <span *ngIf=\"!item.link && !item.action\">{{ stringifyValue(item.value) }}</span>\r\n    </p>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<!-- Action link (role button) -->\r\n<ng-template #actionLinkTemplate let-item let-i=\"index\">\r\n  <p>\r\n    <ng-container *ngTemplateOutlet=\"iconTemplate;context:{$implicit:item, index: i}\"></ng-container>\r\n    <span *ngIf=\"item.prefixString\" class=\"sme-padding-right-xs\">{{ item.prefixString }}</span>\r\n    <a tabindex=\"0\" class=\"sme-link sme-focus-zone sme-action-link-template\" role=\"link\" (click)=\"item.action(item)\"\r\n      [attr.aria-labelledby]=\"(idBag.labelSpan + i) + ' ' + (idBag.valueSpan + i)\"\r\n      [attr.aria-describedby]=\"idBag.detailsSpan + i\">{{ item.value }}</a>\r\n  </p>\r\n</ng-template>\r\n\r\n<!-- Internal link -->\r\n<ng-template #internalLinkTemplate let-item let-i=\"index\">\r\n  <p>\r\n    <ng-container *ngTemplateOutlet=\"iconTemplate;context:{$implicit:item, index: i}\"></ng-container>\r\n    <span *ngIf=\"item.prefixString\" class=\"sme-padding-right-xs\">{{ item.prefixString }}</span>\r\n    <a class=\"sme-link sme-focus-zone\" role=\"link\" [routerLink]=\"item.link\"\r\n      [attr.aria-describedby]=\"idBag.detailsSpan + i\">{{ item.value }}</a>\r\n    <span class=\"sme-screen-reader\" [id]=\"idBag.detailsSpan + i\">{{ getInternalLinkDescription(item) }}</span>\r\n  </p>\r\n</ng-template>\r\n\r\n<!-- External link -->\r\n<ng-template #externalLinkTemplate let-item let-i=\"index\">\r\n  <p>\r\n    <ng-container *ngTemplateOutlet=\"iconTemplate;context:{$implicit:item, index: i}\"></ng-container>\r\n    <span *ngIf=\"item.prefixString\" class=\"sme-padding-right-xs\">{{ item.prefixString }}</span>\r\n    <a class=\"sme-link sme-focus-zone sme-icon sme-icon-after sme-icon-openInNewWindow\" role=\"link\" [href]=\"item.link\" target=\"_blank\"\r\n      [attr.aria-describedby]=\"idBag.detailsSpan + i\">{{ item.value }}</a>\r\n    <span class=\"sme-screen-reader\" [id]=\"idBag.detailsSpan + i\">{{ getExternalLinkDescription(item) }}</span>\r\n  </p>\r\n</ng-template>\r\n\r\n<!-- Icon Template -->\r\n<ng-template #iconTemplate let-item let-i=\"index\">\r\n  <span *ngIf=\"!!item.iconClass\" class=\"sme-margin-right-xs sme-icon {{item.iconClass}}\"></span>\r\n  <sme-status-icon *ngIf=\"item.status !== undefined && item.status !== null && !item.iconClass\" class=\"sme-layout-inline-block sme-margin-right-xs \"\r\n    [status]=\"item.status\" size=\"16px\"></sme-status-icon>\r\n</ng-template>\r\n" }]
     }], function () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: SkipSelf
             }, {
@@ -47713,9 +48055,7 @@ class SettingsFormService {
         return fallBackRoute;
     }
     ngOnDestroy() {
-        if (this.routerSubscription) {
-            this.routerSubscription.unsubscribe();
-        }
+        this.routerSubscription?.unsubscribe();
     }
 }
 /** @nocollapse */ SettingsFormService.ɵfac = function SettingsFormService_Factory(t) { return new (t || SettingsFormService)(i0.ɵɵinject(i1.Router)); };
@@ -48348,8 +48688,8 @@ function CommonSettingsComponent_header_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(ctx_r0.settingsTitle);
 } }
-function CommonSettingsComponent_li_10_h4_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h4", 17);
+function CommonSettingsComponent_li_10_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -48414,7 +48754,7 @@ function CommonSettingsComponent_li_10_a_2_Template(rf, ctx) { if (rf & 1) {
 } }
 function CommonSettingsComponent_li_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "li", 14);
-    i0.ɵɵtemplate(1, CommonSettingsComponent_li_10_h4_1_Template, 2, 3, "h4", 15);
+    i0.ɵɵtemplate(1, CommonSettingsComponent_li_10_div_1_Template, 2, 3, "div", 15);
     i0.ɵɵtemplate(2, CommonSettingsComponent_li_10_a_2_Template, 8, 21, "a", 16);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -48866,7 +49206,7 @@ __decorate([
 ], CommonSettingsComponent.prototype, "onWindowBreakpointChanged", null);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CommonSettingsComponent, [{
         type: Component,
-        args: [{ selector: 'sme-common-settings', template: "<sme-settings [settingsTitle]=\"hackToolHeader ? '' : settingsTitle\" [class.sme-settings-external-header]=\"externalHeader\">\r\n  <sme-settings-navigation class=\"sme-position-stretch-v-phone-up sme-position-stretch-h\" style=\"min-width: 160px\">\r\n    <header class=\"sme-layout-tool-header\" *ngIf=\"hackToolHeader\">\r\n      <h2 class=\"sme-position-flex-none sme-font-h3\" [attr.aria-label]=\"settingsTitle\">{{settingsTitle}}</h2>\r\n    </header>\r\n    <div role=\"region\" [attr.aria-label]=\"settingsTitle\" class=\"sme-position-stretch sme-arrange-stack-v\">\r\n      <div class=\"sme-position-flex-none sme-focus-zone\">\r\n        <form class=\"sme-margin-squish-v-sm\">\r\n          <sme-form-field #searchTextBox type=\"search\" name=\"toolsListSearch\" [(ngModel)]=\"filter\" [placeholder]=\"searchBoxPlaceholder\"\r\n            [autofocus]=\"true\" [count]=\"filteredSettings ? filteredSettings.length : 0\"\r\n            (search)=\"onSearch()\"></sme-form-field>\r\n        </form>\r\n      </div>\r\n      <nav role=\"tablist\" class=\"sme-arrange-stack-v sme-focus-zone\"\r\n          [ngClass]=\"scrollableSecondaryNav ? 'sme-position-flex-auto sme-arrange-overflow-auto-y' : ''\">\r\n        <ul class=\"sme-position-flex-auto sme-arrange-stack-v sme-arrange-overflow-hide-x sme-arrange-overflow-auto-y\"\r\n          role=\"presentation\">\r\n          <li *ngFor=\"let group of groupTools; let j = index\" class=\"sme-margin-inset-none\" role=\"presentation\">\r\n            <h4 [id]=\"idBag.group + '-' + j\" class=\"sme-font-h4 sme-font-h4-settings\" *ngIf=\"group.group!==defaultGroup\"\r\n              [title]=\"group.group\">{{ group.group }}</h4>\r\n            <a *ngFor=\"let setting of group.options; let i = index\"\r\n              class=\"sme-padding-squish-v-sm sme-arrange-stack-h sme-arrange-stack-centered-v sme-scheme-nav-item\" role=\"tab\"\r\n              href=\"setting.routeParams.extras && setting.routeParams.extras.replaceUrl\"\r\n              [attr.aria-selected]=\"selectedSetting === setting\"\r\n              [routerLink]=\"setting.routeParams.commands\" routerLinkActive=\"sme-active\"\r\n              (smeRouterLinkActivated)=\"onSmeRouterLinkActivated(setting)\"\r\n              [preserveFragment]=\"setting.routeParams.extras && setting.routeParams.extras.preserveFragment\"\r\n              [skipLocationChange]=\"setting.routeParams.extras && setting.routeParams.extras.skipLocationChange\"\r\n              [replaceUrl]=\"setting.routeParams.extras && setting.routeParams.extras.replaceUrl\"\r\n              [queryParams]=\"setting.routeParams.extras && setting.routeParams.extras.queryParams\"\r\n              [title]=\"setting.label\" attr.aria-labelledby=\"{{idBag.option}}-{{j}}-{{i}} {{idBag.group}}-{{j}}\">\r\n              <div class=\"sme-margin-right-xs sme-layout-flex sme-position-flex-align-center\">\r\n                <div *ngIf=\"setting.smeIconClassName\" class=\"sme-icon\" [ngClass]=\"getSmeIconClass(setting)\"></div>\r\n                <div *ngIf=\"setting.urlIcon\" class=\"sme-url-icon\" [style.background-image]=\"setting.urlIcon\"></div>\r\n                <div *ngIf=\"!setting.urlIcon && !setting.smeIconClassName\" class=\"sme-url-icon\" [style.background-image]=\"defaultIcon\"></div>\r\n              </div>\r\n              <div class=\"sme-position-flex-auto\">\r\n                <span [id]=\"idBag.option + '-' + j + '-' + i\" [class.sme-dirty]=\"!!(setting.form && setting.form.dirty)\"\r\n                  [class.sme-pristine]=\"!(setting.form && setting.form.dirty)\" class=\"sme-font-label sme-layout-flex sme-position-flex-align-center\">{{ setting.label }}</span>\r\n              </div>\r\n            </a>\r\n          </li>\r\n        </ul>\r\n      </nav>\r\n    </div>\r\n    <div *ngIf=\"hackShowOverlay\">\r\n      <div *ngFor=\"let layer of layers\"\r\n        class=\"sme-layout-absolute sme-position-inset-none sme-layer-above sme-scheme-backdrop-opaque\"\r\n        (click)=\"onOverlayClick(layer)\"></div>\r\n    </div>\r\n  </sme-settings-navigation>\r\n  <sme-settings-header *ngIf=\"!!showHeader\">\r\n    <h3 id=\"sme-shell-setting-selectedTitle\" [attr.aria-label]=\"selectedSetting.label\" *ngIf=\"!!selectedSetting\">\r\n      {{ selectedSetting.label }}</h3>\r\n  </sme-settings-header>\r\n  <sme-settings-content>\r\n    <router-outlet></router-outlet>\r\n  </sme-settings-content>\r\n  <sme-settings-footer>\r\n    <ng-content></ng-content>\r\n  </sme-settings-footer>\r\n</sme-settings>\r\n" }]
+        args: [{ selector: 'sme-common-settings', template: "<sme-settings [settingsTitle]=\"hackToolHeader ? '' : settingsTitle\" [class.sme-settings-external-header]=\"externalHeader\">\r\n  <sme-settings-navigation class=\"sme-position-stretch-v-phone-up sme-position-stretch-h\" style=\"min-width: 160px\">\r\n    <header class=\"sme-layout-tool-header\" *ngIf=\"hackToolHeader\">\r\n      <h2 class=\"sme-position-flex-none sme-font-h3\" [attr.aria-label]=\"settingsTitle\">{{settingsTitle}}</h2>\r\n    </header>\r\n    <div role=\"region\" [attr.aria-label]=\"settingsTitle\" class=\"sme-position-stretch sme-arrange-stack-v\">\r\n      <div class=\"sme-position-flex-none sme-focus-zone\">\r\n        <form class=\"sme-margin-squish-v-sm\">\r\n          <sme-form-field #searchTextBox type=\"search\" name=\"toolsListSearch\" [(ngModel)]=\"filter\" [placeholder]=\"searchBoxPlaceholder\"\r\n            [autofocus]=\"true\" [count]=\"filteredSettings ? filteredSettings.length : 0\"\r\n            (search)=\"onSearch()\"></sme-form-field>\r\n        </form>\r\n      </div>\r\n      <nav role=\"tablist\" class=\"sme-arrange-stack-v sme-focus-zone\"\r\n          [ngClass]=\"scrollableSecondaryNav ? 'sme-position-flex-auto sme-arrange-overflow-auto-y' : ''\">\r\n        <ul class=\"sme-position-flex-auto sme-arrange-stack-v sme-arrange-overflow-hide-x sme-arrange-overflow-auto-y\"\r\n          role=\"presentation\">\r\n          <li *ngFor=\"let group of groupTools; let j = index\" class=\"sme-margin-inset-none\" role=\"presentation\">\r\n            <div [id]=\"idBag.group + '-' + j\" class=\"sme-font-h4 sme-font-h4-settings\" *ngIf=\"group.group!==defaultGroup\"\r\n              [title]=\"group.group\">{{ group.group }}</div>\r\n            <a *ngFor=\"let setting of group.options; let i = index\"\r\n              class=\"sme-padding-squish-v-sm sme-arrange-stack-h sme-arrange-stack-centered-v sme-scheme-nav-item\" role=\"tab\"\r\n              href=\"setting.routeParams.extras && setting.routeParams.extras.replaceUrl\"\r\n              [attr.aria-selected]=\"selectedSetting === setting\"\r\n              [routerLink]=\"setting.routeParams.commands\" routerLinkActive=\"sme-active\"\r\n              (smeRouterLinkActivated)=\"onSmeRouterLinkActivated(setting)\"\r\n              [preserveFragment]=\"setting.routeParams.extras && setting.routeParams.extras.preserveFragment\"\r\n              [skipLocationChange]=\"setting.routeParams.extras && setting.routeParams.extras.skipLocationChange\"\r\n              [replaceUrl]=\"setting.routeParams.extras && setting.routeParams.extras.replaceUrl\"\r\n              [queryParams]=\"setting.routeParams.extras && setting.routeParams.extras.queryParams\"\r\n              [title]=\"setting.label\" attr.aria-labelledby=\"{{idBag.option}}-{{j}}-{{i}} {{idBag.group}}-{{j}}\">\r\n              <div class=\"sme-margin-right-xs sme-layout-flex sme-position-flex-align-center\">\r\n                <div *ngIf=\"setting.smeIconClassName\" class=\"sme-icon\" [ngClass]=\"getSmeIconClass(setting)\"></div>\r\n                <div *ngIf=\"setting.urlIcon\" class=\"sme-url-icon\" [style.background-image]=\"setting.urlIcon\"></div>\r\n                <div *ngIf=\"!setting.urlIcon && !setting.smeIconClassName\" class=\"sme-url-icon\" [style.background-image]=\"defaultIcon\"></div>\r\n              </div>\r\n              <div class=\"sme-position-flex-auto\">\r\n                <span [id]=\"idBag.option + '-' + j + '-' + i\" [class.sme-dirty]=\"!!(setting.form && setting.form.dirty)\"\r\n                  [class.sme-pristine]=\"!(setting.form && setting.form.dirty)\" class=\"sme-font-label sme-layout-flex sme-position-flex-align-center\">{{ setting.label }}</span>\r\n              </div>\r\n            </a>\r\n          </li>\r\n        </ul>\r\n      </nav>\r\n    </div>\r\n    <div *ngIf=\"hackShowOverlay\">\r\n      <div *ngFor=\"let layer of layers\"\r\n        class=\"sme-layout-absolute sme-position-inset-none sme-layer-above sme-scheme-backdrop-opaque\"\r\n        (click)=\"onOverlayClick(layer)\"></div>\r\n    </div>\r\n  </sme-settings-navigation>\r\n  <sme-settings-header *ngIf=\"!!showHeader\">\r\n    <h3 id=\"sme-shell-setting-selectedTitle\" [attr.aria-label]=\"selectedSetting.label\" *ngIf=\"!!selectedSetting\">\r\n      {{ selectedSetting.label }}</h3>\r\n  </sme-settings-header>\r\n  <sme-settings-content>\r\n    <router-outlet></router-outlet>\r\n  </sme-settings-content>\r\n  <sme-settings-footer>\r\n    <ng-content></ng-content>\r\n  </sme-settings-footer>\r\n</sme-settings>\r\n" }]
     }], function () { return [{ type: i0.Injector }, { type: i1.Router }, { type: SettingsFormService }, { type: i0.IterableDiffers }, { type: AppContextService }, { type: RpcShellService }, { type: undefined, decorators: [{
                 type: Optional
             }, {
@@ -49011,9 +49351,7 @@ class SettingsFormDirective {
     }
     ngOnChanges(changes) {
         if (this.smeUpdateDataInComponent && this.smeSettingsForm) {
-            if (this.updateDataInComponentSubscription) {
-                this.updateDataInComponentSubscription.unsubscribe();
-            }
+            this.updateDataInComponentSubscription?.unsubscribe();
             this.updateDataInComponentSubscription = this.formsService.updateFormValue().subscribe((data) => {
                 this.smeSettingsFormValueUpdate.emit(data.formGroupNewData);
             });
@@ -49026,9 +49364,7 @@ class SettingsFormDirective {
         }
     }
     ngOnDestroy() {
-        if (this.updateDataInComponentSubscription) {
-            this.updateDataInComponentSubscription.unsubscribe();
-        }
+        this.updateDataInComponentSubscription?.unsubscribe();
     }
 }
 /** @nocollapse */ SettingsFormDirective.ɵfac = function SettingsFormDirective_Factory(t) { return new (t || SettingsFormDirective)(i0.ɵɵdirectiveInject(SettingsFormService)); };
@@ -49745,7 +50081,7 @@ class WizardNavigationButtonComponent extends CoreBaseComponent {
     }
 }
 /** @nocollapse */ WizardNavigationButtonComponent.ɵfac = function WizardNavigationButtonComponent_Factory(t) { return new (t || WizardNavigationButtonComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
-/** @nocollapse */ WizardNavigationButtonComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: WizardNavigationButtonComponent, selectors: [["sme-wizard-navigation-button"]], inputs: { showIcons: "showIcons", leftIcon: "leftIcon", rightIcon: "rightIcon", buttonAutoWidth: "buttonAutoWidth", buttons: "buttons" }, outputs: { startButtonClicked: "startButtonClicked", endButtonClicked: "endButtonClicked" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 16, consts: [[1, "sme-arrange-stack-h", "sme-position-stretch-h"], [1, "sme-padding-right-xs"], ["type", "button", "aria-live", "polite", "tabIndex", "0", 1, "sme-arrange-stack-h", 3, "disabled", "click"], ["class", "sme-icon", 3, "class", 4, "ngIf"], [1, "sme-position-flex-auto", "sme-position-flex-grow-start", "sme-arrange-ellipsis", "sme-action-button-text-span"], [1, "sme-icon"]], template: function WizardNavigationButtonComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ WizardNavigationButtonComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: WizardNavigationButtonComponent, selectors: [["sme-wizard-navigation-button"]], inputs: { showIcons: "showIcons", leftIcon: "leftIcon", rightIcon: "rightIcon", buttonAutoWidth: "buttonAutoWidth", buttons: "buttons" }, outputs: { startButtonClicked: "startButtonClicked", endButtonClicked: "endButtonClicked" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 16, consts: [[1, "sme-arrange-stack-h", "sme-position-stretch-h"], [1, "sme-padding-right-xs"], ["type", "button", "aria-live", "polite", "tabindex", "0", 1, "sme-arrange-stack-h", 3, "disabled", "click"], ["class", "sme-icon", 3, "class", 4, "ngIf"], [1, "sme-position-flex-auto", "sme-position-flex-grow-start", "sme-arrange-ellipsis", "sme-action-button-text-span"], [1, "sme-icon"]], template: function WizardNavigationButtonComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0)(1, "span", 1)(2, "button", 2);
         i0.ɵɵlistener("click", function WizardNavigationButtonComponent_Template_button_click_2_listener() { return ctx.onStartButtonClick(); });
         i0.ɵɵtemplate(3, WizardNavigationButtonComponent_span_3_Template, 1, 2, "span", 3);
@@ -49780,7 +50116,7 @@ class WizardNavigationButtonComponent extends CoreBaseComponent {
     } }, dependencies: [i1$1.NgIf], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WizardNavigationButtonComponent, [{
         type: Component,
-        args: [{ selector: 'sme-wizard-navigation-button', template: "<div class=\"sme-arrange-stack-h sme-position-stretch-h\" [class.sme-layout-hidden]=\"!render\">\r\n  <span class=\"sme-padding-right-xs\">\r\n    <button type=\"button\" aria-live=\"polite\" class=\"sme-arrange-stack-h\" tabIndex=\"0\"\r\n      [class]=\"buttons[currentStartButtonIndex]?.class\"\r\n      [class.sme-button-auto-width]=\"buttonAutoWidth\"\r\n      [disabled]=\"checkStartDisabled(currentStartButtonIndex)\"\r\n      (click)=\"onStartButtonClick()\">\r\n      <span *ngIf=\"showIcons\" class=\"sme-icon\" [class]=\"leftIcon\"></span>\r\n      <span class=\"sme-position-flex-auto sme-position-flex-grow-start sme-arrange-ellipsis sme-action-button-text-span\">\r\n        {{ buttons[currentStartButtonIndex] ? buttons[currentStartButtonIndex].label : strings.MsftSmeShell.Angular.Wizard.Lite.Actions.previous }}</span>\r\n    </button>\r\n  </span>\r\n  <button type=\"button\" aria-live=\"polite\" class=\"sme-arrange-stack-h\" tabIndex=\"0\"\r\n    [class]=\"buttons[currentStartButtonIndex]?.class\"\r\n    [class.sme-button-auto-width]=\"buttonAutoWidth\"\r\n    [disabled]=\"checkEndDisabled(currentStartButtonIndex)\"\r\n    (click)=\"onEndButtonClick()\">\r\n    <span class=\"sme-position-flex-auto sme-position-flex-grow-start sme-arrange-ellipsis sme-action-button-text-span\">\r\n      {{ buttons[currentStartButtonIndex + 2] ? buttons[currentStartButtonIndex + 2].label : strings.MsftSmeShell.Angular.Wizard.Lite.Actions.next }}</span>\r\n    <span *ngIf=\"showIcons\" class=\"sme-icon\" [class]=\"rightIcon\"></span>\r\n  </button>\r\n</div>\r\n" }]
+        args: [{ selector: 'sme-wizard-navigation-button', template: "<div class=\"sme-arrange-stack-h sme-position-stretch-h\" [class.sme-layout-hidden]=\"!render\">\r\n  <span class=\"sme-padding-right-xs\">\r\n    <button type=\"button\" aria-live=\"polite\" class=\"sme-arrange-stack-h\" tabindex=\"0\"\r\n      [class]=\"buttons[currentStartButtonIndex]?.class\"\r\n      [class.sme-button-auto-width]=\"buttonAutoWidth\"\r\n      [disabled]=\"checkStartDisabled(currentStartButtonIndex)\"\r\n      (click)=\"onStartButtonClick()\">\r\n      <span *ngIf=\"showIcons\" class=\"sme-icon\" [class]=\"leftIcon\"></span>\r\n      <span class=\"sme-position-flex-auto sme-position-flex-grow-start sme-arrange-ellipsis sme-action-button-text-span\">\r\n        {{ buttons[currentStartButtonIndex] ? buttons[currentStartButtonIndex].label : strings.MsftSmeShell.Angular.Wizard.Lite.Actions.previous }}</span>\r\n    </button>\r\n  </span>\r\n  <button type=\"button\" aria-live=\"polite\" class=\"sme-arrange-stack-h\" tabindex=\"0\"\r\n    [class]=\"buttons[currentStartButtonIndex]?.class\"\r\n    [class.sme-button-auto-width]=\"buttonAutoWidth\"\r\n    [disabled]=\"checkEndDisabled(currentStartButtonIndex)\"\r\n    (click)=\"onEndButtonClick()\">\r\n    <span class=\"sme-position-flex-auto sme-position-flex-grow-start sme-arrange-ellipsis sme-action-button-text-span\">\r\n      {{ buttons[currentStartButtonIndex + 2] ? buttons[currentStartButtonIndex + 2].label : strings.MsftSmeShell.Angular.Wizard.Lite.Actions.next }}</span>\r\n    <span *ngIf=\"showIcons\" class=\"sme-icon\" [class]=\"rightIcon\"></span>\r\n  </button>\r\n</div>\r\n" }]
     }], function () { return [{ type: i0.Injector }]; }, { showIcons: [{
             type: Input
         }], leftIcon: [{
@@ -52579,9 +52915,7 @@ class UserAliveService extends RpcObservableAliveClient {
      * Stop monitoring the user activity.
      */
     stop() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
+        this.subscription?.unsubscribe();
     }
 }
 /** @nocollapse */ UserAliveService.ɵfac = function UserAliveService_Factory(t) { return new (t || UserAliveService)(i0.ɵɵinject(i1.Router), i0.ɵɵinject(RpcService)); };
@@ -52636,9 +52970,7 @@ class NavigationService {
         this.idleUrl = `/${this.options.idleRoute[0]}`;
         // navigate to idle.
         this.router.navigate(this.options.idleRoute, this.defaultNavigationOptions);
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
+        this.subscription?.unsubscribe();
         let startTimestamp = null;
         this.subscription = this.router.events
             .pipe(tap(event => {
@@ -52677,10 +53009,7 @@ class NavigationService {
      */
     shutdown() {
         this.active = false;
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-            this.subscription = null;
-        }
+        this.subscription?.unsubscribe();
     }
     /**
      * Map dialog service and dialog id so that correct dialog service instance can be found
@@ -53447,6 +53776,76 @@ function getFullRouteParams(route) {
     return params;
 }
 
+/**
+ * Base class for snap in specific extension listeners
+ */
+class SnapInListener extends ExtensionClientListener {
+    /**
+     * Initializes a new instance of the SnapInListener class
+     * @param rpc The rpc context
+     */
+    constructor(rpc, extensionBroker, hostElement) {
+        super(rpc);
+        this.extensionBroker = extensionBroker;
+        this.hostElement = hostElement;
+    }
+    ngAfterViewInit() {
+        if (this.hostElement) {
+            document.body.setAttribute('sme-snap-in', '');
+            document.addEventListener('wheel', event => {
+                // do not listen to wheel if it is for internal scroll
+                // default behavior may try to scroll parent first THEN internal scroll,
+                // see if we can update this to match that behavior
+                if (!Dom.getOverflowAncestor(this.hostElement.nativeElement)) {
+                    this.emitOutput({ deltaY: event.deltaY });
+                }
+            });
+            this.hostElement.nativeElement.addEventListener('focusin', (event) => {
+                // check if we actually need to do these
+                event.preventDefault();
+                event.stopPropagation();
+                // send info about the current active element
+                if (document.activeElement) {
+                    const focusedElementRect = document.activeElement.getBoundingClientRect();
+                    this.emitOutput({ focusedElementRect });
+                }
+            });
+        }
+    }
+    /**
+     * Occurs when any method is called on this worker from another extension
+     */
+    onCall(method, version, ...args) {
+        if (method === 'input' && args && args.length > 0 && args[0].length > 0) {
+            this.onInputReceived(args[0][0]);
+            return of(null);
+        }
+        return super.throwMethodNotFound(method, version);
+    }
+    /**
+     * Occurs when an input is received on this snap-in
+     * @param input the input object.
+     */
+    onInputReceived(input) {
+        this.input = input;
+    }
+    /**
+     * Emits an output to the consumer of this snap-in.
+     * @param output the output object.
+     */
+    emitOutput(output) {
+        // TODO: should there be a separate output type for page events?
+        // abstract output from consumer by mapping to null.
+        return this.extensionBroker.emitResult(this.instanceId, 'output', output)
+            .pipe(map(() => null));
+    }
+}
+/** @nocollapse */ SnapInListener.ɵfac = function SnapInListener_Factory(t) { return new (t || SnapInListener)(i0.ɵɵdirectiveInject(i1$3.Rpc), i0.ɵɵdirectiveInject(i2.ExtensionBroker), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+/** @nocollapse */ SnapInListener.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: SnapInListener, features: [i0.ɵɵInheritDefinitionFeature] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SnapInListener, [{
+        type: Directive
+    }], function () { return [{ type: i1$3.Rpc }, { type: i2.ExtensionBroker }, { type: i0.ElementRef }]; }, null); })();
+
 /// <reference path='../../dist/packages/core/index.d.ts'/>
 /// <reference path='../../dist/packages/core/special.d.ts'/>
 /// <reference path='../../dist/packages/core/polyfills.d.ts'/>
@@ -53458,5 +53857,5 @@ function getFullRouteParams(route) {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionModule, AccordionPanelComponent, ActionBarComponent, ActionBarDirective, ActionButton, ActionButtonAsync, ActionButtonAsyncComponent, ActionButtonComponent, ActionButtonRendererComponent, ActionContainerComponent, ActionDropdown, ActionDropdownComponent, ActionDropdownRendererComponent, ActionItem, ActionItemComponent, ActionItemRendererComponent, ActionItemSeparator, ActionItemSeparatorComponent, ActionItemSeparatorRendererComponent, ActionMenuComponent, ActionsModule, ActiveConnectionService, ActiveDirectoryModule, ActiveDirectorySearchFormFieldComponent, ActiveDirectoryService, AlertBarComponent, AlertBarModule, AlertBarService, AlertSeverity, AppContextService, AppErrorHandler, ApplyMode, AriaLiveOptions, ArrayFormFieldComponent, ArrayFormFieldLoaderComponent, ArrayPropertySchemaFieldLoaderComponent, AuthorizationService, AutofocusDirective, AutofocusModule, AzureManagerService, BackdropComponent, BackdropModule, BackgroundExtensionRootComponent, BadgeBaseComponent, BadgeFeatureTypes, BadgeModule, BannerComponent, BannerModule, BaseComponent, BaseDialogComponent, BaseFormData, BasePropertiesForm, BasicFormLoaderComponent, BatchService, BooleanConverterPipe, BooleanConverterPipeModule, BreadcrumbComponent, BreadcrumbHeaderComponent, BreadcrumbHeaderModule, BreadcrumbModule, BreadcrumbSeparator, BugFixesFeatureBadgeComponent, ByteUnitConverterPipe, ByteUnitConverterPipeModule, CAPSLOCK_VALIDATOR, CalendarFormFieldComponent, CanDeactivateGuard, CapacityBarChartComponent, CapacityBase, CapacityDoughnutChartComponent, CapsLockValidatorDirective, ChartComponent, ChartModule, CheckboxFormFieldComponent, CheckboxFormFieldLoaderComponent, ChecklistFormFieldComponent, ChecklistFormFieldLoaderComponent, ChevronPosition, ChoiceDialogComponent, CimService, CimStreamService, ClampDirective, ClampModule, ClockFormFieldComponent, CodeFormFieldComponent, CodeFormFieldLoaderComponent, ColumnPickerService, ComboboxFormFieldComponent, ComboboxFormFieldLoaderComponent, ComingSoonBadgeComponent, CommonDialogsComponent, CommonSettingsComponent, CommonSettingsComponentBase, ConfirmationDialogComponent, ConfirmationListDialogComponent, ConnectionService, ConnectivityEnforcer, ConnectivityLevel, ContextDropdownComponent, ContextMenuComponent, ContextMenuDirective, ContextMenuModule, CoreServiceModule, CredSSPEnabledBadgeComponent, CredSSPManagerService, CriticalBadgeComponent, CustomBadgeComponent, DataOnlyFormFieldLoaderComponent, DataTableColumnComponent, DataTableColumnPickerExtension, DataTableComponent, DataTableDownloadDataType, DataTableDownloadService, DataTableModule, DataTableMultipleSelectMode, DataTableRenderedItemType, DataTableSortMode, DateConverterPipe, DateConverterPipeModule, DateFormFieldComponent, DateTimeFormFieldComponent, DateTimeRangeFormFieldComponent, DateTimeRangeOptionComponent, Debounce, DeleteColumnComponent, DetailsComponent, DetailsModule, DevGuardService, DialogChangeEvent, DialogCloseReason, DialogComponent, DialogContentComponent, DialogFooterComponent, DialogHeaderComponent, DialogMode, DialogModule, DialogService, DisabledChangedEvent, DisabledDirective, DisabledModule, DiscardDirective, DiscardModule, DocumentationComponent, DocumentationModule, DoughnutChartComponent, DoughnutChartModule, DropdownComponent, DropdownModule, DropdownService, DynamicActionItemComponent, DynamicComponentBase, EditableCollectionItem, EditableLayoutComponent, EditableLayoutItemComponent, ElectronService, EnumConverterPipe, EnumConverterPipeModule, ExperimentGuardService, ExtensionBrokerService, ExtensionDialogComponent, ExtensionRootModule, FeedbackBadgeComponent, FieldsetDirective, FileFormFieldComponent, FileFormFieldLoaderComponent, FileTransferService, FilterPipe, FilterPipeModule, FormAsyncValidatorBase, FormField, FormFieldAccessor, FormFieldAccessorDirective, FormFieldAsyncValidatorDirective, FormFieldComponent, FormFieldIsolatorComponent, FormFieldLayoutComponent, FormFieldOptionComponent, FormFieldOptionSubFormTemplateLoaderComponent, FormFieldOrientation, FormFieldTemplateDirective, FormFieldValidatorDirective, FormValidatorBase, FormWizardStepComponent, FormatPipe, FormatPipeModule, FrameService, GatewayService, GuardsModule, GuidedPaneComponent, GuidedPanelComponent, GuidedPanelModule, HeaderComponent, HeaderModule, HealthAlertSeverity, HighlightPipe, HighlightPipeModule, HorizontalBarChartComponent, HorizontalBarChartModule, HttpService, IconLayerComponent, IconModule, IconTextComponent, IdleComponent, IdleModule, ImprovementFeatureBadgeComponent, InputValidatorDirective, InstallationTypeGuardService, JobsService, JsonFormFieldComponent, JsonFormFieldLoaderComponent, LayeredIconComponent, LayoutComponent, LayoutConfigGenerator, LayoutDefinitionComponent, LayoutDrivenType, LayoutItemComponent, LayoutItemConfigMode, LayoutItemConfigPropertyWidthType, LayoutModule, LegendComponent, LegendEntryComponent, LegendModule, LifetimeService, LineChartComponent, LineChartModule, LineChartType, ListFormFieldComponent, LoadingWheelComponent, LoadingWheelModule, LoadingWheelSize, LocalDateConverterPipe, MachineNameValidatorDirective, MarkdownDirective, MarkdownModule, MasterViewComponent, MasterViewContentDirective, MasterViewContentModule, MasterViewModule, MatchFieldValidatorDirective, MediaConversion2, MessageDialogComponent, Monaco, Navigation, NavigationService, NavigationTitle, NewBadgeComponent, NewFeatureBadgeComponent, NodeCredentialsFormComponent, NodeCredentialsFormModule, NodeService, NotificationService, NumberFormFieldComponent, NumberFormFieldLoaderComponent, ObjectDefaultFormFieldLoaderComponent, ObjectPropertySchemaFieldLoaderComponent, OptionsFormFieldComponent, OrderedListFormFieldComponent, OrderedListFormFieldLoaderComponent, PageAlertBarComponent, PageAlertBarModule, PanelControlComponent, PasswordFormFieldComponent, PasswordFormFieldLoaderComponent, PivotComponent, PivotModule, PivotTabComponent, PivotTabType, PowerShellService, PowerShellStreamService, PreviewBadgeComponent, PropertyGridComponent, PropertyGridItemComponent, PropertyGridModule, QueryDataItemPresetGenerator, QueryDataItemValueType, QueryDataOperand, QueryEditorComponent, QueryEditorModule, RadioGroupFormFieldComponent, RadioGroupFormFieldLoaderComponent, RatingRadioGroupFormFieldComponent, ReactiveForm, ReactiveFormAccessor, ReactiveFormWizardStepComponent, ReadonlyFormFieldComponent, RequiredTrimmedValidatorDirective, ResizerComponent, ResizerModule, ResourceService, RpcService, RpcShellService, SME_ASYNC_VALIDATORS, SME_FORM_FIELD_VALIDATION_ALERT_CONTAINER_PROVIDER, SME_LAYOUT_PROVIDER, SME_VALIDATORS, ScheduleRebootService, SchemaDataTypeStore, SchemaFieldContext, SchemaFieldHostComponent, SchemaFieldHostModule, SchemaFieldLoaderComponentBase, SchemaFormComponent, SchemaFormModule, SchemaPrimitiveType, SchemaUtilities, SearchFormFieldComponent, SecureExtensionDataService, SelectFormFieldDirective, SettingsComponent, SettingsContentComponent, SettingsFooterComponent, SettingsFormDirective, SettingsFormService, SettingsHeaderComponent, SettingsModule, SettingsNavigationComponent, SettingsPageComponent, SettingsService, SimplePropertySchemaFieldLoaderComponent, SliderFormFieldComponent, SliderFormFieldLoaderComponent, SmeExtensionService, SmeFormsModule, SmeHeaderData, SmeInjectableBase, SmeInternalFormFieldComponent, SmeResponsiveWindowBreakpoints, SmeResponsiveWindowBreakpointsValue, SmeResponsiveWindowManagerComponent, SmeRouterLinkDirective, SmeRouterModule, SmeSchemaProperty, SmeTemplateOutletModule, SmeUxComponent, SmeUxContentComponent, SmeUxContentModule, SmeUxFooterComponent, SmeUxFooterModule, SmeUxModule, SmeUxPageComponent, SmeUxPageModule, SmeWizardLiteFooterTemplateComponent, SmeWizardLiteFooterTemplateModule, SnapInExtensionComponent, SnapInExtensionModule, SplitViewComponent, SplitViewContentComponent, SplitViewModule, SplitViewPaneComponent, SshStreamService, StackedBarComponent, StackedHorizontalBarChartComponent, StatusIconComponent, StatusIconType, SvgDirective, SvgInlineDirective, SvgInlineResource, SvgModule, SvgResource, TabbedFormController, TabbedFormItemController, TabbedFormLoaderComponent, TabbedLineChartGroupComponent, TagService, TagsActionButtonComponent, TagsColumnComponent, TagsFormFieldComponent, TagsFormFieldLoaderComponent, TelemetryDirective, TelemetryDirectiveModule, TemplateDrivenWizardStepComponent, TemplateOutletDirective, TextFormFieldComponent, TextFormFieldLoaderComponent, TileComponent, TileContentComponent, TileDirectivesModule, TileImageDirective, TileModule, TileRadioGroupFormFieldComponent, TimeFormFieldComponent, ToggleSwitchFormFieldComponent, ToggleSwitchFormFieldLoaderComponent, ToolHeaderComponent, ToolHeaderModule, TooltipDirective, TooltipHostComponent, TooltipHostInstance, TooltipModule, TooltipPlacement, TooltipZoneDirective, TreeTableComponent, UserAliveService, UxExtensionRootComponent, ValidationAlertComponent, ValidationAlertSeverity, WarningBadgeComponent, WebsocketStreamService, WizardAsParent, WizardBuilder, WizardComponent, WizardLiteComponent, WizardLiteModule, WizardModule, WizardNavigationButtonComponent, WizardNavigationButtonModule, WizardNavigationInformation, WizardStage, WizardStep, WizardStepComponent, WorkItemService, YesNoConverterPipe, YesNoConverterPipeModule, Yield, alertDialog, getFullRouteParams, modalDialog };
+export { AccordionComponent, AccordionModule, AccordionPanelComponent, ActionBarComponent, ActionBarDirective, ActionButton, ActionButtonAsync, ActionButtonAsyncComponent, ActionButtonComponent, ActionButtonRendererComponent, ActionContainerComponent, ActionDropdown, ActionDropdownComponent, ActionDropdownRendererComponent, ActionItem, ActionItemComponent, ActionItemRendererComponent, ActionItemSeparator, ActionItemSeparatorComponent, ActionItemSeparatorRendererComponent, ActionMenuComponent, ActionsModule, ActiveConnectionService, ActiveDirectoryModule, ActiveDirectorySearchFormFieldComponent, ActiveDirectoryService, AlertBarComponent, AlertBarModule, AlertBarService, AlertSeverity, AppContextService, AppErrorHandler, ApplyMode, AriaLiveOptions, ArrayFormFieldComponent, ArrayFormFieldLoaderComponent, ArrayPropertySchemaFieldLoaderComponent, AuthorizationService, AutofocusDirective, AutofocusModule, AzureManagerService, BackdropComponent, BackdropModule, BackgroundExtensionRootComponent, BadgeBaseComponent, BadgeFeatureTypes, BadgeModule, BannerComponent, BannerModule, BaseComponent, BaseDialogComponent, BaseFormData, BasePropertiesForm, BasicFormLoaderComponent, BatchService, BooleanConverterPipe, BooleanConverterPipeModule, BreadcrumbComponent, BreadcrumbHeaderComponent, BreadcrumbHeaderModule, BreadcrumbModule, BreadcrumbSeparator, BugFixesFeatureBadgeComponent, ByteUnitConverterPipe, ByteUnitConverterPipeModule, CAPSLOCK_VALIDATOR, CalendarFormFieldComponent, CanDeactivateGuard, CapacityBarChartComponent, CapacityBase, CapacityDoughnutChartComponent, CapsLockValidatorDirective, ChartComponent, ChartModule, CheckboxFormFieldComponent, CheckboxFormFieldLoaderComponent, ChecklistFormFieldComponent, ChecklistFormFieldLoaderComponent, ChevronPosition, ChoiceDialogComponent, CimService, CimStreamService, ClampDirective, ClampModule, ClockFormFieldComponent, CodeFormFieldComponent, CodeFormFieldLoaderComponent, ColumnPickerService, ComboboxFormFieldComponent, ComboboxFormFieldLoaderComponent, ComingSoonBadgeComponent, CommonDialogsComponent, CommonSettingsComponent, CommonSettingsComponentBase, ConfirmationDialogComponent, ConfirmationListDialogComponent, ConnectionService, ConnectivityEnforcer, ConnectivityLevel, ContextDropdownComponent, ContextMenuComponent, ContextMenuDirective, ContextMenuModule, CoreServiceModule, CredSSPEnabledBadgeComponent, CredSSPManagerService, CriticalBadgeComponent, CustomBadgeComponent, DataOnlyFormFieldLoaderComponent, DataTableColumnComponent, DataTableColumnPickerExtension, DataTableComponent, DataTableDownloadDataType, DataTableDownloadService, DataTableModule, DataTableMultipleSelectMode, DataTableRenderedItemType, DataTableSortMode, DateConverterPipe, DateConverterPipeModule, DateFormFieldComponent, DateTimeFormFieldComponent, DateTimeRangeFormFieldComponent, DateTimeRangeOptionComponent, Debounce, DeleteColumnComponent, DetailsComponent, DetailsModule, DevGuardService, DialogChangeEvent, DialogCloseReason, DialogComponent, DialogContentComponent, DialogFooterComponent, DialogHeaderComponent, DialogMode, DialogModule, DialogService, DisabledChangedEvent, DisabledDirective, DisabledModule, DiscardDirective, DiscardModule, DocumentationComponent, DocumentationModule, DoughnutChartComponent, DoughnutChartModule, DropdownComponent, DropdownModule, DropdownService, DynamicActionItemComponent, DynamicComponentBase, EditableCollectionItem, EditableLayoutComponent, EditableLayoutItemComponent, ElectronService, EnumConverterPipe, EnumConverterPipeModule, ExperimentGuardService, ExtensionBrokerService, ExtensionDialogComponent, ExtensionRootModule, FeedbackBadgeComponent, FieldsetDirective, FileFormFieldComponent, FileFormFieldLoaderComponent, FileTransferService, FilterPipe, FilterPipeModule, FormAsyncValidatorBase, FormField, FormFieldAccessor, FormFieldAccessorDirective, FormFieldAsyncValidatorDirective, FormFieldComponent, FormFieldIsolatorComponent, FormFieldLayoutComponent, FormFieldOptionComponent, FormFieldOptionSubFormTemplateLoaderComponent, FormFieldOrientation, FormFieldTemplateDirective, FormFieldValidatorDirective, FormValidatorBase, FormWizardStepComponent, FormatPipe, FormatPipeModule, FrameService, GatewayService, GuardsModule, GuidedPaneComponent, GuidedPanelComponent, GuidedPanelModule, HeaderComponent, HeaderModule, HealthAlertSeverity, HighlightPipe, HighlightPipeModule, HorizontalBarChartComponent, HorizontalBarChartModule, HttpService, IconLayerComponent, IconModule, IconTextComponent, IdleComponent, IdleModule, ImprovementFeatureBadgeComponent, InputValidatorDirective, InstallationTypeGuardService, JobsService, JsonFormFieldComponent, JsonFormFieldLoaderComponent, LayeredIconComponent, LayoutComponent, LayoutConfigGenerator, LayoutDefinitionComponent, LayoutDrivenType, LayoutItemComponent, LayoutItemConfigMode, LayoutItemConfigPropertyWidthType, LayoutModule, LegendComponent, LegendEntryComponent, LegendModule, LifetimeService, LineChartComponent, LineChartModule, LineChartType, ListFormFieldComponent, LoadingWheelComponent, LoadingWheelModule, LoadingWheelSize, LocalDateConverterPipe, MachineNameValidatorDirective, MarkdownDirective, MarkdownModule, MasterViewComponent, MasterViewContentDirective, MasterViewContentModule, MasterViewModule, MatchFieldValidatorDirective, MediaConversion2, MessageDialogComponent, Monaco, Navigation, NavigationService, NavigationTitle, NewBadgeComponent, NewFeatureBadgeComponent, NodeCredentialsFormComponent, NodeCredentialsFormModule, NodeService, NotificationService, NumberFormFieldComponent, NumberFormFieldLoaderComponent, ObjectDefaultFormFieldLoaderComponent, ObjectPropertySchemaFieldLoaderComponent, OptionsFormFieldComponent, OrderedListFormFieldComponent, OrderedListFormFieldLoaderComponent, PageAlertBarComponent, PageAlertBarModule, PanelControlComponent, PasswordFormFieldComponent, PasswordFormFieldLoaderComponent, PivotComponent, PivotModule, PivotTabComponent, PivotTabType, PowerShellService, PowerShellStreamService, PreviewBadgeComponent, PropertyGridComponent, PropertyGridItemComponent, PropertyGridModule, QueryDataItemPresetGenerator, QueryDataItemValueType, QueryDataOperand, QueryEditorComponent, QueryEditorModule, RadioGroupFormFieldComponent, RadioGroupFormFieldLoaderComponent, RatingRadioGroupFormFieldComponent, ReactiveForm, ReactiveFormAccessor, ReactiveFormWizardStepComponent, ReadonlyFormFieldComponent, RequiredTrimmedValidatorDirective, ResizerComponent, ResizerModule, ResourceService, RpcService, RpcShellService, SME_ASYNC_VALIDATORS, SME_FORM_FIELD_VALIDATION_ALERT_CONTAINER_PROVIDER, SME_LAYOUT_PROVIDER, SME_VALIDATORS, ScheduleRebootService, SchemaDataTypeStore, SchemaFieldContext, SchemaFieldHostComponent, SchemaFieldHostModule, SchemaFieldLoaderComponentBase, SchemaFormComponent, SchemaFormModule, SchemaPrimitiveType, SchemaUtilities, SearchFormFieldComponent, SecureExtensionDataService, SelectFormFieldDirective, SettingsComponent, SettingsContentComponent, SettingsFooterComponent, SettingsFormDirective, SettingsFormService, SettingsHeaderComponent, SettingsModule, SettingsNavigationComponent, SettingsPageComponent, SettingsService, SimplePropertySchemaFieldLoaderComponent, SliderFormFieldComponent, SliderFormFieldLoaderComponent, SmeExtensionService, SmeFormsModule, SmeHeaderData, SmeInjectableBase, SmeInternalFormFieldComponent, SmeResponsiveWindowBreakpoints, SmeResponsiveWindowBreakpointsValue, SmeResponsiveWindowManagerComponent, SmeRouterLinkDirective, SmeRouterModule, SmeSchemaProperty, SmeTemplateOutletModule, SmeUxComponent, SmeUxContentComponent, SmeUxContentModule, SmeUxFooterComponent, SmeUxFooterModule, SmeUxModule, SmeUxPageComponent, SmeUxPageModule, SmeWizardLiteFooterTemplateComponent, SmeWizardLiteFooterTemplateModule, SnapInExtensionComponent, SnapInExtensionModule, SnapInListener, SplitViewComponent, SplitViewContentComponent, SplitViewModule, SplitViewPaneComponent, SshStreamService, StackedBarComponent, StackedHorizontalBarChartComponent, StatusIconComponent, StatusIconType, SvgDirective, SvgInlineDirective, SvgInlineResource, SvgModule, SvgResource, TabbedFormController, TabbedFormItemController, TabbedFormLoaderComponent, TabbedLineChartGroupComponent, TagService, TagsActionButtonComponent, TagsColumnComponent, TagsFormFieldComponent, TagsFormFieldLoaderComponent, TelemetryDirective, TelemetryDirectiveModule, TemplateDrivenWizardStepComponent, TemplateOutletDirective, TextFormFieldComponent, TextFormFieldLoaderComponent, TileComponent, TileContentComponent, TileDirectivesModule, TileImageDirective, TileModule, TileRadioGroupFormFieldComponent, TimeFormFieldComponent, ToggleSwitchFormFieldComponent, ToggleSwitchFormFieldLoaderComponent, ToolHeaderComponent, ToolHeaderModule, TooltipDirective, TooltipHostComponent, TooltipHostInstance, TooltipModule, TooltipPlacement, TooltipZoneDirective, TreeTableComponent, UserAliveService, UxExtensionRootComponent, ValidationAlertComponent, ValidationAlertSeverity, WarningBadgeComponent, WebsocketStreamService, WizardAsParent, WizardBuilder, WizardComponent, WizardLiteComponent, WizardLiteModule, WizardModule, WizardNavigationButtonComponent, WizardNavigationButtonModule, WizardNavigationInformation, WizardStage, WizardStep, WizardStepComponent, WorkItemService, YesNoConverterPipe, YesNoConverterPipeModule, Yield, alertDialog, getFullRouteParams, modalDialog };
 //# sourceMappingURL=microsoft-windows-admin-center-sdk-angular.mjs.map