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

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

@@ -137,7 +137,7 @@ class SmeRouterLinkDirective {
         this.updateIsActive();
     }
     ngOnDestroy() {
-        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.subscriptions.forEach(sub => sub === null || sub === void 0 ? void 0 : sub.unsubscribe());
     }
     /**
      * Updates the isActive state and fires appropriate events if that state has changed.
@@ -6305,7 +6305,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 {
@@ -6373,7 +6372,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);
             }
@@ -6383,7 +6381,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);
@@ -6526,7 +6523,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.
@@ -6611,7 +6607,8 @@ class ActionContainerComponent extends CoreBaseComponent {
      * Callback method run when ActionContainerComponent is destroyed.
      */
     ngOnDestroy() {
-        this.completedSubscription.unsubscribe();
+        var _a;
+        (_a = this.completedSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
     /**
      * Callback method run immediately after Angular has completed initialization of all of ActionContainerComponent's content.
@@ -6971,8 +6968,9 @@ class ActionBarComponent extends ActionContainerComponent {
      * Callback triggered after component is destroyed.
      */
     ngOnDestroy() {
+        var _a;
         super.ngOnDestroy();
-        this.layoutSubscription.unsubscribe();
+        (_a = this.layoutSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
     /**
      * On layout changed event handler, occurs every time the layout has been changed.
@@ -8789,9 +8787,9 @@ function IconTextComponent_input_1_Template(rf, ctx) {
         i0.ɵɵattribute("aria-label", ctx_r1.readOnlyFormFieldLabel);
     }
 }
-function IconTextComponent_span_2_Template(rf, ctx) {
+function IconTextComponent_h3_2_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "span", 8);
+        i0.ɵɵelementStart(0, "h3", 8);
         i0.ɵɵtext(1);
         i0.ɵɵelementEnd();
     }
@@ -8809,7 +8807,7 @@ class IconTextComponent extends CoreBaseComponent {
          */
         this.title = '';
         /**
-         * The text in string.
+         * It determines whether to show title
          */
         this.showTitle = true;
         this.layoutFlex = true;
@@ -8841,7 +8839,7 @@ class IconTextComponent extends CoreBaseComponent {
         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);
@@ -8854,7 +8852,7 @@ class IconTextComponent extends CoreBaseComponent {
 (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: [{
@@ -16371,7 +16369,7 @@ class TabbedFormLoaderComponent extends ObjectPropertySchemaFieldLoaderComponent
         });
     }
     ngOnDestroy() {
-        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.subscriptions.forEach(sub => sub === null || sub === void 0 ? void 0 : sub.unsubscribe());
     }
     setupSchema(schema) {
         for (let i = 0; i < schema.properties.length; i++) {
@@ -18399,8 +18397,10 @@ function ClockFormFieldComponent_div_12_Template(rf, ctx) {
     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);
     }
 }
@@ -18967,7 +18967,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) {
+/** @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); });
@@ -18985,7 +18985,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();
@@ -19008,7 +19008,7 @@ class ClockFormFieldComponent extends DateLikeFormFieldComponent {
             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),
@@ -19024,7 +19024,7 @@ __decorate([
 (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: [{
@@ -22248,6 +22248,13 @@ function NumberFormFieldComponent_div_3_span_4_Template(rf, ctx) {
         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) {
@@ -22255,14 +22262,14 @@ function NumberFormFieldComponent_div_3_Template(rf, ctx) {
         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);
     }
@@ -22317,6 +22324,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
      */
@@ -22568,7 +22587,7 @@ NumberFormFieldComponent = __decorate([
 (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']
@@ -23412,7 +23431,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) {
@@ -23437,7 +23456,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) {
@@ -23762,10 +23781,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)"
@@ -26765,12 +26784,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] });
@@ -32922,7 +32965,7 @@ DataTableComponent.pxConverter = new PxConverter();
             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);
@@ -32930,7 +32973,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);
@@ -33008,7 +33051,7 @@ __decorate([
 (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']
@@ -33240,7 +33283,7 @@ class TreeTableComponent extends DataTableComponent {
             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);
@@ -33248,7 +33291,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);
@@ -33272,7 +33315,7 @@ class TreeTableComponent extends DataTableComponent {
 (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);
 })();
 
@@ -35525,7 +35568,7 @@ class SplitViewComponent extends CoreBaseComponent {
      * The Angular ngOnDestroy function.
      */
     ngOnDestroy() {
-        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.subscriptions.forEach(sub => sub === null || sub === void 0 ? void 0 : sub.unsubscribe());
     }
     /**
      * The method called after content is initialized.
@@ -37668,7 +37711,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 === null || sub === void 0 ? void 0 : sub.unsubscribe());
         }
     }
     /**
@@ -41373,11 +41416,9 @@ class BaseDialogComponent {
      * The method to run when the component is destroyed.
      */
     ngOnDestroy() {
-        var _a;
-        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.
-        (_a = this.closeSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        var _a, _b;
+        (_a = this.dialogService) === null || _a === void 0 ? void 0 : _a.unregister(this.id);
+        (_b = this.closeSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
     }
     /**
      * handler for when a close is requested
@@ -41871,7 +41912,8 @@ class ConfirmationListDialogComponent extends BaseDialogComponent {
         return result;
     }
     hide(result) {
-        this.dataSourceSubscription.unsubscribe();
+        var _a;
+        (_a = this.dataSourceSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         super.hide(result);
     }
     onConfirm() {
@@ -46267,6 +46309,9 @@ function PropertyGridComponent_ng_template_10_Template(rf, ctx) {
         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) {
@@ -46275,14 +46320,18 @@ function PropertyGridComponent_ng_template_10_Template(rf, ctx) {
         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) {
@@ -46307,8 +46356,11 @@ function PropertyGridComponent_ng_template_12_Template(rf, ctx) {
         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) {
@@ -46317,14 +46369,18 @@ function PropertyGridComponent_ng_template_12_Template(rf, ctx) {
         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) {
@@ -46338,7 +46394,7 @@ function PropertyGridComponent_ng_template_14_span_0_Template(rf, ctx) {
 }
 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;
@@ -46347,8 +46403,8 @@ function PropertyGridComponent_ng_template_14_sme_status_icon_1_Template(rf, ctx
 }
 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;
@@ -46486,6 +46542,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.
@@ -46533,7 +46595,7 @@ class PropertyGridComponent extends CoreBaseComponent {
         }
     }, 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) {
+        ]), 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);
@@ -46543,8 +46605,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) {
@@ -46564,7 +46626,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
@@ -50823,9 +50885,8 @@ class SettingsFormService {
         return fallBackRoute;
     }
     ngOnDestroy() {
-        if (this.routerSubscription) {
-            this.routerSubscription.unsubscribe();
-        }
+        var _a;
+        (_a = this.routerSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
 }
 /** @nocollapse */ SettingsFormService.ɵfac = function SettingsFormService_Factory(t) { return new (t || SettingsFormService)(i0.ɵɵinject(i1.Router)); };
@@ -51520,9 +51581,9 @@ function CommonSettingsComponent_header_2_Template(rf, ctx) {
         i0.ɵɵtextInterpolate(ctx_r0.settingsTitle);
     }
 }
-function CommonSettingsComponent_li_10_h4_1_Template(rf, ctx) {
+function CommonSettingsComponent_li_10_div_1_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "h4", 17);
+        i0.ɵɵelementStart(0, "div", 17);
         i0.ɵɵtext(1);
         i0.ɵɵelementEnd();
     }
@@ -51602,7 +51663,7 @@ function CommonSettingsComponent_li_10_a_2_Template(rf, ctx) {
 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();
     }
@@ -52074,7 +52135,7 @@ __decorate([
 (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
@@ -52229,10 +52290,9 @@ class SettingsFormDirective {
         this.oldForm = null;
     }
     ngOnChanges(changes) {
+        var _a;
         if (this.smeUpdateDataInComponent && this.smeSettingsForm) {
-            if (this.updateDataInComponentSubscription) {
-                this.updateDataInComponentSubscription.unsubscribe();
-            }
+            (_a = this.updateDataInComponentSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
             this.updateDataInComponentSubscription = this.formsService.updateFormValue().subscribe((data) => {
                 this.smeSettingsFormValueUpdate.emit(data.formGroupNewData);
             });
@@ -52245,9 +52305,8 @@ class SettingsFormDirective {
         }
     }
     ngOnDestroy() {
-        if (this.updateDataInComponentSubscription) {
-            this.updateDataInComponentSubscription.unsubscribe();
-        }
+        var _a;
+        (_a = this.updateDataInComponentSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
 }
 /** @nocollapse */ SettingsFormDirective.ɵfac = function SettingsFormDirective_Factory(t) { return new (t || SettingsFormDirective)(i0.ɵɵdirectiveInject(SettingsFormService)); };
@@ -55999,9 +56058,8 @@ class UserAliveService extends RpcObservableAliveClient {
      * Stop monitoring the user activity.
      */
     stop() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
+        var _a;
+        (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
 }
 /** @nocollapse */ UserAliveService.ɵfac = function UserAliveService_Factory(t) { return new (t || UserAliveService)(i0.ɵɵinject(i1.Router), i0.ɵɵinject(RpcService)); };
@@ -56052,15 +56110,14 @@ class NavigationService {
      * @param options The options to override the default behavior
      */
     initialize(options) {
+        var _a;
         PerformanceTracker.navigationInitialized();
         this.active = true;
         this.options = options ? options : { idleRoute: ['idle'] };
         this.idleUrl = `/${this.options.idleRoute[0]}`;
         // navigate to idle.
         this.router.navigate(this.options.idleRoute, this.defaultNavigationOptions);
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
+        (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         let startTimestamp = null;
         this.subscription = this.router.events
             .pipe(tap(event => {
@@ -56098,11 +56155,9 @@ class NavigationService {
      * Shutdown the navigation communication from/to the shell.
      */
     shutdown() {
+        var _a;
         this.active = false;
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-            this.subscription = null;
-        }
+        (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
     /**
      * Map dialog service and dialog id so that correct dialog service instance can be found