npm - @microsoft/windows-admin-center-sdk - Versions diffs - 4.123.0 → 4.167.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (103) hide show

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

@@ -137,7 +137,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.
@@ -6044,7 +6044,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 +6111,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 +6120,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);
@@ -6250,7 +6247,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 +6331,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.
@@ -8376,8 +8372,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 +8389,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 +8418,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 +8428,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: [{
@@ -15594,7 +15590,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++) {
@@ -17489,8 +17485,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 +18051,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 +18068,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 +18089,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 +18104,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: [{
@@ -21154,19 +21152,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 +21219,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
      */
@@ -21459,7 +21475,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']
@@ -22231,7 +22247,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 +22266,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 +22537,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)"
@@ -25525,12 +25541,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 +31243,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 +31251,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 +31327,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 +31556,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 +31564,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 +31586,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 +33505,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 +35701,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 +39075,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 +39520,7 @@ class ConfirmationListDialogComponent extends BaseDialogComponent {
         return result;
     }
     hide(result) {
-        this.dataSourceSubscription.unsubscribe();
+        this.dataSourceSubscription?.unsubscribe();
         super.hide(result);
     }
     onConfirm() {
@@ -43444,6 +43482,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 +43492,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 +43521,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 +43533,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 +43553,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 +43696,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 +43743,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 +43752,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 +43770,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 +47771,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 +48404,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 +48470,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 +48922,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 +49067,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 +49080,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)); };
@@ -52579,9 +52631,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 +52686,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 +52725,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