@microsoft/windows-admin-center-sdk 2.541.1 → 2.552.0

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

@@ -9284,6 +9284,10 @@ class LayoutComponent extends CoreBaseComponent {
             this.resetFlex();
         }
         this.layoutDrivenType = layoutDrivenType;
+        // The vertical space gap is determined by the itemVerticalSpace parameter.
+        // For the defaultMode, it is controlled by the padding bottom of the grid item.
+        // For the responsive manager driven mode, it is controlled by the grid-gap.
+        this.hostElement.nativeElement.style.gridGap = layoutDrivenType === LayoutDrivenType.ResponsiveWindowManager ? `${this.itemVerticalSpace}px 0px` : 'unset';
     }
     getTotalColumnSpan(layoutItems) {
         this.columnSpanTotal = 0;
@@ -9369,11 +9373,12 @@ class LayoutComponent extends CoreBaseComponent {
      * @param availableLayoutWidthInPixel available width in pixel horizontally.
      */
     configDrivenCalculationDefault(layoutItems, availableLayoutWidthInPixel) {
+        var _a;
         const defaultWidthForLayoutItemInPixel = 200;
         let widthUsedInPixel = 0;
         let percentageSoFar = 0;
         for (let i = 0; i < layoutItems.length; i++) {
-            if (layoutItems[i].customConfig.width) {
+            if ((_a = layoutItems[i].customConfig) === null || _a === void 0 ? void 0 : _a.width) {
                 const widthObject = layoutItems[i].customConfig.width;
                 const remainingWidthInPixel = availableLayoutWidthInPixel - widthUsedInPixel;
                 if (widthObject.type === LayoutItemConfigPropertyWidthType.Percentage) {
@@ -9496,6 +9501,9 @@ class LayoutComponent extends CoreBaseComponent {
     updateCustomConfig(layoutItems) {
         const widthType = [];
         for (let i = 0; i < layoutItems.length; i++) {
+            if (!this.currentLayoutItemConfig[i]) {
+                continue;
+            }
             layoutItems[i].customConfig = this.currentLayoutItemConfig[i];
             if (!widthType.includes(layoutItems[i].customConfig.width.type)) {
                 widthType.push(layoutItems[i].customConfig.width.type);
@@ -31865,6 +31873,10 @@ class PivotComponent extends CoreBaseComponent {
          * The selected tab changed event
          */
         this.selectionChange = new EventEmitter();
+        /**
+         * The selected tab changed event triggered by click or keyboard navigation.
+         */
+        this.selectionChangeByClick = new EventEmitter();
         /**
          * Implementation of the Layout interface
          */
@@ -31948,6 +31960,14 @@ class PivotComponent extends CoreBaseComponent {
     refresh(shouldEmit = false, byWindowSize = false) {
         this.updatePivotTabs(shouldEmit, byWindowSize);
     }
+    /**
+     * Selects a tab by clicking or keyboard navigation.
+     * @param tab The tab to select by clicking or keyboard navigation.
+     */
+    onClick(tab) {
+        this.select(tab);
+        this.selectionChangeByClick.emit(tab);
+    }
     /**
      * Selects a tab
      * @param tab The tab to select
@@ -32012,6 +32032,28 @@ class PivotComponent extends CoreBaseComponent {
         }
         return undefined;
     }
+    /**
+     * It gets the label from the pivot tab component.
+     * @returns array of labels representing the pivot tabs.
+     */
+    getLabels() {
+        if (!this.tabs || !this.tabs.toArray()) {
+            return [];
+        }
+        return this.tabs.toArray().map((a) => a.label);
+    }
+    /**
+     * It handles the selection of pivot tab by label.
+     * @param label the label for pivot tab to be selected.
+     * @returns void.
+     */
+    selectTabByLabel(label) {
+        const tabComponent = this.getPivotTabComponentByLabel(label);
+        if (!tabComponent) {
+            return;
+        }
+        this.select(tabComponent);
+    }
     /**
      * Creates the idBag used by this component to store unique element ids.
      * id values will be assigned by the @see BaseComponent super class.
@@ -32029,6 +32071,22 @@ class PivotComponent extends CoreBaseComponent {
             'sme-pivot'
         ]);
     }
+    /**
+     * Gets the pivot tab component by pivot tab label.
+     * @param label the label string.
+     * @returns the pivot tab component with the specific label.
+     */
+    getPivotTabComponentByLabel(label) {
+        if (!this.tabs || !this.tabs.toArray() || !this.tabs.toArray().length) {
+            return;
+        }
+        const tabs = this.tabs.toArray();
+        for (let i = 0; i < tabs.length; i++) {
+            if (tabs[i].label === label) {
+                return tabs[i];
+            }
+        }
+    }
     /**
      * Main rendering functionality for the pivot tab
      * @param shouldEmit It indicates whether the layout changed event should be fired.
@@ -32090,7 +32148,9 @@ class PivotComponent extends CoreBaseComponent {
                             isMoreButtonWidthAdded = true;
                             // Pop the prev visible tab due to not compatible after adding the 'More' dropdown.
                             // Guarantee that at least one tab will be shown at minimum.
-                            if (this.selection && this.visibleTabs.length > 1) {
+                            // If the prev item is selected, should not backtracking pop.
+                            if (this.selection && this.visibleTabs.length > 1 &&
+                                this.selection !== this.visibleTabs[this.visibleTabs.length - 1]) {
                                 const poppedTab = this.visibleTabs.pop();
                                 this.trayTabs.push(poppedTab);
                                 currentFill -= prevWidth;
@@ -32129,7 +32189,7 @@ class PivotComponent extends CoreBaseComponent {
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.pivotContents = _t);
     } }, hostVars: 2, hostBindings: function PivotComponent_HostBindings(rf, ctx) { if (rf & 2) {
         ɵɵclassProp("sme-disabled", ctx.disabled);
-    } }, inputs: { selection: "selection", switchTabByShowHide: "switchTabByShowHide", headerText: "headerText", alignHeader: "alignHeader", alignTabs: "alignTabs", noLeftPadding: "noLeftPadding", disabled: "disabled" }, outputs: { selectionChange: "selectionChange", layoutChanged: "layoutChanged", windowBreakpointChanged: "windowBreakpointChanged" }, features: [ɵɵProvidersFeature([
+    } }, inputs: { selection: "selection", switchTabByShowHide: "switchTabByShowHide", headerText: "headerText", alignHeader: "alignHeader", alignTabs: "alignTabs", noLeftPadding: "noLeftPadding", disabled: "disabled" }, outputs: { selectionChange: "selectionChange", selectionChangeByClick: "selectionChangeByClick", layoutChanged: "layoutChanged", windowBreakpointChanged: "windowBreakpointChanged" }, features: [ɵɵProvidersFeature([
             { provide: SME_LAYOUT_PROVIDER, useExisting: forwardRef((() => PivotComponent)) },
             { provide: SME_PIVOT_TAB_CONTAINER_PROVIDER, useExisting: forwardRef((() => PivotComponent)) }
         ]), ɵɵInheritDefinitionFeature], decls: 17, vars: 20, consts: [[1, "sme-arrange-stack-h"], ["class", "sme-position-flex-auto", 4, "ngIf"], ["role", "tablist"], [4, "ngFor", "ngForOf"], ["role", "menu"], ["role", "presentation", 1, "sme-position-flex-none"], ["dropDown", ""], ["type", "button", "role", "menuitem", "aria-haspopup", "true", 1, "sme-button-trigger", "sme-layout-action-bar-item-height", "sme-button-auto-width", "sme-dropdown-toggle"], ["dropDownButton", ""], [1, "sme-icon", "sme-icon-size-xxs", "sme-icon-chevronDown", "sme-margin-left-xs"], ["role", "menu", 1, "sme-dropdown-content", "sme-arrange-stack-v", "sme-position-stretch-h"], ["class", "sme-arrange-stack-h", 4, "ngFor", "ngForOf"], ["role", "tabpanel", 3, "id", "sme-layout-none", 4, "ngIf"], [4, "ngIf"], [1, "sme-position-flex-auto"], ["role", "tab", 3, "routerLink", "disabled", "sme-disabled", "routerLinkActiveOptions", "sme-active", "smeRouterLinkActivated", 4, "ngIf"], ["tabindex", "0", "role", "tab", 3, "disabled", "sme-disabled", "sme-active", "click", 4, "ngIf"], ["role", "tab", 3, "routerLink", "disabled", "routerLinkActiveOptions", "smeRouterLinkActivated"], [3, "class", 4, "ngIf"], ["tabindex", "0", "role", "tab", 3, "disabled", "click"], ["role", "menuitem", "class", "sme-position-stretch-h", 3, "routerLink", "sme-disabled", "routerLinkActiveOptions", "smeRouterLinkActivated", 4, "ngIf"], ["role", "menuitem", "class", "sme-position-stretch-h", 3, "sme-disabled", "click", 4, "ngIf"], ["role", "menuitem", 1, "sme-position-stretch-h", 3, "routerLink", "routerLinkActiveOptions", "smeRouterLinkActivated"], ["role", "menuitem", 1, "sme-position-stretch-h", 3, "click"], ["role", "tabpanel", 3, "id"], ["pivotContents", ""], [4, "ngTemplateOutlet"]], template: function PivotComponent_Template(rf, ctx) { if (rf & 1) {
@@ -32158,10 +32218,10 @@ class PivotComponent extends CoreBaseComponent {
         ɵɵtemplate(16, PivotComponent_ng_container_16_Template, 2, 1, "ng-container", 13);
     } if (rf & 2) {
         const _r2 = ɵɵreference(7);
-        ɵɵstyleProp("padding-left", ctx.noLeftPadding ? 0 : null);
         ɵɵadvance(1);
         ɵɵproperty("ngIf", ctx.headerText);
         ɵɵadvance(1);
+        ɵɵstyleProp("padding-left", ctx.noLeftPadding ? 0 : null);
         ɵɵclassProp("sme-pivot-reverse-header", ctx.alignTabs === "right")("sme-position-stretch-h", !ctx.headerText);
         ɵɵadvance(2);
         ɵɵproperty("ngForOf", ctx.visibleTabs);
@@ -32236,6 +32296,8 @@ __decorate([
             type: Input
         }], selectionChange: [{
             type: Output
+        }], selectionChangeByClick: [{
+            type: Output
         }], layoutChanged: [{
             type: Output
         }], windowBreakpointChanged: [{
@@ -38081,6 +38143,256 @@ function ReactiveForm() {
     });
 }
 
+class ContextDropdownComponent {
+    constructor() {
+        this.actions = [];
+    }
+}
+/** @nocollapse */ ContextDropdownComponent.ɵfac = function ContextDropdownComponent_Factory(t) { return new (t || ContextDropdownComponent)(); };
+/** @nocollapse */ ContextDropdownComponent.ɵcmp = ɵɵdefineComponent({ type: ContextDropdownComponent, selectors: [["sme-context-dropdown"]], inputs: { actionGroupTitle: "actionGroupTitle", actions: "actions" }, decls: 8, vars: 3, consts: [["role", "presentation", 1, "sme-position-flex-none", 3, "displayToSide"], ["dropDown", ""], ["role", "menuitem", "type", "button", 1, "sme-button-trigger", "sme-layout-action-bar-item-height", "sme-button-auto-width", "sme-button-align-left", "sme-position-stretch-h", "sme-dropdown-toggle"], ["dropDownButton", ""], [1, "sme-icon", "sme-icon-size-xxs", "sme-icon-chevronRight", "sme-position-right-inline"], ["role", "menu", 1, "sme-dropdown-content", 3, "actions"]], template: function ContextDropdownComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵelementStart(0, "sme-dropdown", 0, 1);
+        ɵɵelementStart(2, "button", 2, 3);
+        ɵɵelementStart(4, "span");
+        ɵɵtext(5);
+        ɵɵelementEnd();
+        ɵɵelement(6, "span", 4);
+        ɵɵelementEnd();
+        ɵɵelement(7, "sme-action-menu", 5);
+        ɵɵelementEnd();
+    } if (rf & 2) {
+        ɵɵproperty("displayToSide", true);
+        ɵɵadvance(5);
+        ɵɵtextInterpolate(ctx.actionGroupTitle);
+        ɵɵadvance(2);
+        ɵɵproperty("actions", ctx.actions);
+    } }, directives: [DropdownComponent, ActionMenuComponent], encapsulation: 2 });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(ContextDropdownComponent, [{
+        type: Component,
+        args: [{
+                selector: 'sme-context-dropdown',
+                templateUrl: './context-dropdown.component.html'
+            }]
+    }], null, { actionGroupTitle: [{
+            type: Input
+        }], actions: [{
+            type: Input
+        }] }); })();
+
+function ContextMenuComponent_sme_dropdown_0_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "sme-dropdown", 1);
+    ɵɵelementStart(1, "div", 2);
+    ɵɵprojection(2);
+    ɵɵelement(3, "sme-action-menu", 3, 4);
+    ɵɵelementEnd();
+    ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = ɵɵnextContext();
+    ɵɵproperty("isContextMenu", true)("ngStyle", ctx_r0.getMenuPosition());
+    ɵɵadvance(3);
+    ɵɵproperty("actions", ctx_r0.contextMenuItems)("target", ctx_r0.target);
+} }
+const _c0$1a = ["*"];
+/**
+ *
+ * @smeDoc {@label Context-Menu @id sme-context-menu}
+ *
+ * @overview
+ * @file {@filepath ./examples/context-menu-overview.md}
+ *
+ * @example {@label Basic Usage @id sme-dev-guide-controls-context-menu}
+ * @file {@filename component.html @filepath ./examples/context-menu-example.component.html}
+ * @file {@filename component.ts @filepath ./examples/context-menu-example.component.ts}
+ *
+ * @example {@label Nested Actions Usage @id sme-nested-actions-guide}
+ * @file {@filename component.html @filepath ./examples/nested-context-menu-example.component.html}
+ * @file {@filename component.ts @filepath ./examples/context-menu-example.component.ts}
+ */
+class ContextMenuComponent extends CoreBaseComponent {
+    constructor(injector, element) {
+        super(injector);
+        this.element = element;
+        /**
+         * Gets the items to display in the contextmenu -they should of type actionItem
+        */
+        this.contextMenuItems = [];
+        /**
+         *Takes in a function that is executed once an actionItem is clicked
+        */
+        this.contextMenuItemClick = new EventEmitter();
+        /**
+         * Value that toggles the contextmenu
+        */
+        this.isOpen = false;
+    }
+    /**
+     * The source name to use for logging
+     */
+    get logSourceName() {
+        return 'ContextMenuComponent';
+    }
+    /**
+     * Function that does the positioning of the contextmenu depending on the right-click
+    */
+    getMenuPosition() {
+        if (this.mouseEventData) {
+            return {
+                top: `${this.mouseEventData.clientY}px`,
+                left: `${this.mouseEventData.clientX}px`
+            };
+        }
+    }
+    /**
+     * Function that adds focus to the element when using the keyboard
+    */
+    autoFocus() {
+        if (this.element.nativeElement) {
+            const firstFocusable = Dom.getFirstFocusableDescendent(this.element.nativeElement);
+            if (firstFocusable) {
+                firstFocusable.focus();
+            }
+        }
+    }
+}
+/** @nocollapse */ ContextMenuComponent.ɵfac = function ContextMenuComponent_Factory(t) { return new (t || ContextMenuComponent)(ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(ElementRef)); };
+/** @nocollapse */ ContextMenuComponent.ɵcmp = ɵɵdefineComponent({ type: ContextMenuComponent, selectors: [["sme-context-menu"]], inputs: { contextMenuItems: "contextMenuItems", mouseEventData: "mouseEventData", target: "target" }, outputs: { contextMenuItemClick: "contextMenuItemClick" }, features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1a, decls: 1, vars: 1, consts: [["class", "sme-layout-fixed sme-layer-dialog sme-focus-zone", 3, "isContextMenu", "ngStyle", 4, "ngIf"], [1, "sme-layout-fixed", "sme-layer-dialog", "sme-focus-zone", 3, "isContextMenu", "ngStyle"], ["role", "menu", 1, "sme-dropdown-content"], ["role", "menu", 3, "actions", "target"], ["actionBar", ""]], template: function ContextMenuComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵprojectionDef();
+        ɵɵtemplate(0, ContextMenuComponent_sme_dropdown_0_Template, 5, 4, "sme-dropdown", 0);
+    } if (rf & 2) {
+        ɵɵproperty("ngIf", ctx.isOpen);
+    } }, directives: [NgIf, DropdownComponent, NgStyle, ActionMenuComponent], encapsulation: 2 });
+__decorate([
+    Debounce$1(1),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], ContextMenuComponent.prototype, "autoFocus", null);
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(ContextMenuComponent, [{
+        type: Component,
+        args: [{
+                selector: 'sme-context-menu',
+                templateUrl: './context-menu.component.html',
+            }]
+    }], function () { return [{ type: Injector }, { type: ElementRef }]; }, { contextMenuItems: [{
+            type: Input
+        }], mouseEventData: [{
+            type: Input
+        }], target: [{
+            type: Input
+        }], contextMenuItemClick: [{
+            type: Output
+        }], autoFocus: [] }); })();
+
+/**
+ * Directive that controls the opening and the closing of the context-menu,
+ * once the host element is right-clicked
+*/
+class ContextMenuDirective {
+    constructor(el) {
+        this.el = el;
+    }
+    /**
+     * Listens for the right-click event on the host
+     * Opens custom contextmenu except when text is highlighted or link is clicked
+    */
+    onClick(event) {
+        const tagElement = event.target;
+        if (tagElement.tagName.toUpperCase() === 'A' || window.getSelection().toString() !== '') {
+            this.el.nativeElement.enableRightClickSelect = false;
+        }
+        else {
+            event.preventDefault();
+            this.el.nativeElement.enableRightClickSelect = true;
+            this.openContextMenu(event);
+        }
+    }
+    // Closes the context menu when a click event is fired
+    documentClick() {
+        this.smeContextMenu.isOpen = false;
+    }
+    // Prevents tab key event from closing the context menu
+    onKeyup(event) {
+        if (event.keyCode === KeyCode.Tab) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    /**
+     * Called once right-click is triggered and toggles the isOpen from the contextMenu
+     * It controls the opening and closing of contextMenu
+    */
+    openContextMenu($event) {
+        this.smeContextMenu.autoFocus();
+        if (this.smeContextMenu.isOpen) {
+            this.smeContextMenu.isOpen = false;
+        }
+        setTimeout(() => {
+            this.smeContextMenu.mouseEventData = $event;
+            this.smeContextMenu.isOpen = true;
+        });
+    }
+}
+/** @nocollapse */ ContextMenuDirective.ɵfac = function ContextMenuDirective_Factory(t) { return new (t || ContextMenuDirective)(ɵɵdirectiveInject(ElementRef)); };
+/** @nocollapse */ ContextMenuDirective.ɵdir = ɵɵdefineDirective({ type: ContextMenuDirective, selectors: [["", "smeContextMenu", ""]], hostBindings: function ContextMenuDirective_HostBindings(rf, ctx) { if (rf & 1) {
+        ɵɵlistener("contextmenu", function ContextMenuDirective_contextmenu_HostBindingHandler($event) { return ctx.onClick($event); })("click", function ContextMenuDirective_click_HostBindingHandler() { return ctx.documentClick(); }, false, ɵɵresolveDocument)("keyup", function ContextMenuDirective_keyup_HostBindingHandler($event) { return ctx.onKeyup($event); });
+    } }, inputs: { smeContextMenu: "smeContextMenu" } });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(ContextMenuDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[smeContextMenu]'
+            }]
+    }], function () { return [{ type: ElementRef }]; }, { smeContextMenu: [{
+            type: Input
+        }], onClick: [{
+            type: HostListener,
+            args: ['contextmenu', ['$event']]
+        }], documentClick: [{
+            type: HostListener,
+            args: ['document:click']
+        }], onKeyup: [{
+            type: HostListener,
+            args: ['keyup', ['$event']]
+        }] }); })();
+
+class ContextMenuModule {
+}
+/** @nocollapse */ ContextMenuModule.ɵfac = function ContextMenuModule_Factory(t) { return new (t || ContextMenuModule)(); };
+/** @nocollapse */ ContextMenuModule.ɵmod = ɵɵdefineNgModule({ type: ContextMenuModule });
+/** @nocollapse */ ContextMenuModule.ɵinj = ɵɵdefineInjector({ imports: [[
+            CommonModule,
+            ActionsModule,
+            DropdownModule,
+            DataTableModule
+        ]] });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵɵsetNgModuleScope(ContextMenuModule, { declarations: [ContextMenuComponent,
+        ContextMenuDirective,
+        ContextDropdownComponent], imports: [CommonModule,
+        ActionsModule,
+        DropdownModule,
+        DataTableModule], exports: [ContextMenuComponent,
+        ContextMenuDirective,
+        ContextDropdownComponent] }); })();
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(ContextMenuModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [
+                    ContextMenuComponent,
+                    ContextMenuDirective,
+                    ContextDropdownComponent
+                ],
+                imports: [
+                    CommonModule,
+                    ActionsModule,
+                    DropdownModule,
+                    DataTableModule
+                ],
+                exports: [
+                    ContextMenuComponent,
+                    ContextMenuDirective,
+                    ContextDropdownComponent
+                ]
+            }]
+    }], null, null); })();
+
 class DetailsResponsiveWindowManager extends SmeResponsiveWindowManagerComponent {
     constructor() {
         super(...arguments);
@@ -38137,20 +38449,23 @@ class DetailsResponsiveWindowManager extends SmeResponsiveWindowManagerComponent
     }
 }
 
-const _c0$1a = ["expander"];
+const _c0$1b = ["expander"];
 const _c1$F = function (a0, a1) { return { "sme-icon-chevronUpMed": a0, "sme-icon-chevronDownMed": a1 }; };
 function DetailsComponent_span_5_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelement(0, "span", 7);
+    ɵɵelement(0, "span", 8);
 } if (rf & 2) {
     const ctx_r1 = ɵɵnextContext();
     ɵɵproperty("ngClass", ɵɵpureFunction2(1, _c1$F, !ctx_r1.isExpanded, ctx_r1.isExpanded));
 } }
 function DetailsComponent_span_6_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelement(0, "span", 7);
+    ɵɵelement(0, "span", 8);
 } if (rf & 2) {
     const ctx_r2 = ɵɵnextContext();
     ɵɵproperty("ngClass", ɵɵpureFunction2(1, _c1$F, ctx_r2.isExpanded, !ctx_r2.isExpanded));
 } }
+function DetailsComponent_hr_12_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelement(0, "hr");
+} }
 const _c2$h = function (a0, a1) { return { "sme-layout-absolute-phone-up sme-position-inset-none sme-padding-bottom-sm sme-arrange-overflow-auto": a0, "sme-layout-relative sme-position-stretch-v": a1 }; };
 const _c3$b = ["*"];
 /**
@@ -38320,11 +38635,11 @@ class DetailsComponent extends CoreBaseComponent {
 }
 /** @nocollapse */ DetailsComponent.ɵfac = function DetailsComponent_Factory(t) { return new (t || DetailsComponent)(ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(SME_LAYOUT_PROVIDER, 8)); };
 /** @nocollapse */ DetailsComponent.ɵcmp = ɵɵdefineComponent({ type: DetailsComponent, selectors: [["sme-details"]], viewQuery: function DetailsComponent_Query(rf, ctx) { if (rf & 1) {
-        ɵɵviewQuery(_c0$1a, 1);
+        ɵɵviewQuery(_c0$1b, 1);
     } if (rf & 2) {
         let _t;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.expander = _t.first);
-    } }, inputs: { initialHeightPercentage: "initialHeightPercentage", header: "header", chevronInverted: "chevronInverted", autoHeight: "autoHeight", title: "title", isExpanded: "isExpanded" }, outputs: { isExpandedChange: "isExpandedChange" }, features: [ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature], ngContentSelectors: _c3$b, decls: 12, vars: 19, consts: [["role", "button", "tabindex", "0", 1, "sme-button", "sme-button-trigger", "sme-button-auto-width", "sme-position-flex-none", "sme-padding-squish-v-md", "sme-padding-horizontal-lg", "sme-position-stretch-h", "sme-position-left-inline", "sme-arrange-stack-h", "sme-focus-zone", 3, "click"], ["expander", ""], [1, "sme-font-h3", "sme-position-flex-auto", "sme-arrange-ellipsis"], ["class", "sme-icon sme-position-flex-none", "aria-hidden", "true", 3, "ngClass", 4, "ngIf"], [1, "sme-screen-reader", 3, "id"], [1, "sme-position-flex-auto", "sme-layout-relative"], [3, "ngClass"], ["aria-hidden", "true", 1, "sme-icon", "sme-position-flex-none", 3, "ngClass"]], template: function DetailsComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { initialHeightPercentage: "initialHeightPercentage", header: "header", chevronInverted: "chevronInverted", addBottomBorder: "addBottomBorder", autoHeight: "autoHeight", title: "title", isExpanded: "isExpanded" }, outputs: { isExpandedChange: "isExpandedChange" }, features: [ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature], ngContentSelectors: _c3$b, decls: 13, vars: 20, consts: [["role", "button", "tabindex", "0", 1, "sme-button", "sme-button-trigger", "sme-button-auto-width", "sme-position-flex-none", "sme-padding-squish-v-md", "sme-padding-horizontal-lg", "sme-position-stretch-h", "sme-position-left-inline", "sme-arrange-stack-h", "sme-focus-zone", 3, "click"], ["expander", ""], [1, "sme-font-h3", "sme-position-flex-auto", "sme-arrange-ellipsis"], ["class", "sme-icon sme-position-flex-none", "aria-hidden", "true", 3, "ngClass", 4, "ngIf"], [1, "sme-screen-reader", 3, "id"], [1, "sme-position-flex-auto", "sme-layout-relative"], [3, "ngClass"], [4, "ngIf"], ["aria-hidden", "true", 1, "sme-icon", "sme-position-flex-none", 3, "ngClass"]], template: function DetailsComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵprojectionDef();
         ɵɵelementStart(0, "h3");
         ɵɵelementStart(1, "div", 0, 1);
@@ -38344,6 +38659,7 @@ class DetailsComponent extends CoreBaseComponent {
         ɵɵprojection(11);
         ɵɵelementEnd();
         ɵɵelementEnd();
+        ɵɵtemplate(12, DetailsComponent_hr_12_Template, 1, 0, "hr", 7);
     } if (rf & 2) {
         ɵɵadvance(1);
         ɵɵstyleProp("min-height", ctx.minExpanderHeight);
@@ -38362,7 +38678,9 @@ class DetailsComponent extends CoreBaseComponent {
         ɵɵclassProp("sme-margin-horizontal-lg", ctx.shouldContentSlim)("sme-position-stretch-v", ctx.autoHeight);
         ɵɵadvance(1);
         ɵɵclassProp("sme-layout-none", !ctx.isExpanded);
-        ɵɵproperty("ngClass", ɵɵpureFunction2(16, _c2$h, !ctx.autoHeight, ctx.autoHeight));
+        ɵɵproperty("ngClass", ɵɵpureFunction2(17, _c2$h, !ctx.autoHeight, ctx.autoHeight));
+        ɵɵadvance(2);
+        ɵɵproperty("ngIf", ctx.addBottomBorder);
     } }, directives: [NgIf, NgClass], encapsulation: 2 });
 __decorate([
     Yield$1(),
@@ -38402,6 +38720,8 @@ __decorate([
             type: Input
         }], chevronInverted: [{
             type: Input
+        }], addBottomBorder: [{
+            type: Input
         }], autoHeight: [{
             type: Input
         }], title: [{
@@ -38434,7 +38754,7 @@ class DetailsModule {
             }]
     }], null, null); })();
 
-const _c0$1b = ["dialog"];
+const _c0$1c = ["dialog"];
 /**
  * The base dialog component for extending.
  */
@@ -38545,7 +38865,7 @@ class BaseDialogComponent {
 }
 /** @nocollapse */ BaseDialogComponent.ɵfac = function BaseDialogComponent_Factory(t) { return new (t || BaseDialogComponent)(ɵɵdirectiveInject(DialogService)); };
 /** @nocollapse */ BaseDialogComponent.ɵdir = ɵɵdefineDirective({ type: BaseDialogComponent, viewQuery: function BaseDialogComponent_Query(rf, ctx) { if (rf & 1) {
-        ɵɵviewQuery(_c0$1b, 1);
+        ɵɵviewQuery(_c0$1c, 1);
     } if (rf & 2) {
         let _t;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.dialog = _t.first);
@@ -39093,13 +39413,13 @@ function ExtensionDialogComponent_span_8_Template(rf, ctx) { if (rf & 1) {
     ɵɵadvance(1);
     ɵɵtextInterpolate(ctx_r1.ariaDescription);
 } }
-const _c0$1c = [[["sme-dialog-header"]], [["sme-dialog-content"]], [["sme-dialog-footer"]]];
+const _c0$1d = [[["sme-dialog-header"]], [["sme-dialog-content"]], [["sme-dialog-footer"]]];
 const _c1$G = ["sme-dialog-header", "sme-dialog-content", "sme-dialog-footer"];
 class ExtensionDialogComponent extends DialogComponent {
 }
 /** @nocollapse */ ExtensionDialogComponent.ɵfac = function ExtensionDialogComponent_Factory(t) { return ɵExtensionDialogComponent_BaseFactory(t || ExtensionDialogComponent); };
 /** @nocollapse */ ExtensionDialogComponent.ɵcmp = ɵɵdefineComponent({ type: ExtensionDialogComponent, selectors: [["sme-extension-dialog"]], features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$G, decls: 9, vars: 6, consts: [["aria-modal", "true", 1, "sme-position-stretch-h", "sme-position-stretch-v", 3, "ngClass"], [1, "sme-position-flex-none", "sme-focus-zone"], [1, "sme-layout-relative", "sme-position-flex-auto", "sme-padding-horizontal-lg", "sme-arrange-overflow-auto-y", "sme-arrange-overflow-hide-x", "sme-focus-zone", "sme-layout-responsive-zone-xs"], [1, "sme-position-flex-none", "sme-focus-zone", "sme-padding-horizontal-lg", "sme-padding-vertical-xs"], ["class", "sme-screen-reader", 3, "id", 4, "ngIf"], [1, "sme-screen-reader", 3, "id"]], template: function ExtensionDialogComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵprojectionDef(_c0$1c);
+        ɵɵprojectionDef(_c0$1d);
         ɵɵelementStart(0, "div", 0);
         ɵɵelementStart(1, "div", 1);
         ɵɵprojection(2);
@@ -39432,7 +39752,7 @@ function HeaderComponent_div_2_Template(rf, ctx) { if (rf & 1) {
 function HeaderComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     ɵɵprojection(0);
 } }
-const _c0$1d = ["*"];
+const _c0$1e = ["*"];
 class SmeHeaderData {
 }
 /**
@@ -39510,7 +39830,7 @@ HeaderComponent.h2style = 'sme-font-h2';
 HeaderComponent.h3style = 'sme-font-h3';
 HeaderComponent.h4style = 'sme-font-h4 sme-font-h4-no-spacing';
 /** @nocollapse */ HeaderComponent.ɵfac = function HeaderComponent_Factory(t) { return new (t || HeaderComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ HeaderComponent.ɵcmp = ɵɵdefineComponent({ type: HeaderComponent, selectors: [["sme-header"]], inputs: { type: "type", text: "text", level: "level", smeIconClassName: "smeIconClassName", urlIcon: "urlIcon", subtitle: "subtitle" }, features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1d, decls: 5, vars: 3, consts: [["class", "sme-layout-flex sme-position-flex-align-center sme-layout-tool-header", 4, "ngIf"], ["id", "sme-dialog-title", 3, "ngClass", 4, "ngIf"], ["class", "sme-position-flex-none sme-layout-settings-header", 4, "ngIf"], ["class", "sme-padding-left-xs"], ["contentTemplate", ""], [1, "sme-layout-flex", "sme-position-flex-align-center", "sme-layout-tool-header"], [3, "ngClass"], ["class", "sme-position-align-v-inline-middle sme-icon", 3, "class", 4, "ngIf"], ["class", "sme-position-align-v-inline-middle sme-url-icon", 3, "background-image", 4, "ngIf"], ["class", "sme-position-align-v-inline-middle", 4, "ngIf"], ["class", "sme-arrange-stack-v sme-layout-inline-block", 3, "sme-padding-left-xs", 4, "ngIf"], [4, "ngTemplateOutlet"], [1, "sme-position-align-v-inline-middle", "sme-icon"], [1, "sme-position-align-v-inline-middle", "sme-url-icon"], [1, "sme-position-align-v-inline-middle"], [1, "sme-arrange-stack-v", "sme-layout-inline-block"], [1, "sme-font-label"], ["id", "sme-dialog-title", 3, "ngClass"], [1, "sme-position-flex-none", "sme-layout-settings-header"]], template: function HeaderComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ HeaderComponent.ɵcmp = ɵɵdefineComponent({ type: HeaderComponent, selectors: [["sme-header"]], inputs: { type: "type", text: "text", level: "level", smeIconClassName: "smeIconClassName", urlIcon: "urlIcon", subtitle: "subtitle" }, features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1e, decls: 5, vars: 3, consts: [["class", "sme-layout-flex sme-position-flex-align-center sme-layout-tool-header", 4, "ngIf"], ["id", "sme-dialog-title", 3, "ngClass", 4, "ngIf"], ["class", "sme-position-flex-none sme-layout-settings-header", 4, "ngIf"], ["class", "sme-padding-left-xs"], ["contentTemplate", ""], [1, "sme-layout-flex", "sme-position-flex-align-center", "sme-layout-tool-header"], [3, "ngClass"], ["class", "sme-position-align-v-inline-middle sme-icon", 3, "class", 4, "ngIf"], ["class", "sme-position-align-v-inline-middle sme-url-icon", 3, "background-image", 4, "ngIf"], ["class", "sme-position-align-v-inline-middle", 4, "ngIf"], ["class", "sme-arrange-stack-v sme-layout-inline-block", 3, "sme-padding-left-xs", 4, "ngIf"], [4, "ngTemplateOutlet"], [1, "sme-position-align-v-inline-middle", "sme-icon"], [1, "sme-position-align-v-inline-middle", "sme-url-icon"], [1, "sme-position-align-v-inline-middle"], [1, "sme-arrange-stack-v", "sme-layout-inline-block"], [1, "sme-font-label"], ["id", "sme-dialog-title", 3, "ngClass"], [1, "sme-position-flex-none", "sme-layout-settings-header"]], template: function HeaderComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵprojectionDef();
         ɵɵtemplate(0, HeaderComponent_div_0_Template, 7, 6, "div", 0);
         ɵɵtemplate(1, HeaderComponent_h2_1_Template, 2, 2, "h2", 1);
@@ -39655,7 +39975,7 @@ function DocumentationComponent_sme_pivot_tab_6_Template(rf, ctx) { if (rf & 1)
     const ctx_r3 = ɵɵnextContext();
     ɵɵproperty("label", ctx_r3.strings.MsftSmeShell.Angular.Documentation.Tabs.Examples.label);
 } }
-const _c0$1e = ["*"];
+const _c0$1f = ["*"];
 /**
  *
  * @smeDoc {@label Documentation @id sme-documentation-component}
@@ -39695,7 +40015,7 @@ class DocumentationComponent extends CoreBaseComponent {
     }
 }
 /** @nocollapse */ DocumentationComponent.ɵfac = function DocumentationComponent_Factory(t) { return new (t || DocumentationComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ DocumentationComponent.ɵcmp = ɵɵdefineComponent({ type: DocumentationComponent, selectors: [["sme-documentation"]], inputs: { document: "document" }, features: [ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature], ngContentSelectors: _c0$1e, decls: 7, vars: 4, consts: [[1, "sme-layout-main-content-padding"], ["type", "tool-header", 3, "text", 4, "ngIf"], [1, "sme-position-flex-auto"], [3, "label"], [3, "label", 4, "ngIf"], ["type", "tool-header", 3, "text"], [1, "sme-padding-horizontal-lg"], [3, "smeMarkdown", 4, "ngIf"], [3, "smeMarkdown"], [4, "ngFor", "ngForOf"], [1, "sme-example-header"], [1, "sme-position-flex-auto", "sme-example-content"], [3, "label", 4, "ngFor", "ngForOf"], ["type", "code", "name", "code", "orientation", "vertical", 3, "ngModel", "label", "hideHeader", "language", "readonly", "ngModelChange"]], template: function DocumentationComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ DocumentationComponent.ɵcmp = ɵɵdefineComponent({ type: DocumentationComponent, selectors: [["sme-documentation"]], inputs: { document: "document" }, features: [ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature], ngContentSelectors: _c0$1f, decls: 7, vars: 4, consts: [[1, "sme-layout-main-content-padding"], ["type", "tool-header", 3, "text", 4, "ngIf"], [1, "sme-position-flex-auto"], [3, "label"], [3, "label", 4, "ngIf"], ["type", "tool-header", 3, "text"], [1, "sme-padding-horizontal-lg"], [3, "smeMarkdown", 4, "ngIf"], [3, "smeMarkdown"], [4, "ngFor", "ngForOf"], [1, "sme-example-header"], [1, "sme-position-flex-auto", "sme-example-content"], [3, "label", 4, "ngFor", "ngForOf"], ["type", "code", "name", "code", "orientation", "vertical", 3, "ngModel", "label", "hideHeader", "language", "readonly", "ngModelChange"]], template: function DocumentationComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵprojectionDef();
         ɵɵelementStart(0, "div", 0);
         ɵɵtemplate(1, DocumentationComponent_sme_header_1_Template, 1, 1, "sme-header", 1);
@@ -39801,7 +40121,7 @@ function LegendEntryComponent_div_0_div_1_div_1_Template(rf, ctx) { if (rf & 1)
     const ctx_r10 = ɵɵnextContext(3);
     ɵɵclassMapInterpolate1("sme-layout-absolute sme-width-xxs sme-position-stretch-v sme-layer-above ", ctx_r10.stripeClass, "");
 } }
-const _c0$1f = function (a0) { return { "background-color": a0 }; };
+const _c0$1g = function (a0) { return { "background-color": a0 }; };
 function LegendEntryComponent_div_0_div_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "div", 13);
     ɵɵtemplate(1, LegendEntryComponent_div_0_div_1_div_1_Template, 1, 3, "div", 3);
@@ -39809,7 +40129,7 @@ function LegendEntryComponent_div_0_div_1_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = ɵɵnextContext(2);
     ɵɵclassMapInterpolate1("sme-margin-right-xs sme-width-xxs sme-layout-relative ", ctx_r1.hideInHighContrastClass, "");
-    ɵɵproperty("ngStyle", ɵɵpureFunction1(5, _c0$1f, ctx_r1.color));
+    ɵɵproperty("ngStyle", ɵɵpureFunction1(5, _c0$1g, ctx_r1.color));
     ɵɵadvance(1);
     ɵɵproperty("ngIf", ctx_r1.stripeClass);
 } }
@@ -40173,7 +40493,7 @@ class LegendComponent extends CapacityBase {
             type: Input
         }] }); })();
 
-const _c0$1g = ["chart"];
+const _c0$1h = ["chart"];
 function DoughnutChartComponent_div_2_span_3_Template(rf, ctx) { if (rf & 1) {
     ɵɵelement(0, "span", 9);
 } if (rf & 2) {
@@ -40425,7 +40745,7 @@ class DoughnutChartComponent extends CoreBaseComponent {
 }
 /** @nocollapse */ DoughnutChartComponent.ɵfac = function DoughnutChartComponent_Factory(t) { return new (t || DoughnutChartComponent)(ɵɵdirectiveInject(ChangeDetectorRef), ɵɵdirectiveInject(Injector)); };
 /** @nocollapse */ DoughnutChartComponent.ɵcmp = ɵɵdefineComponent({ type: DoughnutChartComponent, selectors: [["sme-doughnut-chart"]], viewQuery: function DoughnutChartComponent_Query(rf, ctx) { if (rf & 1) {
-        ɵɵviewQuery(_c0$1g, 1);
+        ɵɵviewQuery(_c0$1h, 1);
     } if (rf & 2) {
         let _t;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.chart = _t.first);
@@ -40480,7 +40800,7 @@ class DoughnutChartComponent extends CoreBaseComponent {
             args: ['chart']
         }] }); })();
 
-const _c0$1h = ["chart"];
+const _c0$1i = ["chart"];
 class CapacityDoughnutChartComponent extends CapacityBase {
     constructor(injector, changeDetectorRef) {
         super(injector);
@@ -40586,7 +40906,7 @@ class CapacityDoughnutChartComponent extends CapacityBase {
 }
 /** @nocollapse */ CapacityDoughnutChartComponent.ɵfac = function CapacityDoughnutChartComponent_Factory(t) { return new (t || CapacityDoughnutChartComponent)(ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(ChangeDetectorRef)); };
 /** @nocollapse */ CapacityDoughnutChartComponent.ɵcmp = ɵɵdefineComponent({ type: CapacityDoughnutChartComponent, selectors: [["sme-capacity-doughnut-chart"]], viewQuery: function CapacityDoughnutChartComponent_Query(rf, ctx) { if (rf & 1) {
-        ɵɵviewQuery(_c0$1h, 1);
+        ɵɵviewQuery(_c0$1i, 1);
     } if (rf & 2) {
         let _t;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.chart = _t.first);
@@ -40704,7 +41024,7 @@ function GuidedPaneComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     ɵɵprojection(1);
     ɵɵelementEnd();
 } }
-const _c0$1i = ["*"];
+const _c0$1j = ["*"];
 class GuidedPaneComponent {
     constructor() {
         this.active = false;
@@ -40719,7 +41039,7 @@ class GuidedPaneComponent {
 /** @nocollapse */ GuidedPaneComponent.ɵfac = function GuidedPaneComponent_Factory(t) { return new (t || GuidedPaneComponent)(); };
 /** @nocollapse */ GuidedPaneComponent.ɵcmp = ɵɵdefineComponent({ type: GuidedPaneComponent, selectors: [["sme-guided-pane"]], hostVars: 2, hostBindings: function GuidedPaneComponent_HostBindings(rf, ctx) { if (rf & 2) {
         ɵɵstyleProp("display", ctx.getTop);
-    } }, inputs: { paneId: "paneId" }, ngContentSelectors: _c0$1i, decls: 1, vars: 1, consts: [["class", "sme-layout-absolute-phone-up sme-position-inset-none sme-arrange-stack-v", 4, "ngIf"], [1, "sme-layout-absolute-phone-up", "sme-position-inset-none", "sme-arrange-stack-v"]], template: function GuidedPaneComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { paneId: "paneId" }, ngContentSelectors: _c0$1j, decls: 1, vars: 1, consts: [["class", "sme-layout-absolute-phone-up sme-position-inset-none sme-arrange-stack-v", 4, "ngIf"], [1, "sme-layout-absolute-phone-up", "sme-position-inset-none", "sme-arrange-stack-v"]], template: function GuidedPaneComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵprojectionDef();
         ɵɵtemplate(0, GuidedPaneComponent_div_0_Template, 2, 0, "div", 0);
     } if (rf & 2) {
@@ -40738,7 +41058,7 @@ class GuidedPaneComponent {
             args: ['style.display']
         }] }); })();
 
-const _c0$1j = ["pane"];
+const _c0$1k = ["pane"];
 const _c1$J = ["*"];
 class GuidedPanelComponent extends CoreBaseComponent {
     /**
@@ -40839,7 +41159,7 @@ class GuidedPanelComponent extends CoreBaseComponent {
 }
 /** @nocollapse */ GuidedPanelComponent.ɵfac = function GuidedPanelComponent_Factory(t) { return new (t || GuidedPanelComponent)(ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(ElementRef)); };
 /** @nocollapse */ GuidedPanelComponent.ɵcmp = ɵɵdefineComponent({ type: GuidedPanelComponent, selectors: [["sme-guided-panel"]], contentQueries: function GuidedPanelComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-        ɵɵcontentQuery(dirIndex, _c0$1j, 0);
+        ɵɵcontentQuery(dirIndex, _c0$1k, 0);
     } if (rf & 2) {
         let _t;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.panes = _t);
@@ -40897,7 +41217,7 @@ class GuidedPanelModule {
             }]
     }], null, null); })();
 
-const _c0$1k = ["horizontalBarChart"];
+const _c0$1l = ["horizontalBarChart"];
 /**
  * @deprecated 'Please use StackedHorizontalBarChartComponent instead'
  */
@@ -40956,7 +41276,7 @@ class HorizontalBarChartComponent extends CoreBaseComponent {
 }
 /** @nocollapse */ HorizontalBarChartComponent.ɵfac = function HorizontalBarChartComponent_Factory(t) { return ɵHorizontalBarChartComponent_BaseFactory(t || HorizontalBarChartComponent); };
 /** @nocollapse */ HorizontalBarChartComponent.ɵcmp = ɵɵdefineComponent({ type: HorizontalBarChartComponent, selectors: [["sme-horizontal-bar-chart"]], viewQuery: function HorizontalBarChartComponent_Query(rf, ctx) { if (rf & 1) {
-        ɵɵviewQuery(_c0$1k, 1);
+        ɵɵviewQuery(_c0$1l, 1);
     } if (rf & 2) {
         let _t;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.horizontalBarChart = _t.first);
@@ -41553,7 +41873,7 @@ class HorizontalBarChartModule {
             }]
     }], null, null); })();
 
-const _c0$1l = ["linechart"];
+const _c0$1m = ["linechart"];
 function LineChartComponent_div_0_div_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "div");
     ɵɵtext(1);
@@ -41880,7 +42200,7 @@ class LineChartComponent extends CoreBaseComponent {
 }
 /** @nocollapse */ LineChartComponent.ɵfac = function LineChartComponent_Factory(t) { return new (t || LineChartComponent)(ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(ChangeDetectorRef)); };
 /** @nocollapse */ LineChartComponent.ɵcmp = ɵɵdefineComponent({ type: LineChartComponent, selectors: [["sme-line-chart"]], viewQuery: function LineChartComponent_Query(rf, ctx) { if (rf & 1) {
-        ɵɵviewQuery(_c0$1l, 1);
+        ɵɵviewQuery(_c0$1m, 1);
     } if (rf & 2) {
         let _t;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.chart = _t.first);
@@ -42877,7 +43197,7 @@ class PropertyGridResponsiveWindowManager extends SmeResponsiveWindowManagerComp
     }
 }
 
-const _c0$1m = ["readonlyTemplate"];
+const _c0$1n = ["readonlyTemplate"];
 const _c1$K = ["actionLinkTemplate"];
 const _c2$i = ["internalLinkTemplate"];
 const _c3$c = ["externalLinkTemplate"];
@@ -43106,7 +43426,7 @@ function PropertyGridComponent_ng_template_14_Template(rf, ctx) { if (rf & 1) {
     const item_r44 = ctx.$implicit;
     ɵɵproperty("ngIf", !!item_r44.iconClass);
     ɵɵadvance(1);
-    ɵɵproperty("ngIf", item_r44.status !== null && !item_r44.iconClass);
+    ɵɵproperty("ngIf", item_r44.status !== undefined && item_r44.status !== null && !item_r44.iconClass);
 } }
 /**
  *
@@ -43266,7 +43586,7 @@ class PropertyGridComponent extends CoreBaseComponent {
         let _t;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.items = _t);
     } }, viewQuery: function PropertyGridComponent_Query(rf, ctx) { if (rf & 1) {
-        ɵɵviewQuery(_c0$1m, 3);
+        ɵɵviewQuery(_c0$1n, 3);
         ɵɵviewQuery(_c1$K, 3);
         ɵɵviewQuery(_c2$i, 3);
         ɵɵviewQuery(_c3$c, 3);
@@ -43382,7 +43702,7 @@ class PropertyGridModule {
             }]
     }], null, null); })();
 
-const _c0$1n = ["multiSelectTemplate"];
+const _c0$1o = ["multiSelectTemplate"];
 const _c1$L = ["textTemplate"];
 const _c2$j = ["singleSelectTemplate"];
 const _c3$d = ["timespanSelectTemplate"];
@@ -44654,7 +44974,7 @@ class QueryEditorComponent extends CoreBaseComponent {
 }
 /** @nocollapse */ QueryEditorComponent.ɵfac = function QueryEditorComponent_Factory(t) { return ɵQueryEditorComponent_BaseFactory(t || QueryEditorComponent); };
 /** @nocollapse */ QueryEditorComponent.ɵcmp = ɵɵdefineComponent({ type: QueryEditorComponent, selectors: [["sme-query-editor"]], viewQuery: function QueryEditorComponent_Query(rf, ctx) { if (rf & 1) {
-        ɵɵviewQuery(_c0$1n, 1);
+        ɵɵviewQuery(_c0$1o, 1);
         ɵɵviewQuery(_c1$L, 1);
         ɵɵviewQuery(_c2$j, 1);
         ɵɵviewQuery(_c3$d, 1);
@@ -44937,7 +45257,7 @@ class SchemaFormEditorUtilities {
     }
 }
 
-const _c0$1o = ["schemaTextEditor"];
+const _c0$1p = ["schemaTextEditor"];
 class SchemaFormEditorSchemaTextComponent {
     constructor() {
         this.strings = MsftSme.getStrings().MsftSmeShell.Angular.SchemaForm.Editor;
@@ -45071,7 +45391,7 @@ class SchemaFormEditorSchemaTextComponent {
 }
 /** @nocollapse */ SchemaFormEditorSchemaTextComponent.ɵfac = function SchemaFormEditorSchemaTextComponent_Factory(t) { return new (t || SchemaFormEditorSchemaTextComponent)(); };
 /** @nocollapse */ SchemaFormEditorSchemaTextComponent.ɵcmp = ɵɵdefineComponent({ type: SchemaFormEditorSchemaTextComponent, selectors: [["sme-schema-form-editor-schema-text"]], viewQuery: function SchemaFormEditorSchemaTextComponent_Query(rf, ctx) { if (rf & 1) {
-        ɵɵviewQuery(_c0$1o, 1);
+        ɵɵviewQuery(_c0$1p, 1);
     } if (rf & 2) {
         let _t;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.schemaTextEditorElement = _t.first);
@@ -45332,7 +45652,7 @@ const propertyFormSchema = {
     ]
 };
 
-const _c0$1p = ["propertyForm"];
+const _c0$1q = ["propertyForm"];
 const _c1$M = ["schemaTree"];
 function SchemaFormEditorSchemaTreeComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
     ɵɵtext(0);
@@ -46000,7 +46320,7 @@ class SchemaFormEditorSchemaTreeComponent {
 }
 /** @nocollapse */ SchemaFormEditorSchemaTreeComponent.ɵfac = function SchemaFormEditorSchemaTreeComponent_Factory(t) { return new (t || SchemaFormEditorSchemaTreeComponent)(ɵɵdirectiveInject(ElementRef)); };
 /** @nocollapse */ SchemaFormEditorSchemaTreeComponent.ɵcmp = ɵɵdefineComponent({ type: SchemaFormEditorSchemaTreeComponent, selectors: [["sme-schema-form-editor-schema-tree"]], viewQuery: function SchemaFormEditorSchemaTreeComponent_Query(rf, ctx) { if (rf & 1) {
-        ɵɵviewQuery(_c0$1p, 1);
+        ɵɵviewQuery(_c0$1q, 1);
         ɵɵviewQuery(_c1$M, 1);
     } if (rf & 2) {
         let _t;
@@ -46223,7 +46543,7 @@ class SchemaFormEditorDataComponent {
             type: Output
         }] }); })();
 
-const _c0$1q = ["viewModelDiv"];
+const _c0$1r = ["viewModelDiv"];
 class SchemaFormEditorFormViewModelComponent {
     constructor() {
         this.strings = MsftSme.getStrings().MsftSmeShell.Angular.SchemaForm.Editor.ViewModel;
@@ -46278,7 +46598,7 @@ class SchemaFormEditorFormViewModelComponent {
 }
 /** @nocollapse */ SchemaFormEditorFormViewModelComponent.ɵfac = function SchemaFormEditorFormViewModelComponent_Factory(t) { return new (t || SchemaFormEditorFormViewModelComponent)(); };
 /** @nocollapse */ SchemaFormEditorFormViewModelComponent.ɵcmp = ɵɵdefineComponent({ type: SchemaFormEditorFormViewModelComponent, selectors: [["sme-schema-form-editor-form-view-model"]], viewQuery: function SchemaFormEditorFormViewModelComponent_Query(rf, ctx) { if (rf & 1) {
-        ɵɵviewQuery(_c0$1q, 1);
+        ɵɵviewQuery(_c0$1r, 1);
     } if (rf & 2) {
         let _t;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.viewModelDivElement = _t.first);
@@ -46318,7 +46638,7 @@ class SchemaFormEditorFormViewModelComponent {
             type: Input
         }] }); })();
 
-const _c0$1r = ["previewForm"];
+const _c0$1s = ["previewForm"];
 const _c1$N = ["schemaTree"];
 const _c2$k = ["schemaText"];
 function SchemaFormEditorComponent_sme_loading_wheel_6_Template(rf, ctx) { if (rf & 1) {
@@ -46671,7 +46991,7 @@ class SchemaFormEditorComponent extends BaseDialogComponent {
 }
 /** @nocollapse */ SchemaFormEditorComponent.ɵfac = function SchemaFormEditorComponent_Factory(t) { return new (t || SchemaFormEditorComponent)(ɵɵdirectiveInject(DialogService), ɵɵdirectiveInject(ElementRef)); };
 /** @nocollapse */ SchemaFormEditorComponent.ɵcmp = ɵɵdefineComponent({ type: SchemaFormEditorComponent, selectors: [["sme-schema-form-editor"]], viewQuery: function SchemaFormEditorComponent_Query(rf, ctx) { if (rf & 1) {
-        ɵɵviewQuery(_c0$1r, 1);
+        ɵɵviewQuery(_c0$1s, 1);
         ɵɵviewQuery(_c1$N, 1);
         ɵɵviewQuery(_c2$k, 1);
     } if (rf & 2) {
@@ -46738,7 +47058,7 @@ class SchemaFormEditorComponent extends BaseDialogComponent {
             type: Input
         }] }); })();
 
-const _c0$1s = ["editor"];
+const _c0$1t = ["editor"];
 const _c1$O = ["formContent"];
 const _c2$l = ["schema", ""];
 function SchemaFormComponent_sme_schema_form_content_0_Template(rf, ctx) { if (rf & 1) {
@@ -46866,7 +47186,7 @@ class SchemaFormComponent {
 }
 /** @nocollapse */ SchemaFormComponent.ɵfac = function SchemaFormComponent_Factory(t) { return new (t || SchemaFormComponent)(ɵɵdirectiveInject(DialogService)); };
 /** @nocollapse */ SchemaFormComponent.ɵcmp = ɵɵdefineComponent({ type: SchemaFormComponent, selectors: [["sme-form", "schema", ""], ["sme-schema-form"]], viewQuery: function SchemaFormComponent_Query(rf, ctx) { if (rf & 1) {
-        ɵɵviewQuery(_c0$1s, 1);
+        ɵɵviewQuery(_c0$1t, 1);
         ɵɵviewQuery(_c1$O, 1);
     } if (rf & 2) {
         let _t;
@@ -46945,7 +47265,7 @@ class SplitViewModule {
     }], null, null); })();
 
 var ResourceStringPickerComponent_1;
-const _c0$1t = ["dropDown"];
+const _c0$1u = ["dropDown"];
 const _c1$P = ["tree"];
 const _c2$m = ["type", "resource-string-picker"];
 function ResourceStringPickerComponent_span_3_Template(rf, ctx) { if (rf & 1) {
@@ -47207,7 +47527,7 @@ let ResourceStringPickerComponent = ResourceStringPickerComponent_1 = class Reso
 ResourceStringPickerComponent.resourceCache = {};
 /** @nocollapse */ ResourceStringPickerComponent.ɵfac = function ResourceStringPickerComponent_Factory(t) { return new (t || ResourceStringPickerComponent)(ɵɵdirectiveInject(Injector)); };
 /** @nocollapse */ ResourceStringPickerComponent.ɵcmp = ɵɵdefineComponent({ type: ResourceStringPickerComponent, selectors: [["sme-form-field", "type", "resource-string-picker"]], viewQuery: function ResourceStringPickerComponent_Query(rf, ctx) { if (rf & 1) {
-        ɵɵviewQuery(_c0$1t, 1);
+        ɵɵviewQuery(_c0$1u, 1);
         ɵɵviewQuery(_c1$P, 1);
     } if (rf & 2) {
         let _t;
@@ -47510,7 +47830,7 @@ function SettingsComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     ɵɵadvance(1);
     ɵɵproperty("ngIf", ctx_r0.selectedSettingsTitle);
 } }
-const _c0$1u = [[["sme-settings-navigation"]], [["sme-settings-header"]], [["sme-settings-content"]], [["sme-settings-footer"]]];
+const _c0$1v = [[["sme-settings-navigation"]], [["sme-settings-header"]], [["sme-settings-content"]], [["sme-settings-footer"]]];
 const _c1$Q = ["sme-settings-navigation", "sme-settings-header", "sme-settings-content", "sme-settings-footer"];
 /**
  *
@@ -47631,7 +47951,7 @@ class SettingsComponent extends CoreBaseComponent {
 }
 /** @nocollapse */ SettingsComponent.ɵfac = function SettingsComponent_Factory(t) { return new (t || SettingsComponent)(ɵɵdirectiveInject(Injector)); };
 /** @nocollapse */ SettingsComponent.ɵcmp = ɵɵdefineComponent({ type: SettingsComponent, selectors: [["sme-settings"]], inputs: { addPadding: "addPadding", backRoute: "backRoute", settingsTitle: "settingsTitle", selectedSettingsTitle: "selectedSettingsTitle" }, features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$Q, decls: 12, vars: 10, consts: [[1, "sme-arrange-stack-v", "sme-layout-relative", "sme-arrange-overflow-auto-y-phone-up", "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", "layoutConfig", "itemHorizontalSpace"], ["layout", ""], ["name", "narrow", 3, "until", "columns"], ["name", "wide", 3, "columns"], [3, "columnSpan", "ngClass"], [1, "sme-position-stretch", "sme-padding-left-xl", "sme-padding-top-xs", 3, "columnSpan"], [1, "sme-layout-tool-header", "sme-position-flex-none", "sme-arrange-ellipsis", "sme-padding-bottom-none", "sme-padding-left-md"], [1, "sme-font-h3", "sme-arrange-ellipsis", "sme-position-stretch-h", 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);
+        ɵɵprojectionDef(_c0$1v);
         ɵɵelementStart(0, "div", 0);
         ɵɵtemplate(1, SettingsComponent_div_1_Template, 5, 5, "div", 1);
         ɵɵelementStart(2, "sme-layout", 2, 3);
@@ -47944,7 +48264,7 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], SettingsResponsiveWindowManager.prototype, "setIframeHeight", null);
 
-const _c0$1v = ["searchTextBox"];
+const _c0$1w = ["searchTextBox"];
 function CommonSettingsComponent_header_2_Template(rf, ctx) { if (rf & 1) {
     ɵɵelementStart(0, "header", 12);
     ɵɵelementStart(1, "h2", 13);
@@ -48413,7 +48733,7 @@ class CommonSettingsComponent extends CoreBaseComponent {
 }
 /** @nocollapse */ CommonSettingsComponent.ɵfac = function CommonSettingsComponent_Factory(t) { return new (t || CommonSettingsComponent)(ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(Router), ɵɵdirectiveInject(SettingsFormService), ɵɵdirectiveInject(IterableDiffers), ɵɵdirectiveInject(AppContextService), ɵɵdirectiveInject(RpcShellService), ɵɵdirectiveInject(SME_LAYOUT_PROVIDER, 8)); };
 /** @nocollapse */ CommonSettingsComponent.ɵcmp = ɵɵdefineComponent({ type: CommonSettingsComponent, selectors: [["sme-common-settings"]], viewQuery: function CommonSettingsComponent_Query(rf, ctx) { if (rf & 1) {
-        ɵɵviewQuery(_c0$1v, 1);
+        ɵɵviewQuery(_c0$1w, 1);
         ɵɵviewQuery(SettingsComponent, 1);
     } if (rf & 2) {
         let _t;
@@ -48521,7 +48841,7 @@ __decorate([
             args: [SettingsComponent]
         }], deferredOnLayoutChanged: [], onLayoutChanged: [], onWindowBreakpointChanged: [] }); })();
 
-const _c0$1w = [[["sme-settings-header"]], [["sme-settings-content"]], [["sme-settings-footer"]]];
+const _c0$1x = [[["sme-settings-header"]], [["sme-settings-content"]], [["sme-settings-footer"]]];
 const _c1$S = ["sme-settings-header", "sme-settings-content", "sme-settings-footer"];
 class SettingsPageComponent extends CoreBaseComponent {
     constructor(injector, layout) {
@@ -48585,7 +48905,7 @@ class SettingsPageComponent extends CoreBaseComponent {
 }
 /** @nocollapse */ SettingsPageComponent.ɵfac = function SettingsPageComponent_Factory(t) { return new (t || SettingsPageComponent)(ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(SME_LAYOUT_PROVIDER, 8)); };
 /** @nocollapse */ SettingsPageComponent.ɵcmp = ɵɵdefineComponent({ type: SettingsPageComponent, selectors: [["sme-settings-page"]], outputs: { layoutChanged: "layoutChanged" }, features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$S, decls: 3, vars: 0, template: function SettingsPageComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵprojectionDef(_c0$1w);
+        ɵɵprojectionDef(_c0$1x);
         ɵɵprojection(0);
         ɵɵprojection(1, 1);
         ɵɵprojection(2, 2);
@@ -48628,7 +48948,7 @@ class CanDeactivateGuard {
         type: Injectable
     }], null, null); })();
 
-const _c0$1x = ["*"];
+const _c0$1y = ["*"];
 class SettingsContentComponent extends CoreBaseComponent {
     constructor(injector) {
         super(injector);
@@ -48650,7 +48970,7 @@ class SettingsContentComponent extends CoreBaseComponent {
     }
 }
 /** @nocollapse */ SettingsContentComponent.ɵfac = function SettingsContentComponent_Factory(t) { return new (t || SettingsContentComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ SettingsContentComponent.ɵcmp = ɵɵdefineComponent({ type: SettingsContentComponent, selectors: [["sme-settings-content"]], features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1x, decls: 1, vars: 0, template: function SettingsContentComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ SettingsContentComponent.ɵcmp = ɵɵdefineComponent({ type: SettingsContentComponent, selectors: [["sme-settings-content"]], features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1y, decls: 1, vars: 0, template: function SettingsContentComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵprojectionDef();
         ɵɵprojection(0);
     } }, encapsulation: 2 });
@@ -48662,7 +48982,7 @@ class SettingsContentComponent extends CoreBaseComponent {
             }]
     }], function () { return [{ type: Injector }]; }, null); })();
 
-const _c0$1y = ["*"];
+const _c0$1z = ["*"];
 class SettingsFooterComponent extends CoreBaseComponent {
     constructor(injector) {
         super(injector);
@@ -48704,7 +49024,7 @@ class SettingsFooterComponent extends CoreBaseComponent {
     }
 }
 /** @nocollapse */ SettingsFooterComponent.ɵfac = function SettingsFooterComponent_Factory(t) { return new (t || SettingsFooterComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ SettingsFooterComponent.ɵcmp = ɵɵdefineComponent({ type: SettingsFooterComponent, selectors: [["sme-settings-footer"]], features: [ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature], ngContentSelectors: _c0$1y, decls: 1, vars: 0, template: function SettingsFooterComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ SettingsFooterComponent.ɵcmp = ɵɵdefineComponent({ type: SettingsFooterComponent, selectors: [["sme-settings-footer"]], features: [ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature], ngContentSelectors: _c0$1z, decls: 1, vars: 0, template: function SettingsFooterComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵprojectionDef();
         ɵɵprojection(0);
     } }, encapsulation: 2 });
@@ -48758,7 +49078,7 @@ class SettingsFormDirective {
             type: Output
         }] }); })();
 
-const _c0$1z = ["*"];
+const _c0$1A = ["*"];
 class SettingsHeaderComponent extends CoreBaseComponent {
     constructor(injector) {
         super(injector);
@@ -48779,7 +49099,7 @@ class SettingsHeaderComponent extends CoreBaseComponent {
     }
 }
 /** @nocollapse */ SettingsHeaderComponent.ɵfac = function SettingsHeaderComponent_Factory(t) { return new (t || SettingsHeaderComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ SettingsHeaderComponent.ɵcmp = ɵɵdefineComponent({ type: SettingsHeaderComponent, selectors: [["sme-settings-header"]], features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1z, decls: 1, vars: 0, template: function SettingsHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ SettingsHeaderComponent.ɵcmp = ɵɵdefineComponent({ type: SettingsHeaderComponent, selectors: [["sme-settings-header"]], features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1A, decls: 1, vars: 0, template: function SettingsHeaderComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵprojectionDef();
         ɵɵprojection(0);
     } }, encapsulation: 2 });
@@ -48791,7 +49111,7 @@ class SettingsHeaderComponent extends CoreBaseComponent {
             }]
     }], function () { return [{ type: Injector }]; }, null); })();
 
-const _c0$1A = ["*"];
+const _c0$1B = ["*"];
 class SettingsNavigationComponent extends CoreBaseComponent {
     constructor(injector) {
         super(injector);
@@ -48812,7 +49132,7 @@ class SettingsNavigationComponent extends CoreBaseComponent {
     }
 }
 /** @nocollapse */ SettingsNavigationComponent.ɵfac = function SettingsNavigationComponent_Factory(t) { return new (t || SettingsNavigationComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ SettingsNavigationComponent.ɵcmp = ɵɵdefineComponent({ type: SettingsNavigationComponent, selectors: [["sme-settings-navigation"]], features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1A, decls: 1, vars: 0, template: function SettingsNavigationComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ SettingsNavigationComponent.ɵcmp = ɵɵdefineComponent({ type: SettingsNavigationComponent, selectors: [["sme-settings-navigation"]], features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1B, decls: 1, vars: 0, template: function SettingsNavigationComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵprojectionDef();
         ɵɵprojection(0);
     } }, encapsulation: 2 });
@@ -48935,7 +49255,7 @@ class CommonSettingsComponentBase {
             args: [CommonSettingsComponent]
         }] }); })();
 
-const _c0$1B = ["placeholder"];
+const _c0$1C = ["placeholder"];
 function SnapInExtensionComponent_sme_loading_wheel_2_Template(rf, ctx) { if (rf & 1) {
     ɵɵelement(0, "sme-loading-wheel");
 } }
@@ -49060,7 +49380,7 @@ class SnapInExtensionComponent extends CoreBaseComponent {
 }
 /** @nocollapse */ SnapInExtensionComponent.ɵfac = function SnapInExtensionComponent_Factory(t) { return new (t || SnapInExtensionComponent)(ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(ExtensionBrokerService)); };
 /** @nocollapse */ SnapInExtensionComponent.ɵcmp = ɵɵdefineComponent({ type: SnapInExtensionComponent, selectors: [["sme-snap-in-extension"]], viewQuery: function SnapInExtensionComponent_Query(rf, ctx) { if (rf & 1) {
-        ɵɵviewQuery(_c0$1B, 1);
+        ɵɵviewQuery(_c0$1C, 1);
     } if (rf & 2) {
         let _t;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.placeholder = _t.first);
@@ -49132,14 +49452,14 @@ function TileContentComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     const ctx_r0 = ɵɵnextContext();
     ɵɵproperty("imageSrc", ctx_r0.tileImageSrc);
 } }
-const _c0$1C = ["*"];
+const _c0$1D = ["*"];
 class TileContentComponent extends CoreBaseComponent {
     get logSourceName() {
         return 'TileContentComponent';
     }
 }
 /** @nocollapse */ TileContentComponent.ɵfac = function TileContentComponent_Factory(t) { return ɵTileContentComponent_BaseFactory(t || TileContentComponent); };
-/** @nocollapse */ TileContentComponent.ɵcmp = ɵɵdefineComponent({ type: TileContentComponent, selectors: [["sme-tile-content"]], inputs: { tileHeader: "tileHeader", tileImageSrc: "tileImageSrc" }, features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1C, decls: 5, vars: 2, consts: [["smeTileImage", "", "class", "sme-square-xxl sme-margin-right-sm sme-position-flex-none", 3, "imageSrc", 4, "ngIf"], [1, "sme-arrange-stack-v", "sme-tile-data-container"], [1, "sme-font-family-semi-bold"], ["smeTileImage", "", 1, "sme-square-xxl", "sme-margin-right-sm", "sme-position-flex-none", 3, "imageSrc"]], template: function TileContentComponent_Template(rf, ctx) { if (rf & 1) {
+/** @nocollapse */ TileContentComponent.ɵcmp = ɵɵdefineComponent({ type: TileContentComponent, selectors: [["sme-tile-content"]], inputs: { tileHeader: "tileHeader", tileImageSrc: "tileImageSrc" }, features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1D, decls: 5, vars: 2, consts: [["smeTileImage", "", "class", "sme-square-xxl sme-margin-right-sm sme-position-flex-none", 3, "imageSrc", 4, "ngIf"], [1, "sme-arrange-stack-v", "sme-tile-data-container"], [1, "sme-font-family-semi-bold"], ["smeTileImage", "", 1, "sme-square-xxl", "sme-margin-right-sm", "sme-position-flex-none", 3, "imageSrc"]], template: function TileContentComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵprojectionDef();
         ɵɵtemplate(0, TileContentComponent_div_0_Template, 1, 1, "div", 0);
         ɵɵelementStart(1, "div", 1);
@@ -49166,7 +49486,7 @@ const ɵTileContentComponent_BaseFactory = /*@__PURE__*/ ɵɵgetInheritedFactory
             type: Input
         }] }); })();
 
-const _c0$1D = ["*"];
+const _c0$1E = ["*"];
 class TileComponent extends CoreBaseComponent {
     constructor() {
         super(...arguments);
@@ -49186,7 +49506,7 @@ class TileComponent extends CoreBaseComponent {
 /** @nocollapse */ TileComponent.ɵfac = function TileComponent_Factory(t) { return ɵTileComponent_BaseFactory(t || TileComponent); };
 /** @nocollapse */ TileComponent.ɵcmp = ɵɵdefineComponent({ type: TileComponent, selectors: [["sme-tile"]], hostVars: 4, hostBindings: function TileComponent_HostBindings(rf, ctx) { if (rf & 2) {
         ɵɵclassProp("sme-tile-fill", ctx.fillTile)("sme-tile-focusable", ctx.isFocusable);
-    } }, inputs: { tileHeader: "tileHeader", tileImageSrc: "tileImageSrc", fillTile: "fillTile", isFocusable: "isFocusable" }, features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1D, decls: 2, vars: 3, consts: [[1, "sme-padding-inset-md", "sme-arrange-stack-h", "sme-focus-zone", 3, "tileHeader", "tileImageSrc"]], template: function TileComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { tileHeader: "tileHeader", tileImageSrc: "tileImageSrc", fillTile: "fillTile", isFocusable: "isFocusable" }, features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1E, decls: 2, vars: 3, consts: [[1, "sme-padding-inset-md", "sme-arrange-stack-h", "sme-focus-zone", 3, "tileHeader", "tileImageSrc"]], template: function TileComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵprojectionDef();
         ɵɵelementStart(0, "sme-tile-content", 0);
         ɵɵprojection(1);
@@ -49251,6 +49571,597 @@ class TileModule {
             }]
     }], null, null); })();
 
+const _c0$1F = ["*"];
+class SmeUxContentComponent extends CoreBaseComponent {
+    constructor(injector) {
+        super(injector);
+    }
+    get logSourceName() {
+        return 'SmeUxContent';
+    }
+}
+/** @nocollapse */ SmeUxContentComponent.ɵfac = function SmeUxContentComponent_Factory(t) { return new (t || SmeUxContentComponent)(ɵɵdirectiveInject(Injector)); };
+/** @nocollapse */ SmeUxContentComponent.ɵcmp = ɵɵdefineComponent({ type: SmeUxContentComponent, selectors: [["sme-ux-content"]], features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1F, decls: 1, vars: 0, template: function SmeUxContentComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵprojectionDef();
+        ɵɵprojection(0);
+    } }, encapsulation: 2 });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(SmeUxContentComponent, [{
+        type: Component,
+        args: [{
+                selector: 'sme-ux-content',
+                template: `<ng-content></ng-content>`
+            }]
+    }], function () { return [{ type: Injector }]; }, null); })();
+
+class SmeUxContentModule {
+}
+/** @nocollapse */ SmeUxContentModule.ɵfac = function SmeUxContentModule_Factory(t) { return new (t || SmeUxContentModule)(); };
+/** @nocollapse */ SmeUxContentModule.ɵmod = ɵɵdefineNgModule({ type: SmeUxContentModule });
+/** @nocollapse */ SmeUxContentModule.ɵinj = ɵɵdefineInjector({ imports: [[
+            CommonModule
+        ]] });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵɵsetNgModuleScope(SmeUxContentModule, { declarations: [SmeUxContentComponent], imports: [CommonModule], exports: [SmeUxContentComponent] }); })();
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(SmeUxContentModule, [{
+        type: NgModule,
+        args: [{
+                exports: [SmeUxContentComponent],
+                declarations: [SmeUxContentComponent],
+                imports: [
+                    CommonModule
+                ]
+            }]
+    }], null, null); })();
+
+const _c0$1G = ["*"];
+class SmeUxFooterComponent extends CoreBaseComponent {
+    constructor(injector) {
+        super(injector);
+    }
+    get logSourceName() {
+        return 'SmeUxFooterSpace';
+    }
+}
+/** @nocollapse */ SmeUxFooterComponent.ɵfac = function SmeUxFooterComponent_Factory(t) { return new (t || SmeUxFooterComponent)(ɵɵdirectiveInject(Injector)); };
+/** @nocollapse */ SmeUxFooterComponent.ɵcmp = ɵɵdefineComponent({ type: SmeUxFooterComponent, selectors: [["sme-ux-footer"]], features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1G, decls: 1, vars: 0, template: function SmeUxFooterComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵprojectionDef();
+        ɵɵprojection(0);
+    } }, encapsulation: 2 });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(SmeUxFooterComponent, [{
+        type: Component,
+        args: [{
+                selector: 'sme-ux-footer',
+                template: `<ng-content></ng-content>`
+            }]
+    }], function () { return [{ type: Injector }]; }, null); })();
+
+class SmeUxFooterModule {
+}
+/** @nocollapse */ SmeUxFooterModule.ɵfac = function SmeUxFooterModule_Factory(t) { return new (t || SmeUxFooterModule)(); };
+/** @nocollapse */ SmeUxFooterModule.ɵmod = ɵɵdefineNgModule({ type: SmeUxFooterModule });
+/** @nocollapse */ SmeUxFooterModule.ɵinj = ɵɵdefineInjector({ imports: [[
+            CommonModule
+        ]] });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵɵsetNgModuleScope(SmeUxFooterModule, { declarations: [SmeUxFooterComponent], imports: [CommonModule], exports: [SmeUxFooterComponent] }); })();
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(SmeUxFooterModule, [{
+        type: NgModule,
+        args: [{
+                exports: [SmeUxFooterComponent],
+                declarations: [SmeUxFooterComponent],
+                imports: [
+                    CommonModule
+                ]
+            }]
+    }], null, null); })();
+
+function WizardNavigationButtonComponent_span_3_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelement(0, "span", 5);
+} if (rf & 2) {
+    const ctx_r0 = ɵɵnextContext();
+    ɵɵclassMap(ctx_r0.leftIcon);
+} }
+function WizardNavigationButtonComponent_span_9_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelement(0, "span", 5);
+} if (rf & 2) {
+    const ctx_r1 = ɵɵnextContext();
+    ɵɵclassMap(ctx_r1.rightIcon);
+} }
+class WizardNavigationButtonComponent extends CoreBaseComponent {
+    constructor(injector) {
+        super(injector);
+        /**
+         * The internal buttons object
+         */
+        this.buttonsInternal = [];
+        this.render = false;
+        this.showIcons = true;
+        this.leftIcon = 'sme-icon-chevronLeft';
+        this.rightIcon = 'sme-icon-chevronRight';
+        this.buttonAutoWidth = true;
+        this.defaultStartIndex = -2;
+        /**
+         * It emits the start button clicked event.
+         */
+        this.startButtonClicked = new EventEmitter();
+        /**
+         * It emits the end button clicked event.
+         */
+        this.endButtonClicked = new EventEmitter();
+        this.currentStartButtonIndexInternal = this.defaultStartIndex;
+    }
+    get logSourceName() {
+        return 'WizardNavigationButtonComponent';
+    }
+    /**
+     * Getter buttons
+     */
+    get buttons() {
+        return this.buttonsInternal;
+    }
+    /**
+     * Setter buttons
+     */
+    set buttons(input) {
+        if (!input || input.length < 2) {
+            this.reset();
+            this.buttonsInternal = [];
+        }
+        else {
+            this.buttonsInternal = input;
+            this.currentStartButtonIndexInternal = -1;
+        }
+        this.render = this.buttons && this.buttons.length >= 2;
+    }
+    /**
+     * Getter currentStartButtonIndex
+     */
+    get currentStartButtonIndex() {
+        return this.currentStartButtonIndexInternal;
+    }
+    /**
+     * Setter currentStartButtonIndex
+     */
+    set currentStartButtonIndex(input) {
+        if (typeof input !== 'number') {
+            Logging.log({
+                consoleGroupHeader: 'WizardNavigationButtonComponent',
+                level: LogLevel.Error,
+                message: 'non number input was passed in.',
+                source: 'BannerComponent.set.currentStartButtonIndex()'
+            });
+        }
+        this.currentStartButtonIndexInternal = input;
+    }
+    /**
+     * It checks the enable/disable state for the start button
+     * @param index The current index for wizard start button
+     * @returns true for enable and false for disable
+     */
+    checkStartDisabled(index) {
+        return index < 0;
+    }
+    /**
+     * It checks the enable/disable state for the end button
+     * @param index The current index for wizard end button
+     * @returns true for enable and false for disable
+     */
+    checkEndDisabled(index) {
+        return index >= this.buttons.length - 2;
+    }
+    /**
+     * It resets the current start button index to -2 if no button objects,
+     * Otherwise it sets the button index to 0.
+     */
+    reset() {
+        this.currentStartButtonIndex = this.defaultStartIndex;
+        if (this.buttons.length >= 2) {
+            this.currentStartButtonIndex = 0;
+            this.render = true;
+        }
+        else {
+            this.render = false;
+        }
+    }
+    /**
+     * It updates the component by label name, this is tied to pivot tab component clicking events.
+     * @param label the label name.
+     */
+    updateStartIndexByLabel(label) {
+        const buttons = this.buttons.map((b) => {
+            return b.label;
+        });
+        const activatedButtonIndex = buttons.indexOf(label);
+        if (activatedButtonIndex === -1 || activatedButtonIndex >= buttons.length) {
+            return;
+        }
+        this.currentStartButtonIndexInternal = activatedButtonIndex - 1;
+    }
+    /**
+     * It handles the start index button click
+     */
+    onStartButtonClick() {
+        if (this.currentStartButtonIndex > this.defaultStartIndex) {
+            this.currentStartButtonIndex -= 1;
+        }
+        this.startButtonClicked.emit();
+    }
+    /**
+     * It handles the end index button click
+     */
+    onEndButtonClick() {
+        if (this.currentStartButtonIndex <= this.buttons.length - 1) {
+            this.currentStartButtonIndex += 1;
+        }
+        this.endButtonClicked.emit();
+    }
+    /**
+     * It gets the current start index button label.
+     * @returns the label string.
+     */
+    getCurrentStartButtonLabel() {
+        return this.getButtonLabel(this.currentStartButtonIndex);
+    }
+    /**
+     * It gets the current activated button label.
+     * @returns the label string.
+     */
+    getCurrentActivatedButtonLabel() {
+        return this.getButtonLabel(this.currentStartButtonIndex + 1);
+    }
+    /**
+     * It gets the current end index button label.
+     * @returns the label string.
+     */
+    getCurrentEndButtonLabel() {
+        return this.getButtonLabel(this.currentStartButtonIndex + 2);
+    }
+    /**
+     * It gets the button label.
+     * @param index the index for label.
+     * @returns the label string.
+     */
+    getButtonLabel(index) {
+        var _a;
+        if (this.currentStartButtonIndex <= this.defaultStartIndex || this.currentStartButtonIndex > this.buttons.length - 1) {
+            return;
+        }
+        return (_a = this.buttons[index]) === null || _a === void 0 ? void 0 : _a.label;
+    }
+}
+/** @nocollapse */ WizardNavigationButtonComponent.ɵfac = function WizardNavigationButtonComponent_Factory(t) { return new (t || WizardNavigationButtonComponent)(ɵɵdirectiveInject(Injector)); };
+/** @nocollapse */ WizardNavigationButtonComponent.ɵcmp = ɵɵdefineComponent({ type: WizardNavigationButtonComponent, selectors: [["sme-wizard-navigation-button"]], inputs: { showIcons: "showIcons", leftIcon: "leftIcon", rightIcon: "rightIcon", buttonAutoWidth: "buttonAutoWidth", buttons: "buttons" }, outputs: { startButtonClicked: "startButtonClicked", endButtonClicked: "endButtonClicked" }, features: [ɵɵInheritDefinitionFeature], decls: 10, vars: 16, consts: [[1, "sme-arrange-stack-h", "sme-position-stretch-h"], [1, "sme-padding-right-xs"], ["type", "button", "aria-live", "polite", "tabIndex", "0", 1, "sme-arrange-stack-h", 3, "disabled", "click"], ["class", "sme-icon", 3, "class", 4, "ngIf"], [1, "sme-position-flex-auto", "sme-position-flex-grow-start", "sme-arrange-ellipsis", "sme-action-button-text-span"], [1, "sme-icon"]], template: function WizardNavigationButtonComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵelementStart(0, "div", 0);
+        ɵɵelementStart(1, "span", 1);
+        ɵɵelementStart(2, "button", 2);
+        ɵɵlistener("click", function WizardNavigationButtonComponent_Template_button_click_2_listener() { return ctx.onStartButtonClick(); });
+        ɵɵtemplate(3, WizardNavigationButtonComponent_span_3_Template, 1, 2, "span", 3);
+        ɵɵelementStart(4, "span", 4);
+        ɵɵtext(5);
+        ɵɵelementEnd();
+        ɵɵelementEnd();
+        ɵɵelementEnd();
+        ɵɵelementStart(6, "button", 2);
+        ɵɵlistener("click", function WizardNavigationButtonComponent_Template_button_click_6_listener() { return ctx.onEndButtonClick(); });
+        ɵɵelementStart(7, "span", 4);
+        ɵɵtext(8);
+        ɵɵelementEnd();
+        ɵɵtemplate(9, WizardNavigationButtonComponent_span_9_Template, 1, 2, "span", 3);
+        ɵɵelementEnd();
+        ɵɵelementEnd();
+    } if (rf & 2) {
+        ɵɵclassProp("sme-layout-hidden", !ctx.render);
+        ɵɵadvance(2);
+        ɵɵclassMap(ctx.buttons[ctx.currentStartButtonIndex] == null ? null : ctx.buttons[ctx.currentStartButtonIndex].class);
+        ɵɵclassProp("sme-button-auto-width", ctx.buttonAutoWidth);
+        ɵɵproperty("disabled", ctx.checkStartDisabled(ctx.currentStartButtonIndex));
+        ɵɵadvance(1);
+        ɵɵproperty("ngIf", ctx.showIcons);
+        ɵɵadvance(2);
+        ɵɵtextInterpolate1(" ", ctx.buttons[ctx.currentStartButtonIndex] ? ctx.buttons[ctx.currentStartButtonIndex].label : ctx.strings.MsftSmeShell.Angular.Wizard.Lite.Actions.previous, "");
+        ɵɵadvance(1);
+        ɵɵclassMap(ctx.buttons[ctx.currentStartButtonIndex] == null ? null : ctx.buttons[ctx.currentStartButtonIndex].class);
+        ɵɵclassProp("sme-button-auto-width", ctx.buttonAutoWidth);
+        ɵɵproperty("disabled", ctx.checkEndDisabled(ctx.currentStartButtonIndex));
+        ɵɵadvance(2);
+        ɵɵtextInterpolate1(" ", ctx.buttons[ctx.currentStartButtonIndex + 2] ? ctx.buttons[ctx.currentStartButtonIndex + 2].label : ctx.strings.MsftSmeShell.Angular.Wizard.Lite.Actions.next, "");
+        ɵɵadvance(1);
+        ɵɵproperty("ngIf", ctx.showIcons);
+    } }, directives: [NgIf], encapsulation: 2 });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(WizardNavigationButtonComponent, [{
+        type: Component,
+        args: [{
+                selector: 'sme-wizard-navigation-button',
+                templateUrl: './wizard-navigation-button.component.html'
+            }]
+    }], function () { return [{ type: Injector }]; }, { showIcons: [{
+            type: Input
+        }], leftIcon: [{
+            type: Input
+        }], rightIcon: [{
+            type: Input
+        }], buttonAutoWidth: [{
+            type: Input
+        }], buttons: [{
+            type: Input
+        }], startButtonClicked: [{
+            type: Output
+        }], endButtonClicked: [{
+            type: Output
+        }] }); })();
+
+function SmeWizardLiteFooterTemplateComponent_div_0_button_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = ɵɵgetCurrentView();
+    ɵɵelementStart(0, "button", 5);
+    ɵɵlistener("click", function SmeWizardLiteFooterTemplateComponent_div_0_button_1_Template_button_click_0_listener($event) { ɵɵrestoreView(_r5); const ctx_r4 = ɵɵnextContext(2); return ctx_r4.onReviewButtonClicked($event); });
+    ɵɵelementStart(1, "span", 6);
+    ɵɵtext(2);
+    ɵɵelementEnd();
+    ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = ɵɵnextContext(2);
+    ɵɵadvance(2);
+    ɵɵtextInterpolate1(" ", ctx_r1.reviewButtonTextForRendering, "");
+} }
+function SmeWizardLiteFooterTemplateComponent_div_0_sme_wizard_navigation_button_2_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = ɵɵgetCurrentView();
+    ɵɵelementStart(0, "sme-wizard-navigation-button", 7, 8);
+    ɵɵlistener("startButtonClicked", function SmeWizardLiteFooterTemplateComponent_div_0_sme_wizard_navigation_button_2_Template_sme_wizard_navigation_button_startButtonClicked_0_listener($event) { ɵɵrestoreView(_r8); const ctx_r7 = ɵɵnextContext(2); return ctx_r7.onPrevButtonClicked($event); })("endButtonClicked", function SmeWizardLiteFooterTemplateComponent_div_0_sme_wizard_navigation_button_2_Template_sme_wizard_navigation_button_endButtonClicked_0_listener($event) { ɵɵrestoreView(_r8); const ctx_r9 = ɵɵnextContext(2); return ctx_r9.onNextButtonClicked($event); });
+    ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = ɵɵnextContext(2);
+    ɵɵproperty("buttons", ctx_r2.buttons);
+} }
+function SmeWizardLiteFooterTemplateComponent_div_0_button_3_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = ɵɵgetCurrentView();
+    ɵɵelementStart(0, "button", 9);
+    ɵɵlistener("click", function SmeWizardLiteFooterTemplateComponent_div_0_button_3_Template_button_click_0_listener($event) { ɵɵrestoreView(_r11); const ctx_r10 = ɵɵnextContext(2); return ctx_r10.onExitButtonClicked($event); });
+    ɵɵelementStart(1, "span", 6);
+    ɵɵtext(2);
+    ɵɵelementEnd();
+    ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = ɵɵnextContext(2);
+    ɵɵadvance(2);
+    ɵɵtextInterpolate1(" ", ctx_r3.exitButtonTextForRendering, "");
+} }
+function SmeWizardLiteFooterTemplateComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementStart(0, "div", 1);
+    ɵɵtemplate(1, SmeWizardLiteFooterTemplateComponent_div_0_button_1_Template, 3, 1, "button", 2);
+    ɵɵtemplate(2, SmeWizardLiteFooterTemplateComponent_div_0_sme_wizard_navigation_button_2_Template, 2, 1, "sme-wizard-navigation-button", 3);
+    ɵɵtemplate(3, SmeWizardLiteFooterTemplateComponent_div_0_button_3_Template, 3, 1, "button", 4);
+    ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = ɵɵnextContext();
+    ɵɵadvance(1);
+    ɵɵproperty("ngIf", ctx_r0.displayReviewButton);
+    ɵɵadvance(1);
+    ɵɵproperty("ngIf", ctx_r0.displayWizardButton);
+    ɵɵadvance(1);
+    ɵɵproperty("ngIf", ctx_r0.displayExitButton);
+} }
+class SmeWizardLiteFooterTemplateComponent extends CoreBaseComponent {
+    constructor(injector) {
+        super(injector);
+        this.displayExitButton = true;
+        this.displayWizardButton = true;
+        this.displayReviewButton = true;
+        this.reviewButtonClickedEventEmitter = new EventEmitter();
+        this.exitButtonClickedEventEmitter = new EventEmitter();
+        this.prevButtonClickedEventEmitter = new EventEmitter();
+        this.nextButtonClickedEventEmitter = new EventEmitter();
+        this.buttonsInternal = [];
+    }
+    get logSourceName() {
+        return 'SmeWizardLiteFooterTemplateComponent';
+    }
+    set buttons(buttons) {
+        this.buttonsInternal = buttons;
+    }
+    get buttons() {
+        return this.buttonsInternal;
+    }
+    get reviewButtonTextForRendering() {
+        var _a;
+        return (_a = this.reviewButtonText) !== null && _a !== void 0 ? _a : this.strings.MsftSmeShell.Angular.Wizard.Lite.FooterTemplate.review;
+    }
+    get exitButtonTextForRendering() {
+        var _a;
+        return (_a = this.exitButtonText) !== null && _a !== void 0 ? _a : this.strings.MsftSmeShell.Angular.Wizard.Lite.FooterTemplate.exit;
+    }
+    /**
+     * It handles the on selection changed event from the external pivot tab component.
+     * @param tab the current selected pivot tab.
+     * @returns void.
+     */
+    onSelectionChanged(tab) {
+        if (!tab || !tab.label) {
+            return;
+        }
+        if (tab.label === this.wizardButton.getCurrentActivatedButtonLabel()) {
+            return;
+        }
+        this.wizardButton.updateStartIndexByLabel(tab.label);
+    }
+    onPrevButtonClicked($event) {
+        if (!this.wizardButton) {
+            return;
+        }
+        this.prevButtonClickedEventEmitter.emit($event);
+    }
+    onNextButtonClicked($event) {
+        if (!this.wizardButton) {
+            return;
+        }
+        this.nextButtonClickedEventEmitter.emit($event);
+    }
+    onReviewButtonClicked($event) {
+        this.reviewButtonClickedEventEmitter.emit($event);
+    }
+    onExitButtonClicked($event) {
+        this.exitButtonClickedEventEmitter.emit($event);
+    }
+}
+/** @nocollapse */ SmeWizardLiteFooterTemplateComponent.ɵfac = function SmeWizardLiteFooterTemplateComponent_Factory(t) { return new (t || SmeWizardLiteFooterTemplateComponent)(ɵɵdirectiveInject(Injector)); };
+/** @nocollapse */ SmeWizardLiteFooterTemplateComponent.ɵcmp = ɵɵdefineComponent({ type: SmeWizardLiteFooterTemplateComponent, selectors: [["sme-wizard-lite-footer-template"]], viewQuery: function SmeWizardLiteFooterTemplateComponent_Query(rf, ctx) { if (rf & 1) {
+        ɵɵviewQuery(WizardNavigationButtonComponent, 1);
+    } if (rf & 2) {
+        let _t;
+        ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.wizardButton = _t.first);
+    } }, inputs: { displayExitButton: "displayExitButton", displayWizardButton: "displayWizardButton", displayReviewButton: "displayReviewButton", reviewButtonText: "reviewButtonText", exitButtonText: "exitButtonText" }, outputs: { reviewButtonClickedEventEmitter: "reviewButtonClickedEventEmitter", exitButtonClickedEventEmitter: "exitButtonClickedEventEmitter", prevButtonClickedEventEmitter: "prevButtonClickedEventEmitter", nextButtonClickedEventEmitter: "nextButtonClickedEventEmitter" }, features: [ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["class", "sme-arrange-wrapstack-h sme-position-stretch-h sme-focus-zone", 4, "ngIf"], [1, "sme-arrange-wrapstack-h", "sme-position-stretch-h", "sme-focus-zone"], ["class", "sme-button-primary", "tabindex", "0", 3, "click", 4, "ngIf"], ["class", "sme-padding-left-lg sme-focus-zone", 3, "buttons", "startButtonClicked", "endButtonClicked", 4, "ngIf"], ["class", "sme-layout-button-flex-end", "tabindex", "0", 3, "click", 4, "ngIf"], ["tabindex", "0", 1, "sme-button-primary", 3, "click"], [1, "sme-position-flex-auto", "sme-position-flex-grow-start", "sme-arrange-ellipsis", "sme-action-button-text-span"], [1, "sme-padding-left-lg", "sme-focus-zone", 3, "buttons", "startButtonClicked", "endButtonClicked"], ["wizardButton", ""], ["tabindex", "0", 1, "sme-layout-button-flex-end", 3, "click"]], template: function SmeWizardLiteFooterTemplateComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵtemplate(0, SmeWizardLiteFooterTemplateComponent_div_0_Template, 4, 3, "div", 0);
+    } if (rf & 2) {
+        ɵɵproperty("ngIf", ctx.displayReviewButton || ctx.displayWizardButton || ctx.displayExitButton);
+    } }, directives: [NgIf, WizardNavigationButtonComponent], encapsulation: 2 });
+__decorate([
+    Yield$1(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], SmeWizardLiteFooterTemplateComponent.prototype, "onPrevButtonClicked", null);
+__decorate([
+    Yield$1(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], SmeWizardLiteFooterTemplateComponent.prototype, "onNextButtonClicked", null);
+__decorate([
+    Yield$1(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], SmeWizardLiteFooterTemplateComponent.prototype, "onReviewButtonClicked", null);
+__decorate([
+    Yield$1(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], SmeWizardLiteFooterTemplateComponent.prototype, "onExitButtonClicked", null);
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(SmeWizardLiteFooterTemplateComponent, [{
+        type: Component,
+        args: [{
+                selector: 'sme-wizard-lite-footer-template',
+                templateUrl: './sme-wizard-lite-footer-template.component.html'
+            }]
+    }], function () { return [{ type: Injector }]; }, { displayExitButton: [{
+            type: Input
+        }], displayWizardButton: [{
+            type: Input
+        }], displayReviewButton: [{
+            type: Input
+        }], reviewButtonText: [{
+            type: Input
+        }], exitButtonText: [{
+            type: Input
+        }], reviewButtonClickedEventEmitter: [{
+            type: Output
+        }], exitButtonClickedEventEmitter: [{
+            type: Output
+        }], prevButtonClickedEventEmitter: [{
+            type: Output
+        }], nextButtonClickedEventEmitter: [{
+            type: Output
+        }], wizardButton: [{
+            type: ViewChild,
+            args: [WizardNavigationButtonComponent]
+        }], onPrevButtonClicked: [], onNextButtonClicked: [], onReviewButtonClicked: [], onExitButtonClicked: [] }); })();
+
+class WizardNavigationButtonModule {
+}
+/** @nocollapse */ WizardNavigationButtonModule.ɵfac = function WizardNavigationButtonModule_Factory(t) { return new (t || WizardNavigationButtonModule)(); };
+/** @nocollapse */ WizardNavigationButtonModule.ɵmod = ɵɵdefineNgModule({ type: WizardNavigationButtonModule });
+/** @nocollapse */ WizardNavigationButtonModule.ɵinj = ɵɵdefineInjector({ imports: [[
+            RouterModule,
+            CommonModule
+        ]] });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵɵsetNgModuleScope(WizardNavigationButtonModule, { declarations: [WizardNavigationButtonComponent], imports: [RouterModule,
+        CommonModule], exports: [WizardNavigationButtonComponent] }); })();
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(WizardNavigationButtonModule, [{
+        type: NgModule,
+        args: [{
+                exports: [
+                    WizardNavigationButtonComponent
+                ],
+                declarations: [
+                    WizardNavigationButtonComponent
+                ],
+                imports: [
+                    RouterModule,
+                    CommonModule
+                ]
+            }]
+    }], null, null); })();
+
+class SmeWizardLiteFooterTemplateModule {
+}
+/** @nocollapse */ SmeWizardLiteFooterTemplateModule.ɵfac = function SmeWizardLiteFooterTemplateModule_Factory(t) { return new (t || SmeWizardLiteFooterTemplateModule)(); };
+/** @nocollapse */ SmeWizardLiteFooterTemplateModule.ɵmod = ɵɵdefineNgModule({ type: SmeWizardLiteFooterTemplateModule });
+/** @nocollapse */ SmeWizardLiteFooterTemplateModule.ɵinj = ɵɵdefineInjector({ imports: [[
+            CommonModule,
+            PivotModule,
+            WizardNavigationButtonModule
+        ]] });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵɵsetNgModuleScope(SmeWizardLiteFooterTemplateModule, { declarations: [SmeWizardLiteFooterTemplateComponent], imports: [CommonModule,
+        PivotModule,
+        WizardNavigationButtonModule], exports: [SmeWizardLiteFooterTemplateComponent] }); })();
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(SmeWizardLiteFooterTemplateModule, [{
+        type: NgModule,
+        args: [{
+                exports: [SmeWizardLiteFooterTemplateComponent],
+                declarations: [SmeWizardLiteFooterTemplateComponent],
+                imports: [
+                    CommonModule,
+                    PivotModule,
+                    WizardNavigationButtonModule
+                ]
+            }]
+    }], null, null); })();
+
+const _c0$1H = ["*"];
+class SmeUxPageComponent extends CoreBaseComponent {
+    constructor(injector) {
+        super(injector);
+    }
+    get logSourceName() {
+        return 'SmeUxPage';
+    }
+}
+/** @nocollapse */ SmeUxPageComponent.ɵfac = function SmeUxPageComponent_Factory(t) { return new (t || SmeUxPageComponent)(ɵɵdirectiveInject(Injector)); };
+/** @nocollapse */ SmeUxPageComponent.ɵcmp = ɵɵdefineComponent({ type: SmeUxPageComponent, selectors: [["sme-ux-page"]], features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1H, decls: 1, vars: 0, template: function SmeUxPageComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵprojectionDef();
+        ɵɵprojection(0);
+    } }, encapsulation: 2 });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(SmeUxPageComponent, [{
+        type: Component,
+        args: [{
+                selector: 'sme-ux-page',
+                template: `<ng-content></ng-content>`
+            }]
+    }], function () { return [{ type: Injector }]; }, null); })();
+
+class SmeUxPageModule {
+}
+/** @nocollapse */ SmeUxPageModule.ɵfac = function SmeUxPageModule_Factory(t) { return new (t || SmeUxPageModule)(); };
+/** @nocollapse */ SmeUxPageModule.ɵmod = ɵɵdefineNgModule({ type: SmeUxPageModule });
+/** @nocollapse */ SmeUxPageModule.ɵinj = ɵɵdefineInjector({ imports: [[
+            CommonModule,
+            SmeUxContentModule,
+            SmeUxFooterModule
+        ]] });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵɵsetNgModuleScope(SmeUxPageModule, { declarations: [SmeUxPageComponent], imports: [CommonModule,
+        SmeUxContentModule,
+        SmeUxFooterModule], exports: [SmeUxPageComponent] }); })();
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(SmeUxPageModule, [{
+        type: NgModule,
+        args: [{
+                exports: [SmeUxPageComponent],
+                declarations: [SmeUxPageComponent],
+                imports: [
+                    CommonModule,
+                    SmeUxContentModule,
+                    SmeUxFooterModule
+                ]
+            }]
+    }], null, null); })();
+
 /**
  * The representation of a step in the wizard component.
  */
@@ -49873,7 +50784,7 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], WizardResponsiveWindowManager.prototype, "onWindowSizeChanged", null);
 
-const _c0$1E = ["wizardFooter"];
+const _c0$1I = ["wizardFooter"];
 function WizardComponent_div_1_sme_badge_3_Template(rf, ctx) { if (rf & 1) {
     ɵɵelement(0, "sme-badge", 14);
 } }
@@ -50799,7 +51710,7 @@ class WizardComponent extends DynamicComponentBase {
 }
 /** @nocollapse */ WizardComponent.ɵfac = function WizardComponent_Factory(t) { return new (t || WizardComponent)(ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(ElementRef), ɵɵdirectiveInject(AppContextService), ɵɵdirectiveInject(ChangeDetectorRef), ɵɵdirectiveInject(ComponentFactoryResolver), ɵɵdirectiveInject(SME_LAYOUT_PROVIDER, 12)); };
 /** @nocollapse */ WizardComponent.ɵcmp = ɵɵdefineComponent({ type: WizardComponent, selectors: [["sme-wizard"]], viewQuery: function WizardComponent_Query(rf, ctx) { if (rf & 1) {
-        ɵɵviewQuery(_c0$1E, 1);
+        ɵɵviewQuery(_c0$1I, 1);
     } if (rf & 2) {
         let _t;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.wizardFooter = _t.first);
@@ -51210,252 +52121,251 @@ class TemplateDrivenWizardStepComponent extends FormWizardStepComponent {
     }
 }
 
-class ContextDropdownComponent {
-    constructor() {
-        this.actions = [];
-    }
-}
-/** @nocollapse */ ContextDropdownComponent.ɵfac = function ContextDropdownComponent_Factory(t) { return new (t || ContextDropdownComponent)(); };
-/** @nocollapse */ ContextDropdownComponent.ɵcmp = ɵɵdefineComponent({ type: ContextDropdownComponent, selectors: [["sme-context-dropdown"]], inputs: { actionGroupTitle: "actionGroupTitle", actions: "actions" }, decls: 8, vars: 3, consts: [["role", "presentation", 1, "sme-position-flex-none", 3, "displayToSide"], ["dropDown", ""], ["role", "menuitem", "type", "button", 1, "sme-button-trigger", "sme-layout-action-bar-item-height", "sme-button-auto-width", "sme-button-align-left", "sme-position-stretch-h", "sme-dropdown-toggle"], ["dropDownButton", ""], [1, "sme-icon", "sme-icon-size-xxs", "sme-icon-chevronRight", "sme-position-right-inline"], ["role", "menu", 1, "sme-dropdown-content", 3, "actions"]], template: function ContextDropdownComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵelementStart(0, "sme-dropdown", 0, 1);
-        ɵɵelementStart(2, "button", 2, 3);
-        ɵɵelementStart(4, "span");
-        ɵɵtext(5);
-        ɵɵelementEnd();
-        ɵɵelement(6, "span", 4);
-        ɵɵelementEnd();
-        ɵɵelement(7, "sme-action-menu", 5);
-        ɵɵelementEnd();
-    } if (rf & 2) {
-        ɵɵproperty("displayToSide", true);
-        ɵɵadvance(5);
-        ɵɵtextInterpolate(ctx.actionGroupTitle);
-        ɵɵadvance(2);
-        ɵɵproperty("actions", ctx.actions);
-    } }, directives: [DropdownComponent, ActionMenuComponent], encapsulation: 2 });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(ContextDropdownComponent, [{
-        type: Component,
-        args: [{
-                selector: 'sme-context-dropdown',
-                templateUrl: './context-dropdown.component.html'
-            }]
-    }], null, { actionGroupTitle: [{
-            type: Input
-        }], actions: [{
-            type: Input
-        }] }); })();
-
-function ContextMenuComponent_sme_dropdown_0_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "sme-dropdown", 1);
-    ɵɵelementStart(1, "div", 2);
-    ɵɵprojection(2);
-    ɵɵelement(3, "sme-action-menu", 3, 4);
-    ɵɵelementEnd();
-    ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = ɵɵnextContext();
-    ɵɵproperty("isContextMenu", true)("ngStyle", ctx_r0.getMenuPosition());
-    ɵɵadvance(3);
-    ɵɵproperty("actions", ctx_r0.contextMenuItems)("target", ctx_r0.target);
-} }
-const _c0$1F = ["*"];
 /**
- *
- * @smeDoc {@label Context-Menu @id sme-context-menu}
- *
- * @overview
- * @file {@filepath ./examples/context-menu-overview.md}
- *
- * @example {@label Basic Usage @id sme-dev-guide-controls-context-menu}
- * @file {@filename component.html @filepath ./examples/context-menu-example.component.html}
- * @file {@filename component.ts @filepath ./examples/context-menu-example.component.ts}
- *
- * @example {@label Nested Actions Usage @id sme-nested-actions-guide}
- * @file {@filename component.html @filepath ./examples/nested-context-menu-example.component.html}
- * @file {@filename component.ts @filepath ./examples/context-menu-example.component.ts}
+ * The wizard lite service that mainly handles the wizard button with the pivot relationship from internal shell.
  */
-class ContextMenuComponent extends CoreBaseComponent {
-    constructor(injector, element) {
-        super(injector);
-        this.element = element;
-        /**
-         * Gets the items to display in the contextmenu -they should of type actionItem
-        */
-        this.contextMenuItems = [];
-        /**
-         *Takes in a function that is executed once an actionItem is clicked
-        */
-        this.contextMenuItemClick = new EventEmitter();
-        /**
-         * Value that toggles the contextmenu
-        */
-        this.isOpen = false;
+class WizardLiteService {
+    refreshComponents(wizardLiteComponent) {
+        this.refreshContentComponents(wizardLiteComponent);
+        this.refreshFooterComponent(wizardLiteComponent);
+        this.setupEmitterSubscriptions(wizardLiteComponent);
+        this.checkActive(wizardLiteComponent);
+    }
+    /**
+     * It refreshes the internal object for the footer component.
+     * @param wizardLiteComponent the wizard lite component.
+     */
+    refreshFooterComponent(wizardLiteComponent) {
+        if (!wizardLiteComponent.customFooter &&
+            wizardLiteComponent.wizardLiteFooterTemplateElement &&
+            wizardLiteComponent.wizardLiteFooterTemplateElement.toArray().length) {
+            if (wizardLiteComponent.wizardLiteFooterTemplateElement.toArray().length !== 1) {
+                Logging.log({
+                    consoleGroupHeader: 'WizardLiteComponent',
+                    level: LogLevel.Error,
+                    message: 'illegal count of wizard button was found.',
+                    source: 'WizardLiteComponent.ngAfterContentInit()'
+                });
+            }
+            const wizardLiteFooterTemplateElement = wizardLiteComponent.wizardLiteFooterTemplateElement.toArray()[0];
+            wizardLiteComponent.wizardLiteFooterTemplate = wizardLiteFooterTemplateElement;
+            wizardLiteComponent.wizardButton = wizardLiteFooterTemplateElement.wizardButton;
+            wizardLiteFooterTemplateElement.buttons = wizardLiteComponent.buttons;
+        }
+        else if (wizardLiteComponent.customFooter &&
+            wizardLiteComponent.wizardButtonElement &&
+            wizardLiteComponent.wizardButtonElement.toArray().length) {
+            if (wizardLiteComponent.wizardButtonElement.toArray().length !== 1) {
+                Logging.log({
+                    consoleGroupHeader: 'WizardLiteComponent',
+                    level: LogLevel.Error,
+                    message: 'illegal count of wizard button was found.',
+                    source: 'WizardLiteComponent.ngAfterContentInit()'
+                });
+            }
+            const wizardButtonElement = wizardLiteComponent.wizardButtonElement.toArray()[0];
+            wizardLiteComponent.wizardButton = wizardButtonElement;
+            wizardButtonElement.buttons = wizardLiteComponent.buttons;
+        }
     }
     /**
-     * The source name to use for logging
+     * It refreshes the internal object for the content component.
+     * @param wizardLiteComponent the wizard lite component.
      */
-    get logSourceName() {
-        return 'ContextMenuComponent';
+    refreshContentComponents(wizardLiteComponent) {
+        if (wizardLiteComponent.pivotElement && wizardLiteComponent.pivotElement.toArray().length) {
+            if (wizardLiteComponent.pivotElement.toArray().length !== 1) {
+                Logging.log({
+                    consoleGroupHeader: 'WizardLiteComponent',
+                    level: LogLevel.Error,
+                    message: 'illegal count of pivot tab was found.',
+                    source: 'WizardLiteComponent.ngAfterContentInit()'
+                });
+            }
+            wizardLiteComponent.pivotComponent = wizardLiteComponent.pivotElement.toArray()[0];
+            // CoreBaseComponent will destroy wizardLiteComponent.subscriptions on destroy event
+            wizardLiteComponent.getSubscriptions().push(wizardLiteComponent.pivotComponent.selectionChange.subscribe(($event) => {
+                wizardLiteComponent.onSelectionChanged($event);
+            }));
+        }
     }
     /**
-     * Function that does the positioning of the contextmenu depending on the right-click
-    */
-    getMenuPosition() {
-        if (this.mouseEventData) {
-            return {
-                top: `${this.mouseEventData.clientY}px`,
-                left: `${this.mouseEventData.clientX}px`
-            };
+     * It sets up the interaction between the pivot component and the footer space wizard button from internal shell.
+     * @param wizardLiteComponent the wizard lite component.
+     */
+    setupEmitterSubscriptions(wizardLiteComponent) {
+        if (!wizardLiteComponent) {
+            return;
+        }
+        const pivotComponent = wizardLiteComponent.pivotComponent;
+        if (!pivotComponent) {
+            return;
+        }
+        const wizardLiteFooterTemplateElement = wizardLiteComponent.wizardLiteFooterTemplate;
+        if (!wizardLiteFooterTemplateElement) {
+            return;
         }
+        wizardLiteFooterTemplateElement.prevButtonClickedEventEmitter.subscribe(() => {
+            pivotComponent.selectTabByLabel(wizardLiteFooterTemplateElement.wizardButton.getCurrentActivatedButtonLabel());
+        });
+        wizardLiteFooterTemplateElement.nextButtonClickedEventEmitter.subscribe(() => {
+            pivotComponent.selectTabByLabel(wizardLiteFooterTemplateElement.wizardButton.getCurrentActivatedButtonLabel());
+        });
     }
     /**
-     * Function that adds focus to the element when using the keyboard
-    */
-    autoFocus() {
-        if (this.element.nativeElement) {
-            const firstFocusable = Dom.getFirstFocusableDescendent(this.element.nativeElement);
-            if (firstFocusable) {
-                firstFocusable.focus();
-            }
-        }
+     * It checks whether the component has been active.
+     * @param wizardLiteComponent the wizard lite component.
+     */
+    checkActive(wizardLiteComponent) {
+        wizardLiteComponent.active = !!wizardLiteComponent.wizardButton && !!wizardLiteComponent.pivotComponent;
     }
 }
-/** @nocollapse */ ContextMenuComponent.ɵfac = function ContextMenuComponent_Factory(t) { return new (t || ContextMenuComponent)(ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(ElementRef)); };
-/** @nocollapse */ ContextMenuComponent.ɵcmp = ɵɵdefineComponent({ type: ContextMenuComponent, selectors: [["sme-context-menu"]], inputs: { contextMenuItems: "contextMenuItems", mouseEventData: "mouseEventData", target: "target" }, outputs: { contextMenuItemClick: "contextMenuItemClick" }, features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1F, decls: 1, vars: 1, consts: [["class", "sme-layout-fixed sme-layer-dialog sme-focus-zone", 3, "isContextMenu", "ngStyle", 4, "ngIf"], [1, "sme-layout-fixed", "sme-layer-dialog", "sme-focus-zone", 3, "isContextMenu", "ngStyle"], ["role", "menu", 1, "sme-dropdown-content"], ["role", "menu", 3, "actions", "target"], ["actionBar", ""]], template: function ContextMenuComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵprojectionDef();
-        ɵɵtemplate(0, ContextMenuComponent_sme_dropdown_0_Template, 5, 4, "sme-dropdown", 0);
-    } if (rf & 2) {
-        ɵɵproperty("ngIf", ctx.isOpen);
-    } }, directives: [NgIf, DropdownComponent, NgStyle, ActionMenuComponent], encapsulation: 2 });
-__decorate([
-    Debounce$1(1),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], ContextMenuComponent.prototype, "autoFocus", null);
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(ContextMenuComponent, [{
-        type: Component,
-        args: [{
-                selector: 'sme-context-menu',
-                templateUrl: './context-menu.component.html',
-            }]
-    }], function () { return [{ type: Injector }, { type: ElementRef }]; }, { contextMenuItems: [{
-            type: Input
-        }], mouseEventData: [{
-            type: Input
-        }], target: [{
-            type: Input
-        }], contextMenuItemClick: [{
-            type: Output
-        }], autoFocus: [] }); })();
+/** @nocollapse */ WizardLiteService.ɵfac = function WizardLiteService_Factory(t) { return new (t || WizardLiteService)(); };
+/** @nocollapse */ WizardLiteService.ɵprov = ɵɵdefineInjectable({ token: WizardLiteService, factory: WizardLiteService.ɵfac });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(WizardLiteService, [{
+        type: Injectable
+    }], null, null); })();
 
-/**
- * Directive that controls the opening and the closing of the context-menu,
- * once the host element is right-clicked
-*/
-class ContextMenuDirective {
-    constructor(el) {
-        this.el = el;
+const _c0$1J = ["*"];
+class WizardLiteComponent extends CoreBaseComponent {
+    constructor(injector, wizardLiteService) {
+        super(injector);
+        this.wizardLiteService = wizardLiteService;
+        this.customFooter = false;
+        /**
+         * It determines the pivot control and footer wizard component both found.
+         */
+        this.active = false;
+        this.buttonsInternal = [];
     }
-    /**
-     * Listens for the right-click event on the host
-     * Opens custom contextmenu except when text is highlighted or link is clicked
-    */
-    onClick(event) {
-        const tagElement = event.target;
-        if (tagElement.tagName.toUpperCase() === 'A' || window.getSelection().toString() !== '') {
-            this.el.nativeElement.enableRightClickSelect = false;
-        }
-        else {
-            event.preventDefault();
-            this.el.nativeElement.enableRightClickSelect = true;
-            this.openContextMenu(event);
+    get logSourceName() {
+        return 'WizardLiteComponent';
+    }
+    set pivotComponent(pivots) {
+        if (pivots) {
+            const pivotLabels = pivots.getLabels();
+            if (!this.buttons || !this.buttons.length) {
+                this.buttonsInternal = pivotLabels.map((l) => {
+                    return {
+                        'label': l
+                    };
+                });
+            }
         }
+        this.pivotComponentInternal = pivots;
     }
-    // Closes the context menu when a click event is fired
-    documentClick() {
-        this.smeContextMenu.isOpen = false;
+    get pivotComponent() {
+        return this.pivotComponentInternal;
     }
-    // Prevents tab key event from closing the context menu
-    onKeyup(event) {
-        if (event.keyCode === KeyCode.Tab) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
+    get buttons() {
+        return this.buttonsInternal;
+    }
+    ngAfterContentInit() {
+        this.refresh();
     }
     /**
-     * Called once right-click is triggered and toggles the isOpen from the contextMenu
-     * It controls the opening and closing of contextMenu
-    */
-    openContextMenu($event) {
-        this.smeContextMenu.autoFocus();
-        if (this.smeContextMenu.isOpen) {
-            this.smeContextMenu.isOpen = false;
+     * It gets the subscription array from the core base component.
+     * @returns the subscriptions array.
+     */
+    getSubscriptions() {
+        return this.subscriptions;
+    }
+    refresh() {
+        this.wizardLiteService.refreshComponents(this);
+    }
+    onSelectionChanged(tab) {
+        if (!tab || !tab.label) {
+            return;
         }
-        setTimeout(() => {
-            this.smeContextMenu.mouseEventData = $event;
-            this.smeContextMenu.isOpen = true;
-        });
+        if (tab.label === this.wizardButton.getCurrentActivatedButtonLabel()) {
+            return;
+        }
+        this.wizardButton.updateStartIndexByLabel(tab.label);
     }
 }
-/** @nocollapse */ ContextMenuDirective.ɵfac = function ContextMenuDirective_Factory(t) { return new (t || ContextMenuDirective)(ɵɵdirectiveInject(ElementRef)); };
-/** @nocollapse */ ContextMenuDirective.ɵdir = ɵɵdefineDirective({ type: ContextMenuDirective, selectors: [["", "smeContextMenu", ""]], hostBindings: function ContextMenuDirective_HostBindings(rf, ctx) { if (rf & 1) {
-        ɵɵlistener("contextmenu", function ContextMenuDirective_contextmenu_HostBindingHandler($event) { return ctx.onClick($event); })("click", function ContextMenuDirective_click_HostBindingHandler() { return ctx.documentClick(); }, false, ɵɵresolveDocument)("keyup", function ContextMenuDirective_keyup_HostBindingHandler($event) { return ctx.onKeyup($event); });
-    } }, inputs: { smeContextMenu: "smeContextMenu" } });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(ContextMenuDirective, [{
-        type: Directive,
+/** @nocollapse */ WizardLiteComponent.ɵfac = function WizardLiteComponent_Factory(t) { return new (t || WizardLiteComponent)(ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(WizardLiteService)); };
+/** @nocollapse */ WizardLiteComponent.ɵcmp = ɵɵdefineComponent({ type: WizardLiteComponent, selectors: [["sme-wizard-lite"]], contentQueries: function WizardLiteComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+        ɵɵcontentQuery(dirIndex, PivotComponent, 1);
+        ɵɵcontentQuery(dirIndex, WizardNavigationButtonComponent, 1);
+        ɵɵcontentQuery(dirIndex, SmeWizardLiteFooterTemplateComponent, 1);
+    } if (rf & 2) {
+        let _t;
+        ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.pivotElement = _t);
+        ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.wizardButtonElement = _t);
+        ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.wizardLiteFooterTemplateElement = _t);
+    } }, inputs: { customFooter: "customFooter" }, features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1J, decls: 2, vars: 0, template: function WizardLiteComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵprojectionDef();
+        ɵɵelementStart(0, "sme-ux-page");
+        ɵɵprojection(1);
+        ɵɵelementEnd();
+    } }, directives: [SmeUxPageComponent], encapsulation: 2 });
+__decorate([
+    Debounce$1(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], WizardLiteComponent.prototype, "refresh", null);
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(WizardLiteComponent, [{
+        type: Component,
         args: [{
-                selector: '[smeContextMenu]'
+                selector: 'sme-wizard-lite',
+                templateUrl: './wizard-lite.component.html'
             }]
-    }], function () { return [{ type: ElementRef }]; }, { smeContextMenu: [{
+    }], function () { return [{ type: Injector }, { type: WizardLiteService }]; }, { pivotElement: [{
+            type: ContentChildren,
+            args: [PivotComponent, { descendants: true }]
+        }], wizardButtonElement: [{
+            type: ContentChildren,
+            args: [WizardNavigationButtonComponent, { descendants: true }]
+        }], wizardLiteFooterTemplateElement: [{
+            type: ContentChildren,
+            args: [SmeWizardLiteFooterTemplateComponent, { descendants: true }]
+        }], customFooter: [{
             type: Input
-        }], onClick: [{
-            type: HostListener,
-            args: ['contextmenu', ['$event']]
-        }], documentClick: [{
-            type: HostListener,
-            args: ['document:click']
-        }], onKeyup: [{
-            type: HostListener,
-            args: ['keyup', ['$event']]
-        }] }); })();
+        }], refresh: [] }); })();
 
-class ContextMenuModule {
+class WizardLiteModule {
 }
-/** @nocollapse */ ContextMenuModule.ɵfac = function ContextMenuModule_Factory(t) { return new (t || ContextMenuModule)(); };
-/** @nocollapse */ ContextMenuModule.ɵmod = ɵɵdefineNgModule({ type: ContextMenuModule });
-/** @nocollapse */ ContextMenuModule.ɵinj = ɵɵdefineInjector({ imports: [[
+/** @nocollapse */ WizardLiteModule.ɵfac = function WizardLiteModule_Factory(t) { return new (t || WizardLiteModule)(); };
+/** @nocollapse */ WizardLiteModule.ɵmod = ɵɵdefineNgModule({ type: WizardLiteModule });
+/** @nocollapse */ WizardLiteModule.ɵinj = ɵɵdefineInjector({ providers: [
+        WizardLiteService
+    ], imports: [[
             CommonModule,
-            ActionsModule,
-            DropdownModule,
-            DataTableModule
+            RouterModule,
+            WizardNavigationButtonModule,
+            SmeUxFooterModule,
+            SmeUxPageModule,
+            SmeUxContentModule,
+            SmeWizardLiteFooterTemplateModule
         ]] });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵɵsetNgModuleScope(ContextMenuModule, { declarations: [ContextMenuComponent,
-        ContextMenuDirective,
-        ContextDropdownComponent], imports: [CommonModule,
-        ActionsModule,
-        DropdownModule,
-        DataTableModule], exports: [ContextMenuComponent,
-        ContextMenuDirective,
-        ContextDropdownComponent] }); })();
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(ContextMenuModule, [{
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵɵsetNgModuleScope(WizardLiteModule, { declarations: [WizardLiteComponent], imports: [CommonModule,
+        RouterModule,
+        WizardNavigationButtonModule,
+        SmeUxFooterModule,
+        SmeUxPageModule,
+        SmeUxContentModule,
+        SmeWizardLiteFooterTemplateModule], exports: [WizardLiteComponent] }); })();
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(WizardLiteModule, [{
         type: NgModule,
         args: [{
+                exports: [
+                    WizardLiteComponent
+                ],
                 declarations: [
-                    ContextMenuComponent,
-                    ContextMenuDirective,
-                    ContextDropdownComponent
+                    WizardLiteComponent
                 ],
                 imports: [
                     CommonModule,
-                    ActionsModule,
-                    DropdownModule,
-                    DataTableModule
+                    RouterModule,
+                    WizardNavigationButtonModule,
+                    SmeUxFooterModule,
+                    SmeUxPageModule,
+                    SmeUxContentModule,
+                    SmeWizardLiteFooterTemplateModule
                 ],
-                exports: [
-                    ContextMenuComponent,
-                    ContextMenuDirective,
-                    ContextDropdownComponent
+                providers: [
+                    WizardLiteService
                 ]
             }]
     }], null, null); })();
@@ -52567,5 +53477,5 @@ function getFullRouteParams(route) {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionModule, AccordionPanelComponent, ActionBarComponent, ActionBarDirective, ActionButton, ActionButtonAsync, ActionButtonAsyncComponent, ActionButtonComponent, ActionButtonRendererComponent, ActionContainerComponent, ActionDropdown, ActionDropdownComponent, ActionDropdownRendererComponent, ActionItem, ActionItemComponent, ActionItemRendererComponent, ActionItemSeparator, ActionItemSeparatorComponent, ActionItemSeparatorRendererComponent, ActionMenuComponent, ActionsModule, ActiveConnectionService, ActiveDirectoryModule, ActiveDirectorySearchFormFieldComponent, ActiveDirectoryService, AlertBarComponent, AlertBarModule, AlertBarService, AlertSeverity, AppContextService, AppErrorHandler, ApplyMode, AriaLiveOptions, ArrayFormFieldComponent, ArrayFormFieldLoaderComponent, ArrayPropertySchemaFieldLoaderComponent, AuthorizationService, AutofocusDirective, AutofocusModule, AzureManagerService, BackdropComponent, BackdropModule, BackgroundExtensionRootComponent, BadgeBaseComponent, BadgeFeatureTypes, BadgeModule, BannerComponent, BannerModule, BaseComponent, BaseDialogComponent, BaseFormData, BasePropertiesForm, BasicFormLoaderComponent, BatchService, BooleanConverterPipe, BooleanConverterPipeModule, BreadcrumbComponent, BreadcrumbHeaderComponent, BreadcrumbHeaderModule, BreadcrumbModule, BreadcrumbSeparator, BugFixesFeatureBadgeComponent, ByteUnitConverterPipe, ByteUnitConverterPipeModule, CAPSLOCK_VALIDATOR, CalendarFormFieldComponent, CanDeactivateGuard, CapacityBarChartComponent, CapacityBase, CapacityDoughnutChartComponent, CapsLockValidatorDirective, ChartComponent, ChartModule, CheckboxFormFieldComponent, CheckboxFormFieldLoaderComponent, ChecklistFormFieldComponent, ChecklistFormFieldLoaderComponent, ChoiceDialogComponent, CimService, CimStreamService, ClampDirective, ClampModule, ClockFormFieldComponent, CodeFormFieldComponent, CodeFormFieldLoaderComponent, ColumnPickerService, ComboboxFormFieldComponent, ComboboxFormFieldLoaderComponent, ComingSoonBadgeComponent, CommonDialogsComponent, CommonSettingsComponent, CommonSettingsComponentBase, ConfirmationDialogComponent, ConfirmationListDialogComponent, ConnectionService, ConnectivityEnforcer, ConnectivityLevel, ContextDropdownComponent, ContextMenuComponent, ContextMenuDirective, ContextMenuModule, CoreServiceModule, CredSSPEnabledBadgeComponent, CredSSPManagerService, CriticalBadgeComponent, CustomBadgeComponent, DataOnlyFormFieldLoaderComponent, DataTableColumnComponent, DataTableColumnPickerExtension, DataTableComponent, DataTableModule, DataTableMultipleSelectMode, DataTableRenderedItemType, DataTableSortMode, DateConverterPipe, DateConverterPipeModule, DateFormFieldComponent, DateTimeFormFieldComponent, DateTimeRangeFormFieldComponent, DateTimeRangeOptionComponent, Debounce, DeleteColumnComponent, Deprecated, DetailsComponent, DetailsModule, DevGuardService, DialogChangeEvent, DialogCloseReason, DialogComponent, DialogContentComponent, DialogFooterComponent, DialogHeaderComponent, DialogMode, DialogModule, DialogService, DisabledChangedEvent, DisabledDirective, DisabledModule, DiscardDirective, DiscardModule, DocumentationComponent, DocumentationModule, DoughnutChartComponent, DoughnutChartModule, DropdownComponent, DropdownModule, DropdownService, DynamicActionItemComponent, DynamicComponentBase, EditableCollectionItem, EditableLayoutComponent, EditableLayoutItemComponent, ElectronService, EnumConverterPipe, EnumConverterPipeModule, ExperimentGuardService, ExtensionBrokerService, ExtensionDialogComponent, ExtensionRootModule, FeedbackBadgeComponent, FieldsetDirective, FileFormFieldComponent, FileFormFieldLoaderComponent, FileTransferService, FilterPipe, FilterPipeModule, FormAsyncValidatorBase, FormField, FormFieldAccessor, FormFieldAccessorDirective, FormFieldAsyncValidatorDirective, FormFieldComponent, FormFieldIsolatorComponent, FormFieldLayoutComponent, FormFieldOptionComponent, FormFieldOptionSubFormTemplateLoaderComponent, FormFieldOrientation, FormFieldTemplateDirective, FormFieldValidatorDirective, FormValidatorBase, FormWizardStepComponent, FormatPipe, FormatPipeModule, FrameService, GatewayService, GuardsModule, GuidedPaneComponent, GuidedPanelComponent, GuidedPanelModule, HeaderComponent, HeaderModule, HealthAlertSeverity, HighlightPipe, HighlightPipeModule, HorizontalBarChartComponent, HorizontalBarChartModule, HttpService, IconLayerComponent, IconModule, IdleComponent, IdleModule, ImprovementFeatureBadgeComponent, InputValidatorDirective, InstallationTypeGuardService, JobsService, JsonFormFieldComponent, JsonFormFieldLoaderComponent, LayeredIconComponent, LayoutComponent, LayoutConfigGenerator, LayoutDefinitionComponent, LayoutDrivenType, LayoutItemComponent, LayoutItemConfigMode, LayoutItemConfigPropertyWidthType, LayoutModule, LegendComponent, LegendEntryComponent, LegendModule, LifetimeService, LineChartComponent, LineChartModule, LineChartType, ListFormFieldComponent, LoadingWheelComponent, LoadingWheelModule, LoadingWheelSize, LocalDateConverterPipe, MachineNameValidatorDirective, MarkdownDirective, MarkdownModule, MasterViewComponent, MasterViewModule, MatchFieldValidatorDirective, MediaConversion2, MessageDialogComponent, Monaco, Navigation, NavigationService, NavigationTitle, NewBadgeComponent, NewFeatureBadgeComponent, NodeCredentialsFormComponent, NodeCredentialsFormModule, NodeService, NotificationService, NumberFormFieldComponent, NumberFormFieldLoaderComponent, ObjectDefaultFormFieldLoaderComponent, ObjectPropertySchemaFieldLoaderComponent, OptionsFormFieldComponent, OrderedListFormFieldComponent, OrderedListFormFieldLoaderComponent, PageAlertBarComponent, PageAlertBarModule, PanelControlComponent, PasswordFormFieldComponent, PasswordFormFieldLoaderComponent, PivotComponent, PivotModule, PivotTabComponent, PivotTabType, PowerShellService, PowerShellStreamService, PreviewBadgeComponent, PropertyGridComponent, PropertyGridItemComponent, PropertyGridModule, QueryDataItemPresetGenerator, QueryDataItemValueType, QueryDataOperand, QueryEditorComponent, QueryEditorModule, RadioGroupFormFieldComponent, RadioGroupFormFieldLoaderComponent, RatingRadioGroupFormFieldComponent, ReactiveForm, ReactiveFormAccessor, ReactiveFormWizardStepComponent, ReadonlyFormFieldComponent, RequiredTrimmedValidatorDirective, ResizerComponent, ResizerModule, ResourceService, RpcService, RpcShellService, SME_ASYNC_VALIDATORS, SME_FORM_FIELD_VALIDATION_ALERT_CONTAINER_PROVIDER, SME_LAYOUT_PROVIDER, SME_VALIDATORS, ScheduleRebootService, SchemaDataTypeStore, SchemaFieldContext, SchemaFieldHostComponent, SchemaFieldHostModule, SchemaFieldLoaderComponentBase, SchemaFormComponent, SchemaFormModule, SchemaPrimitiveType, SchemaUtilities, SearchFormFieldComponent, SecureExtensionDataService, SelectFormFieldDirective, SettingsComponent, SettingsContentComponent, SettingsFooterComponent, SettingsFormDirective, SettingsFormService, SettingsHeaderComponent, SettingsModule, SettingsNavigationComponent, SettingsPageComponent, SettingsService, SimplePropertySchemaFieldLoaderComponent, SliderFormFieldComponent, SliderFormFieldLoaderComponent, SmeExtensionService, SmeFormsModule, SmeHeaderData, SmeInject, SmeInjectable, SmeInjectableBase, SmeInternalFormFieldComponent, SmeResponsiveWindowBreakpoints, SmeResponsiveWindowBreakpointsValue, SmeResponsiveWindowManagerComponent, SmeRouterLinkDirective, SmeRouterModule, SmeSchemaProperty, SmeTemplateOutletModule, SmeUxComponent, SmeUxModule, SnapInExtensionComponent, SnapInExtensionModule, SplitViewComponent, SplitViewContentComponent, SplitViewModule, SplitViewPaneComponent, StackedBarComponent, StackedHorizontalBarChartComponent, StatusIconComponent, StatusIconType, SvgDirective, SvgInlineDirective, SvgInlineResource, SvgModule, SvgResource, TabbedFormController, TabbedFormItemController, TabbedFormLoaderComponent, TabbedLineChartGroupComponent, TagService, TagsActionButtonComponent, TagsColumnComponent, TagsFormFieldComponent, TagsFormFieldLoaderComponent, TelemetryDirective, TelemetryDirectiveModule, TemplateDrivenWizardStepComponent, TemplateOutletDirective, TextFormFieldComponent, TextFormFieldLoaderComponent, TileComponent, TileContentComponent, TileDirectivesModule, TileImageDirective, TileModule, TileRadioGroupFormFieldComponent, TimeFormFieldComponent, ToggleSwitchFormFieldComponent, ToggleSwitchFormFieldLoaderComponent, ToolHeaderComponent, ToolHeaderModule, TooltipDirective, TooltipHostComponent, TooltipHostInstance, TooltipModule, TooltipPlacement, TooltipZoneDirective, TreeTableComponent, UserAliveService, UxExtensionRootComponent, ValidationAlertComponent, ValidationAlertSeverity, WarningBadgeComponent, WebsocketStreamService, WizardAsParent, WizardBuilder, WizardComponent, WizardModule, WizardNavigationInformation, WizardStage, WizardStep, WizardStepComponent, WorkItemService, YesNoConverterPipe, YesNoConverterPipeModule, Yield, alertDialog, getFullRouteParams, modalDialog };
+export { AccordionComponent, AccordionModule, AccordionPanelComponent, ActionBarComponent, ActionBarDirective, ActionButton, ActionButtonAsync, ActionButtonAsyncComponent, ActionButtonComponent, ActionButtonRendererComponent, ActionContainerComponent, ActionDropdown, ActionDropdownComponent, ActionDropdownRendererComponent, ActionItem, ActionItemComponent, ActionItemRendererComponent, ActionItemSeparator, ActionItemSeparatorComponent, ActionItemSeparatorRendererComponent, ActionMenuComponent, ActionsModule, ActiveConnectionService, ActiveDirectoryModule, ActiveDirectorySearchFormFieldComponent, ActiveDirectoryService, AlertBarComponent, AlertBarModule, AlertBarService, AlertSeverity, AppContextService, AppErrorHandler, ApplyMode, AriaLiveOptions, ArrayFormFieldComponent, ArrayFormFieldLoaderComponent, ArrayPropertySchemaFieldLoaderComponent, AuthorizationService, AutofocusDirective, AutofocusModule, AzureManagerService, BackdropComponent, BackdropModule, BackgroundExtensionRootComponent, BadgeBaseComponent, BadgeFeatureTypes, BadgeModule, BannerComponent, BannerModule, BaseComponent, BaseDialogComponent, BaseFormData, BasePropertiesForm, BasicFormLoaderComponent, BatchService, BooleanConverterPipe, BooleanConverterPipeModule, BreadcrumbComponent, BreadcrumbHeaderComponent, BreadcrumbHeaderModule, BreadcrumbModule, BreadcrumbSeparator, BugFixesFeatureBadgeComponent, ByteUnitConverterPipe, ByteUnitConverterPipeModule, CAPSLOCK_VALIDATOR, CalendarFormFieldComponent, CanDeactivateGuard, CapacityBarChartComponent, CapacityBase, CapacityDoughnutChartComponent, CapsLockValidatorDirective, ChartComponent, ChartModule, CheckboxFormFieldComponent, CheckboxFormFieldLoaderComponent, ChecklistFormFieldComponent, ChecklistFormFieldLoaderComponent, ChoiceDialogComponent, CimService, CimStreamService, ClampDirective, ClampModule, ClockFormFieldComponent, CodeFormFieldComponent, CodeFormFieldLoaderComponent, ColumnPickerService, ComboboxFormFieldComponent, ComboboxFormFieldLoaderComponent, ComingSoonBadgeComponent, CommonDialogsComponent, CommonSettingsComponent, CommonSettingsComponentBase, ConfirmationDialogComponent, ConfirmationListDialogComponent, ConnectionService, ConnectivityEnforcer, ConnectivityLevel, ContextDropdownComponent, ContextMenuComponent, ContextMenuDirective, ContextMenuModule, CoreServiceModule, CredSSPEnabledBadgeComponent, CredSSPManagerService, CriticalBadgeComponent, CustomBadgeComponent, DataOnlyFormFieldLoaderComponent, DataTableColumnComponent, DataTableColumnPickerExtension, DataTableComponent, DataTableModule, DataTableMultipleSelectMode, DataTableRenderedItemType, DataTableSortMode, DateConverterPipe, DateConverterPipeModule, DateFormFieldComponent, DateTimeFormFieldComponent, DateTimeRangeFormFieldComponent, DateTimeRangeOptionComponent, Debounce, DeleteColumnComponent, Deprecated, DetailsComponent, DetailsModule, DevGuardService, DialogChangeEvent, DialogCloseReason, DialogComponent, DialogContentComponent, DialogFooterComponent, DialogHeaderComponent, DialogMode, DialogModule, DialogService, DisabledChangedEvent, DisabledDirective, DisabledModule, DiscardDirective, DiscardModule, DocumentationComponent, DocumentationModule, DoughnutChartComponent, DoughnutChartModule, DropdownComponent, DropdownModule, DropdownService, DynamicActionItemComponent, DynamicComponentBase, EditableCollectionItem, EditableLayoutComponent, EditableLayoutItemComponent, ElectronService, EnumConverterPipe, EnumConverterPipeModule, ExperimentGuardService, ExtensionBrokerService, ExtensionDialogComponent, ExtensionRootModule, FeedbackBadgeComponent, FieldsetDirective, FileFormFieldComponent, FileFormFieldLoaderComponent, FileTransferService, FilterPipe, FilterPipeModule, FormAsyncValidatorBase, FormField, FormFieldAccessor, FormFieldAccessorDirective, FormFieldAsyncValidatorDirective, FormFieldComponent, FormFieldIsolatorComponent, FormFieldLayoutComponent, FormFieldOptionComponent, FormFieldOptionSubFormTemplateLoaderComponent, FormFieldOrientation, FormFieldTemplateDirective, FormFieldValidatorDirective, FormValidatorBase, FormWizardStepComponent, FormatPipe, FormatPipeModule, FrameService, GatewayService, GuardsModule, GuidedPaneComponent, GuidedPanelComponent, GuidedPanelModule, HeaderComponent, HeaderModule, HealthAlertSeverity, HighlightPipe, HighlightPipeModule, HorizontalBarChartComponent, HorizontalBarChartModule, HttpService, IconLayerComponent, IconModule, IdleComponent, IdleModule, ImprovementFeatureBadgeComponent, InputValidatorDirective, InstallationTypeGuardService, JobsService, JsonFormFieldComponent, JsonFormFieldLoaderComponent, LayeredIconComponent, LayoutComponent, LayoutConfigGenerator, LayoutDefinitionComponent, LayoutDrivenType, LayoutItemComponent, LayoutItemConfigMode, LayoutItemConfigPropertyWidthType, LayoutModule, LegendComponent, LegendEntryComponent, LegendModule, LifetimeService, LineChartComponent, LineChartModule, LineChartType, ListFormFieldComponent, LoadingWheelComponent, LoadingWheelModule, LoadingWheelSize, LocalDateConverterPipe, MachineNameValidatorDirective, MarkdownDirective, MarkdownModule, MasterViewComponent, MasterViewModule, MatchFieldValidatorDirective, MediaConversion2, MessageDialogComponent, Monaco, Navigation, NavigationService, NavigationTitle, NewBadgeComponent, NewFeatureBadgeComponent, NodeCredentialsFormComponent, NodeCredentialsFormModule, NodeService, NotificationService, NumberFormFieldComponent, NumberFormFieldLoaderComponent, ObjectDefaultFormFieldLoaderComponent, ObjectPropertySchemaFieldLoaderComponent, OptionsFormFieldComponent, OrderedListFormFieldComponent, OrderedListFormFieldLoaderComponent, PageAlertBarComponent, PageAlertBarModule, PanelControlComponent, PasswordFormFieldComponent, PasswordFormFieldLoaderComponent, PivotComponent, PivotModule, PivotTabComponent, PivotTabType, PowerShellService, PowerShellStreamService, PreviewBadgeComponent, PropertyGridComponent, PropertyGridItemComponent, PropertyGridModule, QueryDataItemPresetGenerator, QueryDataItemValueType, QueryDataOperand, QueryEditorComponent, QueryEditorModule, RadioGroupFormFieldComponent, RadioGroupFormFieldLoaderComponent, RatingRadioGroupFormFieldComponent, ReactiveForm, ReactiveFormAccessor, ReactiveFormWizardStepComponent, ReadonlyFormFieldComponent, RequiredTrimmedValidatorDirective, ResizerComponent, ResizerModule, ResourceService, RpcService, RpcShellService, SME_ASYNC_VALIDATORS, SME_FORM_FIELD_VALIDATION_ALERT_CONTAINER_PROVIDER, SME_LAYOUT_PROVIDER, SME_VALIDATORS, ScheduleRebootService, SchemaDataTypeStore, SchemaFieldContext, SchemaFieldHostComponent, SchemaFieldHostModule, SchemaFieldLoaderComponentBase, SchemaFormComponent, SchemaFormModule, SchemaPrimitiveType, SchemaUtilities, SearchFormFieldComponent, SecureExtensionDataService, SelectFormFieldDirective, SettingsComponent, SettingsContentComponent, SettingsFooterComponent, SettingsFormDirective, SettingsFormService, SettingsHeaderComponent, SettingsModule, SettingsNavigationComponent, SettingsPageComponent, SettingsService, SimplePropertySchemaFieldLoaderComponent, SliderFormFieldComponent, SliderFormFieldLoaderComponent, SmeExtensionService, SmeFormsModule, SmeHeaderData, SmeInject, SmeInjectable, SmeInjectableBase, SmeInternalFormFieldComponent, SmeResponsiveWindowBreakpoints, SmeResponsiveWindowBreakpointsValue, SmeResponsiveWindowManagerComponent, SmeRouterLinkDirective, SmeRouterModule, SmeSchemaProperty, SmeTemplateOutletModule, SmeUxComponent, SmeUxContentComponent, SmeUxContentModule, SmeUxFooterComponent, SmeUxFooterModule, SmeUxModule, SmeUxPageComponent, SmeUxPageModule, SmeWizardLiteFooterTemplateComponent, SmeWizardLiteFooterTemplateModule, SnapInExtensionComponent, SnapInExtensionModule, SplitViewComponent, SplitViewContentComponent, SplitViewModule, SplitViewPaneComponent, StackedBarComponent, StackedHorizontalBarChartComponent, StatusIconComponent, StatusIconType, SvgDirective, SvgInlineDirective, SvgInlineResource, SvgModule, SvgResource, TabbedFormController, TabbedFormItemController, TabbedFormLoaderComponent, TabbedLineChartGroupComponent, TagService, TagsActionButtonComponent, TagsColumnComponent, TagsFormFieldComponent, TagsFormFieldLoaderComponent, TelemetryDirective, TelemetryDirectiveModule, TemplateDrivenWizardStepComponent, TemplateOutletDirective, TextFormFieldComponent, TextFormFieldLoaderComponent, TileComponent, TileContentComponent, TileDirectivesModule, TileImageDirective, TileModule, TileRadioGroupFormFieldComponent, TimeFormFieldComponent, ToggleSwitchFormFieldComponent, ToggleSwitchFormFieldLoaderComponent, ToolHeaderComponent, ToolHeaderModule, TooltipDirective, TooltipHostComponent, TooltipHostInstance, TooltipModule, TooltipPlacement, TooltipZoneDirective, TreeTableComponent, UserAliveService, UxExtensionRootComponent, ValidationAlertComponent, ValidationAlertSeverity, WarningBadgeComponent, WebsocketStreamService, WizardAsParent, WizardBuilder, WizardComponent, WizardLiteComponent, WizardLiteModule, WizardModule, WizardNavigationButtonComponent, WizardNavigationButtonModule, WizardNavigationInformation, WizardStage, WizardStep, WizardStepComponent, WorkItemService, YesNoConverterPipe, YesNoConverterPipeModule, Yield, alertDialog, getFullRouteParams, modalDialog };
 //# sourceMappingURL=microsoft-windows-admin-center-sdk-angular.js.map