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

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

@@ -912,6 +912,13 @@ class BaseComponent extends NgLifecycleBaseComponent {
     getInitialHostClasses() {
         return [];
     }
+    /**
+     * Shortcut to get an attribute on the host element
+     * @param name The name of the attribute
+     */
+    getAttribute(name) {
+        return this.hostElement.nativeElement.getAttribute(name);
+    }
     /**
      * Shortcut to set an attribute on the host element
      * @param name The name of the attribute
@@ -2613,7 +2620,9 @@ class AppContextService extends AppContext {
         this.azureManagerService.initialize();
         SmeWebTelemetry.init(this).subscribe(loaded => {
             Logging.logDebug('SmeWebTelemetry', loaded ? 'Loaded browser telemetry' : 'Failed to load browser telemetry');
+            PerformanceTracker.tryStartCalculatingTimeToInteractive();
         });
+        PerformanceTracker.initializeLighthouseMetricsTrackers();
     }
     /**
      * Destroy the app context resource from ngDestroy call in AppComponent.
@@ -6564,6 +6573,10 @@ class ActionBarComponent extends ActionContainerComponent {
                     else {
                         this.dropDown.onToggled.pipe(take(1)).subscribe(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;
                             }
                         });
@@ -6777,7 +6790,7 @@ class ActionBarComponent extends ActionContainerComponent {
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.dropDown = _t.first);
     } }, hostBindings: function ActionBarComponent_HostBindings(rf, ctx) { if (rf & 1) {
         ɵɵ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, ɵɵresolveWindow);
-    } }, outputs: { actionsUpdated: "actionsUpdated" }, features: [ɵɵ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) { if (rf & 1) {
+    } }, outputs: { actionsUpdated: "actionsUpdated" }, features: [ɵɵ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) {
         ɵɵprojectionDef();
         ɵɵelementStart(0, "div", 0, 1);
         ɵɵtemplate(2, ActionBarComponent_sme_dynamic_action_item_2_Template, 1, 3, "sme-dynamic-action-item", 2);
@@ -6801,6 +6814,7 @@ class ActionBarComponent extends ActionContainerComponent {
         ɵɵproperty("ngForOf", ctx.hiddenFilter(ctx.displayedActions));
         ɵɵadvance(1);
         ɵɵclassProp("sme-layout-hidden", !ctx.compact && ctx.trayActions.length === 0)("sme-layout-none", ctx.compact && ctx.trayActions.length === 0);
+        ɵɵproperty("title", ctx.moreActionsDisplay)("smeTooltipShow", !_r2.isOpen);
         ɵɵadvance(2);
         ɵɵclassProp("sme-toggled", _r2.isOpen);
         ɵɵattribute("aria-label", ctx.moreActionsDisplay)("aria-expanded", _r2.isOpen);
@@ -8394,10 +8408,15 @@ const ɵEditableLayoutItemComponent_BaseFactory = /*@__PURE__*/ ɵɵgetInherited
 class LayoutDefinitionComponent {
     constructor() {
         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;
     }
 }
 /** @nocollapse */ LayoutDefinitionComponent.ɵfac = function LayoutDefinitionComponent_Factory(t) { return new (t || LayoutDefinitionComponent)(); };
-/** @nocollapse */ LayoutDefinitionComponent.ɵcmp = ɵɵ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 = ɵɵ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) && ɵsetClassMetadata(LayoutDefinitionComponent, [{
         type: Component,
         args: [{
@@ -8410,6 +8429,8 @@ class LayoutDefinitionComponent {
             type: Input
         }], name: [{
             type: Input
+        }], addBottomPadding: [{
+            type: Input
         }] }); })();
 
 function LayoutItemComponent_div_0_Template(rf, ctx) { if (rf & 1) {
@@ -8584,7 +8605,16 @@ class LayoutComponent extends CoreBaseComponent {
                             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();
                 }
@@ -9843,7 +9873,14 @@ class FormFieldComponent extends BaseComponent {
      * The ID is based on the form field name that's set on the ngModel.
      */
     get dataUtaId() {
-        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
+        const formFieldNameAttribute = this.getAttribute('formcontrolname') || this.getAttribute('name');
+        // Then, if no HTML attribute is set, try to get the name from the ngModel
+        const formFieldName = formFieldNameAttribute || this.ngModel && this.ngModel.name && this.ngModel.name.toString();
+        // If none of these are set, then look for the utaId input
+        const 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;
     }
     /**
      * Placeholder for the combined disabled state
@@ -12424,8 +12461,8 @@ function ChecklistFormFieldComponent_div_1_div_1_Template(rf, ctx) { if (rf & 1)
     ɵɵtextInterpolate(ctx_r1.getCheckboxCount());
 } }
 function ChecklistFormFieldComponent_div_1_ng_container_2_fieldset_8_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "fieldset", 12);
-    ɵɵelement(1, "sme-option-template-loader", 13);
+    ɵɵelementStart(0, "fieldset", 13);
+    ɵɵelement(1, "sme-option-template-loader", 14);
     ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r9 = ɵɵnextContext();
@@ -12441,7 +12478,7 @@ function ChecklistFormFieldComponent_div_1_ng_container_2_Template(rf, ctx) { if
     ɵɵelementContainerStart(0);
     ɵɵelementStart(1, "div", 10);
     ɵɵelementStart(2, "label");
-    ɵɵelementStart(3, "input", 7);
+    ɵɵelementStart(3, "input", 11);
     ɵɵlistener("keydown", function ChecklistFormFieldComponent_div_1_ng_container_2_Template_input_keydown_3_listener($event) { ɵɵrestoreView(_r11); const i_r7 = ctx.index; const ctx_r10 = ɵɵnextContext(2); return ctx_r10.onCheckboxKeydown($event, i_r7); })("change", function ChecklistFormFieldComponent_div_1_ng_container_2_Template_input_change_3_listener() { ɵɵrestoreView(_r11); const option_r6 = ctx.$implicit; const ctx_r12 = ɵɵnextContext(2); return ctx_r12.toggleOption(option_r6, !option_r6.isSelected); });
     ɵɵelementEnd();
     ɵɵelementStart(4, "span", 8);
@@ -12452,7 +12489,7 @@ function ChecklistFormFieldComponent_div_1_ng_container_2_Template(rf, ctx) { if
     ɵɵtext(7);
     ɵɵelementEnd();
     ɵɵelementEnd();
-    ɵɵtemplate(8, ChecklistFormFieldComponent_div_1_ng_container_2_fieldset_8_Template, 2, 4, "fieldset", 11);
+    ɵɵtemplate(8, ChecklistFormFieldComponent_div_1_ng_container_2_fieldset_8_Template, 2, 4, "fieldset", 12);
     ɵɵelementContainerEnd();
 } if (rf & 2) {
     const option_r6 = ctx.$implicit;
@@ -12460,7 +12497,7 @@ function ChecklistFormFieldComponent_div_1_ng_container_2_Template(rf, ctx) { if
     const ctx_r2 = ɵɵnextContext(2);
     ɵɵadvance(3);
     ɵɵproperty("id", ctx_r2.idBag.checkbox + i_r7)("checked", option_r6.isSelected)("disabled", ctx_r2.loadingOrDisabled || option_r6.disabled);
-    ɵɵattribute("aria-label", option_r6.toString())("aria-describedby", ctx_r2.idBag.checkboxDescription + i_r7)("aria-checked", option_r6.isSelected)("aria-required", ctx_r2.required);
+    ɵɵ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()));
     ɵɵadvance(2);
     ɵɵtextInterpolate(option_r6.toString());
     ɵɵadvance(1);
@@ -12473,7 +12510,7 @@ function ChecklistFormFieldComponent_div_1_ng_container_2_Template(rf, ctx) { if
 function ChecklistFormFieldComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "div", 3);
     ɵɵtemplate(1, ChecklistFormFieldComponent_div_1_div_1_Template, 7, 10, "div", 4);
-    ɵɵtemplate(2, ChecklistFormFieldComponent_div_1_ng_container_2_Template, 9, 11, "ng-container", 5);
+    ɵɵtemplate(2, ChecklistFormFieldComponent_div_1_ng_container_2_Template, 9, 12, "ng-container", 5);
     ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = ɵɵnextContext();
@@ -12758,6 +12795,9 @@ let ChecklistFormFieldComponent = class ChecklistFormFieldComponent extends SmeI
             detailsSpan: ''
         };
     }
+    formatDataUtaId(option) {
+        return option.toLowerCase().replaceAll(' ', '-');
+    }
     getCheckboxCount(index) {
         let total = this.options.length;
         let currentIndex = MsftSme.isNullOrUndefined(index) ? 0 : index + 1;
@@ -12787,7 +12827,7 @@ let ChecklistFormFieldComponent = class ChecklistFormFieldComponent extends SmeI
 /** @nocollapse */ ChecklistFormFieldComponent.ɵfac = function ChecklistFormFieldComponent_Factory(t) { return new (t || ChecklistFormFieldComponent)(ɵɵdirectiveInject(Injector)); };
 /** @nocollapse */ ChecklistFormFieldComponent.ɵcmp = ɵɵdefineComponent({ type: ChecklistFormFieldComponent, selectors: [["sme-form-field", "type", "checklist"]], hostVars: 1, hostBindings: function ChecklistFormFieldComponent_HostBindings(rf, ctx) { if (rf & 2) {
         ɵɵattribute("aria-label", ctx.ariaLabel);
-    } }, inputs: { shouldUseOwnOptionsList: "shouldUseOwnOptionsList" }, features: [ɵɵ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) { if (rf & 1) {
+    } }, inputs: { shouldUseOwnOptionsList: "shouldUseOwnOptionsList" }, features: [ɵɵ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) {
         ɵɵelementStart(0, "sme-form-field-layout", 0);
         ɵɵtemplate(1, ChecklistFormFieldComponent_div_1_Template, 3, 2, "div", 1);
         ɵɵelement(2, "sme-validation-alert", 2);
@@ -17621,10 +17661,9 @@ function ComboboxFormFieldComponent_ng_template_18_Template(rf, ctx) { if (rf &
     ɵɵelementStart(2, "input", 28);
     ɵɵlistener("change", function ComboboxFormFieldComponent_ng_template_18_Template_input_change_2_listener() { ɵɵrestoreView(_r27); const option_r25 = ctx.$implicit; const ctx_r26 = ɵɵnextContext(); return ctx_r26.toggleOption(option_r25, !option_r25.isSelected); });
     ɵɵelementEnd();
-    ɵɵtext(3, " [disabled]=\"option.disabled\" class=\"sme-layout-absolute sme-position-inset-none\" /> ");
-    ɵɵelementStart(4, "span", 29);
-    ɵɵelementStart(5, "span", 30);
-    ɵɵtext(6);
+    ɵɵelementStart(3, "span", 29);
+    ɵɵelementStart(4, "span", 30);
+    ɵɵtext(5);
     ɵɵelementEnd();
     ɵɵelementEnd();
     ɵɵelementEnd();
@@ -17633,9 +17672,9 @@ function ComboboxFormFieldComponent_ng_template_18_Template(rf, ctx) { if (rf &
     const option_r25 = ctx.$implicit;
     const ctx_r11 = ɵɵnextContext();
     ɵɵadvance(2);
-    ɵɵproperty("checked", option_r25.isSelected);
+    ɵɵproperty("checked", option_r25.isSelected)("disabled", option_r25.disabled);
     ɵɵattribute("aria-checked", option_r25.isSelected)("aria-label", option_r25.toString())("data-uta-id", option_r25.utaId ? option_r25.utaId : option_r25.value);
-    ɵɵadvance(2);
+    ɵɵadvance(1);
     ɵɵclassProp("sme-combobox-option-wrap", ctx_r11.overflowWrap);
     ɵɵproperty("smeTooltip", option_r25.disabled ? null : option_r25.resolvedTooltipTemplate)("title", option_r25.resolvedTitle)("smeTooltipContext", option_r25.disabled ? null : option_r25.tooltipContext || option_r25);
     ɵɵadvance(1);
@@ -17954,7 +17993,7 @@ let ComboboxFormFieldComponent = class ComboboxFormFieldComponent extends SmeInt
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.multiSelectTemplate = _t.first);
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.listboxElement = _t.first);
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.dropDown = _t.first);
-    } }, inputs: { multiple: "multiple", overflowWrap: "overflowWrap", maintainSearch: "maintainSearch", dropdownApplyFormFieldOffsetWidth: "dropdownApplyFormFieldOffsetWidth" }, features: [ɵɵ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) { if (rf & 1) {
+    } }, inputs: { multiple: "multiple", overflowWrap: "overflowWrap", maintainSearch: "maintainSearch", dropdownApplyFormFieldOffsetWidth: "dropdownApplyFormFieldOffsetWidth" }, features: [ɵɵ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) {
         const _r28 = ɵɵgetCurrentView();
         ɵɵelementStart(0, "sme-form-field-layout", 0);
         ɵɵelementStart(1, "sme-dropdown", 1, 2);
@@ -17979,7 +18018,7 @@ let ComboboxFormFieldComponent = class ComboboxFormFieldComponent extends SmeInt
         ɵɵelementEnd();
         ɵɵelement(15, "sme-validation-alert", 14);
         ɵɵtemplate(16, ComboboxFormFieldComponent_ng_template_16_Template, 4, 14, "ng-template", null, 15, ɵɵtemplateRefExtractor);
-        ɵɵtemplate(18, ComboboxFormFieldComponent_ng_template_18_Template, 7, 12, "ng-template", null, 16, ɵɵtemplateRefExtractor);
+        ɵɵtemplate(18, ComboboxFormFieldComponent_ng_template_18_Template, 6, 13, "ng-template", null, 16, ɵɵtemplateRefExtractor);
         ɵɵelementEnd();
     } if (rf & 2) {
         const _r0 = ɵɵreference(2);
@@ -19325,6 +19364,17 @@ let FileFormFieldComponent = class FileFormFieldComponent extends SmeInternalFor
                 ? this.strings.MsftSmeShell.Angular.Form.File.selectedFilesFormat.multipleEnabled.none
                 : this.strings.MsftSmeShell.Angular.Form.File.selectedFilesFormat.none;
     }
+    /**
+     * gets aria-label text
+     */
+    get ariaLabelText() {
+        const 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;
+    }
     /**
      * Indicates if there are any files selected
      */
@@ -19497,7 +19547,7 @@ let FileFormFieldComponent = class FileFormFieldComponent extends SmeInternalFor
     } if (rf & 2) {
         let _t;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.fileInput = _t.first);
-    } }, inputs: { multiple: "multiple", fileTypes: "fileTypes", buttonLabel: "buttonLabel" }, features: [ɵɵ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) { if (rf & 1) {
+    } }, inputs: { multiple: "multiple", fileTypes: "fileTypes", buttonLabel: "buttonLabel" }, features: [ɵɵ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) {
         const _r8 = ɵɵgetCurrentView();
         ɵɵelementStart(0, "sme-form-field-layout", 0);
         ɵɵelementStart(1, "fieldset", 1);
@@ -19533,6 +19583,7 @@ let FileFormFieldComponent = class FileFormFieldComponent extends SmeInternalFor
         ɵɵattribute("multiple", ctx.multiple || null)("accept", ctx.accept);
         ɵɵadvance(2);
         ɵɵproperty("smeDisabled", ctx.loadingOrDisabled);
+        ɵɵattribute("aria-label", ctx.ariaLabelText);
         ɵɵadvance(1);
         ɵɵtextInterpolate1(" ", ctx.buttonLabel || (ctx.multiple ? ctx.strings.MsftSmeShell.Angular.Form.File.buttonText.plural : ctx.strings.MsftSmeShell.Angular.Form.File.buttonText.singular), " ");
         ɵɵadvance(2);
@@ -24360,7 +24411,8 @@ function DataTableComponent_div_7_div_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵadvance(2);
     ɵɵtextInterpolate(column_r18.header);
     ɵɵadvance(1);
-    ɵɵproperty("ngClass", ɵɵpureFunction2(4, _c12, column_r18.sortMode === ctx_r20.sortModeEnum.Ascend, column_r18.sortMode === ctx_r20.sortModeEnum.Descend));
+    ɵɵproperty("ngClass", ɵɵpureFunction2(5, _c12, column_r18.sortMode === ctx_r20.sortModeEnum.Ascend, column_r18.sortMode === ctx_r20.sortModeEnum.Descend));
+    ɵɵattribute("aria-label", column_r18.sortable ? ctx_r20.getSortLabel(column_r18) : null);
 } }
 function DataTableComponent_div_7_div_2_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "div", 39);
@@ -24376,7 +24428,8 @@ function DataTableComponent_div_7_div_2_Template(rf, ctx) { if (rf & 1) {
     ɵɵadvance(2);
     ɵɵtextInterpolate(column_r18.header);
     ɵɵadvance(1);
-    ɵɵproperty("ngClass", ɵɵpureFunction2(3, _c12, column_r18.sortMode === ctx_r21.sortModeEnum.Ascend, column_r18.sortMode === ctx_r21.sortModeEnum.Descend));
+    ɵɵproperty("ngClass", ɵɵpureFunction2(4, _c12, column_r18.sortMode === ctx_r21.sortModeEnum.Ascend, column_r18.sortMode === ctx_r21.sortModeEnum.Descend));
+    ɵɵattribute("aria-label", column_r18.sortable ? ctx_r21.getSortLabel(column_r18) : null);
 } }
 function DataTableComponent_div_7_div_3_Template(rf, ctx) { if (rf & 1) {
     ɵɵelement(0, "div", 40);
@@ -24392,8 +24445,8 @@ function DataTableComponent_div_7_sme_resizer_4_Template(rf, ctx) { if (rf & 1)
 const _c13 = function (a0) { return { "width": a0 }; };
 function DataTableComponent_div_7_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "div", 32);
-    ɵɵtemplate(1, DataTableComponent_div_7_div_1_Template, 4, 7, "div", 33);
-    ɵɵtemplate(2, DataTableComponent_div_7_div_2_Template, 4, 6, "div", 34);
+    ɵɵtemplate(1, DataTableComponent_div_7_div_1_Template, 4, 8, "div", 33);
+    ɵɵtemplate(2, DataTableComponent_div_7_div_2_Template, 4, 7, "div", 34);
     ɵɵtemplate(3, DataTableComponent_div_7_div_3_Template, 1, 0, "div", 35);
     ɵɵtemplate(4, DataTableComponent_div_7_sme_resizer_4_Template, 1, 2, "sme-resizer", 36);
     ɵɵelementEnd();
@@ -25074,7 +25127,8 @@ function TreeTableComponent_div_7_div_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵadvance(2);
     ɵɵtextInterpolate(column_r18.header);
     ɵɵadvance(1);
-    ɵɵproperty("ngClass", ɵɵpureFunction2(4, _c12, column_r18.sortMode === ctx_r20.sortModeEnum.Ascend, column_r18.sortMode === ctx_r20.sortModeEnum.Descend));
+    ɵɵproperty("ngClass", ɵɵpureFunction2(5, _c12, column_r18.sortMode === ctx_r20.sortModeEnum.Ascend, column_r18.sortMode === ctx_r20.sortModeEnum.Descend));
+    ɵɵattribute("aria-label", column_r18.sortable ? ctx_r20.getSortLabel(column_r18) : null);
 } }
 function TreeTableComponent_div_7_div_2_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "div", 39);
@@ -25090,7 +25144,8 @@ function TreeTableComponent_div_7_div_2_Template(rf, ctx) { if (rf & 1) {
     ɵɵadvance(2);
     ɵɵtextInterpolate(column_r18.header);
     ɵɵadvance(1);
-    ɵɵproperty("ngClass", ɵɵpureFunction2(3, _c12, column_r18.sortMode === ctx_r21.sortModeEnum.Ascend, column_r18.sortMode === ctx_r21.sortModeEnum.Descend));
+    ɵɵproperty("ngClass", ɵɵpureFunction2(4, _c12, column_r18.sortMode === ctx_r21.sortModeEnum.Ascend, column_r18.sortMode === ctx_r21.sortModeEnum.Descend));
+    ɵɵattribute("aria-label", column_r18.sortable ? ctx_r21.getSortLabel(column_r18) : null);
 } }
 function TreeTableComponent_div_7_div_3_Template(rf, ctx) { if (rf & 1) {
     ɵɵelement(0, "div", 40);
@@ -25105,8 +25160,8 @@ function TreeTableComponent_div_7_sme_resizer_4_Template(rf, ctx) { if (rf & 1)
 } }
 function TreeTableComponent_div_7_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "div", 32);
-    ɵɵtemplate(1, TreeTableComponent_div_7_div_1_Template, 4, 7, "div", 33);
-    ɵɵtemplate(2, TreeTableComponent_div_7_div_2_Template, 4, 6, "div", 34);
+    ɵɵtemplate(1, TreeTableComponent_div_7_div_1_Template, 4, 8, "div", 33);
+    ɵɵtemplate(2, TreeTableComponent_div_7_div_2_Template, 4, 7, "div", 34);
     ɵɵtemplate(3, TreeTableComponent_div_7_div_3_Template, 1, 0, "div", 35);
     ɵɵtemplate(4, TreeTableComponent_div_7_sme_resizer_4_Template, 1, 2, "sme-resizer", 36);
     ɵɵelementEnd();
@@ -27079,6 +27134,25 @@ class DataTableComponent extends CoreBaseComponent {
             || 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
+     */
+    getSortLabel(column) {
+        switch (column.sortMode) {
+            case DataTableSortMode.Ascend:
+                return this.strings.MsftSmeShell.Angular.DataTable.Aria.Label.descendSortOrderButton;
+            case DataTableSortMode.Descend:
+                return this.strings.MsftSmeShell.Angular.DataTable.Aria.Label.ascendSortOrderButton;
+            case DataTableSortMode.None:
+                return null;
+        }
+    }
     /**
      * It implements the AfterViewInit interface.
      */
@@ -29092,6 +29166,13 @@ class DataTableComponent extends CoreBaseComponent {
             this.processColumns();
         }
     }
+    /**
+     * Get the number of filtered items (if any) within the dataTable.
+     * @returns number of dataTable filtered items, zero if none.
+     */
+    getNumberOfFilteredItems() {
+        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.
@@ -30289,8 +30370,8 @@ class PivotComponent extends CoreBaseComponent {
     /**
      * Force refresh for the pivot tabs.
      */
-    refresh() {
-        this.updatePivotTabs();
+    refresh(shouldEmit = false) {
+        this.updatePivotTabs(shouldEmit);
     }
     /**
      * Selects a tab
@@ -30353,7 +30434,10 @@ class PivotComponent extends CoreBaseComponent {
             'sme-pivot'
         ]);
     }
-    updatePivotTabs() {
+    /**
+     * Main rendering functionality for the pivot tab
+     */
+    updatePivotTabs(shouldEmit = true) {
         let currentFill = 0;
         this.visibleTabs = [];
         this.trayTabs = [];
@@ -30388,6 +30472,9 @@ class PivotComponent extends CoreBaseComponent {
                 currentFill += tabWidth;
             }
         }
+        if (shouldEmit) {
+            this.emitLayoutChanged();
+        }
     }
 }
 /** @nocollapse */ PivotComponent.ɵfac = function PivotComponent_Factory(t) { return new (t || PivotComponent)(ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(SME_LAYOUT_PROVIDER, 12)); };
@@ -30462,7 +30549,7 @@ __decorate([
 __decorate([
     Debounce$1(),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
+    __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
 ], PivotComponent.prototype, "refresh", null);
 __decorate([
@@ -31088,13 +31175,13 @@ function MasterViewComponent_button_14_Template(rf, ctx) { if (rf & 1) {
 function MasterViewComponent_button_15_Template(rf, ctx) { if (rf & 1) {
     const _r17 = ɵɵgetCurrentView();
     ɵɵelementStart(0, "button", 27);
-    ɵɵlistener("click", function MasterViewComponent_button_15_Template_button_click_0_listener() { ɵɵrestoreView(_r17); const ctx_r16 = ɵɵnextContext(); return ctx_r16.refresh.next(); });
+    ɵɵlistener("click", function MasterViewComponent_button_15_Template_button_click_0_listener() { ɵɵrestoreView(_r17); const ctx_r16 = ɵɵnextContext(); return ctx_r16.refreshButtonClicked(); });
     ɵɵelement(1, "span", 28);
     ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r6 = ɵɵnextContext();
-    ɵɵproperty("disabled", ctx_r6.disableRefresh)("title", ctx_r6.resourceStrings.refresh.title);
-    ɵɵattribute("aria-label", ctx_r6.refreshButtonAriaLabel);
+    ɵɵproperty("title", ctx_r6.resourceStrings.refresh.title);
+    ɵɵattribute("aria-disabled", ctx_r6.disableRefresh)("aria-label", ctx_r6.refreshButtonAriaLabel);
 } }
 function MasterViewComponent_button_16_Template(rf, ctx) { if (rf & 1) {
     const _r19 = ɵɵgetCurrentView();
@@ -31148,6 +31235,7 @@ class MasterViewComponent extends CoreBaseComponent {
         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 = '';
@@ -31272,6 +31360,23 @@ class MasterViewComponent extends CoreBaseComponent {
             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
+    ngOnChanges(changes) {
+        var _a;
+        let 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}`;
+        }
+    }
     ngOnDestroy() {
         if (this.splitViewPaneToggledSubscription) {
             this.splitViewPaneToggledSubscription.unsubscribe();
@@ -31325,6 +31430,15 @@ class MasterViewComponent extends CoreBaseComponent {
             this.actionBarComponent.updateActionBar();
         }
     }
+    /**
+     * Handles clicking on the refresh button
+     */
+    refreshButtonClicked() {
+        if (this.disableRefresh) {
+            return;
+        }
+        this.refresh.next();
+    }
     handleDetailPaneExpanding(dataViewControl) {
         if (this.splitView) {
             let newDataSelection = null;
@@ -31403,7 +31517,7 @@ class MasterViewComponent extends CoreBaseComponent {
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.dataView = _t.first);
     } }, hostBindings: function MasterViewComponent_HostBindings(rf, ctx) { if (rf & 1) {
         ɵɵlistener("resize", function MasterViewComponent_resize_HostBindingHandler() { return ctx.updateLayout(); }, false, ɵɵ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: [ɵɵ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) { if (rf & 1) {
+    } }, 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: [ɵɵInheritDefinitionFeature, ɵɵ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) {
         ɵɵprojectionDef(_c4$5);
         ɵɵtemplate(0, MasterViewComponent_h2_0_Template, 2, 3, "h2", 0);
         ɵɵelementStart(1, "sme-layout", 1, 2);
@@ -32478,7 +32592,7 @@ function AlertBarComponent_div_1_label_14_div_1_a_1_Template(rf, ctx) { if (rf &
 } if (rf & 2) {
     const link_r13 = ɵɵnextContext().$implicit;
     ɵɵadvance(1);
-    ɵɵtextInterpolate(link_r13.displayText);
+    ɵɵtextInterpolate1(" ", link_r13.displayText, " ");
 } }
 function AlertBarComponent_div_1_label_14_div_1_div_2_a_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "a", 27);
@@ -32488,7 +32602,7 @@ function AlertBarComponent_div_1_label_14_div_1_div_2_a_1_Template(rf, ctx) { if
     const link_r13 = ɵɵnextContext(2).$implicit;
     ɵɵproperty("href", link_r13.uri, ɵɵsanitizeUrl);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(link_r13.displayText);
+    ɵɵtextInterpolate1(" ", link_r13.displayText, " ");
 } }
 function AlertBarComponent_div_1_label_14_div_1_div_2_a_2_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "a", 28);
@@ -32498,7 +32612,7 @@ function AlertBarComponent_div_1_label_14_div_1_div_2_a_2_Template(rf, ctx) { if
     const link_r13 = ɵɵnextContext(2).$implicit;
     ɵɵproperty("routerLink", link_r13.uri);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(link_r13.displayText);
+    ɵɵtextInterpolate1(" ", link_r13.displayText, " ");
 } }
 function AlertBarComponent_div_1_label_14_div_1_div_2_Template(rf, ctx) { if (rf & 1) {
     const _r25 = ɵɵgetCurrentView();
@@ -32753,7 +32867,7 @@ class AlertBarComponent extends CoreBaseComponent {
     }
 }
 /** @nocollapse */ AlertBarComponent.ɵfac = function AlertBarComponent_Factory(t) { return new (t || AlertBarComponent)(ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(AlertBarService), ɵɵdirectiveInject(DialogService)); };
-/** @nocollapse */ AlertBarComponent.ɵcmp = ɵɵdefineComponent({ type: AlertBarComponent, selectors: [["sme-alert-bar"]], inputs: { id: "id" }, features: [ɵɵ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) { if (rf & 1) {
+/** @nocollapse */ AlertBarComponent.ɵcmp = ɵɵdefineComponent({ type: AlertBarComponent, selectors: [["sme-alert-bar"]], inputs: { id: "id" }, features: [ɵɵ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) {
         ɵɵelementStart(0, "div", 0);
         ɵɵtemplate(1, AlertBarComponent_div_1_Template, 23, 13, "div", 1);
         ɵɵelementEnd();
@@ -39926,8 +40040,38 @@ class PageAlertBarModule {
 
 class PropertyGridItemComponent {
     constructor() {
+        /**
+         * 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;
+    }
+    /**
+     * The setter for value/context.
+     */
+    set value(input) {
+        if (this.isAsync && this.loading) {
+            this.loading = false;
+        }
+        this.internalValue = input;
+    }
+    /**
+     * The getter for value/context.
+     */
+    get value() {
+        return this.internalValue;
     }
     /**
      * Gets the status class to apply to this components value section
@@ -39956,9 +40100,25 @@ class PropertyGridItemComponent {
                 return null;
         }
     }
+    ngOnInit() {
+        // 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.
+     */
+    resetLoading() {
+        if (!this.loading) {
+            this.loading = true;
+        }
+    }
 }
 /** @nocollapse */ PropertyGridItemComponent.ɵfac = function PropertyGridItemComponent_Factory(t) { return new (t || PropertyGridItemComponent)(); };
-/** @nocollapse */ PropertyGridItemComponent.ɵcmp = ɵɵ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 = ɵɵ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) && ɵsetClassMetadata(PropertyGridItemComponent, [{
         type: Component,
         args: [{
@@ -39983,6 +40143,8 @@ class PropertyGridItemComponent {
             type: Input
         }], columnSpan: [{
             type: Input
+        }], isAsync: [{
+            type: Input
         }] }); })();
 
 const _c0$1m = ["readonlyTemplate"];
@@ -40040,57 +40202,75 @@ function PropertyGridComponent_sme_layout_item_5_Template(rf, ctx) { if (rf & 1)
     ɵɵadvance(1);
     ɵɵproperty("ngTemplateOutlet", ctx_r3.getTemplate(item_r14))("ngTemplateOutletContext", ɵɵpureFunction2(7, _c4$6, item_r14, i_r15));
 } }
-function PropertyGridComponent_ng_template_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function PropertyGridComponent_ng_template_6_sme_loading_wheel_0_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelement(0, "sme-loading-wheel", 23);
+} if (rf & 2) {
+    ɵɵproperty("inline", true)("isBackgroundTransparent", true);
+} }
+function PropertyGridComponent_ng_template_6_ng_container_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementContainer(0);
 } }
-function PropertyGridComponent_ng_template_6_span_2_Template(rf, ctx) { if (rf & 1) {
+function PropertyGridComponent_ng_template_6_ng_container_1_span_3_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "span");
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r20 = ɵɵnextContext().$implicit;
-    const ctx_r23 = ɵɵnextContext();
+    const item_r20 = ɵɵnextContext(2).$implicit;
+    const ctx_r25 = ɵɵnextContext();
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r23.stringifyValue(item_r20.value));
+    ɵɵtextInterpolate(ctx_r25.stringifyValue(item_r20.value));
 } }
-function PropertyGridComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "p", 21);
-    ɵɵtemplate(1, PropertyGridComponent_ng_template_6_ng_container_1_Template, 1, 0, "ng-container", 19);
-    ɵɵtemplate(2, PropertyGridComponent_ng_template_6_span_2_Template, 2, 1, "span", 22);
+function PropertyGridComponent_ng_template_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementContainerStart(0);
+    ɵɵelementStart(1, "p", 24);
+    ɵɵtemplate(2, PropertyGridComponent_ng_template_6_ng_container_1_ng_container_2_Template, 1, 0, "ng-container", 19);
+    ɵɵtemplate(3, PropertyGridComponent_ng_template_6_ng_container_1_span_3_Template, 2, 1, "span", 22);
     ɵɵelementEnd();
+    ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const item_r20 = ctx.$implicit;
-    const i_r21 = ctx.index;
-    const ctx_r5 = ɵɵnextContext();
+    const ctx_r27 = ɵɵnextContext();
+    const i_r21 = ctx_r27.index;
+    const item_r20 = ctx_r27.$implicit;
+    const ctx_r23 = ɵɵnextContext();
     const _r12 = ɵɵreference(15);
-    ɵɵattribute("aria-labelledby", ctx_r5.idBag.labelSpan + i_r21)("aria-describedby", ctx_r5.idBag.detailsSpan + i_r21);
+    ɵɵadvance(1);
+    ɵɵattribute("aria-labelledby", ctx_r23.idBag.labelSpan + i_r21)("aria-describedby", ctx_r23.idBag.detailsSpan + i_r21);
     ɵɵadvance(1);
     ɵɵproperty("ngTemplateOutlet", _r12)("ngTemplateOutletContext", ɵɵpureFunction2(5, _c4$6, item_r20, i_r21));
     ɵɵadvance(1);
     ɵɵproperty("ngIf", !item_r20.link && !item_r20.action);
 } }
+function PropertyGridComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    ɵɵtemplate(0, PropertyGridComponent_ng_template_6_sme_loading_wheel_0_Template, 1, 2, "sme-loading-wheel", 21);
+    ɵɵtemplate(1, PropertyGridComponent_ng_template_6_ng_container_1_Template, 4, 8, "ng-container", 22);
+} if (rf & 2) {
+    const item_r20 = ctx.$implicit;
+    ɵɵproperty("ngIf", item_r20.loading && item_r20.isAsync);
+    ɵɵadvance(1);
+    ɵɵproperty("ngIf", !item_r20.loading || !item_r20.isAsync);
+} }
 function PropertyGridComponent_ng_template_8_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementContainer(0);
 } }
 function PropertyGridComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "p");
     ɵɵtemplate(1, PropertyGridComponent_ng_template_8_ng_container_1_Template, 1, 0, "ng-container", 19);
-    ɵɵelementStart(2, "a", 23);
-    ɵɵlistener("click", function PropertyGridComponent_ng_template_8_Template_a_click_2_listener() { const item_r25 = ctx.$implicit; return item_r25.action(item_r25); });
+    ɵɵelementStart(2, "a", 25);
+    ɵɵlistener("click", function PropertyGridComponent_ng_template_8_Template_a_click_2_listener() { const item_r28 = ctx.$implicit; return item_r28.action(item_r28); });
     ɵɵtext(3);
     ɵɵelementEnd();
     ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r25 = ctx.$implicit;
-    const i_r26 = ctx.index;
+    const item_r28 = ctx.$implicit;
+    const i_r29 = ctx.index;
     const ctx_r7 = ɵɵnextContext();
     const _r12 = ɵɵreference(15);
     ɵɵadvance(1);
-    ɵɵproperty("ngTemplateOutlet", _r12)("ngTemplateOutletContext", ɵɵpureFunction2(5, _c4$6, item_r25, i_r26));
+    ɵɵproperty("ngTemplateOutlet", _r12)("ngTemplateOutletContext", ɵɵpureFunction2(5, _c4$6, item_r28, i_r29));
     ɵɵadvance(1);
-    ɵɵattribute("aria-labelledby", ctx_r7.idBag.labelSpan + i_r26 + " " + (ctx_r7.idBag.valueSpan + i_r26))("aria-describedby", ctx_r7.idBag.detailsSpan + i_r26);
+    ɵɵattribute("aria-labelledby", ctx_r7.idBag.labelSpan + i_r29 + " " + (ctx_r7.idBag.valueSpan + i_r29))("aria-describedby", ctx_r7.idBag.detailsSpan + i_r29);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(item_r25.value);
+    ɵɵtextInterpolate(item_r28.value);
 } }
 function PropertyGridComponent_ng_template_10_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementContainer(0);
@@ -40098,22 +40278,22 @@ function PropertyGridComponent_ng_template_10_ng_container_1_Template(rf, ctx) {
 function PropertyGridComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "p");
     ɵɵtemplate(1, PropertyGridComponent_ng_template_10_ng_container_1_Template, 1, 0, "ng-container", 19);
-    ɵɵelementStart(2, "a", 24);
+    ɵɵelementStart(2, "a", 26);
     ɵɵtext(3);
     ɵɵelementEnd();
     ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r29 = ctx.$implicit;
-    const i_r30 = ctx.index;
+    const item_r32 = ctx.$implicit;
+    const i_r33 = ctx.index;
     const ctx_r9 = ɵɵnextContext();
     const _r12 = ɵɵreference(15);
     ɵɵadvance(1);
-    ɵɵproperty("ngTemplateOutlet", _r12)("ngTemplateOutletContext", ɵɵpureFunction2(6, _c4$6, item_r29, i_r30));
+    ɵɵproperty("ngTemplateOutlet", _r12)("ngTemplateOutletContext", ɵɵpureFunction2(6, _c4$6, item_r32, i_r33));
     ɵɵadvance(1);
-    ɵɵproperty("routerLink", item_r29.link);
-    ɵɵattribute("aria-labelledby", ctx_r9.idBag.labelSpan + i_r30 + " " + (ctx_r9.idBag.valueSpan + i_r30))("aria-describedby", ctx_r9.idBag.detailsSpan + i_r30);
+    ɵɵproperty("routerLink", item_r32.link);
+    ɵɵattribute("aria-labelledby", ctx_r9.idBag.labelSpan + i_r33 + " " + (ctx_r9.idBag.valueSpan + i_r33))("aria-describedby", ctx_r9.idBag.detailsSpan + i_r33);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(item_r29.value);
+    ɵɵtextInterpolate(item_r32.value);
 } }
 function PropertyGridComponent_ng_template_12_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementContainer(0);
@@ -40121,46 +40301,46 @@ function PropertyGridComponent_ng_template_12_ng_container_1_Template(rf, ctx) {
 function PropertyGridComponent_ng_template_12_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "p");
     ɵɵtemplate(1, PropertyGridComponent_ng_template_12_ng_container_1_Template, 1, 0, "ng-container", 19);
-    ɵɵelementStart(2, "a", 25);
+    ɵɵelementStart(2, "a", 27);
     ɵɵelementStart(3, "span");
     ɵɵtext(4);
     ɵɵelementEnd();
-    ɵɵelement(5, "span", 26);
+    ɵɵelement(5, "span", 28);
     ɵɵelementEnd();
     ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r32 = ctx.$implicit;
-    const i_r33 = ctx.index;
+    const item_r35 = ctx.$implicit;
+    const i_r36 = ctx.index;
     const ctx_r11 = ɵɵnextContext();
     const _r12 = ɵɵreference(15);
     ɵɵadvance(1);
-    ɵɵproperty("ngTemplateOutlet", _r12)("ngTemplateOutletContext", ɵɵpureFunction2(6, _c4$6, item_r32, i_r33));
+    ɵɵproperty("ngTemplateOutlet", _r12)("ngTemplateOutletContext", ɵɵpureFunction2(6, _c4$6, item_r35, i_r36));
     ɵɵadvance(1);
-    ɵɵproperty("href", item_r32.link, ɵɵsanitizeUrl);
-    ɵɵattribute("aria-labelledby", ctx_r11.idBag.labelSpan + i_r33 + " " + (ctx_r11.idBag.valueSpan + i_r33))("aria-describedby", ctx_r11.idBag.detailsSpan + i_r33);
+    ɵɵproperty("href", item_r35.link, ɵɵsanitizeUrl);
+    ɵɵattribute("aria-labelledby", ctx_r11.idBag.labelSpan + i_r36 + " " + (ctx_r11.idBag.valueSpan + i_r36))("aria-describedby", ctx_r11.idBag.detailsSpan + i_r36);
     ɵɵadvance(2);
-    ɵɵtextInterpolate(item_r32.value);
+    ɵɵtextInterpolate(item_r35.value);
 } }
 function PropertyGridComponent_ng_template_14_span_0_Template(rf, ctx) { if (rf & 1) {
     ɵɵelement(0, "span");
 } if (rf & 2) {
-    const item_r35 = ɵɵnextContext().$implicit;
-    ɵɵclassMapInterpolate1("sme-margin-right-xs sme-icon ", item_r35.iconClass, "");
+    const item_r38 = ɵɵnextContext().$implicit;
+    ɵɵ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) {
-    ɵɵelement(0, "sme-status-icon", 29);
+    ɵɵelement(0, "sme-status-icon", 31);
 } if (rf & 2) {
-    const item_r35 = ɵɵnextContext().$implicit;
-    ɵɵproperty("status", item_r35.status);
+    const item_r38 = ɵɵnextContext().$implicit;
+    ɵɵproperty("status", item_r38.status);
 } }
 function PropertyGridComponent_ng_template_14_Template(rf, ctx) { if (rf & 1) {
-    ɵɵtemplate(0, PropertyGridComponent_ng_template_14_span_0_Template, 1, 3, "span", 27);
-    ɵɵtemplate(1, PropertyGridComponent_ng_template_14_sme_status_icon_1_Template, 1, 1, "sme-status-icon", 28);
+    ɵɵtemplate(0, PropertyGridComponent_ng_template_14_span_0_Template, 1, 3, "span", 29);
+    ɵɵtemplate(1, PropertyGridComponent_ng_template_14_sme_status_icon_1_Template, 1, 1, "sme-status-icon", 30);
 } if (rf & 2) {
-    const item_r35 = ctx.$implicit;
-    ɵɵproperty("ngIf", !!item_r35.iconClass);
+    const item_r38 = ctx.$implicit;
+    ɵɵproperty("ngIf", !!item_r38.iconClass);
     ɵɵadvance(1);
-    ɵɵproperty("ngIf", item_r35.status !== null && !item_r35.iconClass);
+    ɵɵproperty("ngIf", item_r38.status !== null && !item_r38.iconClass);
 } }
 /**
  *
@@ -40204,7 +40384,7 @@ class PropertyGridComponent extends CoreBaseComponent {
          */
         this.layoutItemWidth = 300;
         /**
-         * The source name to use for logging
+         * The orientation for the property grid
          */
         this.orientation = 'horizontal';
         /**
@@ -40303,14 +40483,14 @@ class PropertyGridComponent extends CoreBaseComponent {
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.externalLinkTemplate = _t.first);
     } }, inputs: { orientation: "orientation" }, outputs: { layoutChanged: "layoutChanged" }, features: [ɵɵProvidersFeature([
             { provide: SME_LAYOUT_PROVIDER, useExisting: forwardRef((() => PropertyGridComponent)) }
-        ]), ɵɵInheritDefinitionFeature, ɵɵ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) { if (rf & 1) {
+        ]), ɵɵInheritDefinitionFeature, ɵɵ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) {
         ɵɵelementStart(0, "sme-layout", 0, 1);
         ɵɵelement(2, "sme-layout-definition", 2);
         ɵɵtemplate(3, PropertyGridComponent_sme_layout_definition_3_Template, 1, 2, "sme-layout-definition", 3);
         ɵɵtemplate(4, PropertyGridComponent_sme_layout_definition_4_Template, 1, 1, "sme-layout-definition", 4);
         ɵɵtemplate(5, PropertyGridComponent_sme_layout_item_5_Template, 10, 10, "sme-layout-item", 5);
         ɵɵelementEnd();
-        ɵɵtemplate(6, PropertyGridComponent_ng_template_6_Template, 3, 8, "ng-template", null, 6, ɵɵtemplateRefExtractor);
+        ɵɵtemplate(6, PropertyGridComponent_ng_template_6_Template, 2, 2, "ng-template", null, 6, ɵɵtemplateRefExtractor);
         ɵɵtemplate(8, PropertyGridComponent_ng_template_8_Template, 4, 8, "ng-template", null, 7, ɵɵtemplateRefExtractor);
         ɵɵtemplate(10, PropertyGridComponent_ng_template_10_Template, 4, 9, "ng-template", null, 8, ɵɵtemplateRefExtractor);
         ɵɵtemplate(12, PropertyGridComponent_ng_template_12_Template, 6, 9, "ng-template", null, 9, ɵɵtemplateRefExtractor);
@@ -40325,11 +40505,7 @@ class PropertyGridComponent extends CoreBaseComponent {
         ɵɵproperty("ngIf", ctx.orientation !== "vertical");
         ɵɵadvance(1);
         ɵɵproperty("ngForOf", ctx.items);
-    } }, directives: [LayoutComponent, LayoutDefinitionComponent, NgIf, NgForOf, LayoutItemComponent, TooltipZoneDirective, NgTemplateOutlet, TooltipDirective, RouterLinkWithHref, StatusIconComponent], encapsulation: 2 });
-__decorate([
-    SmeInject(ChangeDetectorRef),
-    __metadata("design:type", ChangeDetectorRef)
-], PropertyGridComponent.prototype, "changeDetector", void 0);
+    } }, directives: [LayoutComponent, LayoutDefinitionComponent, NgIf, NgForOf, LayoutItemComponent, TooltipZoneDirective, NgTemplateOutlet, TooltipDirective, LoadingWheelComponent, RouterLinkWithHref, StatusIconComponent], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(PropertyGridComponent, [{
         type: Component,
         args: [{
@@ -40365,7 +40541,7 @@ __decorate([
             type: Input
         }], layoutChanged: [{
             type: Output
-        }], changeDetector: [] }); })();
+        }] }); })();
 
 class PropertyGridModule {
 }
@@ -40375,6 +40551,7 @@ class PropertyGridModule {
             RouterModule,
             CommonModule,
             LayoutModule,
+            LoadingWheelModule,
             IconModule,
             TooltipModule
         ]] });
@@ -40382,6 +40559,7 @@ class PropertyGridModule {
         PropertyGridItemComponent], imports: [RouterModule,
         CommonModule,
         LayoutModule,
+        LoadingWheelModule,
         IconModule,
         TooltipModule], exports: [PropertyGridComponent,
         PropertyGridItemComponent] }); })();
@@ -40400,6 +40578,7 @@ class PropertyGridModule {
                     RouterModule,
                     CommonModule,
                     LayoutModule,
+                    LoadingWheelModule,
                     IconModule,
                     TooltipModule
                 ]
@@ -44496,19 +44675,43 @@ class SettingsFormService {
         type: Injectable
     }], function () { return [{ type: Router }]; }, null); })();
 
+function SettingsComponent_div_1_span_3_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "span", 12);
+    ɵɵtext(1);
+    ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = ɵɵnextContext(2);
+    ɵɵadvance(1);
+    ɵɵtextInterpolate(ctx_r2.headerSeparator);
+} }
+function SettingsComponent_div_1_span_4_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "span", 13);
+    ɵɵtext(1);
+    ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = ɵɵnextContext(2);
+    ɵɵadvance(1);
+    ɵɵtextInterpolate(ctx_r3.selectedSettingsTitle);
+} }
 function SettingsComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "div", 8);
     ɵɵelementStart(1, "h2", 9);
     ɵɵtext(2);
+    ɵɵtemplate(3, SettingsComponent_div_1_span_3_Template, 2, 1, "span", 10);
+    ɵɵtemplate(4, SettingsComponent_div_1_span_4_Template, 2, 1, "span", 11);
     ɵɵelementEnd();
     ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = ɵɵnextContext();
     ɵɵadvance(1);
-    ɵɵproperty("title", ctx_r0.settingsTitle);
-    ɵɵattribute("aria-label", ctx_r0.settingsTitle);
+    ɵɵproperty("title", ctx_r0.fullSettingsTitle);
+    ɵɵattribute("aria-label", ctx_r0.fullSettingsTitle);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(ctx_r0.settingsTitle);
+    ɵɵtextInterpolate1("", ctx_r0.settingsTitle, " ");
+    ɵɵadvance(1);
+    ɵɵproperty("ngIf", ctx_r0.selectedSettingsTitle);
+    ɵɵadvance(1);
+    ɵɵproperty("ngIf", ctx_r0.selectedSettingsTitle);
 } }
 const _c0$1u = [[["sme-settings-navigation"]], [["sme-settings-header"]], [["sme-settings-content"]], [["sme-settings-footer"]]];
 const _c1$O = ["sme-settings-navigation", "sme-settings-header", "sme-settings-content", "sme-settings-footer"];
@@ -44544,6 +44747,10 @@ class SettingsComponent extends CoreBaseComponent {
         super(injector);
         this.allForms = [];
         this.autoFocus = true;
+        /**
+         * Separator used in sticky header on top of Settings page
+         */
+        this.headerSeparator = '|';
     }
     /**
      * The source name to use for logging
@@ -44562,6 +44769,7 @@ class SettingsComponent extends CoreBaseComponent {
             // If we have a new form, it means the user navigated so we reset the autofocus
             this.autoFocus = true;
         }), this.settingsForms.formRemoved().subscribe((form) => { MsftSme.remove(this.allForms, form); }));
+        this.fullSettingsTitle = this.settingsTitle;
     }
     ngOnDestroy() {
         super.ngOnDestroy();
@@ -44615,6 +44823,14 @@ class SettingsComponent extends CoreBaseComponent {
             return this.addPadding = this.layoutComponent.currentLayoutDefinition.name === 'narrow';
         }
     }
+    /**
+     * Update this.settingsTitle (header of the setting page) to newly selected setting item
+     */
+    updateSelectedSettingTitle(newSelectedSettingTitle) {
+        this.selectedSettingsTitle = newSelectedSettingTitle;
+        const fullSettingsTitlePostFix = this.selectedSettingsTitle ? this.headerSeparator + ' ' + this.selectedSettingsTitle : '';
+        this.fullSettingsTitle = this.settingsTitle + ' ' + fullSettingsTitlePostFix;
+    }
 }
 /** @nocollapse */ SettingsComponent.ɵfac = function SettingsComponent_Factory(t) { return new (t || SettingsComponent)(ɵɵdirectiveInject(Injector)); };
 /** @nocollapse */ SettingsComponent.ɵcmp = ɵɵdefineComponent({ type: SettingsComponent, selectors: [["sme-settings"]], viewQuery: function SettingsComponent_Query(rf, ctx) { if (rf & 1) {
@@ -44622,10 +44838,10 @@ class SettingsComponent extends CoreBaseComponent {
     } if (rf & 2) {
         let _t;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.layoutComponent = _t.first);
-    } }, inputs: { backRoute: "backRoute", settingsTitle: "settingsTitle" }, features: [ɵɵ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) { if (rf & 1) {
+    } }, inputs: { backRoute: "backRoute", settingsTitle: "settingsTitle", selectedSettingsTitle: "selectedSettingsTitle" }, features: [ɵɵ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) {
         ɵɵprojectionDef(_c0$1u);
         ɵɵelementStart(0, "div", 0);
-        ɵɵtemplate(1, SettingsComponent_div_1_Template, 3, 3, "div", 1);
+        ɵɵtemplate(1, SettingsComponent_div_1_Template, 5, 5, "div", 1);
         ɵɵelementStart(2, "sme-layout", 2, 3);
         ɵɵlistener("layoutChanged", function SettingsComponent_Template_sme_layout_layoutChanged_2_listener() { return ctx.isPaddingRequired(); });
         ɵɵelement(4, "sme-layout-definition", 4);
@@ -44641,6 +44857,7 @@ class SettingsComponent extends CoreBaseComponent {
         ɵɵelementEnd();
         ɵɵelementEnd();
     } if (rf & 2) {
+        const _r1 = ɵɵreference(3);
         ɵɵadvance(1);
         ɵɵproperty("ngIf", ctx.settingsTitle);
         ɵɵadvance(1);
@@ -44648,9 +44865,9 @@ class SettingsComponent extends CoreBaseComponent {
         ɵɵadvance(2);
         ɵɵproperty("until", 800)("columns", 1);
         ɵɵadvance(1);
-        ɵɵproperty("columns", 5);
+        ɵɵproperty("columns", 5)("addBottomPadding", false);
         ɵɵadvance(1);
-        ɵɵproperty("columnSpan", 1);
+        ɵɵproperty("columnSpan", 1)("ngClass", _r1.currentLayoutDefinitionName === "narrow" ? "" : "sme-position-stretch-v");
         ɵɵadvance(2);
         ɵɵproperty("columnSpan", 4)("ngClass", ctx.addPadding ? "sme-position-stretch sme-padding-left-xl" : "sme-position-stretch");
     } }, directives: [NgIf, LayoutComponent, LayoutDefinitionComponent, LayoutItemComponent, NgClass, TooltipDirective], encapsulation: 2 });
@@ -44672,14 +44889,17 @@ __decorate([
             type: Input
         }], settingsTitle: [{
             type: Input
+        }], selectedSettingsTitle: [{
+            type: Input
         }], layoutComponent: [{
             type: ViewChild,
             args: [LayoutComponent]
         }], settingsForms: [], dialogService: [] }); })();
 
+const _c0$1v = ["searchTextBox"];
 function CommonSettingsComponent_header_2_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "header", 7);
-    ɵɵelementStart(1, "h2", 8);
+    ɵɵelementStart(0, "header", 12);
+    ɵɵelementStart(1, "h2", 13);
     ɵɵtext(2);
     ɵɵelementEnd();
     ɵɵelementEnd();
@@ -44690,94 +44910,94 @@ function CommonSettingsComponent_header_2_Template(rf, ctx) { if (rf & 1) {
     ɵɵadvance(1);
     ɵɵtextInterpolate(ctx_r0.settingsTitle);
 } }
-function CommonSettingsComponent_li_6_h3_1_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "h3", 12);
+function CommonSettingsComponent_li_10_h4_1_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "h4", 17);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r8 = ɵɵnextContext();
-    const j_r5 = ctx_r8.index;
-    const group_r4 = ctx_r8.$implicit;
-    const ctx_r6 = ɵɵnextContext();
-    ɵɵproperty("id", ctx_r6.idBag.group + "-" + j_r5)("title", group_r4.group);
+    const ctx_r9 = ɵɵnextContext();
+    const j_r6 = ctx_r9.index;
+    const group_r5 = ctx_r9.$implicit;
+    const ctx_r7 = ɵɵnextContext();
+    ɵɵproperty("id", ctx_r7.idBag.group + "-" + j_r6)("title", group_r5.group);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(group_r4.group);
+    ɵɵtextInterpolate(group_r5.group);
 } }
-function CommonSettingsComponent_li_6_a_2_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "a", 13);
-    ɵɵlistener("smeRouterLinkActivated", function CommonSettingsComponent_li_6_a_2_Template_a_smeRouterLinkActivated_0_listener() { ɵɵrestoreView(_r12); const setting_r9 = ctx.$implicit; const ctx_r11 = ɵɵnextContext(2); return ctx_r11.selectedSetting = setting_r9; });
-    ɵɵelement(1, "div", 14);
-    ɵɵelementStart(2, "div", 15);
-    ɵɵelementStart(3, "span", 16);
+function CommonSettingsComponent_li_10_a_2_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = ɵɵgetCurrentView();
+    ɵɵelementStart(0, "a", 18);
+    ɵɵlistener("smeRouterLinkActivated", function CommonSettingsComponent_li_10_a_2_Template_a_smeRouterLinkActivated_0_listener() { ɵɵrestoreView(_r13); const setting_r10 = ctx.$implicit; const ctx_r12 = ɵɵnextContext(2); return ctx_r12.onSmeRouterLinkActivated(setting_r10); });
+    ɵɵelement(1, "div", 19);
+    ɵɵelementStart(2, "div", 20);
+    ɵɵelementStart(3, "span", 21);
     ɵɵtext(4);
     ɵɵelementEnd();
     ɵɵelementEnd();
     ɵɵelementEnd();
 } if (rf & 2) {
-    const setting_r9 = ctx.$implicit;
-    const i_r10 = ctx.index;
-    const j_r5 = ɵɵnextContext().index;
-    const ctx_r7 = ɵɵnextContext();
-    ɵɵattributeInterpolate5("aria-labelledby", "", ctx_r7.idBag.option, "-", j_r5, "-", i_r10, " ", ctx_r7.idBag.group, "-", j_r5, "");
-    ɵɵ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);
-    ɵɵattribute("aria-selected", ctx_r7.selectedSetting === setting_r9);
+    const setting_r10 = ctx.$implicit;
+    const i_r11 = ctx.index;
+    const j_r6 = ɵɵnextContext().index;
+    const ctx_r8 = ɵɵnextContext();
+    ɵɵattributeInterpolate5("aria-labelledby", "", ctx_r8.idBag.option, "-", j_r6, "-", i_r11, " ", ctx_r8.idBag.group, "-", j_r6, "");
+    ɵɵ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);
+    ɵɵattribute("aria-selected", ctx_r8.selectedSetting === setting_r10);
     ɵɵadvance(1);
-    ɵɵproperty("ngClass", ctx_r7.getSmeIconClass(setting_r9));
+    ɵɵproperty("ngClass", ctx_r8.getSmeIconClass(setting_r10));
     ɵɵadvance(2);
-    ɵɵclassProp("sme-dirty", !!(setting_r9.form && setting_r9.form.dirty))("sme-pristine", !(setting_r9.form && setting_r9.form.dirty));
-    ɵɵproperty("id", ctx_r7.idBag.option + "-" + j_r5 + "-" + i_r10);
+    ɵɵclassProp("sme-dirty", !!(setting_r10.form && setting_r10.form.dirty))("sme-pristine", !(setting_r10.form && setting_r10.form.dirty));
+    ɵɵproperty("id", ctx_r8.idBag.option + "-" + j_r6 + "-" + i_r11);
     ɵɵadvance(1);
-    ɵɵtextInterpolate(setting_r9.label);
+    ɵɵtextInterpolate(setting_r10.label);
 } }
-function CommonSettingsComponent_li_6_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "li", 9);
-    ɵɵtemplate(1, CommonSettingsComponent_li_6_h3_1_Template, 2, 3, "h3", 10);
-    ɵɵtemplate(2, CommonSettingsComponent_li_6_a_2_Template, 5, 19, "a", 11);
+function CommonSettingsComponent_li_10_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "li", 14);
+    ɵɵtemplate(1, CommonSettingsComponent_li_10_h4_1_Template, 2, 3, "h4", 15);
+    ɵɵtemplate(2, CommonSettingsComponent_li_10_a_2_Template, 5, 19, "a", 16);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const group_r4 = ctx.$implicit;
-    const ctx_r1 = ɵɵnextContext();
+    const group_r5 = ctx.$implicit;
+    const ctx_r2 = ɵɵnextContext();
     ɵɵadvance(1);
-    ɵɵproperty("ngIf", group_r4.group !== ctx_r1.defaultGroup);
+    ɵɵproperty("ngIf", group_r5.group !== ctx_r2.defaultGroup);
     ɵɵadvance(1);
-    ɵɵproperty("ngForOf", group_r4.options);
+    ɵɵproperty("ngForOf", group_r5.options);
 } }
-function CommonSettingsComponent_div_7_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "div", 18);
-    ɵɵlistener("click", function CommonSettingsComponent_div_7_div_1_Template_div_click_0_listener() { ɵɵrestoreView(_r17); const layer_r15 = ctx.$implicit; const ctx_r16 = ɵɵnextContext(2); return ctx_r16.onOverlayClick(layer_r15); });
+function CommonSettingsComponent_div_11_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = ɵɵgetCurrentView();
+    ɵɵelementStart(0, "div", 23);
+    ɵɵlistener("click", function CommonSettingsComponent_div_11_div_1_Template_div_click_0_listener() { ɵɵrestoreView(_r18); const layer_r16 = ctx.$implicit; const ctx_r17 = ɵɵnextContext(2); return ctx_r17.onOverlayClick(layer_r16); });
     ɵɵelementEnd();
 } }
-function CommonSettingsComponent_div_7_Template(rf, ctx) { if (rf & 1) {
+function CommonSettingsComponent_div_11_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "div");
-    ɵɵtemplate(1, CommonSettingsComponent_div_7_div_1_Template, 1, 0, "div", 17);
+    ɵɵtemplate(1, CommonSettingsComponent_div_11_div_1_Template, 1, 0, "div", 22);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = ɵɵnextContext();
+    const ctx_r3 = ɵɵnextContext();
     ɵɵadvance(1);
-    ɵɵproperty("ngForOf", ctx_r2.layers);
+    ɵɵproperty("ngForOf", ctx_r3.layers);
 } }
-function CommonSettingsComponent_sme_settings_header_8_h3_1_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "h3", 20);
+function CommonSettingsComponent_sme_settings_header_12_h3_1_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "h3", 25);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r18 = ɵɵnextContext(2);
-    ɵɵattribute("aria-label", ctx_r18.selectedSetting.label);
+    const ctx_r19 = ɵɵnextContext(2);
+    ɵɵattribute("aria-label", ctx_r19.selectedSetting.label);
     ɵɵadvance(1);
-    ɵɵtextInterpolate1(" ", ctx_r18.selectedSetting.label, "");
+    ɵɵtextInterpolate1(" ", ctx_r19.selectedSetting.label, "");
 } }
-function CommonSettingsComponent_sme_settings_header_8_Template(rf, ctx) { if (rf & 1) {
+function CommonSettingsComponent_sme_settings_header_12_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "sme-settings-header");
-    ɵɵtemplate(1, CommonSettingsComponent_sme_settings_header_8_h3_1_Template, 2, 2, "h3", 19);
+    ɵɵtemplate(1, CommonSettingsComponent_sme_settings_header_12_h3_1_Template, 2, 2, "h3", 24);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r3 = ɵɵnextContext();
+    const ctx_r4 = ɵɵnextContext();
     ɵɵadvance(1);
-    ɵɵproperty("ngIf", !!ctx_r3.selectedSetting);
+    ɵɵproperty("ngIf", !!ctx_r4.selectedSetting);
 } }
-const _c0$1v = ["*"];
+const _c1$P = ["*"];
 /**
  * Container around settings component, handles common settings behavior.
  */
@@ -44791,11 +45011,24 @@ class CommonSettingsComponent extends CoreBaseComponent {
         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 FormGroup({});
+        this.searchTitle = this.strings.MsftSmeShell.Angular.searchPlaceHolder;
     }
     /**
      * The source name to use for logging
@@ -44856,11 +45089,20 @@ class CommonSettingsComponent extends CoreBaseComponent {
                 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);
+        }
     }
     createMenu() {
+        // Before creating the Settings menu, filter the Settings menu to only display
+        // items that matches the filter
+        this.filteredSettings = this.filterSetting();
         const groupTools = [];
         groupTools['default'] = { group: 'default', options: [] };
-        this.settings.forEach((setting) => {
+        this.filteredSettings.forEach((setting) => {
             if (!!!setting.group) {
                 groupTools['default'].options.push(setting);
             }
@@ -45011,33 +45253,81 @@ class CommonSettingsComponent extends CoreBaseComponent {
         }
         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
+     */
+    onSmeRouterLinkActivated(newSetting) {
+        this.selectedSetting = newSetting;
+        if (this.settingsComponent) {
+            this.settingsComponent.updateSelectedSettingTitle(newSetting.label);
+        }
+    }
+    /**
+    * Callback function for the search field
+    */
+    onSearch() {
+        this.searchTextBox.searching = true;
+        setTimeout(() => {
+            this.createMenu();
+            this.searchTextBox.searching = false;
+        });
+    }
+    /**
+    * Filter out the settings Item based on this.filter string and match the title of Settings Items
+    */
+    filterSetting() {
+        const settings = this.settings;
+        if (!this.filter) {
+            return settings;
+        }
+        const localFilter = this.filter.toLocaleLowerCase();
+        return settings.filter(setting => {
+            if (setting.label.toLocaleLowerCase().indexOf(localFilter) > -1) {
+                return true;
+            }
+            return false;
+        });
+    }
 }
 /** @nocollapse */ CommonSettingsComponent.ɵfac = function CommonSettingsComponent_Factory(t) { return new (t || CommonSettingsComponent)(ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(Router), ɵɵdirectiveInject(SettingsFormService), ɵɵdirectiveInject(IterableDiffers), ɵɵdirectiveInject(AppContextService), ɵɵdirectiveInject(RpcShellService)); };
 /** @nocollapse */ CommonSettingsComponent.ɵcmp = ɵɵdefineComponent({ type: CommonSettingsComponent, selectors: [["sme-common-settings"]], viewQuery: function CommonSettingsComponent_Query(rf, ctx) { if (rf & 1) {
+        ɵɵviewQuery(_c0$1v, 1);
         ɵɵviewQuery(SettingsComponent, 1);
     } if (rf & 2) {
         let _t;
+        ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.searchTextBox = _t.first);
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.settingsComponent = _t.first);
-    } }, inputs: { settingsTitle: "settingsTitle", settings: "settings", showHeader: "showHeader", hackShowOverlay: "hackShowOverlay", hackToolHeader: "hackToolHeader", backRoute: "backRoute" }, features: [ɵɵInheritDefinitionFeature, ɵɵ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) { if (rf & 1) {
+    } }, inputs: { settingsTitle: "settingsTitle", settings: "settings", showHeader: "showHeader", hackShowOverlay: "hackShowOverlay", hackToolHeader: "hackToolHeader", backRoute: "backRoute", scrollableSecondaryNav: "scrollableSecondaryNav" }, features: [ɵɵInheritDefinitionFeature, ɵɵ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) {
         ɵɵprojectionDef();
         ɵɵelementStart(0, "sme-settings", 0);
-        ɵɵelementStart(1, "sme-settings-navigation");
-        ɵɵtemplate(2, CommonSettingsComponent_header_2_Template, 3, 2, "header", 1);
-        ɵɵelementStart(3, "div", 2);
-        ɵɵelementStart(4, "nav", 3);
-        ɵɵelementStart(5, "ul", 4);
-        ɵɵtemplate(6, CommonSettingsComponent_li_6_Template, 3, 2, "li", 5);
+        ɵɵelementStart(1, "sme-settings-navigation", 1);
+        ɵɵtemplate(2, CommonSettingsComponent_header_2_Template, 3, 2, "header", 2);
+        ɵɵelementStart(3, "div", 3);
+        ɵɵelementStart(4, "div", 4);
+        ɵɵelementStart(5, "form", 5);
+        ɵɵelementStart(6, "sme-form-field", 6, 7);
+        ɵɵ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(); });
+        ɵɵelementEnd();
         ɵɵelementEnd();
         ɵɵelementEnd();
+        ɵɵelementStart(8, "nav", 8);
+        ɵɵelementStart(9, "ul", 9);
+        ɵɵtemplate(10, CommonSettingsComponent_li_10_Template, 3, 2, "li", 10);
         ɵɵelementEnd();
-        ɵɵtemplate(7, CommonSettingsComponent_div_7_Template, 2, 1, "div", 6);
         ɵɵelementEnd();
-        ɵɵtemplate(8, CommonSettingsComponent_sme_settings_header_8_Template, 2, 1, "sme-settings-header", 6);
-        ɵɵelementStart(9, "sme-settings-content");
-        ɵɵelement(10, "router-outlet");
         ɵɵelementEnd();
-        ɵɵelementStart(11, "sme-settings-footer");
-        ɵɵprojection(12);
+        ɵɵtemplate(11, CommonSettingsComponent_div_11_Template, 2, 1, "div", 11);
+        ɵɵelementEnd();
+        ɵɵtemplate(12, CommonSettingsComponent_sme_settings_header_12_Template, 2, 1, "sme-settings-header", 11);
+        ɵɵelementStart(13, "sme-settings-content");
+        ɵɵelement(14, "router-outlet");
+        ɵɵelementEnd();
+        ɵɵelementStart(15, "sme-settings-footer");
+        ɵɵprojection(16);
         ɵɵelementEnd();
         ɵɵelementEnd();
     } if (rf & 2) {
@@ -45047,6 +45337,10 @@ class CommonSettingsComponent extends CoreBaseComponent {
         ɵɵadvance(1);
         ɵɵattribute("aria-label", ctx.settingsTitle);
         ɵɵadvance(3);
+        ɵɵproperty("ngModel", ctx.filter)("placeholder", ctx.searchTitle)("autofocus", true)("count", ctx.filteredSettings ? ctx.filteredSettings.length : 0);
+        ɵɵadvance(2);
+        ɵɵproperty("ngClass", ctx.scrollableSecondaryNav ? "sme-position-flex-auto sme-arrange-overflow-auto-y" : "");
+        ɵɵadvance(2);
         ɵɵproperty("ngForOf", ctx.groupTools);
         ɵɵadvance(1);
         ɵɵproperty("ngIf", ctx.hackShowOverlay);
@@ -45059,7 +45353,10 @@ class CommonSettingsComponent extends CoreBaseComponent {
                 selector: 'sme-common-settings',
                 templateUrl: './common-settings.component.html'
             }]
-    }], function () { return [{ type: Injector }, { type: Router }, { type: SettingsFormService }, { type: IterableDiffers }, { type: AppContextService }, { type: RpcShellService }]; }, { settingsTitle: [{
+    }], function () { return [{ type: Injector }, { type: Router }, { type: SettingsFormService }, { type: IterableDiffers }, { type: AppContextService }, { type: RpcShellService }]; }, { searchTextBox: [{
+            type: ViewChild,
+            args: ['searchTextBox']
+        }], settingsTitle: [{
             type: Input
         }], settings: [{
             type: Input
@@ -45071,13 +45368,15 @@ class CommonSettingsComponent extends CoreBaseComponent {
             type: Input
         }], backRoute: [{
             type: Input
+        }], scrollableSecondaryNav: [{
+            type: Input
         }], settingsComponent: [{
             type: ViewChild,
             args: [SettingsComponent]
         }] }); })();
 
 const _c0$1w = [[["sme-settings-header"]], [["sme-settings-content"]], [["sme-settings-footer"]]];
-const _c1$P = ["sme-settings-header", "sme-settings-content", "sme-settings-footer"];
+const _c1$Q = ["sme-settings-header", "sme-settings-content", "sme-settings-footer"];
 class SettingsPageComponent extends CoreBaseComponent {
     constructor(injector) {
         super(injector);
@@ -45098,7 +45397,7 @@ class SettingsPageComponent extends CoreBaseComponent {
     }
 }
 /** @nocollapse */ SettingsPageComponent.ɵfac = function SettingsPageComponent_Factory(t) { return new (t || SettingsPageComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ SettingsPageComponent.ɵcmp = ɵɵdefineComponent({ type: SettingsPageComponent, selectors: [["sme-settings-page"]], features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$P, decls: 3, vars: 0, template: function SettingsPageComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ SettingsPageComponent.ɵcmp = ɵɵdefineComponent({ type: SettingsPageComponent, selectors: [["sme-settings-page"]], features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$Q, decls: 3, vars: 0, template: function SettingsPageComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵprojectionDef(_c0$1w);
         ɵɵprojection(0);
         ɵɵprojection(1, 1);
@@ -45332,7 +45631,9 @@ class SettingsModule {
             CommonModule,
             HeaderModule,
             LayoutModule,
-            TooltipModule
+            TooltipModule,
+            FormsModule,
+            SmeFormsModule
         ]] });
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵɵsetNgModuleScope(SettingsModule, { declarations: [SettingsComponent,
         SettingsFormDirective,
@@ -45346,7 +45647,9 @@ class SettingsModule {
         CommonModule,
         HeaderModule,
         LayoutModule,
-        TooltipModule], exports: [SettingsComponent,
+        TooltipModule,
+        FormsModule,
+        SmeFormsModule], exports: [SettingsComponent,
         SettingsFormDirective,
         SettingsFooterComponent,
         SettingsHeaderComponent,
@@ -45363,7 +45666,9 @@ class SettingsModule {
                     CommonModule,
                     HeaderModule,
                     LayoutModule,
-                    TooltipModule
+                    TooltipModule,
+                    FormsModule,
+                    SmeFormsModule
                 ],
                 exports: [
                     SettingsComponent,
@@ -45392,7 +45697,7 @@ class SettingsModule {
             }]
     }], null, null); })();
 ɵɵsetComponentScope(CommonSettingsComponent, [SettingsComponent,
-    SettingsNavigationComponent, NgIf, NgForOf, TooltipDirective, RouterLinkWithHref, RouterLinkActive, SmeRouterLinkDirective, NgClass, SettingsHeaderComponent,
+    SettingsNavigationComponent, NgIf, ɵangular_packages_forms_forms_ba, NgControlStatusGroup, NgForm, FormFieldAccessorDirective, FormFieldValidatorDirective, SearchFormFieldComponent, NgControlStatus, NgModel, NgClass, NgForOf, TooltipDirective, RouterLinkWithHref, RouterLinkActive, SmeRouterLinkDirective, SettingsHeaderComponent,
     SettingsContentComponent, RouterOutlet, SettingsFooterComponent], []);
 
 // tslint:disable-next-line: directive-class-suffix
@@ -46292,34 +46597,29 @@ function WizardComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵadvance(1);
     ɵɵproperty("ngIf", ctx_r0.isInPreview);
 } }
-const _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 }; };
-const _c1$Q = function (a0) { return { "sme-icon sme-icon-accept sme-icon-size-xxs": a0 }; };
+const _c0$1E = function (a0, a1, a2) { return { "sme-wizard-stage-completed": a0, "sme-wizard-stage-clicked": a1, "sme-wizard-stage-active": a2 }; };
+const _c1$R = function (a0) { return { "sme-icon sme-icon-accept sme-icon-size-xxs": a0 }; };
 const _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) { if (rf & 1) {
+function WizardComponent_div_2_button_1_Template(rf, ctx) { if (rf & 1) {
     const _r11 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "li", 16);
-    ɵɵlistener("click", function WizardComponent_ul_2_li_1_Template_li_click_0_listener() { ɵɵrestoreView(_r11); const val_r9 = ctx.index; const ctx_r10 = ɵɵnextContext(2); return ctx_r10.onStageClick(val_r9); });
-    ɵɵelementStart(1, "button", 17);
-    ɵɵelementStart(2, "span", 18);
-    ɵɵtext(3);
-    ɵɵelementEnd();
-    ɵɵelementStart(4, "span", 19);
-    ɵɵtext(5);
+    ɵɵelementStart(0, "button", 16);
+    ɵɵlistener("click", function WizardComponent_div_2_button_1_Template_button_click_0_listener() { ɵɵrestoreView(_r11); const val_r9 = ctx.index; const ctx_r10 = ɵɵnextContext(2); return ctx_r10.onStageClick(val_r9); });
+    ɵɵelementStart(1, "span", 17);
+    ɵɵtext(2);
     ɵɵelementEnd();
+    ɵɵelementStart(3, "span", 18);
+    ɵɵtext(4);
     ɵɵelementEnd();
     ɵɵelementEnd();
 } if (rf & 2) {
     const stage_r8 = ctx.$implicit;
     const val_r9 = ctx.index;
     const ctx_r7 = ɵɵnextContext(2);
-    ɵɵproperty("ngClass", ɵɵpureFunction4(17, _c0$1E, stage_r8.completed, val_r9 === ctx_r7.stagesArrayIndex, stage_r8.active, val_r9 !== ctx_r7.stagesArrayIndex));
-    ɵɵattribute("aria-selected", val_r9 === ctx_r7.stagesArrayIndex);
-    ɵɵadvance(1);
-    ɵɵclassProp("sme-active", val_r9 === ctx_r7.stagesArrayIndex)("sme-selected", val_r9 === ctx_r7.stagesArrayIndex)("sme-wizard-stage-focus", val_r9 === ctx_r7.stagesArrayIndex);
-    ɵɵ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));
+    ɵɵ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);
+    ɵɵ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", ɵɵpureFunction3(18, _c0$1E, stage_r8.completed, val_r9 === ctx_r7.stagesArrayIndex, stage_r8.active));
     ɵɵattribute("aria-label", stage_r8.name);
     ɵɵadvance(1);
-    ɵɵproperty("ngClass", ɵɵpureFunction1(22, _c1$Q, stage_r8.completed));
+    ɵɵproperty("ngClass", ɵɵpureFunction1(22, _c1$R, stage_r8.completed));
     ɵɵadvance(1);
     ɵɵtextInterpolate1(" ", !stage_r8.completed ? val_r9 + 1 : "", " ");
     ɵɵadvance(1);
@@ -46327,17 +46627,17 @@ function WizardComponent_ul_2_li_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵadvance(1);
     ɵɵtextInterpolate1(" ", stage_r8.name, " ");
 } }
-function WizardComponent_ul_2_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "ul", 14);
-    ɵɵtemplate(1, WizardComponent_ul_2_li_1_Template, 6, 28, "li", 15);
+function WizardComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "div", 14);
+    ɵɵtemplate(1, WizardComponent_div_2_button_1_Template, 5, 28, "button", 15);
     ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = ɵɵnextContext();
     ɵɵadvance(1);
     ɵɵproperty("ngForOf", ctx_r1.stages);
 } }
-function WizardComponent_div_4_ul_1_li_1_span_4_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "span", 31);
+function WizardComponent_div_4_div_1_button_1_span_3_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "span", 29);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
@@ -46345,52 +46645,47 @@ function WizardComponent_div_4_ul_1_li_1_span_4_Template(rf, ctx) { if (rf & 1)
     ɵɵadvance(1);
     ɵɵtextInterpolate(step_r14.name);
 } }
-const _c3$c = function (a0) { return { "sme-scheme-nav-list-item sme-active sme-color-base-5": a0 }; };
-const _c4$8 = function (a0) { return { "sme-step-active": a0 }; };
-function WizardComponent_div_4_ul_1_li_1_Template(rf, ctx) { if (rf & 1) {
+const _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) {
     const _r19 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "li", 27);
-    ɵɵlistener("click", function WizardComponent_div_4_ul_1_li_1_Template_li_click_0_listener() { ɵɵrestoreView(_r19); const index_r15 = ctx.index; const ctx_r18 = ɵɵnextContext(3); return ctx_r18.onStepClick(index_r15); });
-    ɵɵelementStart(1, "button", 28);
-    ɵɵelementStart(2, "span", 29);
-    ɵɵtext(3);
-    ɵɵelementEnd();
-    ɵɵtemplate(4, WizardComponent_div_4_ul_1_li_1_span_4_Template, 2, 1, "span", 30);
+    ɵɵelementStart(0, "button", 26);
+    ɵɵlistener("click", function WizardComponent_div_4_div_1_button_1_Template_button_click_0_listener() { ɵɵrestoreView(_r19); const index_r15 = ctx.index; const ctx_r18 = ɵɵnextContext(3); return ctx_r18.onStepClick(index_r15); });
+    ɵɵelementStart(1, "span", 27);
+    ɵɵtext(2);
     ɵɵelementEnd();
+    ɵɵtemplate(3, WizardComponent_div_4_div_1_button_1_span_3_Template, 2, 1, "span", 28);
     ɵɵelementEnd();
 } if (rf & 2) {
     const step_r14 = ctx.$implicit;
     const index_r15 = ctx.index;
     const ctx_r13 = ɵɵnextContext(3);
-    ɵɵproperty("ngClass", ɵɵpureFunction1(12, _c3$c, index_r15 === ctx_r13.stepIndex))("title", ctx_r13.isExpanded ? null : step_r14.name);
-    ɵɵattribute("aria-selected", index_r15 === ctx_r13.stepIndex)("aria-label", ctx_r13.isExpanded ? null : step_r14.name);
-    ɵɵadvance(1);
-    ɵɵproperty("ngClass", ɵɵ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));
+    ɵɵproperty("ngClass", ɵɵ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);
+    ɵɵattribute("aria-label", ctx_r13.isExpanded ? null : step_r14.name);
     ɵɵadvance(2);
     ɵɵtextInterpolate2("", ctx_r13.stagesArrayIndex + 1, ".", index_r15 + 1, "");
     ɵɵadvance(1);
     ɵɵproperty("ngIf", ctx_r13.isExpanded);
 } }
-const _c5$4 = function (a0) { return { "sme-layout-minwidth-sm": a0 }; };
-function WizardComponent_div_4_ul_1_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "ul", 25);
-    ɵɵtemplate(1, WizardComponent_div_4_ul_1_li_1_Template, 5, 16, "li", 26);
+const _c4$8 = function (a0) { return { "sme-layout-minwidth-sm": a0 }; };
+function WizardComponent_div_4_div_1_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "div", 24);
+    ɵɵtemplate(1, WizardComponent_div_4_div_1_button_1_Template, 4, 12, "button", 25);
     ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r12 = ɵɵnextContext(2);
-    ɵɵproperty("ngClass", ɵɵpureFunction1(2, _c5$4, ctx_r12.isExpanded));
+    ɵɵproperty("ngClass", ɵɵpureFunction1(2, _c4$8, ctx_r12.isExpanded));
     ɵɵadvance(1);
     ɵɵproperty("ngForOf", ctx_r12.getStepsForStage());
 } }
-const _c6$3 = function (a0, a1) { return { "sme-icon-chevronLeft": a0, "sme-icon-chevronRight": a1 }; };
+const _c5$4 = function (a0, a1) { return { "sme-icon-chevronLeft": a0, "sme-icon-chevronRight": a1 }; };
 function WizardComponent_div_4_Template(rf, ctx) { if (rf & 1) {
     const _r21 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "div", 20);
-    ɵɵtemplate(1, WizardComponent_div_4_ul_1_Template, 2, 4, "ul", 21);
-    ɵɵelementStart(2, "div", 22);
-    ɵɵelementStart(3, "button", 23);
+    ɵɵelementStart(0, "div", 19);
+    ɵɵtemplate(1, WizardComponent_div_4_div_1_Template, 2, 4, "div", 20);
+    ɵɵelementStart(2, "div", 21);
+    ɵɵelementStart(3, "button", 22);
     ɵɵlistener("click", function WizardComponent_div_4_Template_button_click_3_listener() { ɵɵrestoreView(_r21); const ctx_r20 = ɵɵnextContext(); return ctx_r20.togglePane(); });
-    ɵɵelement(4, "span", 24);
+    ɵɵelement(4, "span", 23);
     ɵɵelementEnd();
     ɵɵelementEnd();
     ɵɵelementEnd();
@@ -46402,11 +46697,11 @@ function WizardComponent_div_4_Template(rf, ctx) { if (rf & 1) {
     ɵɵproperty("title", ctx_r2.isExpanded ? ctx_r2.strings.MsftSmeShell.Angular.Wizard.collapseStepsList : ctx_r2.strings.MsftSmeShell.Angular.Wizard.expandStepsList);
     ɵɵ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);
     ɵɵadvance(1);
-    ɵɵproperty("ngClass", ɵɵpureFunction2(5, _c6$3, ctx_r2.isExpanded, !ctx_r2.isExpanded));
+    ɵɵproperty("ngClass", ɵɵpureFunction2(5, _c5$4, ctx_r2.isExpanded, !ctx_r2.isExpanded));
 } }
 function WizardComponent_div_6_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "div");
-    ɵɵelement(1, "sme-page-alert-bar", 32);
+    ɵɵelement(1, "sme-page-alert-bar", 30);
     ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = ɵɵnextContext();
@@ -46414,29 +46709,29 @@ function WizardComponent_div_6_Template(rf, ctx) { if (rf & 1) {
     ɵɵproperty("alert", ctx_r3.alert);
 } }
 function WizardComponent_div_9_div_6_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "div", 40);
-    ɵɵelement(1, "sme-loading-wheel", 41);
+    ɵɵelementStart(0, "div", 38);
+    ɵɵelement(1, "sme-loading-wheel", 39);
     ɵɵelementEnd();
 } }
 function WizardComponent_div_9_Template(rf, ctx) { if (rf & 1) {
     const _r24 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "div", 33);
-    ɵɵelementStart(1, "div", 34);
-    ɵɵelementStart(2, "button", 35);
+    ɵɵelementStart(0, "div", 31);
+    ɵɵelementStart(1, "div", 32);
+    ɵɵelementStart(2, "button", 33);
     ɵɵlistener("click", function WizardComponent_div_9_Template_button_click_2_listener() { ɵɵrestoreView(_r24); const ctx_r23 = ɵɵnextContext(); return ctx_r23.onBackClick(); });
     ɵɵtext(3);
     ɵɵelementEnd();
-    ɵɵelementStart(4, "button", 36);
+    ɵɵelementStart(4, "button", 34);
     ɵɵlistener("click", function WizardComponent_div_9_Template_button_click_4_listener() { ɵɵrestoreView(_r24); const ctx_r25 = ɵɵnextContext(); return ctx_r25.onNextClick(); });
     ɵɵtext(5);
     ɵɵelementEnd();
-    ɵɵtemplate(6, WizardComponent_div_9_div_6_Template, 2, 0, "div", 37);
+    ɵɵtemplate(6, WizardComponent_div_9_div_6_Template, 2, 0, "div", 35);
     ɵɵelementEnd();
-    ɵɵelementStart(7, "button", 38);
+    ɵɵelementStart(7, "button", 36);
     ɵɵlistener("click", function WizardComponent_div_9_Template_button_click_7_listener() { ɵɵrestoreView(_r24); const ctx_r26 = ɵɵnextContext(); return ctx_r26.onSkipClick(); });
     ɵɵtext(8);
     ɵɵelementEnd();
-    ɵɵelementStart(9, "button", 39);
+    ɵɵelementStart(9, "button", 37);
     ɵɵlistener("click", function WizardComponent_div_9_Template_button_click_9_listener() { ɵɵrestoreView(_r24); const ctx_r27 = ɵɵnextContext(); return ctx_r27.onExitClick(); });
     ɵɵtext(10);
     ɵɵelementEnd();
@@ -46466,7 +46761,7 @@ function WizardComponent_div_9_Template(rf, ctx) { if (rf & 1) {
     ɵɵadvance(1);
     ɵɵtextInterpolate(ctx_r5.exitButtonText());
 } }
-const _c7$2 = function (a0) { return { "sme-padding-inset-lg": a0 }; };
+const _c6$3 = function (a0) { return { "sme-padding-inset-lg": a0 }; };
 /**
  * Whatever state the wizard is in
  */
@@ -47143,10 +47438,10 @@ class WizardComponent extends DynamicComponentBase {
     }
 }
 /** @nocollapse */ WizardComponent.ɵfac = function WizardComponent_Factory(t) { return new (t || WizardComponent)(ɵɵdirectiveInject(AppContextService), ɵɵdirectiveInject(ChangeDetectorRef), ɵɵdirectiveInject(ComponentFactoryResolver)); };
-/** @nocollapse */ WizardComponent.ɵcmp = ɵɵ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: [ɵɵ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) { if (rf & 1) {
+/** @nocollapse */ WizardComponent.ɵcmp = ɵɵ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: [ɵɵ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) {
         ɵɵelementStart(0, "div", 0);
         ɵɵtemplate(1, WizardComponent_div_1_Template, 4, 3, "div", 1);
-        ɵɵtemplate(2, WizardComponent_ul_2_Template, 2, 1, "ul", 2);
+        ɵɵtemplate(2, WizardComponent_div_2_Template, 2, 1, "div", 2);
         ɵɵelementStart(3, "div", 3);
         ɵɵtemplate(4, WizardComponent_div_4_Template, 5, 8, "div", 4);
         ɵɵelementStart(5, "div", 5);
@@ -47164,12 +47459,12 @@ class WizardComponent extends DynamicComponentBase {
         ɵɵadvance(2);
         ɵɵproperty("ngIf", !ctx.wizardIsFinished && !ctx.hideStepsListSidePane);
         ɵɵadvance(1);
-        ɵɵproperty("ngClass", ɵɵpureFunction1(6, _c7$2, ctx.currentStepComponent.padContents));
+        ɵɵproperty("ngClass", ɵɵpureFunction1(6, _c6$3, ctx.currentStepComponent.padContents));
         ɵɵadvance(1);
         ɵɵproperty("ngIf", ctx.currentStepComponent.disabled);
         ɵɵadvance(3);
         ɵɵproperty("ngIf", !ctx.wizardIsFinished);
-    } }, directives: [TelemetryDirective, NgIf, NgClass, PreviewBadgeComponent, NgForOf, TooltipDirective, PageAlertBarComponent, LoadingWheelComponent], encapsulation: 2 });
+    } }, directives: [NgIf, NgClass, PreviewBadgeComponent, NgForOf, TelemetryDirective, TooltipDirective, PageAlertBarComponent, LoadingWheelComponent], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(WizardComponent, [{
         type: Component,
         args: [{