@microsoft/windows-admin-center-sdk 2.295.0 → 2.298.0

package/angular/bundles/microsoft-windows-admin-center-sdk-angular.umd.js

@@ -1271,6 +1271,13 @@
         BaseComponent.prototype.getInitialHostClasses = function () {
             return [];
         };
+        /**
+         * Shortcut to get an attribute on the host element
+         * @param name The name of the attribute
+         */
+        BaseComponent.prototype.getAttribute = function (name) {
+            return this.hostElement.nativeElement.getAttribute(name);
+        };
         /**
          * Shortcut to set an attribute on the host element
          * @param name The name of the attribute
@@ -3235,7 +3242,9 @@
             this.azureManagerService.initialize();
             smeWebTelemetry.SmeWebTelemetry.init(this).subscribe(function (loaded) {
                 logging.Logging.logDebug('SmeWebTelemetry', loaded ? 'Loaded browser telemetry' : 'Failed to load browser telemetry');
+                performanceTracker.PerformanceTracker.tryStartCalculatingTimeToInteractive();
             });
+            performanceTracker.PerformanceTracker.initializeLighthouseMetricsTrackers();
         };
         /**
          * Destroy the app context resource from ngDestroy call in AppComponent.
@@ -7635,6 +7644,10 @@
                         else {
                             this.dropDown.onToggled.pipe(operators.take(1)).subscribe(function (open) {
                                 if (open) {
+                                    // blur/focus to refresh focus - this will make the tooltip disappear
+                                    // while menu is open (b/c tooltip will block view)
+                                    _this.dropDownButtonElement.nativeElement.blur();
+                                    _this.dropDownButtonElement.nativeElement.focus();
                                     _this.moreButtonElement = document.activeElement;
                                 }
                             });
@@ -7857,7 +7870,7 @@
             if (rf & 1) {
                 i0.ɵɵlistener("focusin", function ActionBarComponent_focusin_HostBindingHandler($event) { return ctx.onFocusEvent($event); })("focusout", function ActionBarComponent_focusout_HostBindingHandler($event) { return ctx.onFocusEvent($event); })("keydown", function ActionBarComponent_keydown_HostBindingHandler($event) { return ctx.onToggleKeydown($event); })("mouseenter", function ActionBarComponent_mouseenter_HostBindingHandler($event) { return ctx.onMouseEvent($event); })("mouseleave", function ActionBarComponent_mouseleave_HostBindingHandler($event) { return ctx.onMouseEvent($event); })("resize", function ActionBarComponent_resize_HostBindingHandler() { return ctx.onResize(); }, false, i0.ɵɵresolveWindow);
             }
-        }, outputs: { actionsUpdated: "actionsUpdated" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c3$2, decls: 12, vars: 14, consts: [["role", "menubar", 1, "sme-position-flex-none", "sme-arrange-stack-h"], ["actionBarElement", ""], ["class", "sme-arrange-stack-h sme-arrange-stack-centered sme-arrange-stack-inline", 3, "item", "sme-action-bar-item-no-padding-v", "itemChanged", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-position-flex-none"], ["dropDown", ""], ["type", "button", "role", "menuitem", "aria-haspopup", "true", "data-uta-id", "action-bar-more", 1, "sme-button-trigger", "sme-layout-action-bar-item-height", "sme-button-auto-width", "sme-dropdown-toggle"], ["dropDownButton", ""], [1, "sme-icon", "sme-icon-more", 3, "title"], [1, "sme-screen-reader"], ["role", "menu", 1, "sme-dropdown-content", 3, "actions", "target", "targetChange", "error", "executed"], [1, "sme-arrange-stack-h", "sme-arrange-stack-centered", "sme-arrange-stack-inline", 3, "item", "itemChanged"]], template: function ActionBarComponent_Template(rf, ctx) {
+        }, outputs: { actionsUpdated: "actionsUpdated" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c3$2, decls: 12, vars: 16, consts: [["role", "menubar", 1, "sme-position-flex-none", "sme-arrange-stack-h"], ["actionBarElement", ""], ["class", "sme-arrange-stack-h sme-arrange-stack-centered sme-arrange-stack-inline", 3, "item", "sme-action-bar-item-no-padding-v", "itemChanged", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-position-flex-none", 3, "title", "smeTooltipShow"], ["dropDown", ""], ["type", "button", "role", "menuitem", "aria-haspopup", "true", "data-uta-id", "action-bar-more", 1, "sme-button-trigger", "sme-layout-action-bar-item-height", "sme-button-auto-width", "sme-dropdown-toggle"], ["dropDownButton", ""], [1, "sme-icon", "sme-icon-more", 3, "title"], [1, "sme-screen-reader"], ["role", "menu", 1, "sme-dropdown-content", 3, "actions", "target", "targetChange", "error", "executed"], [1, "sme-arrange-stack-h", "sme-arrange-stack-centered", "sme-arrange-stack-inline", 3, "item", "itemChanged"]], template: function ActionBarComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵprojectionDef();
                 i0.ɵɵelementStart(0, "div", 0, 1);
@@ -7883,6 +7896,7 @@
                 i0.ɵɵproperty("ngForOf", ctx.hiddenFilter(ctx.displayedActions));
                 i0.ɵɵadvance(1);
                 i0.ɵɵclassProp("sme-layout-hidden", !ctx.compact && ctx.trayActions.length === 0)("sme-layout-none", ctx.compact && ctx.trayActions.length === 0);
+                i0.ɵɵproperty("title", ctx.moreActionsDisplay)("smeTooltipShow", !_r2.isOpen);
                 i0.ɵɵadvance(2);
                 i0.ɵɵclassProp("sme-toggled", _r2.isOpen);
                 i0.ɵɵattribute("aria-label", ctx.moreActionsDisplay)("aria-expanded", _r2.isOpen);
@@ -9718,11 +9732,16 @@
     var LayoutDefinitionComponent = /** @class */ (function () {
         function LayoutDefinitionComponent() {
             this.until = Number.MAX_VALUE;
+            /**
+             * Setting addBottomPadding to True will add bottom padding to all layout-items,
+             * otherwise does NOT add bottom padding to any layout-items.
+             */
+            this.addBottomPadding = true;
         }
         return LayoutDefinitionComponent;
     }());
     /** @nocollapse */ LayoutDefinitionComponent.ɵfac = function LayoutDefinitionComponent_Factory(t) { return new (t || LayoutDefinitionComponent)(); };
-    /** @nocollapse */ LayoutDefinitionComponent.ɵcmp = i0.ɵɵdefineComponent({ type: LayoutDefinitionComponent, selectors: [["sme-layout-definition"]], inputs: { until: "until", columns: "columns", name: "name" }, decls: 0, vars: 0, template: function LayoutDefinitionComponent_Template(rf, ctx) { }, encapsulation: 2 });
+    /** @nocollapse */ LayoutDefinitionComponent.ɵcmp = i0.ɵɵdefineComponent({ type: LayoutDefinitionComponent, selectors: [["sme-layout-definition"]], inputs: { until: "until", columns: "columns", name: "name", addBottomPadding: "addBottomPadding" }, decls: 0, vars: 0, template: function LayoutDefinitionComponent_Template(rf, ctx) { }, encapsulation: 2 });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayoutDefinitionComponent, [{
                 type: i0.Component,
@@ -9736,6 +9755,8 @@
                     type: i0.Input
                 }], name: [{
                     type: i0.Input
+                }], addBottomPadding: [{
+                    type: i0.Input
                 }] });
     })();
 
@@ -9944,7 +9965,16 @@
                                 layoutItems[i].paddingRight = _this.itemHorizontalSpace + 'px';
                             }
                         }
-                        layoutItems[i].paddingBottom = _this.itemVerticalSpace + 'px';
+                        if (_this.currentLayoutDefinition.addBottomPadding) {
+                            layoutItems[i].paddingBottom = _this.itemVerticalSpace + 'px';
+                        }
+                        else {
+                            // If bottom padding already exists and currentLayoutDefinition.addBottomPadding is False
+                            // Remove the bottom padding.
+                            if (layoutItems[i].paddingBottom === _this.itemVerticalSpace + 'px') {
+                                layoutItems[i].paddingBottom = 0 + 'px';
+                            }
+                        }
                         layoutItems[i].width = percentage + '%';
                         layoutItems[i].ready();
                     }
@@ -11859,7 +11889,14 @@
              * The ID is based on the form field name that's set on the ngModel.
              */
             get: function () {
-                return this.utaId ? this.utaId : this.ngModel && this.ngModel.name && this.ngModel.name.toString();
+                // First, get the name from the attribute set in the HTML
+                var formFieldNameAttribute = this.getAttribute('formcontrolname') || this.getAttribute('name');
+                // Then, if no HTML attribute is set, try to get the name from the ngModel
+                var formFieldName = formFieldNameAttribute || this.ngModel && this.ngModel.name && this.ngModel.name.toString();
+                // If none of these are set, then look for the utaId input
+                var formFieldId = formFieldName || this.utaId;
+                // Finally, only set the data-uta-id attribute if neither name nor formcontrolname are set on the HTML already
+                return MsftSme.isNullOrUndefined(formFieldNameAttribute) ? formFieldId : undefined;
             },
             enumerable: false,
             configurable: true
@@ -14310,8 +14347,8 @@
     }
     function ChecklistFormFieldComponent_div_1_ng_container_2_fieldset_8_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "fieldset", 12);
-            i0.ɵɵelement(1, "sme-option-template-loader", 13);
+            i0.ɵɵelementStart(0, "fieldset", 13);
+            i0.ɵɵelement(1, "sme-option-template-loader", 14);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
@@ -14330,7 +14367,7 @@
             i0.ɵɵelementContainerStart(0);
             i0.ɵɵelementStart(1, "div", 10);
             i0.ɵɵelementStart(2, "label");
-            i0.ɵɵelementStart(3, "input", 7);
+            i0.ɵɵelementStart(3, "input", 11);
             i0.ɵɵlistener("keydown", function ChecklistFormFieldComponent_div_1_ng_container_2_Template_input_keydown_3_listener($event) { i0.ɵɵrestoreView(_r11_1); var i_r7 = ctx.index; var ctx_r10 = i0.ɵɵnextContext(2); return ctx_r10.onCheckboxKeydown($event, i_r7); })("change", function ChecklistFormFieldComponent_div_1_ng_container_2_Template_input_change_3_listener() { i0.ɵɵrestoreView(_r11_1); var option_r6 = ctx.$implicit; var ctx_r12 = i0.ɵɵnextContext(2); return ctx_r12.toggleOption(option_r6, !option_r6.isSelected); });
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(4, "span", 8);
@@ -14341,7 +14378,7 @@
             i0.ɵɵtext(7);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(8, ChecklistFormFieldComponent_div_1_ng_container_2_fieldset_8_Template, 2, 4, "fieldset", 11);
+            i0.ɵɵtemplate(8, ChecklistFormFieldComponent_div_1_ng_container_2_fieldset_8_Template, 2, 4, "fieldset", 12);
             i0.ɵɵelementContainerEnd();
         }
         if (rf & 2) {
@@ -14350,7 +14387,7 @@
             var ctx_r2 = i0.ɵɵnextContext(2);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("id", ctx_r2.idBag.checkbox + i_r7)("checked", option_r6.isSelected)("disabled", ctx_r2.loadingOrDisabled || option_r6.disabled);
-            i0.ɵɵattribute("aria-label", option_r6.toString())("aria-describedby", ctx_r2.idBag.checkboxDescription + i_r7)("aria-checked", option_r6.isSelected)("aria-required", ctx_r2.required);
+            i0.ɵɵattribute("aria-label", option_r6.toString())("aria-describedby", ctx_r2.idBag.checkboxDescription + i_r7)("aria-checked", option_r6.isSelected)("aria-required", ctx_r2.required)("data-uta-id", ctx_r2.formatDataUtaId(option_r6.toString()));
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(option_r6.toString());
             i0.ɵɵadvance(1);
@@ -14365,7 +14402,7 @@
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 3);
             i0.ɵɵtemplate(1, ChecklistFormFieldComponent_div_1_div_1_Template, 7, 10, "div", 4);
-            i0.ɵɵtemplate(2, ChecklistFormFieldComponent_div_1_ng_container_2_Template, 9, 11, "ng-container", 5);
+            i0.ɵɵtemplate(2, ChecklistFormFieldComponent_div_1_ng_container_2_Template, 9, 12, "ng-container", 5);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
@@ -14658,6 +14695,9 @@
                 detailsSpan: ''
             };
         };
+        ChecklistFormFieldComponent.prototype.formatDataUtaId = function (option) {
+            return option.toLowerCase().replaceAll(' ', '-');
+        };
         ChecklistFormFieldComponent.prototype.getCheckboxCount = function (index) {
             var total = this.options.length;
             var currentIndex = MsftSme.isNullOrUndefined(index) ? 0 : index + 1;
@@ -14691,7 +14731,7 @@
             if (rf & 2) {
                 i0.ɵɵattribute("aria-label", ctx.ariaLabel);
             }
-        }, inputs: { shouldUseOwnOptionsList: "shouldUseOwnOptionsList" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$l, decls: 3, vars: 3, consts: [[1, "sme-focus-zone", 3, "formField"], ["role", "group", "class", "sme-form-field-editor sme-form-field-width", 4, "ngIf"], [3, "alert"], ["role", "group", 1, "sme-form-field-editor", "sme-form-field-width"], ["class", "sme-checkbox sme-checkbox-header", 4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "sme-checkbox", "sme-checkbox-header"], ["type", "checkbox", 3, "id", "checked", "disabled", "keydown", "change"], ["aria-hidden", "true"], [1, "sme-screen-reader", 3, "id"], [1, "sme-checkbox", "sme-margin-bottom-xxs"], ["class", "sme-focus-zone", 3, "disabled", 4, "ngIf"], [1, "sme-focus-zone", 3, "disabled"], [3, "template", "data", "optionIndex"]], template: function ChecklistFormFieldComponent_Template(rf, ctx) {
+        }, inputs: { shouldUseOwnOptionsList: "shouldUseOwnOptionsList" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$l, decls: 3, vars: 3, consts: [[1, "sme-focus-zone", 3, "formField"], ["role", "group", "class", "sme-form-field-editor sme-form-field-width", 4, "ngIf"], [3, "alert"], ["role", "group", 1, "sme-form-field-editor", "sme-form-field-width"], ["class", "sme-checkbox sme-checkbox-header", 4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "sme-checkbox", "sme-checkbox-header"], ["type", "checkbox", "data-uta-id", "select-all", 3, "id", "checked", "disabled", "keydown", "change"], ["aria-hidden", "true"], [1, "sme-screen-reader", 3, "id"], [1, "sme-checkbox", "sme-margin-bottom-xxs"], ["type", "checkbox", 3, "id", "checked", "disabled", "keydown", "change"], ["class", "sme-focus-zone", 3, "disabled", 4, "ngIf"], [1, "sme-focus-zone", 3, "disabled"], [3, "template", "data", "optionIndex"]], template: function ChecklistFormFieldComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵelementStart(0, "sme-form-field-layout", 0);
                 i0.ɵɵtemplate(1, ChecklistFormFieldComponent_div_1_Template, 3, 2, "div", 1);
@@ -20051,10 +20091,9 @@
             i0.ɵɵelementStart(2, "input", 28);
             i0.ɵɵlistener("change", function ComboboxFormFieldComponent_ng_template_18_Template_input_change_2_listener() { i0.ɵɵrestoreView(_r27_1); var option_r25 = ctx.$implicit; var ctx_r26 = i0.ɵɵnextContext(); return ctx_r26.toggleOption(option_r25, !option_r25.isSelected); });
             i0.ɵɵelementEnd();
-            i0.ɵɵtext(3, " [disabled]=\"option.disabled\" class=\"sme-layout-absolute sme-position-inset-none\" /> ");
-            i0.ɵɵelementStart(4, "span", 29);
-            i0.ɵɵelementStart(5, "span", 30);
-            i0.ɵɵtext(6);
+            i0.ɵɵelementStart(3, "span", 29);
+            i0.ɵɵelementStart(4, "span", 30);
+            i0.ɵɵtext(5);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
@@ -20064,9 +20103,9 @@
             var option_r25 = ctx.$implicit;
             var ctx_r11 = i0.ɵɵnextContext();
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("checked", option_r25.isSelected);
+            i0.ɵɵproperty("checked", option_r25.isSelected)("disabled", option_r25.disabled);
             i0.ɵɵattribute("aria-checked", option_r25.isSelected)("aria-label", option_r25.toString())("data-uta-id", option_r25.utaId ? option_r25.utaId : option_r25.value);
-            i0.ɵɵadvance(2);
+            i0.ɵɵadvance(1);
             i0.ɵɵclassProp("sme-combobox-option-wrap", ctx_r11.overflowWrap);
             i0.ɵɵproperty("smeTooltip", option_r25.disabled ? null : option_r25.resolvedTooltipTemplate)("title", option_r25.resolvedTitle)("smeTooltipContext", option_r25.disabled ? null : option_r25.tooltipContext || option_r25);
             i0.ɵɵadvance(1);
@@ -20396,7 +20435,7 @@
                 i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listboxElement = _t.first);
                 i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropDown = _t.first);
             }
-        }, inputs: { multiple: "multiple", overflowWrap: "overflowWrap", maintainSearch: "maintainSearch", dropdownApplyFormFieldOffsetWidth: "dropdownApplyFormFieldOffsetWidth" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c4$1, decls: 20, vars: 30, consts: [[3, "formField"], [1, "sme-combobox", "sme-focus-zone", "sme-form-field-editor", 3, "autoToggle", "disabled", "calculateHeight", "dropdownApplyFormFieldOffsetWidth", "toggled"], ["dropDown", ""], [1, "sme-combobox-header", "sme-dropdown-toggle", 3, "keydown", "keypress"], ["dropdownHeader", ""], ["type", "text", "role", "combobox", "readonly", "", "spellcheck", "false", "autocapitalize", "off", "autocomplete", "off", 3, "value", "placeholder", "click"], ["textInput", ""], ["type", "button", "tabindex", "-1", "role", "presentation", "aria-hidden", "true", 1, "sme-button-trigger", "sme-button-auto-width", 3, "click"], [1, "sme-icon", "sme-icon-chevronDown"], ["role", "listbox", 1, "sme-dropdown-content", "sme-dropdown-content-inherit-container-height", 3, "ngStyle", "id", "keydown"], ["listbox", ""], [3, "sme-padding-squish-v-xs", "keydown", 4, "ngIf"], ["class", "sme-checkbox sme-dropdown-interaction-enabled", "role", "option", 3, "sme-layout-none", 4, "ngIf"], [4, "ngIf"], [3, "alert"], ["singleSelectTemplate", ""], ["multiSelectTemplate", ""], [3, "keydown"], ["name", "searchStringValue", "type", "search", 3, "disableSearchButton", "placeholder", "label", "id", "count", "ngModel", "ngModelChange"], ["role", "option", 1, "sme-checkbox", "sme-dropdown-interaction-enabled"], [1, "sme-position-stretch-h", "sme-arrange-word-break-all"], ["type", "checkbox", "role", "checkbox", 1, "sme-layout-absolute", "sme-position-inset-none", 3, "checked", "change"], ["aria-hidden", "true"], [4, "ngFor", "ngForOf", "ngForTrackBy"], ["smeTemplateOutlet", "", 3, "template", "data"], ["type", "button", "role", "option", 3, "disabled", "click"], [3, "smeTooltip", "smeTooltipContext"], [1, "sme-layout-float-left", 3, "title"], ["type", "checkbox", "role", "checkbox", 3, "checked", "change"], ["aria-hidden", "true", 1, "sme-position-stretch-h", "sme-layout-float-left", 3, "smeTooltip", "title", "smeTooltipContext"], [1, "sme-position-stretch-h", "sme-layout-float-left"]], template: function ComboboxFormFieldComponent_Template(rf, ctx) {
+        }, inputs: { multiple: "multiple", overflowWrap: "overflowWrap", maintainSearch: "maintainSearch", dropdownApplyFormFieldOffsetWidth: "dropdownApplyFormFieldOffsetWidth" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c4$1, decls: 20, vars: 30, consts: [[3, "formField"], [1, "sme-combobox", "sme-focus-zone", "sme-form-field-editor", 3, "autoToggle", "disabled", "calculateHeight", "dropdownApplyFormFieldOffsetWidth", "toggled"], ["dropDown", ""], [1, "sme-combobox-header", "sme-dropdown-toggle", 3, "keydown", "keypress"], ["dropdownHeader", ""], ["type", "text", "role", "combobox", "readonly", "", "spellcheck", "false", "autocapitalize", "off", "autocomplete", "off", 3, "value", "placeholder", "click"], ["textInput", ""], ["type", "button", "tabindex", "-1", "role", "presentation", "aria-hidden", "true", 1, "sme-button-trigger", "sme-button-auto-width", 3, "click"], [1, "sme-icon", "sme-icon-chevronDown"], ["role", "listbox", 1, "sme-dropdown-content", "sme-dropdown-content-inherit-container-height", 3, "ngStyle", "id", "keydown"], ["listbox", ""], [3, "sme-padding-squish-v-xs", "keydown", 4, "ngIf"], ["class", "sme-checkbox sme-dropdown-interaction-enabled", "role", "option", 3, "sme-layout-none", 4, "ngIf"], [4, "ngIf"], [3, "alert"], ["singleSelectTemplate", ""], ["multiSelectTemplate", ""], [3, "keydown"], ["name", "searchStringValue", "type", "search", 3, "disableSearchButton", "placeholder", "label", "id", "count", "ngModel", "ngModelChange"], ["role", "option", 1, "sme-checkbox", "sme-dropdown-interaction-enabled"], [1, "sme-position-stretch-h", "sme-arrange-word-break-all"], ["type", "checkbox", "role", "checkbox", 1, "sme-layout-absolute", "sme-position-inset-none", 3, "checked", "change"], ["aria-hidden", "true"], [4, "ngFor", "ngForOf", "ngForTrackBy"], ["smeTemplateOutlet", "", 3, "template", "data"], ["type", "button", "role", "option", 3, "disabled", "click"], [3, "smeTooltip", "smeTooltipContext"], [1, "sme-layout-float-left", 3, "title"], ["type", "checkbox", "role", "checkbox", 1, "sme-layout-absolute", "sme-position-inset-none", 3, "checked", "disabled", "change"], ["aria-hidden", "true", 1, "sme-position-stretch-h", "sme-layout-float-left", 3, "smeTooltip", "title", "smeTooltipContext"], [1, "sme-position-stretch-h", "sme-layout-float-left"]], template: function ComboboxFormFieldComponent_Template(rf, ctx) {
             if (rf & 1) {
                 var _r28_1 = i0.ɵɵgetCurrentView();
                 i0.ɵɵelementStart(0, "sme-form-field-layout", 0);
@@ -20422,7 +20461,7 @@
                 i0.ɵɵelementEnd();
                 i0.ɵɵelement(15, "sme-validation-alert", 14);
                 i0.ɵɵtemplate(16, ComboboxFormFieldComponent_ng_template_16_Template, 4, 14, "ng-template", null, 15, i0.ɵɵtemplateRefExtractor);
-                i0.ɵɵtemplate(18, ComboboxFormFieldComponent_ng_template_18_Template, 7, 12, "ng-template", null, 16, i0.ɵɵtemplateRefExtractor);
+                i0.ɵɵtemplate(18, ComboboxFormFieldComponent_ng_template_18_Template, 6, 13, "ng-template", null, 16, i0.ɵɵtemplateRefExtractor);
                 i0.ɵɵelementEnd();
             }
             if (rf & 2) {
@@ -21890,6 +21929,21 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(FileFormFieldComponent.prototype, "ariaLabelText", {
+            /**
+             * gets aria-label text
+             */
+            get: function () {
+                var labelText = this.buttonLabel || (this.multiple
+                    ? this.strings.MsftSmeShell.Angular.Form.File.buttonText.plural
+                    : this.strings.MsftSmeShell.Angular.Form.File.buttonText.singular);
+                return this.hasFiles
+                    ? this.strings.MsftSmeShell.Angular.Form.File.selectedFilesFormat.plural.format(this.files.length).concat(labelText)
+                    : labelText;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(FileFormFieldComponent.prototype, "files", {
             /**
              * Indicates if there are any files selected
@@ -22097,7 +22151,7 @@
                 var _t = void 0;
                 i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileInput = _t.first);
             }
-        }, inputs: { multiple: "multiple", fileTypes: "fileTypes", buttonLabel: "buttonLabel" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c1$h, decls: 15, vars: 12, consts: [[3, "formField"], [1, "sme-file-drop-zone", "sme-subform-indent-none", "sme-subform-no-bottom-margin"], [1, "sme-padding-inset-xs", "sme-margin-bottom-xs", "sme-arrange-stack-v", 3, "smeDrop"], [1, "sme-file-input", "sme-margin-bottom-xxs"], ["type", "file", 1, "sme-layout-none", 3, "disabled", "change"], ["file", ""], ["type", "button", 1, "sme-button-primary", "sme-button-auto-width", "sme-margin-right-xs", 3, "smeDisabled", "click"], [1, "sme-position-flex-align-center"], [4, "ngIf"], ["aria-live", "polite", 1, "sme-margin-bottom-xs"], [3, "alert"], ["class", "sme-arrange-stack-h sme-margin-bottom-xs", 4, "ngFor", "ngForOf"], [1, "sme-arrange-stack-h", "sme-margin-bottom-xs"], [1, "sme-position-flex-none", "sme-icon", "sme-icon-size-lg"], ["aria-live", "polite", 1, "sme-position-flex-auto", "sme-padding-left-sm", "sme-arrange-stack-v"], [1, "sme-position-flex-auto", "sme-arrange-ellipsis", "sme-padding-inset-none"], ["type", "button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", 3, "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-cancel", "sme-color-red"]], template: function FileFormFieldComponent_Template(rf, ctx) {
+        }, inputs: { multiple: "multiple", fileTypes: "fileTypes", buttonLabel: "buttonLabel" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c1$h, decls: 15, vars: 13, consts: [[3, "formField"], [1, "sme-file-drop-zone", "sme-subform-indent-none", "sme-subform-no-bottom-margin"], [1, "sme-padding-inset-xs", "sme-margin-bottom-xs", "sme-arrange-stack-v", 3, "smeDrop"], [1, "sme-file-input", "sme-margin-bottom-xxs"], ["type", "file", 1, "sme-layout-none", 3, "disabled", "change"], ["file", ""], ["type", "button", 1, "sme-button-primary", "sme-button-auto-width", "sme-margin-right-xs", 3, "smeDisabled", "click"], [1, "sme-position-flex-align-center"], [4, "ngIf"], [1, "sme-margin-bottom-xs"], [3, "alert"], ["class", "sme-arrange-stack-h sme-margin-bottom-xs", 4, "ngFor", "ngForOf"], [1, "sme-arrange-stack-h", "sme-margin-bottom-xs"], [1, "sme-position-flex-none", "sme-icon", "sme-icon-size-lg"], [1, "sme-position-flex-auto", "sme-padding-left-sm", "sme-arrange-stack-v"], [1, "sme-position-flex-auto", "sme-arrange-ellipsis", "sme-padding-inset-none"], ["type", "button", 1, "sme-button-trigger", "sme-position-flex-none", "sme-button-auto-width", 3, "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-cancel", "sme-color-red"]], template: function FileFormFieldComponent_Template(rf, ctx) {
             if (rf & 1) {
                 var _r8_1 = i0.ɵɵgetCurrentView();
                 i0.ɵɵelementStart(0, "sme-form-field-layout", 0);
@@ -22135,6 +22189,7 @@
                 i0.ɵɵattribute("multiple", ctx.multiple || null)("accept", ctx.accept);
                 i0.ɵɵadvance(2);
                 i0.ɵɵproperty("smeDisabled", ctx.loadingOrDisabled);
+                i0.ɵɵattribute("aria-label", ctx.ariaLabelText);
                 i0.ɵɵadvance(1);
                 i0.ɵɵtextInterpolate1(" ", ctx.buttonLabel || (ctx.multiple ? ctx.strings.MsftSmeShell.Angular.Form.File.buttonText.plural : ctx.strings.MsftSmeShell.Angular.Form.File.buttonText.singular), " ");
                 i0.ɵɵadvance(2);
@@ -27446,7 +27501,8 @@
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(column_r18.header);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(4, _c12, column_r18.sortMode === ctx_r20.sortModeEnum.Ascend, column_r18.sortMode === ctx_r20.sortModeEnum.Descend));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(5, _c12, column_r18.sortMode === ctx_r20.sortModeEnum.Ascend, column_r18.sortMode === ctx_r20.sortModeEnum.Descend));
+            i0.ɵɵattribute("aria-label", column_r18.sortable ? ctx_r20.getSortLabel(column_r18) : null);
         }
     }
     function DataTableComponent_div_7_div_2_Template(rf, ctx) {
@@ -27465,7 +27521,8 @@
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(column_r18.header);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(3, _c12, column_r18.sortMode === ctx_r21.sortModeEnum.Ascend, column_r18.sortMode === ctx_r21.sortModeEnum.Descend));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(4, _c12, column_r18.sortMode === ctx_r21.sortModeEnum.Ascend, column_r18.sortMode === ctx_r21.sortModeEnum.Descend));
+            i0.ɵɵattribute("aria-label", column_r18.sortable ? ctx_r21.getSortLabel(column_r18) : null);
         }
     }
     function DataTableComponent_div_7_div_3_Template(rf, ctx) {
@@ -27488,8 +27545,8 @@
     function DataTableComponent_div_7_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 32);
-            i0.ɵɵtemplate(1, DataTableComponent_div_7_div_1_Template, 4, 7, "div", 33);
-            i0.ɵɵtemplate(2, DataTableComponent_div_7_div_2_Template, 4, 6, "div", 34);
+            i0.ɵɵtemplate(1, DataTableComponent_div_7_div_1_Template, 4, 8, "div", 33);
+            i0.ɵɵtemplate(2, DataTableComponent_div_7_div_2_Template, 4, 7, "div", 34);
             i0.ɵɵtemplate(3, DataTableComponent_div_7_div_3_Template, 1, 0, "div", 35);
             i0.ɵɵtemplate(4, DataTableComponent_div_7_sme_resizer_4_Template, 1, 2, "sme-resizer", 36);
             i0.ɵɵelementEnd();
@@ -28317,7 +28374,8 @@
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(column_r18.header);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(4, _c12, column_r18.sortMode === ctx_r20.sortModeEnum.Ascend, column_r18.sortMode === ctx_r20.sortModeEnum.Descend));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(5, _c12, column_r18.sortMode === ctx_r20.sortModeEnum.Ascend, column_r18.sortMode === ctx_r20.sortModeEnum.Descend));
+            i0.ɵɵattribute("aria-label", column_r18.sortable ? ctx_r20.getSortLabel(column_r18) : null);
         }
     }
     function TreeTableComponent_div_7_div_2_Template(rf, ctx) {
@@ -28336,7 +28394,8 @@
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(column_r18.header);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(3, _c12, column_r18.sortMode === ctx_r21.sortModeEnum.Ascend, column_r18.sortMode === ctx_r21.sortModeEnum.Descend));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(4, _c12, column_r18.sortMode === ctx_r21.sortModeEnum.Ascend, column_r18.sortMode === ctx_r21.sortModeEnum.Descend));
+            i0.ɵɵattribute("aria-label", column_r18.sortable ? ctx_r21.getSortLabel(column_r18) : null);
         }
     }
     function TreeTableComponent_div_7_div_3_Template(rf, ctx) {
@@ -28358,8 +28417,8 @@
     function TreeTableComponent_div_7_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 32);
-            i0.ɵɵtemplate(1, TreeTableComponent_div_7_div_1_Template, 4, 7, "div", 33);
-            i0.ɵɵtemplate(2, TreeTableComponent_div_7_div_2_Template, 4, 6, "div", 34);
+            i0.ɵɵtemplate(1, TreeTableComponent_div_7_div_1_Template, 4, 8, "div", 33);
+            i0.ɵɵtemplate(2, TreeTableComponent_div_7_div_2_Template, 4, 7, "div", 34);
             i0.ɵɵtemplate(3, TreeTableComponent_div_7_div_3_Template, 1, 0, "div", 35);
             i0.ɵɵtemplate(4, TreeTableComponent_div_7_sme_resizer_4_Template, 1, 2, "sme-resizer", 36);
             i0.ɵɵelementEnd();
@@ -30603,6 +30662,25 @@
                 || renderedItem.index === this.hoveredRenderedItemIndex
                 || editableDataItem.isNewRow;
         };
+        /**
+         * Retrieves the text that should be associated with the aria-label for column sort order (if sortable).
+         * This label is utilized by screen readers for accessibility.
+         * If the current sort order is Ascending, the label will indicate a button icon is present to Descend order.
+         * If the current sort order is Descending, the label will indicate a button icon is present to Ascend order.
+         * If the current sort order is None, the label is null, and the screen reader will not read anything.
+         * @param column the table column
+         * @returns the text for the aria-label on the sort icon
+         */
+        DataTableComponent.prototype.getSortLabel = function (column) {
+            switch (column.sortMode) {
+                case exports.DataTableSortMode.Ascend:
+                    return this.strings.MsftSmeShell.Angular.DataTable.Aria.Label.descendSortOrderButton;
+                case exports.DataTableSortMode.Descend:
+                    return this.strings.MsftSmeShell.Angular.DataTable.Aria.Label.ascendSortOrderButton;
+                case exports.DataTableSortMode.None:
+                    return null;
+            }
+        };
         /**
          * It implements the AfterViewInit interface.
          */
@@ -32660,6 +32738,13 @@
                 this.processColumns();
             }
         };
+        /**
+         * Get the number of filtered items (if any) within the dataTable.
+         * @returns number of dataTable filtered items, zero if none.
+         */
+        DataTableComponent.prototype.getNumberOfFilteredItems = function () {
+            return this.filteredItems ? this.filteredItems.length : 0;
+        };
         /**
          * This function is added from upgrading data table to support editable data table
          * The idea is to use the data table's header width to be applied on the data table body columns.
@@ -34012,8 +34097,9 @@
         /**
          * Force refresh for the pivot tabs.
          */
-        PivotComponent.prototype.refresh = function () {
-            this.updatePivotTabs();
+        PivotComponent.prototype.refresh = function (shouldEmit) {
+            if (shouldEmit === void 0) { shouldEmit = false; }
+            this.updatePivotTabs(shouldEmit);
         };
         /**
          * Selects a tab
@@ -34076,7 +34162,11 @@
                 'sme-pivot'
             ]);
         };
-        PivotComponent.prototype.updatePivotTabs = function () {
+        /**
+         * Main rendering functionality for the pivot tab
+         */
+        PivotComponent.prototype.updatePivotTabs = function (shouldEmit) {
+            if (shouldEmit === void 0) { shouldEmit = true; }
             var currentFill = 0;
             this.visibleTabs = [];
             this.trayTabs = [];
@@ -34111,6 +34201,9 @@
                     currentFill += tabWidth;
                 }
             }
+            if (shouldEmit) {
+                this.emitLayoutChanged();
+            }
         };
         return PivotComponent;
     }(CoreBaseComponent));
@@ -34197,7 +34290,7 @@
     __decorate([
         debounce_decorators.Debounce(),
         __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
+        __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", void 0)
     ], PivotComponent.prototype, "refresh", null);
     __decorate([
@@ -34921,14 +35014,14 @@
         if (rf & 1) {
             var _r17_1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "button", 27);
-            i0.ɵɵlistener("click", function MasterViewComponent_button_15_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17_1); var ctx_r16 = i0.ɵɵnextContext(); return ctx_r16.refresh.next(); });
+            i0.ɵɵlistener("click", function MasterViewComponent_button_15_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17_1); var ctx_r16 = i0.ɵɵnextContext(); return ctx_r16.refreshButtonClicked(); });
             i0.ɵɵelement(1, "span", 28);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
             var ctx_r6 = i0.ɵɵnextContext();
-            i0.ɵɵproperty("disabled", ctx_r6.disableRefresh)("title", ctx_r6.resourceStrings.refresh.title);
-            i0.ɵɵattribute("aria-label", ctx_r6.refreshButtonAriaLabel);
+            i0.ɵɵproperty("title", ctx_r6.resourceStrings.refresh.title);
+            i0.ɵɵattribute("aria-disabled", ctx_r6.disableRefresh)("aria-label", ctx_r6.refreshButtonAriaLabel);
         }
     }
     function MasterViewComponent_button_16_Template(rf, ctx) {
@@ -34995,6 +35088,7 @@
             _this.pivotComponent = pivotComponent;
             _this.isInitialized = false;
             _this.resourceStrings = _this.strings.MsftSmeShell.Angular.MasterView;
+            _this.commonStrings = _this.strings.MsftSmeShell.Angular.Common;
             _this.noSideMargin = false;
             _this.hideHeader = false;
             _this.header = '';
@@ -35137,6 +35231,23 @@
                 this.refreshButtonAriaLabel = this.resourceStrings.refresh.ariaLabel.noHeader;
             }
         };
+        // Note: this is a bandaid fix to this bug: https://microsoft.visualstudio.com/OS/_workitems/edit/33031791/.
+        // The screen reader doesn't announce when aria-disabled changes and the exact reason for that is unknown.
+        // It's not best practice to be adjusting the aria-label to achieve the effect but that's the best we came up with.
+        // TODO: fix the real issue why the screen reader doesn't announce the aria-disabled changes
+        MasterViewComponent.prototype.ngOnChanges = function (changes) {
+            var _a;
+            var refreshButtonLabel = this.resourceStrings.refresh.ariaLabel.noHeader;
+            if (this.header) {
+                refreshButtonLabel = this.resourceStrings.refresh.ariaLabel.header.format(this.header);
+            }
+            if (((_a = changes.disableRefresh) === null || _a === void 0 ? void 0 : _a.currentValue) === true) {
+                this.refreshButtonAriaLabel = this.commonStrings.disabled + " " + refreshButtonLabel;
+            }
+            else {
+                this.refreshButtonAriaLabel = this.commonStrings.enabled + " " + refreshButtonLabel;
+            }
+        };
         MasterViewComponent.prototype.ngOnDestroy = function () {
             if (this.splitViewPaneToggledSubscription) {
                 this.splitViewPaneToggledSubscription.unsubscribe();
@@ -35190,6 +35301,15 @@
                 this.actionBarComponent.updateActionBar();
             }
         };
+        /**
+         * Handles clicking on the refresh button
+         */
+        MasterViewComponent.prototype.refreshButtonClicked = function () {
+            if (this.disableRefresh) {
+                return;
+            }
+            this.refresh.next();
+        };
         MasterViewComponent.prototype.handleDetailPaneExpanding = function (dataViewControl) {
             var _this = this;
             if (this.splitView) {
@@ -35280,7 +35400,7 @@
             if (rf & 1) {
                 i0.ɵɵlistener("resize", function MasterViewComponent_resize_HostBindingHandler() { return ctx.updateLayout(); }, false, i0.ɵɵresolveWindow);
             }
-        }, inputs: { noSideMargin: "noSideMargin", hideHeader: "hideHeader", header: "header", total: "total", showSelection: "showSelection", showColumnPicker: "showColumnPicker", columnPickerActive: "columnPickerActive", showRefresh: "showRefresh", disableRefresh: "disableRefresh", dataTableMinWidth: "dataTableMinWidth", showFilter: "showFilter", filterActive: "filterActive", enableQueryEditor: "enableQueryEditor", selection: "selection", requireDataItemUniqueId: "requireDataItemUniqueId", showCustomFilter: "showCustomFilter", groupActive: "groupActive", stretchToAbsolute: "stretchToAbsolute", autoExpandDetailsPane: "autoExpandDetailsPane", showGroup: "showGroup" }, outputs: { selectionChange: "selectionChange", columnPicker: "columnPicker", refresh: "refresh", filter: "filter", group: "group", clearSelection: "clearSelection" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c5$3, decls: 24, vars: 27, consts: [["class", "sme-position-flex-none sme-padding-squish-v-lg sme-arrange-word-wrap-break-word sme-font-h3", 3, "hidden", "id", 4, "ngIf"], [3, "layoutChanged"], ["layout", ""], ["name", "narrow", 3, "until"], ["class", "sme-position-flex-none", 3, "sme-padding-horizontal-sm", 4, "ngIf"], [1, "sme-position-flex-none", "sme-arrange-stack-reversed"], ["container", ""], [1, "sme-position-flex-none", "sme-arrange-stack-h"], [1, "sme-focus-zone", "sme-position-flex-none", "sme-arrange-stack-h", "sme-arrange-ws-nowrap", "sme-scheme-secondary-text"], ["role", "status", 1, "sme-layout-action-bar-item", "sme-padding-horizontal-sm", 3, "id"], ["type", "button", "role", "button", "class", "sme-button-trigger sme-layout-action-bar-item-height sme-scheme-secondary-text sme-button-auto-width", 3, "click", 4, "ngIf"], [1, "sme-focus-zone", "sme-arrange-ws-nowrap"], ["type", "button", "role", "button", "class", "sme-layout-action-bar-item-height sme-button-trigger sme-button-auto-width", "data-uta-id", "column-picker-button", 3, "title", "sme-toggled", "click", 4, "ngIf"], ["type", "button", "role", "button", "class", "sme-layout-action-bar-item-height sme-button-trigger sme-button-auto-width", 3, "disabled", "title", "click", 4, "ngIf"], ["type", "button", "role", "button", "class", "sme-layout-action-bar-item-height sme-button-trigger sme-button-auto-width", 3, "title", "sme-toggled", "click", 4, "ngIf"], [1, "sme-focus-zone"], ["class", "sme-margin-horizontal-sm", 4, "ngIf"], ["style", "position: relative;", 4, "ngIf"], ["dataView", ""], [1, "sme-position-flex-none", "sme-padding-squish-v-lg", "sme-arrange-word-wrap-break-word", "sme-font-h3", 3, "hidden", "id"], [1, "sme-position-flex-none"], ["type", "button", "role", "button", 1, "sme-button-trigger", "sme-layout-action-bar-item-height", "sme-scheme-secondary-text", "sme-button-auto-width", 3, "click"], ["aria-hidden", "true"], [1, "sme-screen-reader"], ["aria-hidden", "true", 1, "sme-icon", "sme-icon-clear", "sme-margin-left-xs", 3, "title"], ["type", "button", "role", "button", "data-uta-id", "column-picker-button", 1, "sme-layout-action-bar-item-height", "sme-button-trigger", "sme-button-auto-width", 3, "title", "click"], [1, "sme-icon", "sme-icon-tripleColumn"], ["type", "button", "role", "button", 1, "sme-layout-action-bar-item-height", "sme-button-trigger", "sme-button-auto-width", 3, "disabled", "title", "click"], [1, "sme-icon", "sme-icon-refresh"], ["type", "button", "role", "button", 1, "sme-layout-action-bar-item-height", "sme-button-trigger", "sme-button-auto-width", 3, "title", "click"], [1, "sme-icon", "sme-icon-filter"], [1, "sme-icon", "sme-icon-groupedList"], [1, "sme-margin-horizontal-sm"], [2, "position", "relative"], [1, "sme-position-flex-none", "sme-layout-action-bar-item"]], template: function MasterViewComponent_Template(rf, ctx) {
+        }, inputs: { noSideMargin: "noSideMargin", hideHeader: "hideHeader", header: "header", total: "total", showSelection: "showSelection", showColumnPicker: "showColumnPicker", columnPickerActive: "columnPickerActive", showRefresh: "showRefresh", disableRefresh: "disableRefresh", dataTableMinWidth: "dataTableMinWidth", showFilter: "showFilter", filterActive: "filterActive", enableQueryEditor: "enableQueryEditor", selection: "selection", requireDataItemUniqueId: "requireDataItemUniqueId", showCustomFilter: "showCustomFilter", groupActive: "groupActive", stretchToAbsolute: "stretchToAbsolute", autoExpandDetailsPane: "autoExpandDetailsPane", showGroup: "showGroup" }, outputs: { selectionChange: "selectionChange", columnPicker: "columnPicker", refresh: "refresh", filter: "filter", group: "group", clearSelection: "clearSelection" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c5$3, decls: 24, vars: 27, consts: [["class", "sme-position-flex-none sme-padding-squish-v-lg sme-arrange-word-wrap-break-word sme-font-h3", 3, "hidden", "id", 4, "ngIf"], [3, "layoutChanged"], ["layout", ""], ["name", "narrow", 3, "until"], ["class", "sme-position-flex-none", 3, "sme-padding-horizontal-sm", 4, "ngIf"], [1, "sme-position-flex-none", "sme-arrange-stack-reversed"], ["container", ""], [1, "sme-position-flex-none", "sme-arrange-stack-h"], [1, "sme-focus-zone", "sme-position-flex-none", "sme-arrange-stack-h", "sme-arrange-ws-nowrap", "sme-scheme-secondary-text"], ["role", "status", 1, "sme-layout-action-bar-item", "sme-padding-horizontal-sm", 3, "id"], ["type", "button", "role", "button", "class", "sme-button-trigger sme-layout-action-bar-item-height sme-scheme-secondary-text sme-button-auto-width", 3, "click", 4, "ngIf"], [1, "sme-focus-zone", "sme-arrange-ws-nowrap"], ["type", "button", "role", "button", "class", "sme-layout-action-bar-item-height sme-button-trigger sme-button-auto-width", "data-uta-id", "column-picker-button", 3, "title", "sme-toggled", "click", 4, "ngIf"], ["aria-live", "polite", "type", "button", "role", "button", "class", "sme-layout-action-bar-item-height sme-button-trigger sme-button-auto-width", 3, "title", "click", 4, "ngIf"], ["type", "button", "role", "button", "class", "sme-layout-action-bar-item-height sme-button-trigger sme-button-auto-width", 3, "title", "sme-toggled", "click", 4, "ngIf"], [1, "sme-focus-zone"], ["class", "sme-margin-horizontal-sm", 4, "ngIf"], ["style", "position: relative;", 4, "ngIf"], ["dataView", ""], [1, "sme-position-flex-none", "sme-padding-squish-v-lg", "sme-arrange-word-wrap-break-word", "sme-font-h3", 3, "hidden", "id"], [1, "sme-position-flex-none"], ["type", "button", "role", "button", 1, "sme-button-trigger", "sme-layout-action-bar-item-height", "sme-scheme-secondary-text", "sme-button-auto-width", 3, "click"], ["aria-hidden", "true"], [1, "sme-screen-reader"], ["aria-hidden", "true", 1, "sme-icon", "sme-icon-clear", "sme-margin-left-xs", 3, "title"], ["type", "button", "role", "button", "data-uta-id", "column-picker-button", 1, "sme-layout-action-bar-item-height", "sme-button-trigger", "sme-button-auto-width", 3, "title", "click"], [1, "sme-icon", "sme-icon-tripleColumn"], ["aria-live", "polite", "type", "button", "role", "button", 1, "sme-layout-action-bar-item-height", "sme-button-trigger", "sme-button-auto-width", 3, "title", "click"], [1, "sme-icon", "sme-icon-refresh"], ["type", "button", "role", "button", 1, "sme-layout-action-bar-item-height", "sme-button-trigger", "sme-button-auto-width", 3, "title", "click"], [1, "sme-icon", "sme-icon-filter"], [1, "sme-icon", "sme-icon-groupedList"], [1, "sme-margin-horizontal-sm"], [2, "position", "relative"], [1, "sme-position-flex-none", "sme-layout-action-bar-item"]], template: function MasterViewComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵprojectionDef(_c4$5);
                 i0.ɵɵtemplate(0, MasterViewComponent_h2_0_Template, 2, 3, "h2", 0);
@@ -36505,7 +36625,7 @@
         if (rf & 2) {
             var link_r13 = i0.ɵɵnextContext().$implicit;
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate(link_r13.displayText);
+            i0.ɵɵtextInterpolate1(" ", link_r13.displayText, " ");
         }
     }
     function AlertBarComponent_div_1_label_14_div_1_div_2_a_1_Template(rf, ctx) {
@@ -36518,7 +36638,7 @@
             var link_r13 = i0.ɵɵnextContext(2).$implicit;
             i0.ɵɵproperty("href", link_r13.uri, i0.ɵɵsanitizeUrl);
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate(link_r13.displayText);
+            i0.ɵɵtextInterpolate1(" ", link_r13.displayText, " ");
         }
     }
     function AlertBarComponent_div_1_label_14_div_1_div_2_a_2_Template(rf, ctx) {
@@ -36531,7 +36651,7 @@
             var link_r13 = i0.ɵɵnextContext(2).$implicit;
             i0.ɵɵproperty("routerLink", link_r13.uri);
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate(link_r13.displayText);
+            i0.ɵɵtextInterpolate1(" ", link_r13.displayText, " ");
         }
     }
     function AlertBarComponent_div_1_label_14_div_1_div_2_Template(rf, ctx) {
@@ -36808,7 +36928,7 @@
         return AlertBarComponent;
     }(CoreBaseComponent));
     /** @nocollapse */ AlertBarComponent.ɵfac = function AlertBarComponent_Factory(t) { return new (t || AlertBarComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(AlertBarService), i0.ɵɵdirectiveInject(DialogService)); };
-    /** @nocollapse */ AlertBarComponent.ɵcmp = i0.ɵɵdefineComponent({ type: AlertBarComponent, selectors: [["sme-alert-bar"]], inputs: { id: "id" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [[1, "sme-layer-notification", "sme-layout-absolute", "sme-layout-notification-popup-list"], ["tabindex", "0", "class", "sme-layout-notification-popup sme-shadow-notification-popup sme-margin-right-sm sme-margin-top-sm sme-arrange-stack-h\n    sme-background-color-alt-5 sme-border-color-alt-5 sme-padding-top-xs sme-padding-left-sm sme-padding-right-xs sme-padding-bottom-xs sme-behavior-hover-trigger", 3, "click", 4, "ngFor", "ngForOf"], ["tabindex", "0", 1, "sme-layout-notification-popup", "sme-shadow-notification-popup", "sme-margin-right-sm", "sme-margin-top-sm", "sme-arrange-stack-h", "sme-background-color-alt-5", "sme-border-color-alt-5", "sme-padding-top-xs", "sme-padding-left-sm", "sme-padding-right-xs", "sme-padding-bottom-xs", "sme-behavior-hover-trigger", 3, "click"], [1, "sme-arrange-stack-v"], ["size", "16px", 1, "sme-padding-right-xs", "sme-padding-top-xxxs", 3, "status", "title"], ["role", "button", "class", "sme-button-trigger sme-button-auto-width sme-position-flex-none sme-padding-inset-none sme-icon sme-padding-top-xxs sme-behavior-hover-target-show", 3, "ngClass", "title", "click", 4, "ngIf"], ["role", "alert", "id", "sme-alert-bar-content", 1, "sme-arrange-stack-v", "sme-arrange-overflow-hide-x", "sme-arrange-word-wrap-break-word", "sme-position-stretch-h"], [1, "sme-layout-notification-message"], [1, "sme-arrange-stack-h"], [1, "sme-screen-reader"], [1, "sme-font-family-bold", "sme-font-label", "sme-margin-inset-none", "sme-padding-top-xxxs", "sme-position-stretch-h", "sme-position-left-inline"], ["class", "sme-font-label", 4, "ngIf"], [4, "ngIf"], [1, "sme-arrange-stack-h", "sme-font-label", "sme-color-base-40"], [1, "sme-position-flex-auto", "sme-arrange-ellipsis"], [1, "sme-position-flex-none", "sme-margin-left-xxs"], ["aria-describedby", "sme-alert-bar-content", 1, "sme-button-trigger", "sme-button-auto-width", "sme-position-flex-none", "sme-padding-inset-none", "sme-padding-left-xxs", "sme-padding-right-xxs", 3, "click"], [1, "sme-icon", "sme-icon-cancel", 3, "title"], ["role", "button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-position-flex-none", "sme-padding-inset-none", "sme-icon", "sme-padding-top-xxs", "sme-behavior-hover-target-show", 3, "ngClass", "title", "click"], [1, "sme-font-label"], [4, "ngFor", "ngForOf"], ["class", "sme-link", 3, "click", 4, "ngIf"], [3, "click", 4, "ngIf"], [1, "sme-link", 3, "click"], [3, "click"], ["class", "sme-link", "target", "_blank", 3, "href", 4, "ngIf"], ["class", "sme-link", 3, "routerLink", 4, "ngIf"], ["target", "_blank", 1, "sme-link", 3, "href"], [1, "sme-link", 3, "routerLink"]], template: function AlertBarComponent_Template(rf, ctx) {
+    /** @nocollapse */ AlertBarComponent.ɵcmp = i0.ɵɵdefineComponent({ type: AlertBarComponent, selectors: [["sme-alert-bar"]], inputs: { id: "id" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [[1, "sme-layer-notification", "sme-layout-absolute", "sme-layout-notification-popup-list"], ["tabindex", "0", "class", "sme-layout-notification-popup sme-shadow-notification-popup sme-margin-right-sm sme-margin-top-sm sme-arrange-stack-h\n    sme-background-color-alt-5 sme-border-color-alt-5 sme-padding-top-xs sme-padding-left-sm sme-padding-right-xs sme-padding-bottom-xs sme-behavior-hover-trigger", 3, "click", 4, "ngFor", "ngForOf"], ["tabindex", "0", 1, "sme-layout-notification-popup", "sme-shadow-notification-popup", "sme-margin-right-sm", "sme-margin-top-sm", "sme-arrange-stack-h", "sme-background-color-alt-5", "sme-border-color-alt-5", "sme-padding-top-xs", "sme-padding-left-sm", "sme-padding-right-xs", "sme-padding-bottom-xs", "sme-behavior-hover-trigger", 3, "click"], [1, "sme-arrange-stack-v"], ["size", "16px", 1, "sme-padding-right-xs", "sme-padding-top-xxxs", 3, "status", "title"], ["role", "button", "class", "sme-button-trigger sme-button-auto-width sme-position-flex-none sme-padding-inset-none sme-icon sme-padding-top-xxs sme-behavior-hover-target-show", 3, "ngClass", "title", "click", 4, "ngIf"], ["role", "alert", "id", "sme-alert-bar-content", 1, "sme-arrange-stack-v", "sme-arrange-overflow-hide-x", "sme-arrange-word-wrap-break-word", "sme-position-stretch-h"], [1, "sme-layout-notification-message"], [1, "sme-arrange-stack-h"], [1, "sme-screen-reader"], [1, "sme-font-family-bold", "sme-font-label", "sme-margin-inset-none", "sme-padding-top-xxxs", "sme-position-stretch-h", "sme-position-left-inline"], ["class", "sme-font-label", 4, "ngIf"], [4, "ngIf"], [1, "sme-arrange-stack-h", "sme-font-label", "sme-color-base-40"], [1, "sme-position-flex-auto", "sme-arrange-ellipsis"], [1, "sme-position-flex-none", "sme-margin-left-xxs"], ["data-uta-id", "cancel-alert", "aria-describedby", "sme-alert-bar-content", 1, "sme-button-trigger", "sme-button-auto-width", "sme-position-flex-none", "sme-padding-inset-none", "sme-padding-left-xxs", "sme-padding-right-xxs", 3, "click"], [1, "sme-icon", "sme-icon-cancel", 3, "title"], ["role", "button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-position-flex-none", "sme-padding-inset-none", "sme-icon", "sme-padding-top-xxs", "sme-behavior-hover-target-show", 3, "ngClass", "title", "click"], [1, "sme-font-label"], [4, "ngFor", "ngForOf"], ["class", "sme-link", 3, "click", 4, "ngIf"], [3, "click", 4, "ngIf"], [1, "sme-link", 3, "click"], [3, "click"], ["class", "sme-link", "target", "_blank", 3, "href", 4, "ngIf"], ["class", "sme-link", 3, "routerLink", 4, "ngIf"], ["target", "_blank", 1, "sme-link", 3, "href"], [1, "sme-link", 3, "routerLink"]], template: function AlertBarComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵelementStart(0, "div", 0);
                 i0.ɵɵtemplate(1, AlertBarComponent_div_1_Template, 23, 13, "div", 1);
@@ -45232,9 +45352,43 @@
 
     var PropertyGridItemComponent = /** @class */ (function () {
         function PropertyGridItemComponent() {
+            /**
+             * The status for the property grid item.
+             */
             this.status = null;
+            /**
+             * It indicates the column span for the layout.
+             */
             this.columnSpan = 1;
+            /**
+             * It indicates the rendering of loading wheel when data unloaded.
+             */
+            this.isAsync = false;
+            /**
+             * It indicates whether the property grid is loading.
+             * This parameter has to have isAsync set to true to use.
+             */
+            this.loading = true;
         }
+        Object.defineProperty(PropertyGridItemComponent.prototype, "value", {
+            /**
+             * The getter for value/context.
+             */
+            get: function () {
+                return this.internalValue;
+            },
+            /**
+             * The setter for value/context.
+             */
+            set: function (input) {
+                if (this.isAsync && this.loading) {
+                    this.loading = false;
+                }
+                this.internalValue = input;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(PropertyGridItemComponent.prototype, "statusClass", {
             /**
              * Gets the status class to apply to this components value section
@@ -45266,10 +45420,26 @@
             enumerable: false,
             configurable: true
         });
+        PropertyGridItemComponent.prototype.ngOnInit = function () {
+            // Edge case when the data has been assigned before the UI renders,
+            // the functionality to make sure the data is actually loaded.
+            // Basically in this case the set function will be skipped.
+            if (this.isAsync && this.loading && this.value !== undefined) {
+                this.loading = false;
+            }
+        };
+        /**
+         * Give the ability to reset loading.
+         */
+        PropertyGridItemComponent.prototype.resetLoading = function () {
+            if (!this.loading) {
+                this.loading = true;
+            }
+        };
         return PropertyGridItemComponent;
     }());
     /** @nocollapse */ PropertyGridItemComponent.ɵfac = function PropertyGridItemComponent_Factory(t) { return new (t || PropertyGridItemComponent)(); };
-    /** @nocollapse */ PropertyGridItemComponent.ɵcmp = i0.ɵɵdefineComponent({ type: PropertyGridItemComponent, selectors: [["sme-property-grid-item"]], inputs: { label: "label", value: "value", action: "action", link: "link", tooltip: "tooltip", isExternalLink: "isExternalLink", iconClass: "iconClass", status: "status", columnSpan: "columnSpan" }, decls: 0, vars: 0, template: function PropertyGridItemComponent_Template(rf, ctx) { }, encapsulation: 2 });
+    /** @nocollapse */ PropertyGridItemComponent.ɵcmp = i0.ɵɵdefineComponent({ type: PropertyGridItemComponent, selectors: [["sme-property-grid-item"]], inputs: { label: "label", value: "value", action: "action", link: "link", tooltip: "tooltip", isExternalLink: "isExternalLink", iconClass: "iconClass", status: "status", columnSpan: "columnSpan", isAsync: "isAsync" }, decls: 0, vars: 0, template: function PropertyGridItemComponent_Template(rf, ctx) { }, encapsulation: 2 });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PropertyGridItemComponent, [{
                 type: i0.Component,
@@ -45295,6 +45465,8 @@
                     type: i0.Input
                 }], columnSpan: [{
                     type: i0.Input
+                }], isAsync: [{
+                    type: i0.Input
                 }] });
     })();
 
@@ -45367,43 +45539,67 @@
             i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.getTemplate(item_r14))("ngTemplateOutletContext", i0.ɵɵpureFunction2(7, _c4$6, item_r14, i_r15));
         }
     }
-    function PropertyGridComponent_ng_template_6_ng_container_1_Template(rf, ctx) {
+    function PropertyGridComponent_ng_template_6_sme_loading_wheel_0_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelement(0, "sme-loading-wheel", 23);
+        }
+        if (rf & 2) {
+            i0.ɵɵproperty("inline", true)("isBackgroundTransparent", true);
+        }
+    }
+    function PropertyGridComponent_ng_template_6_ng_container_1_ng_container_2_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementContainer(0);
         }
     }
-    function PropertyGridComponent_ng_template_6_span_2_Template(rf, ctx) {
+    function PropertyGridComponent_ng_template_6_ng_container_1_span_3_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "span");
             i0.ɵɵtext(1);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var item_r20 = i0.ɵɵnextContext().$implicit;
-            var ctx_r23 = i0.ɵɵnextContext();
+            var item_r20 = i0.ɵɵnextContext(2).$implicit;
+            var ctx_r25 = i0.ɵɵnextContext();
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate(ctx_r23.stringifyValue(item_r20.value));
+            i0.ɵɵtextInterpolate(ctx_r25.stringifyValue(item_r20.value));
         }
     }
-    function PropertyGridComponent_ng_template_6_Template(rf, ctx) {
+    function PropertyGridComponent_ng_template_6_ng_container_1_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "p", 21);
-            i0.ɵɵtemplate(1, PropertyGridComponent_ng_template_6_ng_container_1_Template, 1, 0, "ng-container", 19);
-            i0.ɵɵtemplate(2, PropertyGridComponent_ng_template_6_span_2_Template, 2, 1, "span", 22);
+            i0.ɵɵelementContainerStart(0);
+            i0.ɵɵelementStart(1, "p", 24);
+            i0.ɵɵtemplate(2, PropertyGridComponent_ng_template_6_ng_container_1_ng_container_2_Template, 1, 0, "ng-container", 19);
+            i0.ɵɵtemplate(3, PropertyGridComponent_ng_template_6_ng_container_1_span_3_Template, 2, 1, "span", 22);
             i0.ɵɵelementEnd();
+            i0.ɵɵelementContainerEnd();
         }
         if (rf & 2) {
-            var item_r20 = ctx.$implicit;
-            var i_r21 = ctx.index;
-            var ctx_r5 = i0.ɵɵnextContext();
+            var ctx_r27 = i0.ɵɵnextContext();
+            var i_r21 = ctx_r27.index;
+            var item_r20 = ctx_r27.$implicit;
+            var ctx_r23 = i0.ɵɵnextContext();
             var _r12 = i0.ɵɵreference(15);
-            i0.ɵɵattribute("aria-labelledby", ctx_r5.idBag.labelSpan + i_r21)("aria-describedby", ctx_r5.idBag.detailsSpan + i_r21);
+            i0.ɵɵadvance(1);
+            i0.ɵɵattribute("aria-labelledby", ctx_r23.idBag.labelSpan + i_r21)("aria-describedby", ctx_r23.idBag.detailsSpan + i_r21);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngTemplateOutlet", _r12)("ngTemplateOutletContext", i0.ɵɵpureFunction2(5, _c4$6, item_r20, i_r21));
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", !item_r20.link && !item_r20.action);
         }
     }
+    function PropertyGridComponent_ng_template_6_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵtemplate(0, PropertyGridComponent_ng_template_6_sme_loading_wheel_0_Template, 1, 2, "sme-loading-wheel", 21);
+            i0.ɵɵtemplate(1, PropertyGridComponent_ng_template_6_ng_container_1_Template, 4, 8, "ng-container", 22);
+        }
+        if (rf & 2) {
+            var item_r20 = ctx.$implicit;
+            i0.ɵɵproperty("ngIf", item_r20.loading && item_r20.isAsync);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", !item_r20.loading || !item_r20.isAsync);
+        }
+    }
     function PropertyGridComponent_ng_template_8_ng_container_1_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementContainer(0);
@@ -45413,23 +45609,23 @@
         if (rf & 1) {
             i0.ɵɵelementStart(0, "p");
             i0.ɵɵtemplate(1, PropertyGridComponent_ng_template_8_ng_container_1_Template, 1, 0, "ng-container", 19);
-            i0.ɵɵelementStart(2, "a", 23);
-            i0.ɵɵlistener("click", function PropertyGridComponent_ng_template_8_Template_a_click_2_listener() { var item_r25 = ctx.$implicit; return item_r25.action(item_r25); });
+            i0.ɵɵelementStart(2, "a", 25);
+            i0.ɵɵlistener("click", function PropertyGridComponent_ng_template_8_Template_a_click_2_listener() { var item_r28 = ctx.$implicit; return item_r28.action(item_r28); });
             i0.ɵɵtext(3);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var item_r25 = ctx.$implicit;
-            var i_r26 = ctx.index;
+            var item_r28 = ctx.$implicit;
+            var i_r29 = ctx.index;
             var ctx_r7 = i0.ɵɵnextContext();
             var _r12 = i0.ɵɵreference(15);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngTemplateOutlet", _r12)("ngTemplateOutletContext", i0.ɵɵpureFunction2(5, _c4$6, item_r25, i_r26));
+            i0.ɵɵproperty("ngTemplateOutlet", _r12)("ngTemplateOutletContext", i0.ɵɵpureFunction2(5, _c4$6, item_r28, i_r29));
             i0.ɵɵadvance(1);
-            i0.ɵɵattribute("aria-labelledby", ctx_r7.idBag.labelSpan + i_r26 + " " + (ctx_r7.idBag.valueSpan + i_r26))("aria-describedby", ctx_r7.idBag.detailsSpan + i_r26);
+            i0.ɵɵattribute("aria-labelledby", ctx_r7.idBag.labelSpan + i_r29 + " " + (ctx_r7.idBag.valueSpan + i_r29))("aria-describedby", ctx_r7.idBag.detailsSpan + i_r29);
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate(item_r25.value);
+            i0.ɵɵtextInterpolate(item_r28.value);
         }
     }
     function PropertyGridComponent_ng_template_10_ng_container_1_Template(rf, ctx) {
@@ -45441,23 +45637,23 @@
         if (rf & 1) {
             i0.ɵɵelementStart(0, "p");
             i0.ɵɵtemplate(1, PropertyGridComponent_ng_template_10_ng_container_1_Template, 1, 0, "ng-container", 19);
-            i0.ɵɵelementStart(2, "a", 24);
+            i0.ɵɵelementStart(2, "a", 26);
             i0.ɵɵtext(3);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var item_r29 = ctx.$implicit;
-            var i_r30 = ctx.index;
+            var item_r32 = ctx.$implicit;
+            var i_r33 = ctx.index;
             var ctx_r9 = i0.ɵɵnextContext();
             var _r12 = i0.ɵɵreference(15);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngTemplateOutlet", _r12)("ngTemplateOutletContext", i0.ɵɵpureFunction2(6, _c4$6, item_r29, i_r30));
+            i0.ɵɵproperty("ngTemplateOutlet", _r12)("ngTemplateOutletContext", i0.ɵɵpureFunction2(6, _c4$6, item_r32, i_r33));
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("routerLink", item_r29.link);
-            i0.ɵɵattribute("aria-labelledby", ctx_r9.idBag.labelSpan + i_r30 + " " + (ctx_r9.idBag.valueSpan + i_r30))("aria-describedby", ctx_r9.idBag.detailsSpan + i_r30);
+            i0.ɵɵproperty("routerLink", item_r32.link);
+            i0.ɵɵattribute("aria-labelledby", ctx_r9.idBag.labelSpan + i_r33 + " " + (ctx_r9.idBag.valueSpan + i_r33))("aria-describedby", ctx_r9.idBag.detailsSpan + i_r33);
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate(item_r29.value);
+            i0.ɵɵtextInterpolate(item_r32.value);
         }
     }
     function PropertyGridComponent_ng_template_12_ng_container_1_Template(rf, ctx) {
@@ -45469,26 +45665,26 @@
         if (rf & 1) {
             i0.ɵɵelementStart(0, "p");
             i0.ɵɵtemplate(1, PropertyGridComponent_ng_template_12_ng_container_1_Template, 1, 0, "ng-container", 19);
-            i0.ɵɵelementStart(2, "a", 25);
+            i0.ɵɵelementStart(2, "a", 27);
             i0.ɵɵelementStart(3, "span");
             i0.ɵɵtext(4);
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(5, "span", 26);
+            i0.ɵɵelement(5, "span", 28);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var item_r32 = ctx.$implicit;
-            var i_r33 = ctx.index;
+            var item_r35 = ctx.$implicit;
+            var i_r36 = ctx.index;
             var ctx_r11 = i0.ɵɵnextContext();
             var _r12 = i0.ɵɵreference(15);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngTemplateOutlet", _r12)("ngTemplateOutletContext", i0.ɵɵpureFunction2(6, _c4$6, item_r32, i_r33));
+            i0.ɵɵproperty("ngTemplateOutlet", _r12)("ngTemplateOutletContext", i0.ɵɵpureFunction2(6, _c4$6, item_r35, i_r36));
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("href", item_r32.link, i0.ɵɵsanitizeUrl);
-            i0.ɵɵattribute("aria-labelledby", ctx_r11.idBag.labelSpan + i_r33 + " " + (ctx_r11.idBag.valueSpan + i_r33))("aria-describedby", ctx_r11.idBag.detailsSpan + i_r33);
+            i0.ɵɵproperty("href", item_r35.link, i0.ɵɵsanitizeUrl);
+            i0.ɵɵattribute("aria-labelledby", ctx_r11.idBag.labelSpan + i_r36 + " " + (ctx_r11.idBag.valueSpan + i_r36))("aria-describedby", ctx_r11.idBag.detailsSpan + i_r36);
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(item_r32.value);
+            i0.ɵɵtextInterpolate(item_r35.value);
         }
     }
     function PropertyGridComponent_ng_template_14_span_0_Template(rf, ctx) {
@@ -45496,29 +45692,29 @@
             i0.ɵɵelement(0, "span");
         }
         if (rf & 2) {
-            var item_r35 = i0.ɵɵnextContext().$implicit;
-            i0.ɵɵclassMapInterpolate1("sme-margin-right-xs sme-icon ", item_r35.iconClass, "");
+            var item_r38 = i0.ɵɵnextContext().$implicit;
+            i0.ɵɵclassMapInterpolate1("sme-margin-right-xs sme-icon ", item_r38.iconClass, "");
         }
     }
     function PropertyGridComponent_ng_template_14_sme_status_icon_1_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelement(0, "sme-status-icon", 29);
+            i0.ɵɵelement(0, "sme-status-icon", 31);
         }
         if (rf & 2) {
-            var item_r35 = i0.ɵɵnextContext().$implicit;
-            i0.ɵɵproperty("status", item_r35.status);
+            var item_r38 = i0.ɵɵnextContext().$implicit;
+            i0.ɵɵproperty("status", item_r38.status);
         }
     }
     function PropertyGridComponent_ng_template_14_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵtemplate(0, PropertyGridComponent_ng_template_14_span_0_Template, 1, 3, "span", 27);
-            i0.ɵɵtemplate(1, PropertyGridComponent_ng_template_14_sme_status_icon_1_Template, 1, 1, "sme-status-icon", 28);
+            i0.ɵɵtemplate(0, PropertyGridComponent_ng_template_14_span_0_Template, 1, 3, "span", 29);
+            i0.ɵɵtemplate(1, PropertyGridComponent_ng_template_14_sme_status_icon_1_Template, 1, 1, "sme-status-icon", 30);
         }
         if (rf & 2) {
-            var item_r35 = ctx.$implicit;
-            i0.ɵɵproperty("ngIf", !!item_r35.iconClass);
+            var item_r38 = ctx.$implicit;
+            i0.ɵɵproperty("ngIf", !!item_r38.iconClass);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", item_r35.status !== null && !item_r35.iconClass);
+            i0.ɵɵproperty("ngIf", item_r38.status !== null && !item_r38.iconClass);
         }
     }
     /**
@@ -45564,7 +45760,7 @@
              */
             _this.layoutItemWidth = 300;
             /**
-             * The source name to use for logging
+             * The orientation for the property grid
              */
             _this.orientation = 'horizontal';
             /**
@@ -45676,7 +45872,7 @@
             }
         }, inputs: { orientation: "orientation" }, outputs: { layoutChanged: "layoutChanged" }, features: [i0.ɵɵProvidersFeature([
                 { provide: SME_LAYOUT_PROVIDER, useExisting: i0.forwardRef((function () { return PropertyGridComponent; })) }
-            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 16, vars: 6, consts: [[1, "sme-position-inset-none", "sme-position-stretch-h", 3, "padLastItem"], ["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"], ["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", 3, "title", "tooltipZone", 4, "ngIf"], [1, "sme-screen-reader"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["aria-hidden", "true", 1, "sme-position-flex-none", "sme-icon", "sme-icon-info", "sme-info-bubble", "sme-margin-left-xs", 3, "title", "tooltipZone"], [1, "read-only-template"], [4, "ngIf"], ["tabindex", "0", "role", "link", 1, "sme-link", "sme-focus-zone", "action-link-template", 3, "click"], ["role", "link", 1, "sme-link", "sme-focus-zone", 3, "routerLink"], ["role", "link", "target", "_blank", 1, "sme-link", "sme-focus-zone", 3, "href"], [1, "sme-icon", "sme-icon-openInNewWindow", "sme-margin-left-xs"], [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: 6, consts: [[1, "sme-position-inset-none", "sme-position-stretch-h", 3, "padLastItem"], ["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", "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", 3, "title", "tooltipZone", 4, "ngIf"], [1, "sme-screen-reader"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["aria-hidden", "true", 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, "read-only-template"], ["tabindex", "0", "role", "link", 1, "sme-link", "sme-focus-zone", "action-link-template", 3, "click"], ["role", "link", 1, "sme-link", "sme-focus-zone", 3, "routerLink"], ["role", "link", "target", "_blank", 1, "sme-link", "sme-focus-zone", 3, "href"], [1, "sme-icon", "sme-icon-openInNewWindow", "sme-margin-left-xs"], [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);
@@ -45684,7 +45880,7 @@
                 i0.ɵɵtemplate(4, PropertyGridComponent_sme_layout_definition_4_Template, 1, 1, "sme-layout-definition", 4);
                 i0.ɵɵtemplate(5, PropertyGridComponent_sme_layout_item_5_Template, 10, 10, "sme-layout-item", 5);
                 i0.ɵɵelementEnd();
-                i0.ɵɵtemplate(6, PropertyGridComponent_ng_template_6_Template, 3, 8, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
+                i0.ɵɵtemplate(6, PropertyGridComponent_ng_template_6_Template, 2, 2, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
                 i0.ɵɵtemplate(8, PropertyGridComponent_ng_template_8_Template, 4, 8, "ng-template", null, 7, i0.ɵɵtemplateRefExtractor);
                 i0.ɵɵtemplate(10, PropertyGridComponent_ng_template_10_Template, 4, 9, "ng-template", null, 8, i0.ɵɵtemplateRefExtractor);
                 i0.ɵɵtemplate(12, PropertyGridComponent_ng_template_12_Template, 6, 9, "ng-template", null, 9, i0.ɵɵtemplateRefExtractor);
@@ -45701,11 +45897,7 @@
                 i0.ɵɵadvance(1);
                 i0.ɵɵproperty("ngForOf", ctx.items);
             }
-        }, directives: [LayoutComponent, LayoutDefinitionComponent, i1$1.NgIf, i1$1.NgForOf, LayoutItemComponent, TooltipZoneDirective, i1$1.NgTemplateOutlet, TooltipDirective, i1.RouterLinkWithHref, StatusIconComponent], encapsulation: 2 });
-    __decorate([
-        SmeInject(i0.ChangeDetectorRef),
-        __metadata("design:type", i0.ChangeDetectorRef)
-    ], PropertyGridComponent.prototype, "changeDetector", void 0);
+        }, directives: [LayoutComponent, LayoutDefinitionComponent, i1$1.NgIf, i1$1.NgForOf, LayoutItemComponent, TooltipZoneDirective, i1$1.NgTemplateOutlet, TooltipDirective, LoadingWheelComponent, i1.RouterLinkWithHref, StatusIconComponent], encapsulation: 2 });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PropertyGridComponent, [{
                 type: i0.Component,
@@ -45744,7 +45936,7 @@
                     type: i0.Input
                 }], layoutChanged: [{
                     type: i0.Output
-                }], changeDetector: [] });
+                }] });
     })();
 
     var PropertyGridModule = /** @class */ (function () {
@@ -45758,6 +45950,7 @@
                 i1.RouterModule,
                 i1$1.CommonModule,
                 LayoutModule,
+                LoadingWheelModule,
                 IconModule,
                 TooltipModule
             ]] });
@@ -45766,6 +45959,7 @@
                 PropertyGridItemComponent], imports: [i1.RouterModule,
                 i1$1.CommonModule,
                 LayoutModule,
+                LoadingWheelModule,
                 IconModule,
                 TooltipModule], exports: [PropertyGridComponent,
                 PropertyGridItemComponent] });
@@ -45786,6 +45980,7 @@
                             i1.RouterModule,
                             i1$1.CommonModule,
                             LayoutModule,
+                            LoadingWheelModule,
                             IconModule,
                             TooltipModule
                         ]
@@ -50301,21 +50496,51 @@
             }], function () { return [{ type: i1.Router }]; }, null);
     })();
 
+    function SettingsComponent_div_1_span_3_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementStart(0, "span", 12);
+            i0.ɵɵtext(1);
+            i0.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            var ctx_r2 = i0.ɵɵnextContext(2);
+            i0.ɵɵadvance(1);
+            i0.ɵɵtextInterpolate(ctx_r2.headerSeparator);
+        }
+    }
+    function SettingsComponent_div_1_span_4_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementStart(0, "span", 13);
+            i0.ɵɵtext(1);
+            i0.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            var ctx_r3 = i0.ɵɵnextContext(2);
+            i0.ɵɵadvance(1);
+            i0.ɵɵtextInterpolate(ctx_r3.selectedSettingsTitle);
+        }
+    }
     function SettingsComponent_div_1_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 8);
             i0.ɵɵelementStart(1, "h2", 9);
             i0.ɵɵtext(2);
+            i0.ɵɵtemplate(3, SettingsComponent_div_1_span_3_Template, 2, 1, "span", 10);
+            i0.ɵɵtemplate(4, SettingsComponent_div_1_span_4_Template, 2, 1, "span", 11);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
             var ctx_r0 = i0.ɵɵnextContext();
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("title", ctx_r0.settingsTitle);
-            i0.ɵɵattribute("aria-label", ctx_r0.settingsTitle);
+            i0.ɵɵproperty("title", ctx_r0.fullSettingsTitle);
+            i0.ɵɵattribute("aria-label", ctx_r0.fullSettingsTitle);
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate(ctx_r0.settingsTitle);
+            i0.ɵɵtextInterpolate1("", ctx_r0.settingsTitle, " ");
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx_r0.selectedSettingsTitle);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx_r0.selectedSettingsTitle);
         }
     }
     var _c0$1u = [[["sme-settings-navigation"]], [["sme-settings-header"]], [["sme-settings-content"]], [["sme-settings-footer"]]];
@@ -50353,6 +50578,10 @@
             var _this = _super.call(this, injector) || this;
             _this.allForms = [];
             _this.autoFocus = true;
+            /**
+             * Separator used in sticky header on top of Settings page
+             */
+            _this.headerSeparator = '|';
             return _this;
         }
         Object.defineProperty(SettingsComponent.prototype, "logSourceName", {
@@ -50377,6 +50606,7 @@
                 // If we have a new form, it means the user navigated so we reset the autofocus
                 _this.autoFocus = true;
             }), this.settingsForms.formRemoved().subscribe(function (form) { MsftSme.remove(_this.allForms, form); }));
+            this.fullSettingsTitle = this.settingsTitle;
         };
         SettingsComponent.prototype.ngOnDestroy = function () {
             _super.prototype.ngOnDestroy.call(this);
@@ -50431,6 +50661,14 @@
                 return this.addPadding = this.layoutComponent.currentLayoutDefinition.name === 'narrow';
             }
         };
+        /**
+         * Update this.settingsTitle (header of the setting page) to newly selected setting item
+         */
+        SettingsComponent.prototype.updateSelectedSettingTitle = function (newSelectedSettingTitle) {
+            this.selectedSettingsTitle = newSelectedSettingTitle;
+            var fullSettingsTitlePostFix = this.selectedSettingsTitle ? this.headerSeparator + ' ' + this.selectedSettingsTitle : '';
+            this.fullSettingsTitle = this.settingsTitle + ' ' + fullSettingsTitlePostFix;
+        };
         return SettingsComponent;
     }(CoreBaseComponent));
     /** @nocollapse */ SettingsComponent.ɵfac = function SettingsComponent_Factory(t) { return new (t || SettingsComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
@@ -50442,11 +50680,11 @@
                 var _t = void 0;
                 i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.layoutComponent = _t.first);
             }
-        }, inputs: { backRoute: "backRoute", settingsTitle: "settingsTitle" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$O, decls: 12, vars: 8, consts: [[1, "sme-arrange-stack-v", "sme-layout-relative", "sme-arrange-overflow-auto-y", "sme-position-stretch"], ["class", " sme-layout-tool-header sme-position-flex-none sme-arrange-ellipsis", 4, "ngIf"], [1, "sme-position-flex-auto", "sme-arrange-overflow-auto", 3, "padLastItem", "layoutChanged"], ["layout", ""], ["name", "narrow", 3, "until", "columns"], ["name", "wide", 3, "columns"], [3, "columnSpan"], [3, "columnSpan", "ngClass"], [1, "sme-layout-tool-header", "sme-position-flex-none", "sme-arrange-ellipsis"], [1, "sme-font-h3", 3, "title"]], template: function SettingsComponent_Template(rf, ctx) {
+        }, inputs: { backRoute: "backRoute", settingsTitle: "settingsTitle", selectedSettingsTitle: "selectedSettingsTitle" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$O, decls: 12, vars: 10, consts: [[1, "sme-arrange-stack-v", "sme-layout-relative", "sme-arrange-overflow-auto-y", "sme-position-stretch"], ["class", "sme-layout-tool-header sme-position-flex-none sme-arrange-ellipsis sme-padding-bottom-none sme-padding-left-md", 4, "ngIf"], [1, "sme-position-flex-auto", "sme-arrange-overflow-auto", 3, "padLastItem", "layoutChanged"], ["layout", ""], ["name", "narrow", 3, "until", "columns"], ["name", "wide", 3, "columns", "addBottomPadding"], [3, "columnSpan", "ngClass"], [1, "sme-padding-top-xs", 3, "columnSpan", "ngClass"], [1, "sme-layout-tool-header", "sme-position-flex-none", "sme-arrange-ellipsis", "sme-padding-bottom-none", "sme-padding-left-md"], [1, "sme-font-h3", 3, "title"], ["class", "sme-padding-horizontal-sm sme-font-family-normal", 4, "ngIf"], ["class", "sme-font-family-normal", 4, "ngIf"], [1, "sme-padding-horizontal-sm", "sme-font-family-normal"], [1, "sme-font-family-normal"]], template: function SettingsComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵprojectionDef(_c0$1u);
                 i0.ɵɵelementStart(0, "div", 0);
-                i0.ɵɵtemplate(1, SettingsComponent_div_1_Template, 3, 3, "div", 1);
+                i0.ɵɵtemplate(1, SettingsComponent_div_1_Template, 5, 5, "div", 1);
                 i0.ɵɵelementStart(2, "sme-layout", 2, 3);
                 i0.ɵɵlistener("layoutChanged", function SettingsComponent_Template_sme_layout_layoutChanged_2_listener() { return ctx.isPaddingRequired(); });
                 i0.ɵɵelement(4, "sme-layout-definition", 4);
@@ -50463,6 +50701,7 @@
                 i0.ɵɵelementEnd();
             }
             if (rf & 2) {
+                var _r1 = i0.ɵɵreference(3);
                 i0.ɵɵadvance(1);
                 i0.ɵɵproperty("ngIf", ctx.settingsTitle);
                 i0.ɵɵadvance(1);
@@ -50470,9 +50709,9 @@
                 i0.ɵɵadvance(2);
                 i0.ɵɵproperty("until", 800)("columns", 1);
                 i0.ɵɵadvance(1);
-                i0.ɵɵproperty("columns", 5);
+                i0.ɵɵproperty("columns", 5)("addBottomPadding", false);
                 i0.ɵɵadvance(1);
-                i0.ɵɵproperty("columnSpan", 1);
+                i0.ɵɵproperty("columnSpan", 1)("ngClass", _r1.currentLayoutDefinitionName === "narrow" ? "" : "sme-position-stretch-v");
                 i0.ɵɵadvance(2);
                 i0.ɵɵproperty("columnSpan", 4)("ngClass", ctx.addPadding ? "sme-position-stretch sme-padding-left-xl" : "sme-position-stretch");
             }
@@ -50496,6 +50735,8 @@
                     type: i0.Input
                 }], settingsTitle: [{
                     type: i0.Input
+                }], selectedSettingsTitle: [{
+                    type: i0.Input
                 }], layoutComponent: [{
                     type: i0.ViewChild,
                     args: [LayoutComponent]
@@ -50532,10 +50773,11 @@
             }], function () { return [{ type: RpcService }]; }, null);
     })();
 
+    var _c0$1v = ["searchTextBox"];
     function CommonSettingsComponent_header_2_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "header", 7);
-            i0.ɵɵelementStart(1, "h2", 8);
+            i0.ɵɵelementStart(0, "header", 12);
+            i0.ɵɵelementStart(1, "h2", 13);
             i0.ɵɵtext(2);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
@@ -50548,114 +50790,114 @@
             i0.ɵɵtextInterpolate(ctx_r0.settingsTitle);
         }
     }
-    function CommonSettingsComponent_li_6_h3_1_Template(rf, ctx) {
+    function CommonSettingsComponent_li_10_h4_1_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "h3", 12);
+            i0.ɵɵelementStart(0, "h4", 17);
             i0.ɵɵtext(1);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var ctx_r8 = i0.ɵɵnextContext();
-            var j_r5 = ctx_r8.index;
-            var group_r4 = ctx_r8.$implicit;
-            var ctx_r6 = i0.ɵɵnextContext();
-            i0.ɵɵproperty("id", ctx_r6.idBag.group + "-" + j_r5)("title", group_r4.group);
+            var ctx_r9 = i0.ɵɵnextContext();
+            var j_r6 = ctx_r9.index;
+            var group_r5 = ctx_r9.$implicit;
+            var ctx_r7 = i0.ɵɵnextContext();
+            i0.ɵɵproperty("id", ctx_r7.idBag.group + "-" + j_r6)("title", group_r5.group);
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate(group_r4.group);
+            i0.ɵɵtextInterpolate(group_r5.group);
         }
     }
-    function CommonSettingsComponent_li_6_a_2_Template(rf, ctx) {
+    function CommonSettingsComponent_li_10_a_2_Template(rf, ctx) {
         if (rf & 1) {
-            var _r12_1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "a", 13);
-            i0.ɵɵlistener("smeRouterLinkActivated", function CommonSettingsComponent_li_6_a_2_Template_a_smeRouterLinkActivated_0_listener() { i0.ɵɵrestoreView(_r12_1); var setting_r9 = ctx.$implicit; var ctx_r11 = i0.ɵɵnextContext(2); return ctx_r11.selectedSetting = setting_r9; });
-            i0.ɵɵelement(1, "div", 14);
-            i0.ɵɵelementStart(2, "div", 15);
-            i0.ɵɵelementStart(3, "span", 16);
+            var _r13_1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "a", 18);
+            i0.ɵɵlistener("smeRouterLinkActivated", function CommonSettingsComponent_li_10_a_2_Template_a_smeRouterLinkActivated_0_listener() { i0.ɵɵrestoreView(_r13_1); var setting_r10 = ctx.$implicit; var ctx_r12 = i0.ɵɵnextContext(2); return ctx_r12.onSmeRouterLinkActivated(setting_r10); });
+            i0.ɵɵelement(1, "div", 19);
+            i0.ɵɵelementStart(2, "div", 20);
+            i0.ɵɵelementStart(3, "span", 21);
             i0.ɵɵtext(4);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var setting_r9 = ctx.$implicit;
-            var i_r10 = ctx.index;
-            var j_r5 = i0.ɵɵnextContext().index;
-            var ctx_r7 = i0.ɵɵnextContext();
-            i0.ɵɵattributeInterpolate5("aria-labelledby", "", ctx_r7.idBag.option, "-", j_r5, "-", i_r10, " ", ctx_r7.idBag.group, "-", j_r5, "");
-            i0.ɵɵproperty("routerLink", setting_r9.routeParams.commands)("preserveFragment", setting_r9.routeParams.extras && setting_r9.routeParams.extras.preserveFragment)("skipLocationChange", setting_r9.routeParams.extras && setting_r9.routeParams.extras.skipLocationChange)("replaceUrl", setting_r9.routeParams.extras && setting_r9.routeParams.extras.replaceUrl)("queryParams", setting_r9.routeParams.extras && setting_r9.routeParams.extras.queryParams)("title", setting_r9.label);
-            i0.ɵɵattribute("aria-selected", ctx_r7.selectedSetting === setting_r9);
+            var setting_r10 = ctx.$implicit;
+            var i_r11 = ctx.index;
+            var j_r6 = i0.ɵɵnextContext().index;
+            var ctx_r8 = i0.ɵɵnextContext();
+            i0.ɵɵattributeInterpolate5("aria-labelledby", "", ctx_r8.idBag.option, "-", j_r6, "-", i_r11, " ", ctx_r8.idBag.group, "-", j_r6, "");
+            i0.ɵɵproperty("routerLink", setting_r10.routeParams.commands)("preserveFragment", setting_r10.routeParams.extras && setting_r10.routeParams.extras.preserveFragment)("skipLocationChange", setting_r10.routeParams.extras && setting_r10.routeParams.extras.skipLocationChange)("replaceUrl", setting_r10.routeParams.extras && setting_r10.routeParams.extras.replaceUrl)("queryParams", setting_r10.routeParams.extras && setting_r10.routeParams.extras.queryParams)("title", setting_r10.label);
+            i0.ɵɵattribute("aria-selected", ctx_r8.selectedSetting === setting_r10);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", ctx_r7.getSmeIconClass(setting_r9));
+            i0.ɵɵproperty("ngClass", ctx_r8.getSmeIconClass(setting_r10));
             i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("sme-dirty", !!(setting_r9.form && setting_r9.form.dirty))("sme-pristine", !(setting_r9.form && setting_r9.form.dirty));
-            i0.ɵɵproperty("id", ctx_r7.idBag.option + "-" + j_r5 + "-" + i_r10);
+            i0.ɵɵclassProp("sme-dirty", !!(setting_r10.form && setting_r10.form.dirty))("sme-pristine", !(setting_r10.form && setting_r10.form.dirty));
+            i0.ɵɵproperty("id", ctx_r8.idBag.option + "-" + j_r6 + "-" + i_r11);
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate(setting_r9.label);
+            i0.ɵɵtextInterpolate(setting_r10.label);
         }
     }
-    function CommonSettingsComponent_li_6_Template(rf, ctx) {
+    function CommonSettingsComponent_li_10_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "li", 9);
-            i0.ɵɵtemplate(1, CommonSettingsComponent_li_6_h3_1_Template, 2, 3, "h3", 10);
-            i0.ɵɵtemplate(2, CommonSettingsComponent_li_6_a_2_Template, 5, 19, "a", 11);
+            i0.ɵɵelementStart(0, "li", 14);
+            i0.ɵɵtemplate(1, CommonSettingsComponent_li_10_h4_1_Template, 2, 3, "h4", 15);
+            i0.ɵɵtemplate(2, CommonSettingsComponent_li_10_a_2_Template, 5, 19, "a", 16);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var group_r4 = ctx.$implicit;
-            var ctx_r1 = i0.ɵɵnextContext();
+            var group_r5 = ctx.$implicit;
+            var ctx_r2 = i0.ɵɵnextContext();
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", group_r4.group !== ctx_r1.defaultGroup);
+            i0.ɵɵproperty("ngIf", group_r5.group !== ctx_r2.defaultGroup);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngForOf", group_r4.options);
+            i0.ɵɵproperty("ngForOf", group_r5.options);
         }
     }
-    function CommonSettingsComponent_div_7_div_1_Template(rf, ctx) {
+    function CommonSettingsComponent_div_11_div_1_Template(rf, ctx) {
         if (rf & 1) {
-            var _r17_1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 18);
-            i0.ɵɵlistener("click", function CommonSettingsComponent_div_7_div_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r17_1); var layer_r15 = ctx.$implicit; var ctx_r16 = i0.ɵɵnextContext(2); return ctx_r16.onOverlayClick(layer_r15); });
+            var _r18_1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 23);
+            i0.ɵɵlistener("click", function CommonSettingsComponent_div_11_div_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r18_1); var layer_r16 = ctx.$implicit; var ctx_r17 = i0.ɵɵnextContext(2); return ctx_r17.onOverlayClick(layer_r16); });
             i0.ɵɵelementEnd();
         }
     }
-    function CommonSettingsComponent_div_7_Template(rf, ctx) {
+    function CommonSettingsComponent_div_11_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div");
-            i0.ɵɵtemplate(1, CommonSettingsComponent_div_7_div_1_Template, 1, 0, "div", 17);
+            i0.ɵɵtemplate(1, CommonSettingsComponent_div_11_div_1_Template, 1, 0, "div", 22);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var ctx_r2 = i0.ɵɵnextContext();
+            var ctx_r3 = i0.ɵɵnextContext();
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngForOf", ctx_r2.layers);
+            i0.ɵɵproperty("ngForOf", ctx_r3.layers);
         }
     }
-    function CommonSettingsComponent_sme_settings_header_8_h3_1_Template(rf, ctx) {
+    function CommonSettingsComponent_sme_settings_header_12_h3_1_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "h3", 20);
+            i0.ɵɵelementStart(0, "h3", 25);
             i0.ɵɵtext(1);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var ctx_r18 = i0.ɵɵnextContext(2);
-            i0.ɵɵattribute("aria-label", ctx_r18.selectedSetting.label);
+            var ctx_r19 = i0.ɵɵnextContext(2);
+            i0.ɵɵattribute("aria-label", ctx_r19.selectedSetting.label);
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate1(" ", ctx_r18.selectedSetting.label, "");
+            i0.ɵɵtextInterpolate1(" ", ctx_r19.selectedSetting.label, "");
         }
     }
-    function CommonSettingsComponent_sme_settings_header_8_Template(rf, ctx) {
+    function CommonSettingsComponent_sme_settings_header_12_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "sme-settings-header");
-            i0.ɵɵtemplate(1, CommonSettingsComponent_sme_settings_header_8_h3_1_Template, 2, 2, "h3", 19);
+            i0.ɵɵtemplate(1, CommonSettingsComponent_sme_settings_header_12_h3_1_Template, 2, 2, "h3", 24);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var ctx_r3 = i0.ɵɵnextContext();
+            var ctx_r4 = i0.ɵɵnextContext();
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", !!ctx_r3.selectedSetting);
+            i0.ɵɵproperty("ngIf", !!ctx_r4.selectedSetting);
         }
     }
-    var _c0$1v = ["*"];
+    var _c1$P = ["*"];
     /**
      * Container around settings component, handles common settings behavior.
      */
@@ -50670,11 +50912,24 @@
             _this.rpcShellService = rpcShellService;
             _this.defaultGroup = 'default';
             _this.layers = [];
+            /**
+             * Search box related variables
+             */
+            _this.filter = '';
+            _this.filteredSettings = [];
             _this.showHeader = true;
             _this.hackShowOverlay = false;
             _this.hackToolHeader = false;
+            /**
+             * Controls whether the tab list showing the Settings items is scrollable or not
+             * Default to true. Allowing separate scroll bar for the navbar and the selected Settings.
+             * Set to false for backward compatibility and use previous behavior where there is
+             * only 1 single scroll bar for both navbar and content of the selected Settings item.
+             */
+            _this.scrollableSecondaryNav = true;
             _this.autofocus = true;
             _this.combinedForm = new i4.FormGroup({});
+            _this.searchTitle = _this.strings.MsftSmeShell.Angular.searchPlaceHolder;
             return _this;
         }
         Object.defineProperty(CommonSettingsComponent.prototype, "logSourceName", {
@@ -50741,11 +50996,20 @@
                     this.autofocus = false;
                 }
             }
+            // Setting Title header is managed by child component this.settingsComponent,
+            // after current view and child view has been rendered, pass along the selectedSetting
+            // string if it exists so child view will render the title
+            if (this.selectedSetting) {
+                this.onSmeRouterLinkActivated(this.selectedSetting);
+            }
         };
         CommonSettingsComponent.prototype.createMenu = function () {
+            // Before creating the Settings menu, filter the Settings menu to only display
+            // items that matches the filter
+            this.filteredSettings = this.filterSetting();
             var groupTools = [];
             groupTools['default'] = { group: 'default', options: [] };
-            this.settings.forEach(function (setting) {
+            this.filteredSettings.forEach(function (setting) {
                 if (!!!setting.group) {
                     groupTools['default'].options.push(setting);
                 }
@@ -50900,38 +51164,87 @@
             }
             return formControl.value;
         };
+        /**
+         * Update this.selectedSetting to the newly selected Settings item when user navigate to a new Settings item
+         * Also call the child component this.settingsComponent to update the settingsTitle to reflect the title
+         * of the newly selected Settings item
+         *
+         * @param newSetting The newly selected Settings item
+         */
+        CommonSettingsComponent.prototype.onSmeRouterLinkActivated = function (newSetting) {
+            this.selectedSetting = newSetting;
+            if (this.settingsComponent) {
+                this.settingsComponent.updateSelectedSettingTitle(newSetting.label);
+            }
+        };
+        /**
+        * Callback function for the search field
+        */
+        CommonSettingsComponent.prototype.onSearch = function () {
+            var _this = this;
+            this.searchTextBox.searching = true;
+            setTimeout(function () {
+                _this.createMenu();
+                _this.searchTextBox.searching = false;
+            });
+        };
+        /**
+        * Filter out the settings Item based on this.filter string and match the title of Settings Items
+        */
+        CommonSettingsComponent.prototype.filterSetting = function () {
+            var settings = this.settings;
+            if (!this.filter) {
+                return settings;
+            }
+            var localFilter = this.filter.toLocaleLowerCase();
+            return settings.filter(function (setting) {
+                if (setting.label.toLocaleLowerCase().indexOf(localFilter) > -1) {
+                    return true;
+                }
+                return false;
+            });
+        };
         return CommonSettingsComponent;
     }(CoreBaseComponent));
     /** @nocollapse */ CommonSettingsComponent.ɵfac = function CommonSettingsComponent_Factory(t) { return new (t || CommonSettingsComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(SettingsFormService), i0.ɵɵdirectiveInject(i0.IterableDiffers), i0.ɵɵdirectiveInject(AppContextService), i0.ɵɵdirectiveInject(RpcShellService)); };
     /** @nocollapse */ CommonSettingsComponent.ɵcmp = i0.ɵɵdefineComponent({ type: CommonSettingsComponent, selectors: [["sme-common-settings"]], viewQuery: function CommonSettingsComponent_Query(rf, ctx) {
             if (rf & 1) {
+                i0.ɵɵviewQuery(_c0$1v, 1);
                 i0.ɵɵviewQuery(SettingsComponent, 1);
             }
             if (rf & 2) {
                 var _t = void 0;
+                i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchTextBox = _t.first);
                 i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.settingsComponent = _t.first);
             }
-        }, inputs: { settingsTitle: "settingsTitle", settings: "settings", showHeader: "showHeader", hackShowOverlay: "hackShowOverlay", hackToolHeader: "hackToolHeader", backRoute: "backRoute" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0$1v, decls: 13, vars: 6, consts: [[3, "settingsTitle"], ["class", "sme-layout-tool-header", 4, "ngIf"], ["role", "region"], ["role", "tablist", 1, "sme-padding-horizontal-lg", "sme-arrange-stack-v", "sme-focus-zone"], ["role", "presentation", 1, "sme-position-flex-auto", "sme-arrange-stack-v", "sme-arrange-overflow-hide-x", "sme-arrange-overflow-auto-y"], ["class", "sme-margin-inset-none", "role", "presentation", 4, "ngFor", "ngForOf"], [4, "ngIf"], [1, "sme-layout-tool-header"], [1, "sme-position-flex-none", "sme-font-h3"], ["role", "presentation", 1, "sme-margin-inset-none"], ["class", "sme-margin-top-xs sme-font-h5", 3, "id", "title", 4, "ngIf"], ["class", "sme-padding-squish-v-sm sme-arrange-stack-h sme-scheme-nav-item", "role", "tab", "href", "setting.routeParams.extras && setting.routeParams.extras.replaceUrl", "routerLinkActive", "sme-active", 3, "routerLink", "preserveFragment", "skipLocationChange", "replaceUrl", "queryParams", "title", "smeRouterLinkActivated", 4, "ngFor", "ngForOf"], [1, "sme-margin-top-xs", "sme-font-h5", 3, "id", "title"], ["role", "tab", "href", "setting.routeParams.extras && setting.routeParams.extras.replaceUrl", "routerLinkActive", "sme-active", 1, "sme-padding-squish-v-sm", "sme-arrange-stack-h", "sme-scheme-nav-item", 3, "routerLink", "preserveFragment", "skipLocationChange", "replaceUrl", "queryParams", "title", "smeRouterLinkActivated"], [1, "sme-icon", "sme-margin-right-xs", 3, "ngClass"], [1, "sme-position-flex-auto"], [3, "id"], ["class", "sme-layout-absolute sme-position-inset-none sme-layer-above sme-scheme-backdrop-opaque", 3, "click", 4, "ngFor", "ngForOf"], [1, "sme-layout-absolute", "sme-position-inset-none", "sme-layer-above", "sme-scheme-backdrop-opaque", 3, "click"], ["id", "sme-shell-setting-selectedTitle", 4, "ngIf"], ["id", "sme-shell-setting-selectedTitle"]], template: function CommonSettingsComponent_Template(rf, ctx) {
+        }, inputs: { settingsTitle: "settingsTitle", settings: "settings", showHeader: "showHeader", hackShowOverlay: "hackShowOverlay", hackToolHeader: "hackToolHeader", backRoute: "backRoute", scrollableSecondaryNav: "scrollableSecondaryNav" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c1$P, decls: 17, vars: 11, consts: [[3, "settingsTitle"], [1, "sme-position-stretch"], ["class", "sme-layout-tool-header", 4, "ngIf"], ["role", "region", 1, "sme-position-stretch", "sme-arrange-stack-v"], [1, "sme-position-flex-none", "sme-focus-zone"], [1, "sme-margin-squish-v-sm"], ["type", "search", "name", "toolsListSearch", 3, "ngModel", "placeholder", "autofocus", "count", "ngModelChange", "search"], ["searchTextBox", ""], ["role", "tablist", 1, "sme-arrange-stack-v", "sme-focus-zone", 3, "ngClass"], ["role", "presentation", 1, "sme-position-flex-auto", "sme-arrange-stack-v", "sme-arrange-overflow-hide-x", "sme-arrange-overflow-auto-y"], ["class", "sme-margin-inset-none", "role", "presentation", 4, "ngFor", "ngForOf"], [4, "ngIf"], [1, "sme-layout-tool-header"], [1, "sme-position-flex-none", "sme-font-h3"], ["role", "presentation", 1, "sme-margin-inset-none"], ["class", "sme-font-h4 sme-font-h4-settings", 3, "id", "title", 4, "ngIf"], ["class", "sme-padding-squish-v-sm sme-arrange-stack-h sme-scheme-nav-list-item", "role", "tab", "href", "setting.routeParams.extras && setting.routeParams.extras.replaceUrl", "routerLinkActive", "sme-active", 3, "routerLink", "preserveFragment", "skipLocationChange", "replaceUrl", "queryParams", "title", "smeRouterLinkActivated", 4, "ngFor", "ngForOf"], [1, "sme-font-h4", "sme-font-h4-settings", 3, "id", "title"], ["role", "tab", "href", "setting.routeParams.extras && setting.routeParams.extras.replaceUrl", "routerLinkActive", "sme-active", 1, "sme-padding-squish-v-sm", "sme-arrange-stack-h", "sme-scheme-nav-list-item", 3, "routerLink", "preserveFragment", "skipLocationChange", "replaceUrl", "queryParams", "title", "smeRouterLinkActivated"], [1, "sme-icon", "sme-margin-right-xs", 3, "ngClass"], [1, "sme-position-flex-auto"], [3, "id"], ["class", "sme-layout-absolute sme-position-inset-none sme-layer-above sme-scheme-backdrop-opaque", 3, "click", 4, "ngFor", "ngForOf"], [1, "sme-layout-absolute", "sme-position-inset-none", "sme-layer-above", "sme-scheme-backdrop-opaque", 3, "click"], ["id", "sme-shell-setting-selectedTitle", 4, "ngIf"], ["id", "sme-shell-setting-selectedTitle"]], template: function CommonSettingsComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵprojectionDef();
                 i0.ɵɵelementStart(0, "sme-settings", 0);
-                i0.ɵɵelementStart(1, "sme-settings-navigation");
-                i0.ɵɵtemplate(2, CommonSettingsComponent_header_2_Template, 3, 2, "header", 1);
-                i0.ɵɵelementStart(3, "div", 2);
-                i0.ɵɵelementStart(4, "nav", 3);
-                i0.ɵɵelementStart(5, "ul", 4);
-                i0.ɵɵtemplate(6, CommonSettingsComponent_li_6_Template, 3, 2, "li", 5);
+                i0.ɵɵelementStart(1, "sme-settings-navigation", 1);
+                i0.ɵɵtemplate(2, CommonSettingsComponent_header_2_Template, 3, 2, "header", 2);
+                i0.ɵɵelementStart(3, "div", 3);
+                i0.ɵɵelementStart(4, "div", 4);
+                i0.ɵɵelementStart(5, "form", 5);
+                i0.ɵɵelementStart(6, "sme-form-field", 6, 7);
+                i0.ɵɵlistener("ngModelChange", function CommonSettingsComponent_Template_sme_form_field_ngModelChange_6_listener($event) { return ctx.filter = $event; })("search", function CommonSettingsComponent_Template_sme_form_field_search_6_listener() { return ctx.onSearch(); });
+                i0.ɵɵelementEnd();
+                i0.ɵɵelementEnd();
+                i0.ɵɵelementEnd();
+                i0.ɵɵelementStart(8, "nav", 8);
+                i0.ɵɵelementStart(9, "ul", 9);
+                i0.ɵɵtemplate(10, CommonSettingsComponent_li_10_Template, 3, 2, "li", 10);
                 i0.ɵɵelementEnd();
                 i0.ɵɵelementEnd();
                 i0.ɵɵelementEnd();
-                i0.ɵɵtemplate(7, CommonSettingsComponent_div_7_Template, 2, 1, "div", 6);
+                i0.ɵɵtemplate(11, CommonSettingsComponent_div_11_Template, 2, 1, "div", 11);
                 i0.ɵɵelementEnd();
-                i0.ɵɵtemplate(8, CommonSettingsComponent_sme_settings_header_8_Template, 2, 1, "sme-settings-header", 6);
-                i0.ɵɵelementStart(9, "sme-settings-content");
-                i0.ɵɵelement(10, "router-outlet");
+                i0.ɵɵtemplate(12, CommonSettingsComponent_sme_settings_header_12_Template, 2, 1, "sme-settings-header", 11);
+                i0.ɵɵelementStart(13, "sme-settings-content");
+                i0.ɵɵelement(14, "router-outlet");
                 i0.ɵɵelementEnd();
-                i0.ɵɵelementStart(11, "sme-settings-footer");
-                i0.ɵɵprojection(12);
+                i0.ɵɵelementStart(15, "sme-settings-footer");
+                i0.ɵɵprojection(16);
                 i0.ɵɵelementEnd();
                 i0.ɵɵelementEnd();
             }
@@ -50942,6 +51255,10 @@
                 i0.ɵɵadvance(1);
                 i0.ɵɵattribute("aria-label", ctx.settingsTitle);
                 i0.ɵɵadvance(3);
+                i0.ɵɵproperty("ngModel", ctx.filter)("placeholder", ctx.searchTitle)("autofocus", true)("count", ctx.filteredSettings ? ctx.filteredSettings.length : 0);
+                i0.ɵɵadvance(2);
+                i0.ɵɵproperty("ngClass", ctx.scrollableSecondaryNav ? "sme-position-flex-auto sme-arrange-overflow-auto-y" : "");
+                i0.ɵɵadvance(2);
                 i0.ɵɵproperty("ngForOf", ctx.groupTools);
                 i0.ɵɵadvance(1);
                 i0.ɵɵproperty("ngIf", ctx.hackShowOverlay);
@@ -50956,7 +51273,10 @@
                         selector: 'sme-common-settings',
                         templateUrl: './common-settings.component.html'
                     }]
-            }], function () { return [{ type: i0.Injector }, { type: i1.Router }, { type: SettingsFormService }, { type: i0.IterableDiffers }, { type: AppContextService }, { type: RpcShellService }]; }, { settingsTitle: [{
+            }], function () { return [{ type: i0.Injector }, { type: i1.Router }, { type: SettingsFormService }, { type: i0.IterableDiffers }, { type: AppContextService }, { type: RpcShellService }]; }, { searchTextBox: [{
+                    type: i0.ViewChild,
+                    args: ['searchTextBox']
+                }], settingsTitle: [{
                     type: i0.Input
                 }], settings: [{
                     type: i0.Input
@@ -50968,6 +51288,8 @@
                     type: i0.Input
                 }], backRoute: [{
                     type: i0.Input
+                }], scrollableSecondaryNav: [{
+                    type: i0.Input
                 }], settingsComponent: [{
                     type: i0.ViewChild,
                     args: [SettingsComponent]
@@ -50975,7 +51297,7 @@
     })();
 
     var _c0$1w = [[["sme-settings-header"]], [["sme-settings-content"]], [["sme-settings-footer"]]];
-    var _c1$P = ["sme-settings-header", "sme-settings-content", "sme-settings-footer"];
+    var _c1$Q = ["sme-settings-header", "sme-settings-content", "sme-settings-footer"];
     var SettingsPageComponent = /** @class */ (function (_super) {
         __extends(SettingsPageComponent, _super);
         function SettingsPageComponent(injector) {
@@ -51002,7 +51324,7 @@
         return SettingsPageComponent;
     }(CoreBaseComponent));
     /** @nocollapse */ SettingsPageComponent.ɵfac = function SettingsPageComponent_Factory(t) { return new (t || SettingsPageComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
-    /** @nocollapse */ SettingsPageComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SettingsPageComponent, selectors: [["sme-settings-page"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$P, decls: 3, vars: 0, template: function SettingsPageComponent_Template(rf, ctx) {
+    /** @nocollapse */ SettingsPageComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SettingsPageComponent, selectors: [["sme-settings-page"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$Q, decls: 3, vars: 0, template: function SettingsPageComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵprojectionDef(_c0$1w);
                 i0.ɵɵprojection(0);
@@ -51292,7 +51614,9 @@
                 i1$1.CommonModule,
                 HeaderModule,
                 LayoutModule,
-                TooltipModule
+                TooltipModule,
+                i4.FormsModule,
+                SmeFormsModule
             ]] });
     (function () {
         (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(SettingsModule, { declarations: [SettingsComponent,
@@ -51307,7 +51631,9 @@
                 i1$1.CommonModule,
                 HeaderModule,
                 LayoutModule,
-                TooltipModule], exports: [SettingsComponent,
+                TooltipModule,
+                i4.FormsModule,
+                SmeFormsModule], exports: [SettingsComponent,
                 SettingsFormDirective,
                 SettingsFooterComponent,
                 SettingsHeaderComponent,
@@ -51326,7 +51652,9 @@
                             i1$1.CommonModule,
                             HeaderModule,
                             LayoutModule,
-                            TooltipModule
+                            TooltipModule,
+                            i4.FormsModule,
+                            SmeFormsModule
                         ],
                         exports: [
                             SettingsComponent,
@@ -51356,7 +51684,7 @@
             }], null, null);
     })();
     i0.ɵɵsetComponentScope(CommonSettingsComponent, [SettingsComponent,
-        SettingsNavigationComponent, i1$1.NgIf, i1$1.NgForOf, TooltipDirective, i1.RouterLinkWithHref, i1.RouterLinkActive, SmeRouterLinkDirective, i1$1.NgClass, SettingsHeaderComponent,
+        SettingsNavigationComponent, i1$1.NgIf, i4.ɵangular_packages_forms_forms_ba, i4.NgControlStatusGroup, i4.NgForm, FormFieldAccessorDirective, FormFieldValidatorDirective, SearchFormFieldComponent, i4.NgControlStatus, i4.NgModel, i1$1.NgClass, i1$1.NgForOf, TooltipDirective, i1.RouterLinkWithHref, i1.RouterLinkActive, SmeRouterLinkDirective, SettingsHeaderComponent,
         SettingsContentComponent, i1.RouterOutlet, SettingsFooterComponent], []);
 
     // tslint:disable-next-line: directive-class-suffix
@@ -52050,21 +52378,19 @@
             i0.ɵɵproperty("ngIf", ctx_r0.isInPreview);
         }
     }
-    var _c0$1E = function (a0, a1, a2, a3) { return { "sme-wizard-stage-completed": a0, "sme-wizard-stage-clicked": a1, "sme-wizard-stage-active": a2, "sme-disabled": a3 }; };
-    var _c1$Q = function (a0) { return { "sme-icon sme-icon-accept sme-icon-size-xxs": a0 }; };
+    var _c0$1E = function (a0, a1, a2) { return { "sme-wizard-stage-completed": a0, "sme-wizard-stage-clicked": a1, "sme-wizard-stage-active": a2 }; };
+    var _c1$R = function (a0) { return { "sme-icon sme-icon-accept sme-icon-size-xxs": a0 }; };
     var _c2$m = function (a0, a1, a2) { return { "sme-font-emphasis1 sme-wizard-stage-active": a0, "sme-wizard-stage-completed": a1, "sme-margin-left-xs": a2 }; };
-    function WizardComponent_ul_2_li_1_Template(rf, ctx) {
+    function WizardComponent_div_2_button_1_Template(rf, ctx) {
         if (rf & 1) {
             var _r11_1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "li", 16);
-            i0.ɵɵlistener("click", function WizardComponent_ul_2_li_1_Template_li_click_0_listener() { i0.ɵɵrestoreView(_r11_1); var val_r9 = ctx.index; var ctx_r10 = i0.ɵɵnextContext(2); return ctx_r10.onStageClick(val_r9); });
-            i0.ɵɵelementStart(1, "button", 17);
-            i0.ɵɵelementStart(2, "span", 18);
-            i0.ɵɵtext(3);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "span", 19);
-            i0.ɵɵtext(5);
+            i0.ɵɵelementStart(0, "button", 16);
+            i0.ɵɵlistener("click", function WizardComponent_div_2_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11_1); var val_r9 = ctx.index; var ctx_r10 = i0.ɵɵnextContext(2); return ctx_r10.onStageClick(val_r9); });
+            i0.ɵɵelementStart(1, "span", 17);
+            i0.ɵɵtext(2);
             i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(3, "span", 18);
+            i0.ɵɵtext(4);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
         }
@@ -52072,14 +52398,11 @@
             var stage_r8 = ctx.$implicit;
             var val_r9 = ctx.index;
             var ctx_r7 = i0.ɵɵnextContext(2);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction4(17, _c0$1E, stage_r8.completed, val_r9 === ctx_r7.stagesArrayIndex, stage_r8.active, val_r9 !== ctx_r7.stagesArrayIndex));
-            i0.ɵɵattribute("aria-selected", val_r9 === ctx_r7.stagesArrayIndex);
-            i0.ɵɵadvance(1);
-            i0.ɵɵclassProp("sme-active", val_r9 === ctx_r7.stagesArrayIndex)("sme-selected", val_r9 === ctx_r7.stagesArrayIndex)("sme-wizard-stage-focus", val_r9 === ctx_r7.stagesArrayIndex);
-            i0.ɵɵproperty("smeTelemetryDataBlob", ctx_r7.telemetryData)("smeTelemetryId", "wizardStage" + (val_r9 + 1))("disabled", ctx_r7.stageIndexDisabled(stage_r8, val_r9))("smeTelemetryDisableElement", ctx_r7.stageIndexDisabled(stage_r8, val_r9));
+            i0.ɵɵclassProp("sme-active", val_r9 === ctx_r7.stagesArrayIndex)("sme-selected", val_r9 === ctx_r7.stagesArrayIndex)("aria-selected", val_r9 === ctx_r7.stagesArrayIndex)("sme-wizard-stage-focus", val_r9 === ctx_r7.stagesArrayIndex);
+            i0.ɵɵproperty("smeTelemetryDataBlob", ctx_r7.telemetryData)("smeTelemetryId", "wizardStage" + (val_r9 + 1))("disabled", ctx_r7.stageIndexDisabled(stage_r8, val_r9))("smeTelemetryDisableElement", ctx_r7.stageIndexDisabled(stage_r8, val_r9))("ngClass", i0.ɵɵpureFunction3(18, _c0$1E, stage_r8.completed, val_r9 === ctx_r7.stagesArrayIndex, stage_r8.active));
             i0.ɵɵattribute("aria-label", stage_r8.name);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(22, _c1$Q, stage_r8.completed));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(22, _c1$R, stage_r8.completed));
             i0.ɵɵadvance(1);
             i0.ɵɵtextInterpolate1(" ", !stage_r8.completed ? val_r9 + 1 : "", " ");
             i0.ɵɵadvance(1);
@@ -52088,10 +52411,10 @@
             i0.ɵɵtextInterpolate1(" ", stage_r8.name, " ");
         }
     }
-    function WizardComponent_ul_2_Template(rf, ctx) {
+    function WizardComponent_div_2_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "ul", 14);
-            i0.ɵɵtemplate(1, WizardComponent_ul_2_li_1_Template, 6, 28, "li", 15);
+            i0.ɵɵelementStart(0, "div", 14);
+            i0.ɵɵtemplate(1, WizardComponent_div_2_button_1_Template, 5, 28, "button", 15);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
@@ -52100,9 +52423,9 @@
             i0.ɵɵproperty("ngForOf", ctx_r1.stages);
         }
     }
-    function WizardComponent_div_4_ul_1_li_1_span_4_Template(rf, ctx) {
+    function WizardComponent_div_4_div_1_button_1_span_3_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "span", 31);
+            i0.ɵɵelementStart(0, "span", 29);
             i0.ɵɵtext(1);
             i0.ɵɵelementEnd();
         }
@@ -52112,59 +52435,54 @@
             i0.ɵɵtextInterpolate(step_r14.name);
         }
     }
-    var _c3$c = function (a0) { return { "sme-scheme-nav-list-item sme-active sme-color-base-5": a0 }; };
-    var _c4$8 = function (a0) { return { "sme-step-active": a0 }; };
-    function WizardComponent_div_4_ul_1_li_1_Template(rf, ctx) {
+    var _c3$c = function (a0) { return { "sme-step-active sme-scheme-nav-list-item sme-active sme-color-base-5": a0 }; };
+    function WizardComponent_div_4_div_1_button_1_Template(rf, ctx) {
         if (rf & 1) {
             var _r19_1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "li", 27);
-            i0.ɵɵlistener("click", function WizardComponent_div_4_ul_1_li_1_Template_li_click_0_listener() { i0.ɵɵrestoreView(_r19_1); var index_r15 = ctx.index; var ctx_r18 = i0.ɵɵnextContext(3); return ctx_r18.onStepClick(index_r15); });
-            i0.ɵɵelementStart(1, "button", 28);
-            i0.ɵɵelementStart(2, "span", 29);
-            i0.ɵɵtext(3);
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(4, WizardComponent_div_4_ul_1_li_1_span_4_Template, 2, 1, "span", 30);
+            i0.ɵɵelementStart(0, "button", 26);
+            i0.ɵɵlistener("click", function WizardComponent_div_4_div_1_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r19_1); var index_r15 = ctx.index; var ctx_r18 = i0.ɵɵnextContext(3); return ctx_r18.onStepClick(index_r15); });
+            i0.ɵɵelementStart(1, "span", 27);
+            i0.ɵɵtext(2);
             i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(3, WizardComponent_div_4_div_1_button_1_span_3_Template, 2, 1, "span", 28);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
             var step_r14 = ctx.$implicit;
             var index_r15 = ctx.index;
             var ctx_r13 = i0.ɵɵnextContext(3);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c3$c, index_r15 === ctx_r13.stepIndex))("title", ctx_r13.isExpanded ? null : step_r14.name);
-            i0.ɵɵattribute("aria-selected", index_r15 === ctx_r13.stepIndex)("aria-label", ctx_r13.isExpanded ? null : step_r14.name);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _c4$8, index_r15 === ctx_r13.stepIndex))("disabled", ctx_r13.stepIndexDisabled(step_r14, index_r15))("smeTelemetryDisableElement", ctx_r13.stepIndexDisabled(step_r14, index_r15))("smeTelemetryDataBlob", ctx_r13.telemetryData)("smeTelemetryId", "wizardStep" + (index_r15 + 1));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c3$c, index_r15 === ctx_r13.stepIndex))("disabled", ctx_r13.stepIndexDisabled(step_r14, index_r15))("smeTelemetryDisableElement", ctx_r13.stepIndexDisabled(step_r14, index_r15))("smeTelemetryDataBlob", ctx_r13.telemetryData)("smeTelemetryId", "wizardStep" + (index_r15 + 1))("title", ctx_r13.isExpanded ? null : step_r14.name);
+            i0.ɵɵattribute("aria-label", ctx_r13.isExpanded ? null : step_r14.name);
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate2("", ctx_r13.stagesArrayIndex + 1, ".", index_r15 + 1, "");
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx_r13.isExpanded);
         }
     }
-    var _c5$4 = function (a0) { return { "sme-layout-minwidth-sm": a0 }; };
-    function WizardComponent_div_4_ul_1_Template(rf, ctx) {
+    var _c4$8 = function (a0) { return { "sme-layout-minwidth-sm": a0 }; };
+    function WizardComponent_div_4_div_1_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "ul", 25);
-            i0.ɵɵtemplate(1, WizardComponent_div_4_ul_1_li_1_Template, 5, 16, "li", 26);
+            i0.ɵɵelementStart(0, "div", 24);
+            i0.ɵɵtemplate(1, WizardComponent_div_4_div_1_button_1_Template, 4, 12, "button", 25);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
             var ctx_r12 = i0.ɵɵnextContext(2);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c5$4, ctx_r12.isExpanded));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c4$8, ctx_r12.isExpanded));
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngForOf", ctx_r12.getStepsForStage());
         }
     }
-    var _c6$3 = function (a0, a1) { return { "sme-icon-chevronLeft": a0, "sme-icon-chevronRight": a1 }; };
+    var _c5$4 = function (a0, a1) { return { "sme-icon-chevronLeft": a0, "sme-icon-chevronRight": a1 }; };
     function WizardComponent_div_4_Template(rf, ctx) {
         if (rf & 1) {
             var _r21_1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 20);
-            i0.ɵɵtemplate(1, WizardComponent_div_4_ul_1_Template, 2, 4, "ul", 21);
-            i0.ɵɵelementStart(2, "div", 22);
-            i0.ɵɵelementStart(3, "button", 23);
+            i0.ɵɵelementStart(0, "div", 19);
+            i0.ɵɵtemplate(1, WizardComponent_div_4_div_1_Template, 2, 4, "div", 20);
+            i0.ɵɵelementStart(2, "div", 21);
+            i0.ɵɵelementStart(3, "button", 22);
             i0.ɵɵlistener("click", function WizardComponent_div_4_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r21_1); var ctx_r20 = i0.ɵɵnextContext(); return ctx_r20.togglePane(); });
-            i0.ɵɵelement(4, "span", 24);
+            i0.ɵɵelement(4, "span", 23);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
@@ -52177,13 +52495,13 @@
             i0.ɵɵproperty("title", ctx_r2.isExpanded ? ctx_r2.strings.MsftSmeShell.Angular.Wizard.collapseStepsList : ctx_r2.strings.MsftSmeShell.Angular.Wizard.expandStepsList);
             i0.ɵɵattribute("aria-expanded", ctx_r2.isExpanded)("aria-label", ctx_r2.isExpanded ? ctx_r2.strings.MsftSmeShell.Angular.Wizard.collapseStepsList : ctx_r2.strings.MsftSmeShell.Angular.Wizard.expandStepsList);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(5, _c6$3, ctx_r2.isExpanded, !ctx_r2.isExpanded));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(5, _c5$4, ctx_r2.isExpanded, !ctx_r2.isExpanded));
         }
     }
     function WizardComponent_div_6_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div");
-            i0.ɵɵelement(1, "sme-page-alert-bar", 32);
+            i0.ɵɵelement(1, "sme-page-alert-bar", 30);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
@@ -52194,31 +52512,31 @@
     }
     function WizardComponent_div_9_div_6_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 40);
-            i0.ɵɵelement(1, "sme-loading-wheel", 41);
+            i0.ɵɵelementStart(0, "div", 38);
+            i0.ɵɵelement(1, "sme-loading-wheel", 39);
             i0.ɵɵelementEnd();
         }
     }
     function WizardComponent_div_9_Template(rf, ctx) {
         if (rf & 1) {
             var _r24_1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 33);
-            i0.ɵɵelementStart(1, "div", 34);
-            i0.ɵɵelementStart(2, "button", 35);
+            i0.ɵɵelementStart(0, "div", 31);
+            i0.ɵɵelementStart(1, "div", 32);
+            i0.ɵɵelementStart(2, "button", 33);
             i0.ɵɵlistener("click", function WizardComponent_div_9_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r24_1); var ctx_r23 = i0.ɵɵnextContext(); return ctx_r23.onBackClick(); });
             i0.ɵɵtext(3);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "button", 36);
+            i0.ɵɵelementStart(4, "button", 34);
             i0.ɵɵlistener("click", function WizardComponent_div_9_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r24_1); var ctx_r25 = i0.ɵɵnextContext(); return ctx_r25.onNextClick(); });
             i0.ɵɵtext(5);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(6, WizardComponent_div_9_div_6_Template, 2, 0, "div", 37);
+            i0.ɵɵtemplate(6, WizardComponent_div_9_div_6_Template, 2, 0, "div", 35);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(7, "button", 38);
+            i0.ɵɵelementStart(7, "button", 36);
             i0.ɵɵlistener("click", function WizardComponent_div_9_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r24_1); var ctx_r26 = i0.ɵɵnextContext(); return ctx_r26.onSkipClick(); });
             i0.ɵɵtext(8);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(9, "button", 39);
+            i0.ɵɵelementStart(9, "button", 37);
             i0.ɵɵlistener("click", function WizardComponent_div_9_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r24_1); var ctx_r27 = i0.ɵɵnextContext(); return ctx_r27.onExitClick(); });
             i0.ɵɵtext(10);
             i0.ɵɵelementEnd();
@@ -52250,7 +52568,7 @@
             i0.ɵɵtextInterpolate(ctx_r5.exitButtonText());
         }
     }
-    var _c7$2 = function (a0) { return { "sme-padding-inset-lg": a0 }; };
+    var _c6$3 = function (a0) { return { "sme-padding-inset-lg": a0 }; };
     /**
      * Whatever state the wizard is in
      */
@@ -52997,11 +53315,11 @@
         return WizardComponent;
     }(DynamicComponentBase));
     /** @nocollapse */ WizardComponent.ɵfac = function WizardComponent_Factory(t) { return new (t || WizardComponent)(i0.ɵɵdirectiveInject(AppContextService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver)); };
-    /** @nocollapse */ WizardComponent.ɵcmp = i0.ɵɵdefineComponent({ type: WizardComponent, selectors: [["sme-wizard"]], inputs: { model: "model", wizardBuilder: "wizardBuilder" }, outputs: { modelChange: "modelChange", exit: "exit", stepSubmitted: "stepSubmitted", stepChanged: "stepChanged", stepInvalidated: "stepInvalidated", finished: "finished" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 8, consts: [["smeTelemetryId", "sme-wizard", "smeTelemetryArea", "WizardComponent", 1, "sme-wizard", "sme-layout-absolute", "sme-arrange-stack-v", "sme-position-inset-none"], ["class", "sme-arrange-stack-h sme-position-flex-none sme-padding-vertical-sm sme-padding-horizontal-lg sme-border-bottom-sm sme-border-bottom-color-base-80", 4, "ngIf"], ["role", "tablist", "class", "sme-arrange-stack-h sme-position-flex-none sme-padding-horizontal-lg sme-border-bottom-sm sme-border-bottom-color-base-80 sme-focus-zone", 4, "ngIf"], [1, "sme-arrange-stack-h", "sme-arrange-overflow-auto", "sme-position-flex-auto"], ["class", "sme-arrange-stack-v sme-position-flex-none sme-focus-zone\n      sme-border-right-sm sme-border-right-color-base-80", 4, "ngIf"], [1, "sme-focus-zone", "sme-layout-relative", "sme-position-stretch", "sme-arrange-overflow-auto", 3, "ngClass"], [4, "ngIf"], ["id", "dynamic-content-container"], ["container", ""], ["class", "sme-layout-relative sme-position-flex-none sme-border-top-sm sme-border-top-color-base-80 sme-padding-vertical-sm sme-padding-horizontal-lg sme-focus-zone", 4, "ngIf"], [1, "sme-arrange-stack-h", "sme-position-flex-none", "sme-padding-vertical-sm", "sme-padding-horizontal-lg", "sme-border-bottom-sm", "sme-border-bottom-color-base-80"], ["id", "sme-shell-wizard-heading-id"], ["type", "preview", "class", "sme-margin-left-xs", 4, "ngIf"], ["type", "preview", 1, "sme-margin-left-xs"], ["role", "tablist", 1, "sme-arrange-stack-h", "sme-position-flex-none", "sme-padding-horizontal-lg", "sme-border-bottom-sm", "sme-border-bottom-color-base-80", "sme-focus-zone"], ["class", "sme-wizard-stage sme-arrange-stack-h sme-margin-right-md", "role", "tab", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], ["role", "tab", 1, "sme-wizard-stage", "sme-arrange-stack-h", "sme-margin-right-md", 3, "ngClass", "click"], ["tabindex", "0", "aria-live", "polite", "type", "button", 1, "sme-button-trigger", "sme-wizard-button-item", "sme-padding-vertical-sm", "sme-padding-horizontal-none", "sme-button-auto-width", 3, "smeTelemetryDataBlob", "smeTelemetryId", "disabled", "smeTelemetryDisableElement"], [1, "sme-wizard-stage-index", "sme-position-flex-none", 3, "ngClass"], [1, "sme-position-flex-auto", "sme-font-body", 3, "ngClass"], [1, "sme-arrange-stack-v", "sme-position-flex-none", "sme-focus-zone", "sme-border-right-sm", "sme-border-right-color-base-80"], ["role", "tablist", "class", "sme-padding-vertical-sm sme-position-flex-auto", 3, "ngClass", 4, "ngIf"], [1, "sme-position-flex-none", "sme-focus-zone"], [1, "split-view-toggle", "sme-button-trigger", "sme-button-auto-width", "sme-position-flex-none", "sme-layout-float-right", 3, "title", "click"], [1, "sme-icon", 3, "ngClass"], ["role", "tablist", 1, "sme-padding-vertical-sm", "sme-position-flex-auto", 3, "ngClass"], ["role", "tab", "tabindex", "0", "class", "sme-arrange-stack-h sme-padding-left-lg sme-padding-right-xs", "aria-live", "polite", 3, "ngClass", "title", "click", 4, "ngFor", "ngForOf"], ["role", "tab", "tabindex", "0", "aria-live", "polite", 1, "sme-arrange-stack-h", "sme-padding-left-lg", "sme-padding-right-xs", 3, "ngClass", "title", "click"], ["type", "button", 1, "sme-wizard-step", "sme-button-trigger", "sme-wizard-button-item", "sme-padding-horizontal-none", "sme-padding-vertical-xs", "sme-button-auto-width", 3, "ngClass", "disabled", "smeTelemetryDisableElement", "smeTelemetryDataBlob", "smeTelemetryId"], [1, "sme-position-flex-none", "sme-margin-right-xs"], ["class", "sme-position-flex-none", 4, "ngIf"], [1, "sme-position-flex-none"], [3, "alert"], [1, "sme-layout-relative", "sme-position-flex-none", "sme-border-top-sm", "sme-border-top-color-base-80", "sme-padding-vertical-sm", "sme-padding-horizontal-lg", "sme-focus-zone"], [1, "sme-layout-float-left"], ["type", "button", "smeTelemetryId", "wizardPrev", 1, "sme-focus-zone", 3, "smeTelemetryDataBlob", "disabled", "click"], ["type", "button", "smeTelemetryId", "wizardNext", 1, "sme-focus-zone", "sme-button-primary", 3, "smeTelemetryDataBlob", "disabled", "smeTelemetryDisableElement", "click"], ["class", "sme-layout-relative sme-layout-float-right sme-padding-left-xl sme-padding-top-md", 4, "ngIf"], ["type", "button", "smeTelemetryId", "wizardSkip", 1, "sme-focus-zone", 3, "smeTelemetryDataBlob", "click"], ["type", "button", "smeTelemetryId", "wizardExit", 1, "sme-focus-zone", "sme-layout-float-right", 3, "smeTelemetryDataBlob", "click"], [1, "sme-layout-relative", "sme-layout-float-right", "sme-padding-left-xl", "sme-padding-top-md"], ["size", "small"]], template: function WizardComponent_Template(rf, ctx) {
+    /** @nocollapse */ WizardComponent.ɵcmp = i0.ɵɵdefineComponent({ type: WizardComponent, selectors: [["sme-wizard"]], inputs: { model: "model", wizardBuilder: "wizardBuilder" }, outputs: { modelChange: "modelChange", exit: "exit", stepSubmitted: "stepSubmitted", stepChanged: "stepChanged", stepInvalidated: "stepInvalidated", finished: "finished" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 8, consts: [[1, "sme-wizard", "sme-layout-absolute", "sme-arrange-stack-v", "sme-position-inset-none"], ["class", "sme-arrange-stack-h sme-position-flex-none sme-padding-vertical-sm sme-padding-horizontal-lg sme-border-bottom-sm sme-border-bottom-color-base-80", 4, "ngIf"], ["role", "tablist", "class", "sme-arrange-stack-h sme-position-flex-none sme-padding-horizontal-lg sme-border-bottom-sm sme-border-bottom-color-base-80 sme-focus-zone", 4, "ngIf"], [1, "sme-arrange-stack-h", "sme-arrange-overflow-auto", "sme-position-flex-auto"], ["class", "sme-arrange-stack-v sme-position-flex-none sme-focus-zone\n      sme-border-right-sm sme-border-right-color-base-80", 4, "ngIf"], [1, "sme-focus-zone", "sme-layout-relative", "sme-position-stretch", "sme-arrange-overflow-auto", 3, "ngClass"], [4, "ngIf"], ["id", "dynamic-content-container"], ["container", ""], ["class", "sme-layout-relative sme-position-flex-none sme-border-top-sm sme-border-top-color-base-80 sme-padding-vertical-sm sme-padding-horizontal-lg sme-focus-zone", 4, "ngIf"], [1, "sme-arrange-stack-h", "sme-position-flex-none", "sme-padding-vertical-sm", "sme-padding-horizontal-lg", "sme-border-bottom-sm", "sme-border-bottom-color-base-80"], ["id", "sme-shell-wizard-heading-id"], ["type", "preview", "class", "sme-margin-left-xs", 4, "ngIf"], ["type", "preview", 1, "sme-margin-left-xs"], ["role", "tablist", 1, "sme-arrange-stack-h", "sme-position-flex-none", "sme-padding-horizontal-lg", "sme-border-bottom-sm", "sme-border-bottom-color-base-80", "sme-focus-zone"], ["role", "tab", "tabindex", "0", "aria-live", "polite", "type", "button", "class", "sme-wizard-stage sme-button-trigger sme-wizard-button-item sme-padding-vertical-sm sme-padding-horizontal-none sme-button-auto-width sme-margin-right-md", 3, "smeTelemetryDataBlob", "smeTelemetryId", "sme-active", "sme-selected", "aria-selected", "sme-wizard-stage-focus", "disabled", "smeTelemetryDisableElement", "ngClass", "click", 4, "ngFor", "ngForOf"], ["role", "tab", "tabindex", "0", "aria-live", "polite", "type", "button", 1, "sme-wizard-stage", "sme-button-trigger", "sme-wizard-button-item", "sme-padding-vertical-sm", "sme-padding-horizontal-none", "sme-button-auto-width", "sme-margin-right-md", 3, "smeTelemetryDataBlob", "smeTelemetryId", "disabled", "smeTelemetryDisableElement", "ngClass", "click"], [1, "sme-wizard-stage-index", "sme-position-flex-none", 3, "ngClass"], [1, "sme-position-flex-auto", "sme-font-body", 3, "ngClass"], [1, "sme-arrange-stack-v", "sme-position-flex-none", "sme-focus-zone", "sme-border-right-sm", "sme-border-right-color-base-80"], ["role", "tablist", "class", "sme-padding-vertical-sm sme-position-flex-auto", 3, "ngClass", 4, "ngIf"], [1, "sme-position-flex-none", "sme-focus-zone"], [1, "split-view-toggle", "sme-button-trigger", "sme-button-auto-width", "sme-position-flex-none", "sme-layout-float-right", 3, "title", "click"], [1, "sme-icon", 3, "ngClass"], ["role", "tablist", 1, "sme-padding-vertical-sm", "sme-position-flex-auto", 3, "ngClass"], ["role", "tab", "type", "button", "class", "sme-arrange-stack-h sme-wizard-step sme-button-trigger sme-wizard-button-item sme-padding-horizontal-none\n          sme-position-stretch-h sme-padding-vertical-xs sme-button-auto-width sme-padding-left-lg sme-padding-right-xs", "aria-live", "polite", 3, "ngClass", "disabled", "smeTelemetryDisableElement", "smeTelemetryDataBlob", "smeTelemetryId", "title", "click", 4, "ngFor", "ngForOf"], ["role", "tab", "type", "button", "aria-live", "polite", 1, "sme-arrange-stack-h", "sme-wizard-step", "sme-button-trigger", "sme-wizard-button-item", "sme-padding-horizontal-none", "sme-position-stretch-h", "sme-padding-vertical-xs", "sme-button-auto-width", "sme-padding-left-lg", "sme-padding-right-xs", 3, "ngClass", "disabled", "smeTelemetryDisableElement", "smeTelemetryDataBlob", "smeTelemetryId", "title", "click"], [1, "sme-position-flex-none", "sme-margin-right-xs"], ["class", "sme-position-flex-none", 4, "ngIf"], [1, "sme-position-flex-none"], [3, "alert"], [1, "sme-layout-relative", "sme-position-flex-none", "sme-border-top-sm", "sme-border-top-color-base-80", "sme-padding-vertical-sm", "sme-padding-horizontal-lg", "sme-focus-zone"], [1, "sme-layout-float-left"], ["type", "button", "smeTelemetryId", "wizardPrev", 1, "sme-focus-zone", 3, "smeTelemetryDataBlob", "disabled", "click"], ["type", "button", "smeTelemetryId", "wizardNext", 1, "sme-focus-zone", "sme-button-primary", 3, "smeTelemetryDataBlob", "disabled", "smeTelemetryDisableElement", "click"], ["class", "sme-layout-relative sme-layout-float-right sme-padding-left-xl sme-padding-top-md", 4, "ngIf"], ["type", "button", "smeTelemetryId", "wizardSkip", 1, "sme-focus-zone", 3, "smeTelemetryDataBlob", "click"], ["type", "button", "smeTelemetryId", "wizardExit", 1, "sme-focus-zone", "sme-layout-float-right", 3, "smeTelemetryDataBlob", "click"], [1, "sme-layout-relative", "sme-layout-float-right", "sme-padding-left-xl", "sme-padding-top-md"], ["size", "small"]], template: function WizardComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵelementStart(0, "div", 0);
                 i0.ɵɵtemplate(1, WizardComponent_div_1_Template, 4, 3, "div", 1);
-                i0.ɵɵtemplate(2, WizardComponent_ul_2_Template, 2, 1, "ul", 2);
+                i0.ɵɵtemplate(2, WizardComponent_div_2_Template, 2, 1, "div", 2);
                 i0.ɵɵelementStart(3, "div", 3);
                 i0.ɵɵtemplate(4, WizardComponent_div_4_Template, 5, 8, "div", 4);
                 i0.ɵɵelementStart(5, "div", 5);
@@ -53020,13 +53338,13 @@
                 i0.ɵɵadvance(2);
                 i0.ɵɵproperty("ngIf", !ctx.wizardIsFinished && !ctx.hideStepsListSidePane);
                 i0.ɵɵadvance(1);
-                i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c7$2, ctx.currentStepComponent.padContents));
+                i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c6$3, ctx.currentStepComponent.padContents));
                 i0.ɵɵadvance(1);
                 i0.ɵɵproperty("ngIf", ctx.currentStepComponent.disabled);
                 i0.ɵɵadvance(3);
                 i0.ɵɵproperty("ngIf", !ctx.wizardIsFinished);
             }
-        }, directives: [TelemetryDirective, i1$1.NgIf, i1$1.NgClass, PreviewBadgeComponent, i1$1.NgForOf, TooltipDirective, PageAlertBarComponent, LoadingWheelComponent], encapsulation: 2 });
+        }, directives: [i1$1.NgIf, i1$1.NgClass, PreviewBadgeComponent, i1$1.NgForOf, TelemetryDirective, TooltipDirective, PageAlertBarComponent, LoadingWheelComponent], encapsulation: 2 });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WizardComponent, [{
                 type: i0.Component,