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

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

@@ -10712,6 +10712,10 @@
                 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 === exports.LayoutDrivenType.ResponsiveWindowManager ? this.itemVerticalSpace + "px 0px" : 'unset';
         };
         LayoutComponent.prototype.getTotalColumnSpan = function (layoutItems) {
             var _this = this;
@@ -10798,11 +10802,12 @@
          * @param availableLayoutWidthInPixel available width in pixel horizontally.
          */
         LayoutComponent.prototype.configDrivenCalculationDefault = function (layoutItems, availableLayoutWidthInPixel) {
+            var _a;
             var defaultWidthForLayoutItemInPixel = 200;
             var widthUsedInPixel = 0;
             var percentageSoFar = 0;
             for (var i = 0; i < layoutItems.length; i++) {
-                if (layoutItems[i].customConfig.width) {
+                if ((_a = layoutItems[i].customConfig) === null || _a === void 0 ? void 0 : _a.width) {
                     var widthObject = layoutItems[i].customConfig.width;
                     var remainingWidthInPixel = availableLayoutWidthInPixel - widthUsedInPixel;
                     if (widthObject.type === exports.LayoutItemConfigPropertyWidthType.Percentage) {
@@ -10925,6 +10930,9 @@
         LayoutComponent.prototype.updateCustomConfig = function (layoutItems) {
             var widthType = [];
             for (var 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);
@@ -35696,6 +35704,10 @@
              * The selected tab changed event
              */
             _this.selectionChange = new i0.EventEmitter();
+            /**
+             * The selected tab changed event triggered by click or keyboard navigation.
+             */
+            _this.selectionChangeByClick = new i0.EventEmitter();
             /**
              * Implementation of the Layout interface
              */
@@ -35806,6 +35818,14 @@
             if (byWindowSize === void 0) { 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.
+         */
+        PivotComponent.prototype.onClick = function (tab) {
+            this.select(tab);
+            this.selectionChangeByClick.emit(tab);
+        };
         /**
          * Selects a tab
          * @param tab The tab to select
@@ -35870,6 +35890,28 @@
             }
             return undefined;
         };
+        /**
+         * It gets the label from the pivot tab component.
+         * @returns array of labels representing the pivot tabs.
+         */
+        PivotComponent.prototype.getLabels = function () {
+            if (!this.tabs || !this.tabs.toArray()) {
+                return [];
+            }
+            return this.tabs.toArray().map(function (a) { return a.label; });
+        };
+        /**
+         * It handles the selection of pivot tab by label.
+         * @param label the label for pivot tab to be selected.
+         * @returns void.
+         */
+        PivotComponent.prototype.selectTabByLabel = function (label) {
+            var 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.
@@ -35887,6 +35929,22 @@
                 '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.
+         */
+        PivotComponent.prototype.getPivotTabComponentByLabel = function (label) {
+            if (!this.tabs || !this.tabs.toArray() || !this.tabs.toArray().length) {
+                return;
+            }
+            var tabs = this.tabs.toArray();
+            for (var 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.
@@ -35950,7 +36008,9 @@
                                 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]) {
                                     var poppedTab = this.visibleTabs.pop();
                                     this.trayTabs.push(poppedTab);
                                     currentFill -= prevWidth;
@@ -35998,7 +36058,7 @@
             if (rf & 2) {
                 i0.ɵɵ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: [i0.ɵɵ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: [i0.ɵɵProvidersFeature([
                 { provide: SME_LAYOUT_PROVIDER, useExisting: i0.forwardRef((function () { return PivotComponent; })) },
                 { provide: SME_PIVOT_TAB_CONTAINER_PROVIDER, useExisting: i0.forwardRef((function () { return PivotComponent; })) }
             ]), i0.ɵɵ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) {
@@ -36029,10 +36089,10 @@
             }
             if (rf & 2) {
                 var _r2 = i0.ɵɵreference(7);
-                i0.ɵɵstyleProp("padding-left", ctx.noLeftPadding ? 0 : null);
                 i0.ɵɵadvance(1);
                 i0.ɵɵproperty("ngIf", ctx.headerText);
                 i0.ɵɵadvance(1);
+                i0.ɵɵstyleProp("padding-left", ctx.noLeftPadding ? 0 : null);
                 i0.ɵɵclassProp("sme-pivot-reverse-header", ctx.alignTabs === "right")("sme-position-stretch-h", !ctx.headerText);
                 i0.ɵɵadvance(2);
                 i0.ɵɵproperty("ngForOf", ctx.visibleTabs);
@@ -36111,6 +36171,8 @@
                     type: i0.Input
                 }], selectionChange: [{
                     type: i0.Output
+                }], selectionChangeByClick: [{
+                    type: i0.Output
                 }], layoutChanged: [{
                     type: i0.Output
                 }], windowBreakpointChanged: [{
@@ -42834,6 +42896,290 @@
         });
     }
 
+    var ContextDropdownComponent = /** @class */ (function () {
+        function ContextDropdownComponent() {
+            this.actions = [];
+        }
+        return ContextDropdownComponent;
+    }());
+    /** @nocollapse */ ContextDropdownComponent.ɵfac = function ContextDropdownComponent_Factory(t) { return new (t || ContextDropdownComponent)(); };
+    /** @nocollapse */ ContextDropdownComponent.ɵcmp = i0.ɵɵ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) {
+                i0.ɵɵelementStart(0, "sme-dropdown", 0, 1);
+                i0.ɵɵelementStart(2, "button", 2, 3);
+                i0.ɵɵelementStart(4, "span");
+                i0.ɵɵtext(5);
+                i0.ɵɵelementEnd();
+                i0.ɵɵelement(6, "span", 4);
+                i0.ɵɵelementEnd();
+                i0.ɵɵelement(7, "sme-action-menu", 5);
+                i0.ɵɵelementEnd();
+            }
+            if (rf & 2) {
+                i0.ɵɵproperty("displayToSide", true);
+                i0.ɵɵadvance(5);
+                i0.ɵɵtextInterpolate(ctx.actionGroupTitle);
+                i0.ɵɵadvance(2);
+                i0.ɵɵproperty("actions", ctx.actions);
+            }
+        }, directives: [DropdownComponent, ActionMenuComponent], encapsulation: 2 });
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextDropdownComponent, [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sme-context-dropdown',
+                        templateUrl: './context-dropdown.component.html'
+                    }]
+            }], null, { actionGroupTitle: [{
+                    type: i0.Input
+                }], actions: [{
+                    type: i0.Input
+                }] });
+    })();
+
+    function ContextMenuComponent_sme_dropdown_0_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementStart(0, "sme-dropdown", 1);
+            i0.ɵɵelementStart(1, "div", 2);
+            i0.ɵɵprojection(2);
+            i0.ɵɵelement(3, "sme-action-menu", 3, 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            var ctx_r0 = i0.ɵɵnextContext();
+            i0.ɵɵproperty("isContextMenu", true)("ngStyle", ctx_r0.getMenuPosition());
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("actions", ctx_r0.contextMenuItems)("target", ctx_r0.target);
+        }
+    }
+    var _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}
+     */
+    var ContextMenuComponent = /** @class */ (function (_super) {
+        __extends(ContextMenuComponent, _super);
+        function ContextMenuComponent(injector, element) {
+            var _this = _super.call(this, injector) || this;
+            _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 i0.EventEmitter();
+            /**
+             * Value that toggles the contextmenu
+            */
+            _this.isOpen = false;
+            return _this;
+        }
+        Object.defineProperty(ContextMenuComponent.prototype, "logSourceName", {
+            /**
+             * The source name to use for logging
+             */
+            get: function () {
+                return 'ContextMenuComponent';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * Function that does the positioning of the contextmenu depending on the right-click
+        */
+        ContextMenuComponent.prototype.getMenuPosition = function () {
+            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
+        */
+        ContextMenuComponent.prototype.autoFocus = function () {
+            if (this.element.nativeElement) {
+                var firstFocusable = dom.Dom.getFirstFocusableDescendent(this.element.nativeElement);
+                if (firstFocusable) {
+                    firstFocusable.focus();
+                }
+            }
+        };
+        return ContextMenuComponent;
+    }(CoreBaseComponent));
+    /** @nocollapse */ ContextMenuComponent.ɵfac = function ContextMenuComponent_Factory(t) { return new (t || ContextMenuComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    /** @nocollapse */ ContextMenuComponent.ɵcmp = i0.ɵɵdefineComponent({ type: ContextMenuComponent, selectors: [["sme-context-menu"]], inputs: { contextMenuItems: "contextMenuItems", mouseEventData: "mouseEventData", target: "target" }, outputs: { contextMenuItemClick: "contextMenuItemClick" }, features: [i0.ɵɵ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) {
+                i0.ɵɵprojectionDef();
+                i0.ɵɵtemplate(0, ContextMenuComponent_sme_dropdown_0_Template, 5, 4, "sme-dropdown", 0);
+            }
+            if (rf & 2) {
+                i0.ɵɵproperty("ngIf", ctx.isOpen);
+            }
+        }, directives: [i1$1.NgIf, DropdownComponent, i1$1.NgStyle, ActionMenuComponent], encapsulation: 2 });
+    __decorate([
+        debounce_decorators.Debounce(1),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], ContextMenuComponent.prototype, "autoFocus", null);
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextMenuComponent, [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sme-context-menu',
+                        templateUrl: './context-menu.component.html',
+                    }]
+            }], function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, { contextMenuItems: [{
+                    type: i0.Input
+                }], mouseEventData: [{
+                    type: i0.Input
+                }], target: [{
+                    type: i0.Input
+                }], contextMenuItemClick: [{
+                    type: i0.Output
+                }], autoFocus: [] });
+    })();
+
+    /**
+     * Directive that controls the opening and the closing of the context-menu,
+     * once the host element is right-clicked
+    */
+    var ContextMenuDirective = /** @class */ (function () {
+        function ContextMenuDirective(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
+        */
+        ContextMenuDirective.prototype.onClick = function (event) {
+            var 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
+        ContextMenuDirective.prototype.documentClick = function () {
+            this.smeContextMenu.isOpen = false;
+        };
+        // Prevents tab key event from closing the context menu
+        ContextMenuDirective.prototype.onKeyup = function (event) {
+            if (event.keyCode === accessibilityManager.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
+        */
+        ContextMenuDirective.prototype.openContextMenu = function ($event) {
+            var _this = this;
+            this.smeContextMenu.autoFocus();
+            if (this.smeContextMenu.isOpen) {
+                this.smeContextMenu.isOpen = false;
+            }
+            setTimeout(function () {
+                _this.smeContextMenu.mouseEventData = $event;
+                _this.smeContextMenu.isOpen = true;
+            });
+        };
+        return ContextMenuDirective;
+    }());
+    /** @nocollapse */ ContextMenuDirective.ɵfac = function ContextMenuDirective_Factory(t) { return new (t || ContextMenuDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    /** @nocollapse */ ContextMenuDirective.ɵdir = i0.ɵɵdefineDirective({ type: ContextMenuDirective, selectors: [["", "smeContextMenu", ""]], hostBindings: function ContextMenuDirective_HostBindings(rf, ctx) {
+            if (rf & 1) {
+                i0.ɵɵlistener("contextmenu", function ContextMenuDirective_contextmenu_HostBindingHandler($event) { return ctx.onClick($event); })("click", function ContextMenuDirective_click_HostBindingHandler() { return ctx.documentClick(); }, false, i0.ɵɵresolveDocument)("keyup", function ContextMenuDirective_keyup_HostBindingHandler($event) { return ctx.onKeyup($event); });
+            }
+        }, inputs: { smeContextMenu: "smeContextMenu" } });
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextMenuDirective, [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[smeContextMenu]'
+                    }]
+            }], function () { return [{ type: i0.ElementRef }]; }, { smeContextMenu: [{
+                    type: i0.Input
+                }], onClick: [{
+                    type: i0.HostListener,
+                    args: ['contextmenu', ['$event']]
+                }], documentClick: [{
+                    type: i0.HostListener,
+                    args: ['document:click']
+                }], onKeyup: [{
+                    type: i0.HostListener,
+                    args: ['keyup', ['$event']]
+                }] });
+    })();
+
+    var ContextMenuModule = /** @class */ (function () {
+        function ContextMenuModule() {
+        }
+        return ContextMenuModule;
+    }());
+    /** @nocollapse */ ContextMenuModule.ɵfac = function ContextMenuModule_Factory(t) { return new (t || ContextMenuModule)(); };
+    /** @nocollapse */ ContextMenuModule.ɵmod = i0.ɵɵdefineNgModule({ type: ContextMenuModule });
+    /** @nocollapse */ ContextMenuModule.ɵinj = i0.ɵɵdefineInjector({ imports: [[
+                i1$1.CommonModule,
+                ActionsModule,
+                DropdownModule,
+                DataTableModule
+            ]] });
+    (function () {
+        (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ContextMenuModule, { declarations: [ContextMenuComponent,
+                ContextMenuDirective,
+                ContextDropdownComponent], imports: [i1$1.CommonModule,
+                ActionsModule,
+                DropdownModule,
+                DataTableModule], exports: [ContextMenuComponent,
+                ContextMenuDirective,
+                ContextDropdownComponent] });
+    })();
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextMenuModule, [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [
+                            ContextMenuComponent,
+                            ContextMenuDirective,
+                            ContextDropdownComponent
+                        ],
+                        imports: [
+                            i1$1.CommonModule,
+                            ActionsModule,
+                            DropdownModule,
+                            DataTableModule
+                        ],
+                        exports: [
+                            ContextMenuComponent,
+                            ContextMenuDirective,
+                            ContextDropdownComponent
+                        ]
+                    }]
+            }], null, null);
+    })();
+
     var DetailsResponsiveWindowManager = /** @class */ (function (_super) {
         __extends(DetailsResponsiveWindowManager, _super);
         function DetailsResponsiveWindowManager() {
@@ -42893,11 +43239,11 @@
         return DetailsResponsiveWindowManager;
     }(SmeResponsiveWindowManagerComponent));
 
-    var _c0$1a = ["expander"];
+    var _c0$1b = ["expander"];
     var _c1$F = function (a0, a1) { return { "sme-icon-chevronUpMed": a0, "sme-icon-chevronDownMed": a1 }; };
     function DetailsComponent_span_5_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelement(0, "span", 7);
+            i0.ɵɵelement(0, "span", 8);
         }
         if (rf & 2) {
             var ctx_r1 = i0.ɵɵnextContext();
@@ -42906,13 +43252,18 @@
     }
     function DetailsComponent_span_6_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelement(0, "span", 7);
+            i0.ɵɵelement(0, "span", 8);
         }
         if (rf & 2) {
             var ctx_r2 = i0.ɵɵnextContext();
             i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c1$F, ctx_r2.isExpanded, !ctx_r2.isExpanded));
         }
     }
+    function DetailsComponent_hr_12_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelement(0, "hr");
+        }
+    }
     var _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 }; };
     var _c3$b = ["*"];
     /**
@@ -43103,13 +43454,13 @@
     /** @nocollapse */ DetailsComponent.ɵfac = function DetailsComponent_Factory(t) { return new (t || DetailsComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(SME_LAYOUT_PROVIDER, 8)); };
     /** @nocollapse */ DetailsComponent.ɵcmp = i0.ɵɵdefineComponent({ type: DetailsComponent, selectors: [["sme-details"]], viewQuery: function DetailsComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$1a, 1);
+                i0.ɵɵviewQuery(_c0$1b, 1);
             }
             if (rf & 2) {
                 var _t = void 0;
                 i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.expander = _t.first);
             }
-        }, inputs: { initialHeightPercentage: "initialHeightPercentage", header: "header", chevronInverted: "chevronInverted", autoHeight: "autoHeight", title: "title", isExpanded: "isExpanded" }, outputs: { isExpandedChange: "isExpandedChange" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵ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) {
+        }, inputs: { initialHeightPercentage: "initialHeightPercentage", header: "header", chevronInverted: "chevronInverted", addBottomBorder: "addBottomBorder", autoHeight: "autoHeight", title: "title", isExpanded: "isExpanded" }, outputs: { isExpandedChange: "isExpandedChange" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵ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) {
                 i0.ɵɵprojectionDef();
                 i0.ɵɵelementStart(0, "h3");
@@ -43130,6 +43481,7 @@
                 i0.ɵɵprojection(11);
                 i0.ɵɵelementEnd();
                 i0.ɵɵelementEnd();
+                i0.ɵɵtemplate(12, DetailsComponent_hr_12_Template, 1, 0, "hr", 7);
             }
             if (rf & 2) {
                 i0.ɵɵadvance(1);
@@ -43149,7 +43501,9 @@
                 i0.ɵɵclassProp("sme-margin-horizontal-lg", ctx.shouldContentSlim)("sme-position-stretch-v", ctx.autoHeight);
                 i0.ɵɵadvance(1);
                 i0.ɵɵclassProp("sme-layout-none", !ctx.isExpanded);
-                i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(16, _c2$h, !ctx.autoHeight, ctx.autoHeight));
+                i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(17, _c2$h, !ctx.autoHeight, ctx.autoHeight));
+                i0.ɵɵadvance(2);
+                i0.ɵɵproperty("ngIf", ctx.addBottomBorder);
             }
         }, directives: [i1$1.NgIf, i1$1.NgClass], encapsulation: 2 });
     __decorate([
@@ -43193,6 +43547,8 @@
                     type: i0.Input
                 }], chevronInverted: [{
                     type: i0.Input
+                }], addBottomBorder: [{
+                    type: i0.Input
                 }], autoHeight: [{
                     type: i0.Input
                 }], title: [{
@@ -43233,7 +43589,7 @@
             }], null, null);
     })();
 
-    var _c0$1b = ["dialog"];
+    var _c0$1c = ["dialog"];
     /**
      * The base dialog component for extending.
      */
@@ -43351,7 +43707,7 @@
     /** @nocollapse */ BaseDialogComponent.ɵfac = function BaseDialogComponent_Factory(t) { return new (t || BaseDialogComponent)(i0.ɵɵdirectiveInject(DialogService)); };
     /** @nocollapse */ BaseDialogComponent.ɵdir = i0.ɵɵdefineDirective({ type: BaseDialogComponent, viewQuery: function BaseDialogComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$1b, 1);
+                i0.ɵɵviewQuery(_c0$1c, 1);
             }
             if (rf & 2) {
                 var _t = void 0;
@@ -43982,7 +44338,7 @@
             i0.ɵɵtextInterpolate(ctx_r1.ariaDescription);
         }
     }
-    var _c0$1c = [[["sme-dialog-header"]], [["sme-dialog-content"]], [["sme-dialog-footer"]]];
+    var _c0$1d = [[["sme-dialog-header"]], [["sme-dialog-content"]], [["sme-dialog-footer"]]];
     var _c1$G = ["sme-dialog-header", "sme-dialog-content", "sme-dialog-footer"];
     var ExtensionDialogComponent = /** @class */ (function (_super) {
         __extends(ExtensionDialogComponent, _super);
@@ -43994,7 +44350,7 @@
     /** @nocollapse */ ExtensionDialogComponent.ɵfac = function ExtensionDialogComponent_Factory(t) { return ɵExtensionDialogComponent_BaseFactory(t || ExtensionDialogComponent); };
     /** @nocollapse */ ExtensionDialogComponent.ɵcmp = i0.ɵɵdefineComponent({ type: ExtensionDialogComponent, selectors: [["sme-extension-dialog"]], features: [i0.ɵɵ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) {
-                i0.ɵɵprojectionDef(_c0$1c);
+                i0.ɵɵprojectionDef(_c0$1d);
                 i0.ɵɵelementStart(0, "div", 0);
                 i0.ɵɵelementStart(1, "div", 1);
                 i0.ɵɵprojection(2);
@@ -44383,7 +44739,7 @@
             i0.ɵɵprojection(0);
         }
     }
-    var _c0$1d = ["*"];
+    var _c0$1e = ["*"];
     var SmeHeaderData = /** @class */ (function () {
         function SmeHeaderData() {
         }
@@ -44471,7 +44827,7 @@
     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)(i0.ɵɵdirectiveInject(i0.Injector)); };
-    /** @nocollapse */ HeaderComponent.ɵcmp = i0.ɵɵdefineComponent({ type: HeaderComponent, selectors: [["sme-header"]], inputs: { type: "type", text: "text", level: "level", smeIconClassName: "smeIconClassName", urlIcon: "urlIcon", subtitle: "subtitle" }, features: [i0.ɵɵ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) {
+    /** @nocollapse */ HeaderComponent.ɵcmp = i0.ɵɵdefineComponent({ type: HeaderComponent, selectors: [["sme-header"]], inputs: { type: "type", text: "text", level: "level", smeIconClassName: "smeIconClassName", urlIcon: "urlIcon", subtitle: "subtitle" }, features: [i0.ɵɵ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) {
                 i0.ɵɵprojectionDef();
                 i0.ɵɵtemplate(0, HeaderComponent_div_0_Template, 7, 6, "div", 0);
@@ -44655,7 +45011,7 @@
             i0.ɵɵproperty("label", ctx_r3.strings.MsftSmeShell.Angular.Documentation.Tabs.Examples.label);
         }
     }
-    var _c0$1e = ["*"];
+    var _c0$1f = ["*"];
     /**
      *
      * @smeDoc {@label Documentation @id sme-documentation-component}
@@ -44702,7 +45058,7 @@
         return DocumentationComponent;
     }(CoreBaseComponent));
     /** @nocollapse */ DocumentationComponent.ɵfac = function DocumentationComponent_Factory(t) { return new (t || DocumentationComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
-    /** @nocollapse */ DocumentationComponent.ɵcmp = i0.ɵɵdefineComponent({ type: DocumentationComponent, selectors: [["sme-documentation"]], inputs: { document: "document" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵ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) {
+    /** @nocollapse */ DocumentationComponent.ɵcmp = i0.ɵɵdefineComponent({ type: DocumentationComponent, selectors: [["sme-documentation"]], inputs: { document: "document" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵ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) {
                 i0.ɵɵprojectionDef();
                 i0.ɵɵelementStart(0, "div", 0);
@@ -44823,7 +45179,7 @@
             i0.ɵɵclassMapInterpolate1("sme-layout-absolute sme-width-xxs sme-position-stretch-v sme-layer-above ", ctx_r10.stripeClass, "");
         }
     }
-    var _c0$1f = function (a0) { return { "background-color": a0 }; };
+    var _c0$1g = function (a0) { return { "background-color": a0 }; };
     function LegendEntryComponent_div_0_div_1_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 13);
@@ -44833,7 +45189,7 @@
         if (rf & 2) {
             var ctx_r1 = i0.ɵɵnextContext(2);
             i0.ɵɵclassMapInterpolate1("sme-margin-right-xs sme-width-xxs sme-layout-relative ", ctx_r1.hideInHighContrastClass, "");
-            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(5, _c0$1f, ctx_r1.color));
+            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(5, _c0$1g, ctx_r1.color));
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx_r1.stripeClass);
         }
@@ -45268,7 +45624,7 @@
                 }] });
     })();
 
-    var _c0$1g = ["chart"];
+    var _c0$1h = ["chart"];
     function DoughnutChartComponent_div_2_span_3_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelement(0, "span", 9);
@@ -45559,7 +45915,7 @@
     /** @nocollapse */ DoughnutChartComponent.ɵfac = function DoughnutChartComponent_Factory(t) { return new (t || DoughnutChartComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.Injector)); };
     /** @nocollapse */ DoughnutChartComponent.ɵcmp = i0.ɵɵdefineComponent({ type: DoughnutChartComponent, selectors: [["sme-doughnut-chart"]], viewQuery: function DoughnutChartComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$1g, 1);
+                i0.ɵɵviewQuery(_c0$1h, 1);
             }
             if (rf & 2) {
                 var _t = void 0;
@@ -45621,7 +45977,7 @@
                 }] });
     })();
 
-    var _c0$1h = ["chart"];
+    var _c0$1i = ["chart"];
     var CapacityDoughnutChartComponent = /** @class */ (function (_super) {
         __extends(CapacityDoughnutChartComponent, _super);
         function CapacityDoughnutChartComponent(injector, changeDetectorRef) {
@@ -45739,7 +46095,7 @@
     /** @nocollapse */ CapacityDoughnutChartComponent.ɵfac = function CapacityDoughnutChartComponent_Factory(t) { return new (t || CapacityDoughnutChartComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     /** @nocollapse */ CapacityDoughnutChartComponent.ɵcmp = i0.ɵɵdefineComponent({ type: CapacityDoughnutChartComponent, selectors: [["sme-capacity-doughnut-chart"]], viewQuery: function CapacityDoughnutChartComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$1h, 1);
+                i0.ɵɵviewQuery(_c0$1i, 1);
             }
             if (rf & 2) {
                 var _t = void 0;
@@ -45880,7 +46236,7 @@
             i0.ɵɵelementEnd();
         }
     }
-    var _c0$1i = ["*"];
+    var _c0$1j = ["*"];
     var GuidedPaneComponent = /** @class */ (function () {
         function GuidedPaneComponent() {
             this.active = false;
@@ -45902,7 +46258,7 @@
             if (rf & 2) {
                 i0.ɵɵ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) {
+        }, 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) {
                 i0.ɵɵprojectionDef();
                 i0.ɵɵtemplate(0, GuidedPaneComponent_div_0_Template, 2, 0, "div", 0);
@@ -45926,7 +46282,7 @@
                 }] });
     })();
 
-    var _c0$1j = ["pane"];
+    var _c0$1k = ["pane"];
     var _c1$J = ["*"];
     var GuidedPanelComponent = /** @class */ (function (_super) {
         __extends(GuidedPanelComponent, _super);
@@ -46035,7 +46391,7 @@
     /** @nocollapse */ GuidedPanelComponent.ɵfac = function GuidedPanelComponent_Factory(t) { return new (t || GuidedPanelComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ElementRef)); };
     /** @nocollapse */ GuidedPanelComponent.ɵcmp = i0.ɵɵdefineComponent({ type: GuidedPanelComponent, selectors: [["sme-guided-panel"]], contentQueries: function GuidedPanelComponent_ContentQueries(rf, ctx, dirIndex) {
             if (rf & 1) {
-                i0.ɵɵcontentQuery(dirIndex, _c0$1j, 0);
+                i0.ɵɵcontentQuery(dirIndex, _c0$1k, 0);
             }
             if (rf & 2) {
                 var _t = void 0;
@@ -46106,7 +46462,7 @@
             }], null, null);
     })();
 
-    var _c0$1k = ["horizontalBarChart"];
+    var _c0$1l = ["horizontalBarChart"];
     /**
      * @deprecated 'Please use StackedHorizontalBarChartComponent instead'
      */
@@ -46173,7 +46529,7 @@
     /** @nocollapse */ HorizontalBarChartComponent.ɵfac = function HorizontalBarChartComponent_Factory(t) { return ɵHorizontalBarChartComponent_BaseFactory(t || HorizontalBarChartComponent); };
     /** @nocollapse */ HorizontalBarChartComponent.ɵcmp = i0.ɵɵdefineComponent({ type: HorizontalBarChartComponent, selectors: [["sme-horizontal-bar-chart"]], viewQuery: function HorizontalBarChartComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$1k, 1);
+                i0.ɵɵviewQuery(_c0$1l, 1);
             }
             if (rf & 2) {
                 var _t = void 0;
@@ -46869,7 +47225,7 @@
             }], null, null);
     })();
 
-    var _c0$1l = ["linechart"];
+    var _c0$1m = ["linechart"];
     function LineChartComponent_div_0_div_1_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div");
@@ -47218,7 +47574,7 @@
     /** @nocollapse */ LineChartComponent.ɵfac = function LineChartComponent_Factory(t) { return new (t || LineChartComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     /** @nocollapse */ LineChartComponent.ɵcmp = i0.ɵɵdefineComponent({ type: LineChartComponent, selectors: [["sme-line-chart"]], viewQuery: function LineChartComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$1l, 1);
+                i0.ɵɵviewQuery(_c0$1m, 1);
             }
             if (rf & 2) {
                 var _t = void 0;
@@ -48416,7 +48772,7 @@
         return PropertyGridResponsiveWindowManager;
     }(SmeResponsiveWindowManagerComponent));
 
-    var _c0$1m = ["readonlyTemplate"];
+    var _c0$1n = ["readonlyTemplate"];
     var _c1$K = ["actionLinkTemplate"];
     var _c2$i = ["internalLinkTemplate"];
     var _c3$c = ["externalLinkTemplate"];
@@ -48705,7 +49061,7 @@
             var item_r44 = ctx.$implicit;
             i0.ɵɵproperty("ngIf", !!item_r44.iconClass);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", item_r44.status !== null && !item_r44.iconClass);
+            i0.ɵɵproperty("ngIf", item_r44.status !== undefined && item_r44.status !== null && !item_r44.iconClass);
         }
     }
     /**
@@ -48878,7 +49234,7 @@
             }
         }, viewQuery: function PropertyGridComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$1m, 3);
+                i0.ɵɵviewQuery(_c0$1n, 3);
                 i0.ɵɵviewQuery(_c1$K, 3);
                 i0.ɵɵviewQuery(_c2$i, 3);
                 i0.ɵɵviewQuery(_c3$c, 3);
@@ -49010,7 +49366,7 @@
             }], null, null);
     })();
 
-    var _c0$1n = ["multiSelectTemplate"];
+    var _c0$1o = ["multiSelectTemplate"];
     var _c1$L = ["textTemplate"];
     var _c2$j = ["singleSelectTemplate"];
     var _c3$d = ["timespanSelectTemplate"];
@@ -50438,7 +50794,7 @@
     /** @nocollapse */ QueryEditorComponent.ɵfac = function QueryEditorComponent_Factory(t) { return ɵQueryEditorComponent_BaseFactory(t || QueryEditorComponent); };
     /** @nocollapse */ QueryEditorComponent.ɵcmp = i0.ɵɵdefineComponent({ type: QueryEditorComponent, selectors: [["sme-query-editor"]], viewQuery: function QueryEditorComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$1n, 1);
+                i0.ɵɵviewQuery(_c0$1o, 1);
                 i0.ɵɵviewQuery(_c1$L, 1);
                 i0.ɵɵviewQuery(_c2$j, 1);
                 i0.ɵɵviewQuery(_c3$d, 1);
@@ -50630,7 +50986,7 @@
             }], null, null);
     })();
 
-    var _c0$1o = ["editor"];
+    var _c0$1p = ["editor"];
     var _c1$M = ["formContent"];
     var _c2$k = ["schema", ""];
     function SchemaFormComponent_sme_schema_form_content_0_Template(rf, ctx) {
@@ -50792,7 +51148,7 @@
     /** @nocollapse */ SchemaFormComponent.ɵfac = function SchemaFormComponent_Factory(t) { return new (t || SchemaFormComponent)(i0.ɵɵdirectiveInject(DialogService)); };
     /** @nocollapse */ SchemaFormComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SchemaFormComponent, selectors: [["sme-form", "schema", ""], ["sme-schema-form"]], viewQuery: function SchemaFormComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$1o, 1);
+                i0.ɵɵviewQuery(_c0$1p, 1);
                 i0.ɵɵviewQuery(_c1$M, 1);
             }
             if (rf & 2) {
@@ -50885,7 +51241,7 @@
     })();
 
     var ResourceStringPickerComponent_1;
-    var _c0$1p = ["dropDown"];
+    var _c0$1q = ["dropDown"];
     var _c1$N = ["tree"];
     var _c2$l = ["type", "resource-string-picker"];
     function ResourceStringPickerComponent_span_3_Template(rf, ctx) {
@@ -51172,7 +51528,7 @@
     /** @nocollapse */ ResourceStringPickerComponent.ɵfac = function ResourceStringPickerComponent_Factory(t) { return new (t || ResourceStringPickerComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
     /** @nocollapse */ ResourceStringPickerComponent.ɵcmp = i0.ɵɵdefineComponent({ type: ResourceStringPickerComponent, selectors: [["sme-form-field", "type", "resource-string-picker"]], viewQuery: function ResourceStringPickerComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$1p, 1);
+                i0.ɵɵviewQuery(_c0$1q, 1);
                 i0.ɵɵviewQuery(_c1$N, 1);
             }
             if (rf & 2) {
@@ -51481,7 +51837,7 @@
         return SchemaFormEditorUtilities;
     }());
 
-    var _c0$1q = ["viewModelDiv"];
+    var _c0$1r = ["viewModelDiv"];
     var SchemaFormEditorFormViewModelComponent = /** @class */ (function () {
         function SchemaFormEditorFormViewModelComponent() {
             this.strings = MsftSme.getStrings().MsftSmeShell.Angular.SchemaForm.Editor.ViewModel;
@@ -51540,7 +51896,7 @@
     /** @nocollapse */ SchemaFormEditorFormViewModelComponent.ɵfac = function SchemaFormEditorFormViewModelComponent_Factory(t) { return new (t || SchemaFormEditorFormViewModelComponent)(); };
     /** @nocollapse */ SchemaFormEditorFormViewModelComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SchemaFormEditorFormViewModelComponent, selectors: [["sme-schema-form-editor-form-view-model"]], viewQuery: function SchemaFormEditorFormViewModelComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$1q, 1);
+                i0.ɵɵviewQuery(_c0$1r, 1);
             }
             if (rf & 2) {
                 var _t = void 0;
@@ -51587,7 +51943,7 @@
                 }] });
     })();
 
-    var _c0$1r = ["schemaTextEditor"];
+    var _c0$1s = ["schemaTextEditor"];
     var SchemaFormEditorSchemaTextComponent = /** @class */ (function () {
         function SchemaFormEditorSchemaTextComponent() {
             this.strings = MsftSme.getStrings().MsftSmeShell.Angular.SchemaForm.Editor;
@@ -51728,7 +52084,7 @@
     /** @nocollapse */ SchemaFormEditorSchemaTextComponent.ɵfac = function SchemaFormEditorSchemaTextComponent_Factory(t) { return new (t || SchemaFormEditorSchemaTextComponent)(); };
     /** @nocollapse */ SchemaFormEditorSchemaTextComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SchemaFormEditorSchemaTextComponent, selectors: [["sme-schema-form-editor-schema-text"]], viewQuery: function SchemaFormEditorSchemaTextComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$1r, 1);
+                i0.ɵɵviewQuery(_c0$1s, 1);
             }
             if (rf & 2) {
                 var _t = void 0;
@@ -51996,7 +52352,7 @@
         ]
     };
 
-    var _c0$1s = ["propertyForm"];
+    var _c0$1t = ["propertyForm"];
     var _c1$O = ["schemaTree"];
     function SchemaFormEditorSchemaTreeComponent_ng_template_7_Template(rf, ctx) {
         if (rf & 1) {
@@ -52717,7 +53073,7 @@
     /** @nocollapse */ SchemaFormEditorSchemaTreeComponent.ɵfac = function SchemaFormEditorSchemaTreeComponent_Factory(t) { return new (t || SchemaFormEditorSchemaTreeComponent)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
     /** @nocollapse */ SchemaFormEditorSchemaTreeComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SchemaFormEditorSchemaTreeComponent, selectors: [["sme-schema-form-editor-schema-tree"]], viewQuery: function SchemaFormEditorSchemaTreeComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$1s, 1);
+                i0.ɵɵviewQuery(_c0$1t, 1);
                 i0.ɵɵviewQuery(_c1$O, 1);
             }
             if (rf & 2) {
@@ -52891,7 +53247,7 @@
         return PropertySchemaViewModel;
     }());
 
-    var _c0$1t = ["previewForm"];
+    var _c0$1u = ["previewForm"];
     var _c1$P = ["schemaTree"];
     var _c2$m = ["schemaText"];
     function SchemaFormEditorComponent_sme_loading_wheel_6_Template(rf, ctx) {
@@ -53280,7 +53636,7 @@
     /** @nocollapse */ SchemaFormEditorComponent.ɵfac = function SchemaFormEditorComponent_Factory(t) { return new (t || SchemaFormEditorComponent)(i0.ɵɵdirectiveInject(DialogService), i0.ɵɵdirectiveInject(i0.ElementRef)); };
     /** @nocollapse */ SchemaFormEditorComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SchemaFormEditorComponent, selectors: [["sme-schema-form-editor"]], viewQuery: function SchemaFormEditorComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$1t, 1);
+                i0.ɵɵviewQuery(_c0$1u, 1);
                 i0.ɵɵviewQuery(_c1$P, 1);
                 i0.ɵɵviewQuery(_c2$m, 1);
             }
@@ -53565,7 +53921,7 @@
             i0.ɵɵproperty("ngIf", ctx_r0.selectedSettingsTitle);
         }
     }
-    var _c0$1u = [[["sme-settings-navigation"]], [["sme-settings-header"]], [["sme-settings-content"]], [["sme-settings-footer"]]];
+    var _c0$1v = [[["sme-settings-navigation"]], [["sme-settings-header"]], [["sme-settings-content"]], [["sme-settings-footer"]]];
     var _c1$Q = ["sme-settings-navigation", "sme-settings-header", "sme-settings-content", "sme-settings-footer"];
     /**
      *
@@ -53696,7 +54052,7 @@
     /** @nocollapse */ SettingsComponent.ɵfac = function SettingsComponent_Factory(t) { return new (t || SettingsComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
     /** @nocollapse */ SettingsComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SettingsComponent, selectors: [["sme-settings"]], inputs: { addPadding: "addPadding", backRoute: "backRoute", settingsTitle: "settingsTitle", selectedSettingsTitle: "selectedSettingsTitle" }, features: [i0.ɵɵ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) {
-                i0.ɵɵprojectionDef(_c0$1u);
+                i0.ɵɵprojectionDef(_c0$1v);
                 i0.ɵɵelementStart(0, "div", 0);
                 i0.ɵɵtemplate(1, SettingsComponent_div_1_Template, 5, 5, "div", 1);
                 i0.ɵɵelementStart(2, "sme-layout", 2, 3);
@@ -54047,7 +54403,7 @@
             }], function () { return [{ type: RpcService }]; }, null);
     })();
 
-    var _c0$1v = ["searchTextBox"];
+    var _c0$1w = ["searchTextBox"];
     function CommonSettingsComponent_header_2_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "header", 12);
@@ -54562,7 +54918,7 @@
     /** @nocollapse */ CommonSettingsComponent.ɵfac = function CommonSettingsComponent_Factory(t) { return new (t || CommonSettingsComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(SettingsFormService), i0.ɵɵdirectiveInject(i0.IterableDiffers), i0.ɵɵdirectiveInject(AppContextService), i0.ɵɵdirectiveInject(RpcShellService), i0.ɵɵdirectiveInject(SME_LAYOUT_PROVIDER, 8)); };
     /** @nocollapse */ CommonSettingsComponent.ɵcmp = i0.ɵɵdefineComponent({ type: CommonSettingsComponent, selectors: [["sme-common-settings"]], viewQuery: function CommonSettingsComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$1v, 1);
+                i0.ɵɵviewQuery(_c0$1w, 1);
                 i0.ɵɵviewQuery(SettingsComponent, 1);
             }
             if (rf & 2) {
@@ -54679,7 +55035,7 @@
                 }], deferredOnLayoutChanged: [], onLayoutChanged: [], onWindowBreakpointChanged: [] });
     })();
 
-    var _c0$1w = [[["sme-settings-header"]], [["sme-settings-content"]], [["sme-settings-footer"]]];
+    var _c0$1x = [[["sme-settings-header"]], [["sme-settings-content"]], [["sme-settings-footer"]]];
     var _c1$S = ["sme-settings-header", "sme-settings-content", "sme-settings-footer"];
     var SettingsPageComponent = /** @class */ (function (_super) {
         __extends(SettingsPageComponent, _super);
@@ -54751,7 +55107,7 @@
     /** @nocollapse */ SettingsPageComponent.ɵfac = function SettingsPageComponent_Factory(t) { return new (t || SettingsPageComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(SME_LAYOUT_PROVIDER, 8)); };
     /** @nocollapse */ SettingsPageComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SettingsPageComponent, selectors: [["sme-settings-page"]], outputs: { layoutChanged: "layoutChanged" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$S, decls: 3, vars: 0, template: function SettingsPageComponent_Template(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵprojectionDef(_c0$1w);
+                i0.ɵɵprojectionDef(_c0$1x);
                 i0.ɵɵprojection(0);
                 i0.ɵɵprojection(1, 1);
                 i0.ɵɵprojection(2, 2);
@@ -54804,7 +55160,7 @@
             }], null, null);
     })();
 
-    var _c0$1x = ["*"];
+    var _c0$1y = ["*"];
     var SettingsContentComponent = /** @class */ (function (_super) {
         __extends(SettingsContentComponent, _super);
         function SettingsContentComponent(injector) {
@@ -54832,7 +55188,7 @@
         return SettingsContentComponent;
     }(CoreBaseComponent));
     /** @nocollapse */ SettingsContentComponent.ɵfac = function SettingsContentComponent_Factory(t) { return new (t || SettingsContentComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
-    /** @nocollapse */ SettingsContentComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SettingsContentComponent, selectors: [["sme-settings-content"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1x, decls: 1, vars: 0, template: function SettingsContentComponent_Template(rf, ctx) {
+    /** @nocollapse */ SettingsContentComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SettingsContentComponent, selectors: [["sme-settings-content"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1y, decls: 1, vars: 0, template: function SettingsContentComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵprojectionDef();
                 i0.ɵɵprojection(0);
@@ -54848,7 +55204,7 @@
             }], function () { return [{ type: i0.Injector }]; }, null);
     })();
 
-    var _c0$1y = ["*"];
+    var _c0$1z = ["*"];
     var SettingsFooterComponent = /** @class */ (function (_super) {
         __extends(SettingsFooterComponent, _super);
         function SettingsFooterComponent(injector) {
@@ -54896,7 +55252,7 @@
         return SettingsFooterComponent;
     }(CoreBaseComponent));
     /** @nocollapse */ SettingsFooterComponent.ɵfac = function SettingsFooterComponent_Factory(t) { return new (t || SettingsFooterComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
-    /** @nocollapse */ SettingsFooterComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SettingsFooterComponent, selectors: [["sme-settings-footer"]], features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0$1y, decls: 1, vars: 0, template: function SettingsFooterComponent_Template(rf, ctx) {
+    /** @nocollapse */ SettingsFooterComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SettingsFooterComponent, selectors: [["sme-settings-footer"]], features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0$1z, decls: 1, vars: 0, template: function SettingsFooterComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵprojectionDef();
                 i0.ɵɵprojection(0);
@@ -54958,7 +55314,7 @@
                 }] });
     })();
 
-    var _c0$1z = ["*"];
+    var _c0$1A = ["*"];
     var SettingsHeaderComponent = /** @class */ (function (_super) {
         __extends(SettingsHeaderComponent, _super);
         function SettingsHeaderComponent(injector) {
@@ -54985,7 +55341,7 @@
         return SettingsHeaderComponent;
     }(CoreBaseComponent));
     /** @nocollapse */ SettingsHeaderComponent.ɵfac = function SettingsHeaderComponent_Factory(t) { return new (t || SettingsHeaderComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
-    /** @nocollapse */ SettingsHeaderComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SettingsHeaderComponent, selectors: [["sme-settings-header"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1z, decls: 1, vars: 0, template: function SettingsHeaderComponent_Template(rf, ctx) {
+    /** @nocollapse */ SettingsHeaderComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SettingsHeaderComponent, selectors: [["sme-settings-header"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1A, decls: 1, vars: 0, template: function SettingsHeaderComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵprojectionDef();
                 i0.ɵɵprojection(0);
@@ -55001,7 +55357,7 @@
             }], function () { return [{ type: i0.Injector }]; }, null);
     })();
 
-    var _c0$1A = ["*"];
+    var _c0$1B = ["*"];
     var SettingsNavigationComponent = /** @class */ (function (_super) {
         __extends(SettingsNavigationComponent, _super);
         function SettingsNavigationComponent(injector) {
@@ -55028,7 +55384,7 @@
         return SettingsNavigationComponent;
     }(CoreBaseComponent));
     /** @nocollapse */ SettingsNavigationComponent.ɵfac = function SettingsNavigationComponent_Factory(t) { return new (t || SettingsNavigationComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
-    /** @nocollapse */ SettingsNavigationComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SettingsNavigationComponent, selectors: [["sme-settings-navigation"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1A, decls: 1, vars: 0, template: function SettingsNavigationComponent_Template(rf, ctx) {
+    /** @nocollapse */ SettingsNavigationComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SettingsNavigationComponent, selectors: [["sme-settings-navigation"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1B, decls: 1, vars: 0, template: function SettingsNavigationComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵprojectionDef();
                 i0.ɵɵprojection(0);
@@ -55174,7 +55530,7 @@
                 }] });
     })();
 
-    var _c0$1B = ["placeholder"];
+    var _c0$1C = ["placeholder"];
     function SnapInExtensionComponent_sme_loading_wheel_2_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelement(0, "sme-loading-wheel");
@@ -55310,7 +55666,7 @@
     /** @nocollapse */ SnapInExtensionComponent.ɵfac = function SnapInExtensionComponent_Factory(t) { return new (t || SnapInExtensionComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(ExtensionBrokerService)); };
     /** @nocollapse */ SnapInExtensionComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SnapInExtensionComponent, selectors: [["sme-snap-in-extension"]], viewQuery: function SnapInExtensionComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$1B, 1);
+                i0.ɵɵviewQuery(_c0$1C, 1);
             }
             if (rf & 2) {
                 var _t = void 0;
@@ -55401,7 +55757,7 @@
             i0.ɵɵproperty("imageSrc", ctx_r0.tileImageSrc);
         }
     }
-    var _c0$1C = ["*"];
+    var _c0$1D = ["*"];
     var TileContentComponent = /** @class */ (function (_super) {
         __extends(TileContentComponent, _super);
         function TileContentComponent() {
@@ -55417,7 +55773,7 @@
         return TileContentComponent;
     }(CoreBaseComponent));
     /** @nocollapse */ TileContentComponent.ɵfac = function TileContentComponent_Factory(t) { return ɵTileContentComponent_BaseFactory(t || TileContentComponent); };
-    /** @nocollapse */ TileContentComponent.ɵcmp = i0.ɵɵdefineComponent({ type: TileContentComponent, selectors: [["sme-tile-content"]], inputs: { tileHeader: "tileHeader", tileImageSrc: "tileImageSrc" }, features: [i0.ɵɵ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) {
+    /** @nocollapse */ TileContentComponent.ɵcmp = i0.ɵɵdefineComponent({ type: TileContentComponent, selectors: [["sme-tile-content"]], inputs: { tileHeader: "tileHeader", tileImageSrc: "tileImageSrc" }, features: [i0.ɵɵ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) {
                 i0.ɵɵprojectionDef();
                 i0.ɵɵtemplate(0, TileContentComponent_div_0_Template, 1, 1, "div", 0);
@@ -55449,7 +55805,7 @@
                 }] });
     })();
 
-    var _c0$1D = ["*"];
+    var _c0$1E = ["*"];
     var TileComponent = /** @class */ (function (_super) {
         __extends(TileComponent, _super);
         function TileComponent() {
@@ -55478,7 +55834,7 @@
             if (rf & 2) {
                 i0.ɵɵclassProp("sme-tile-fill", ctx.fillTile)("sme-tile-focusable", ctx.isFocusable);
             }
-        }, inputs: { tileHeader: "tileHeader", tileImageSrc: "tileImageSrc", fillTile: "fillTile", isFocusable: "isFocusable" }, features: [i0.ɵɵ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) {
+        }, inputs: { tileHeader: "tileHeader", tileImageSrc: "tileImageSrc", fillTile: "fillTile", isFocusable: "isFocusable" }, features: [i0.ɵɵ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) {
                 i0.ɵɵprojectionDef();
                 i0.ɵɵelementStart(0, "sme-tile-content", 0);
@@ -55555,6 +55911,723 @@
             }], null, null);
     })();
 
+    var _c0$1F = ["*"];
+    var SmeUxContentComponent = /** @class */ (function (_super) {
+        __extends(SmeUxContentComponent, _super);
+        function SmeUxContentComponent(injector) {
+            return _super.call(this, injector) || this;
+        }
+        Object.defineProperty(SmeUxContentComponent.prototype, "logSourceName", {
+            get: function () {
+                return 'SmeUxContent';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return SmeUxContentComponent;
+    }(CoreBaseComponent));
+    /** @nocollapse */ SmeUxContentComponent.ɵfac = function SmeUxContentComponent_Factory(t) { return new (t || SmeUxContentComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
+    /** @nocollapse */ SmeUxContentComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SmeUxContentComponent, selectors: [["sme-ux-content"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1F, decls: 1, vars: 0, template: function SmeUxContentComponent_Template(rf, ctx) {
+            if (rf & 1) {
+                i0.ɵɵprojectionDef();
+                i0.ɵɵprojection(0);
+            }
+        }, encapsulation: 2 });
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SmeUxContentComponent, [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sme-ux-content',
+                        template: "<ng-content></ng-content>"
+                    }]
+            }], function () { return [{ type: i0.Injector }]; }, null);
+    })();
+
+    var SmeUxContentModule = /** @class */ (function () {
+        function SmeUxContentModule() {
+        }
+        return SmeUxContentModule;
+    }());
+    /** @nocollapse */ SmeUxContentModule.ɵfac = function SmeUxContentModule_Factory(t) { return new (t || SmeUxContentModule)(); };
+    /** @nocollapse */ SmeUxContentModule.ɵmod = i0.ɵɵdefineNgModule({ type: SmeUxContentModule });
+    /** @nocollapse */ SmeUxContentModule.ɵinj = i0.ɵɵdefineInjector({ imports: [[
+                i1$1.CommonModule
+            ]] });
+    (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(SmeUxContentModule, { declarations: [SmeUxContentComponent], imports: [i1$1.CommonModule], exports: [SmeUxContentComponent] }); })();
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SmeUxContentModule, [{
+                type: i0.NgModule,
+                args: [{
+                        exports: [SmeUxContentComponent],
+                        declarations: [SmeUxContentComponent],
+                        imports: [
+                            i1$1.CommonModule
+                        ]
+                    }]
+            }], null, null);
+    })();
+
+    var _c0$1G = ["*"];
+    var SmeUxFooterComponent = /** @class */ (function (_super) {
+        __extends(SmeUxFooterComponent, _super);
+        function SmeUxFooterComponent(injector) {
+            return _super.call(this, injector) || this;
+        }
+        Object.defineProperty(SmeUxFooterComponent.prototype, "logSourceName", {
+            get: function () {
+                return 'SmeUxFooterSpace';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return SmeUxFooterComponent;
+    }(CoreBaseComponent));
+    /** @nocollapse */ SmeUxFooterComponent.ɵfac = function SmeUxFooterComponent_Factory(t) { return new (t || SmeUxFooterComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
+    /** @nocollapse */ SmeUxFooterComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SmeUxFooterComponent, selectors: [["sme-ux-footer"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1G, decls: 1, vars: 0, template: function SmeUxFooterComponent_Template(rf, ctx) {
+            if (rf & 1) {
+                i0.ɵɵprojectionDef();
+                i0.ɵɵprojection(0);
+            }
+        }, encapsulation: 2 });
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SmeUxFooterComponent, [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sme-ux-footer',
+                        template: "<ng-content></ng-content>"
+                    }]
+            }], function () { return [{ type: i0.Injector }]; }, null);
+    })();
+
+    var SmeUxFooterModule = /** @class */ (function () {
+        function SmeUxFooterModule() {
+        }
+        return SmeUxFooterModule;
+    }());
+    /** @nocollapse */ SmeUxFooterModule.ɵfac = function SmeUxFooterModule_Factory(t) { return new (t || SmeUxFooterModule)(); };
+    /** @nocollapse */ SmeUxFooterModule.ɵmod = i0.ɵɵdefineNgModule({ type: SmeUxFooterModule });
+    /** @nocollapse */ SmeUxFooterModule.ɵinj = i0.ɵɵdefineInjector({ imports: [[
+                i1$1.CommonModule
+            ]] });
+    (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(SmeUxFooterModule, { declarations: [SmeUxFooterComponent], imports: [i1$1.CommonModule], exports: [SmeUxFooterComponent] }); })();
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SmeUxFooterModule, [{
+                type: i0.NgModule,
+                args: [{
+                        exports: [SmeUxFooterComponent],
+                        declarations: [SmeUxFooterComponent],
+                        imports: [
+                            i1$1.CommonModule
+                        ]
+                    }]
+            }], null, null);
+    })();
+
+    function WizardNavigationButtonComponent_span_3_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelement(0, "span", 5);
+        }
+        if (rf & 2) {
+            var ctx_r0 = i0.ɵɵnextContext();
+            i0.ɵɵclassMap(ctx_r0.leftIcon);
+        }
+    }
+    function WizardNavigationButtonComponent_span_9_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelement(0, "span", 5);
+        }
+        if (rf & 2) {
+            var ctx_r1 = i0.ɵɵnextContext();
+            i0.ɵɵclassMap(ctx_r1.rightIcon);
+        }
+    }
+    var WizardNavigationButtonComponent = /** @class */ (function (_super) {
+        __extends(WizardNavigationButtonComponent, _super);
+        function WizardNavigationButtonComponent(injector) {
+            var _this = _super.call(this, injector) || this;
+            /**
+             * 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 i0.EventEmitter();
+            /**
+             * It emits the end button clicked event.
+             */
+            _this.endButtonClicked = new i0.EventEmitter();
+            _this.currentStartButtonIndexInternal = _this.defaultStartIndex;
+            return _this;
+        }
+        Object.defineProperty(WizardNavigationButtonComponent.prototype, "logSourceName", {
+            get: function () {
+                return 'WizardNavigationButtonComponent';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(WizardNavigationButtonComponent.prototype, "buttons", {
+            /**
+             * Getter buttons
+             */
+            get: function () {
+                return this.buttonsInternal;
+            },
+            /**
+             * Setter buttons
+             */
+            set: function (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;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(WizardNavigationButtonComponent.prototype, "currentStartButtonIndex", {
+            /**
+             * Getter currentStartButtonIndex
+             */
+            get: function () {
+                return this.currentStartButtonIndexInternal;
+            },
+            /**
+             * Setter currentStartButtonIndex
+             */
+            set: function (input) {
+                if (typeof input !== 'number') {
+                    logging.Logging.log({
+                        consoleGroupHeader: 'WizardNavigationButtonComponent',
+                        level: logLevel.LogLevel.Error,
+                        message: 'non number input was passed in.',
+                        source: 'BannerComponent.set.currentStartButtonIndex()'
+                    });
+                }
+                this.currentStartButtonIndexInternal = input;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * 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
+         */
+        WizardNavigationButtonComponent.prototype.checkStartDisabled = function (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
+         */
+        WizardNavigationButtonComponent.prototype.checkEndDisabled = function (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.
+         */
+        WizardNavigationButtonComponent.prototype.reset = function () {
+            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.
+         */
+        WizardNavigationButtonComponent.prototype.updateStartIndexByLabel = function (label) {
+            var buttons = this.buttons.map(function (b) {
+                return b.label;
+            });
+            var activatedButtonIndex = buttons.indexOf(label);
+            if (activatedButtonIndex === -1 || activatedButtonIndex >= buttons.length) {
+                return;
+            }
+            this.currentStartButtonIndexInternal = activatedButtonIndex - 1;
+        };
+        /**
+         * It handles the start index button click
+         */
+        WizardNavigationButtonComponent.prototype.onStartButtonClick = function () {
+            if (this.currentStartButtonIndex > this.defaultStartIndex) {
+                this.currentStartButtonIndex -= 1;
+            }
+            this.startButtonClicked.emit();
+        };
+        /**
+         * It handles the end index button click
+         */
+        WizardNavigationButtonComponent.prototype.onEndButtonClick = function () {
+            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.
+         */
+        WizardNavigationButtonComponent.prototype.getCurrentStartButtonLabel = function () {
+            return this.getButtonLabel(this.currentStartButtonIndex);
+        };
+        /**
+         * It gets the current activated button label.
+         * @returns the label string.
+         */
+        WizardNavigationButtonComponent.prototype.getCurrentActivatedButtonLabel = function () {
+            return this.getButtonLabel(this.currentStartButtonIndex + 1);
+        };
+        /**
+         * It gets the current end index button label.
+         * @returns the label string.
+         */
+        WizardNavigationButtonComponent.prototype.getCurrentEndButtonLabel = function () {
+            return this.getButtonLabel(this.currentStartButtonIndex + 2);
+        };
+        /**
+         * It gets the button label.
+         * @param index the index for label.
+         * @returns the label string.
+         */
+        WizardNavigationButtonComponent.prototype.getButtonLabel = function (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;
+        };
+        return WizardNavigationButtonComponent;
+    }(CoreBaseComponent));
+    /** @nocollapse */ WizardNavigationButtonComponent.ɵfac = function WizardNavigationButtonComponent_Factory(t) { return new (t || WizardNavigationButtonComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
+    /** @nocollapse */ WizardNavigationButtonComponent.ɵcmp = i0.ɵɵ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: [i0.ɵɵ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) {
+                i0.ɵɵelementStart(0, "div", 0);
+                i0.ɵɵelementStart(1, "span", 1);
+                i0.ɵɵelementStart(2, "button", 2);
+                i0.ɵɵlistener("click", function WizardNavigationButtonComponent_Template_button_click_2_listener() { return ctx.onStartButtonClick(); });
+                i0.ɵɵtemplate(3, WizardNavigationButtonComponent_span_3_Template, 1, 2, "span", 3);
+                i0.ɵɵelementStart(4, "span", 4);
+                i0.ɵɵtext(5);
+                i0.ɵɵelementEnd();
+                i0.ɵɵelementEnd();
+                i0.ɵɵelementEnd();
+                i0.ɵɵelementStart(6, "button", 2);
+                i0.ɵɵlistener("click", function WizardNavigationButtonComponent_Template_button_click_6_listener() { return ctx.onEndButtonClick(); });
+                i0.ɵɵelementStart(7, "span", 4);
+                i0.ɵɵtext(8);
+                i0.ɵɵelementEnd();
+                i0.ɵɵtemplate(9, WizardNavigationButtonComponent_span_9_Template, 1, 2, "span", 3);
+                i0.ɵɵelementEnd();
+                i0.ɵɵelementEnd();
+            }
+            if (rf & 2) {
+                i0.ɵɵclassProp("sme-layout-hidden", !ctx.render);
+                i0.ɵɵadvance(2);
+                i0.ɵɵclassMap(ctx.buttons[ctx.currentStartButtonIndex] == null ? null : ctx.buttons[ctx.currentStartButtonIndex].class);
+                i0.ɵɵclassProp("sme-button-auto-width", ctx.buttonAutoWidth);
+                i0.ɵɵproperty("disabled", ctx.checkStartDisabled(ctx.currentStartButtonIndex));
+                i0.ɵɵadvance(1);
+                i0.ɵɵproperty("ngIf", ctx.showIcons);
+                i0.ɵɵadvance(2);
+                i0.ɵɵtextInterpolate1(" ", ctx.buttons[ctx.currentStartButtonIndex] ? ctx.buttons[ctx.currentStartButtonIndex].label : ctx.strings.MsftSmeShell.Angular.Wizard.Lite.Actions.previous, "");
+                i0.ɵɵadvance(1);
+                i0.ɵɵclassMap(ctx.buttons[ctx.currentStartButtonIndex] == null ? null : ctx.buttons[ctx.currentStartButtonIndex].class);
+                i0.ɵɵclassProp("sme-button-auto-width", ctx.buttonAutoWidth);
+                i0.ɵɵproperty("disabled", ctx.checkEndDisabled(ctx.currentStartButtonIndex));
+                i0.ɵɵadvance(2);
+                i0.ɵɵtextInterpolate1(" ", ctx.buttons[ctx.currentStartButtonIndex + 2] ? ctx.buttons[ctx.currentStartButtonIndex + 2].label : ctx.strings.MsftSmeShell.Angular.Wizard.Lite.Actions.next, "");
+                i0.ɵɵadvance(1);
+                i0.ɵɵproperty("ngIf", ctx.showIcons);
+            }
+        }, directives: [i1$1.NgIf], encapsulation: 2 });
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WizardNavigationButtonComponent, [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sme-wizard-navigation-button',
+                        templateUrl: './wizard-navigation-button.component.html'
+                    }]
+            }], function () { return [{ type: i0.Injector }]; }, { showIcons: [{
+                    type: i0.Input
+                }], leftIcon: [{
+                    type: i0.Input
+                }], rightIcon: [{
+                    type: i0.Input
+                }], buttonAutoWidth: [{
+                    type: i0.Input
+                }], buttons: [{
+                    type: i0.Input
+                }], startButtonClicked: [{
+                    type: i0.Output
+                }], endButtonClicked: [{
+                    type: i0.Output
+                }] });
+    })();
+
+    function SmeWizardLiteFooterTemplateComponent_div_0_button_1_Template(rf, ctx) {
+        if (rf & 1) {
+            var _r5_1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "button", 5);
+            i0.ɵɵlistener("click", function SmeWizardLiteFooterTemplateComponent_div_0_button_1_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r5_1); var ctx_r4 = i0.ɵɵnextContext(2); return ctx_r4.onReviewButtonClicked($event); });
+            i0.ɵɵelementStart(1, "span", 6);
+            i0.ɵɵtext(2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            var ctx_r1 = i0.ɵɵnextContext(2);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", ctx_r1.reviewButtonTextForRendering, "");
+        }
+    }
+    function SmeWizardLiteFooterTemplateComponent_div_0_sme_wizard_navigation_button_2_Template(rf, ctx) {
+        if (rf & 1) {
+            var _r8_1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "sme-wizard-navigation-button", 7, 8);
+            i0.ɵɵlistener("startButtonClicked", function SmeWizardLiteFooterTemplateComponent_div_0_sme_wizard_navigation_button_2_Template_sme_wizard_navigation_button_startButtonClicked_0_listener($event) { i0.ɵɵrestoreView(_r8_1); var ctx_r7 = i0.ɵɵ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) { i0.ɵɵrestoreView(_r8_1); var ctx_r9 = i0.ɵɵnextContext(2); return ctx_r9.onNextButtonClicked($event); });
+            i0.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            var ctx_r2 = i0.ɵɵnextContext(2);
+            i0.ɵɵproperty("buttons", ctx_r2.buttons);
+        }
+    }
+    function SmeWizardLiteFooterTemplateComponent_div_0_button_3_Template(rf, ctx) {
+        if (rf & 1) {
+            var _r11_1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "button", 9);
+            i0.ɵɵlistener("click", function SmeWizardLiteFooterTemplateComponent_div_0_button_3_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r11_1); var ctx_r10 = i0.ɵɵnextContext(2); return ctx_r10.onExitButtonClicked($event); });
+            i0.ɵɵelementStart(1, "span", 6);
+            i0.ɵɵtext(2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            var ctx_r3 = i0.ɵɵnextContext(2);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", ctx_r3.exitButtonTextForRendering, "");
+        }
+    }
+    function SmeWizardLiteFooterTemplateComponent_div_0_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1);
+            i0.ɵɵtemplate(1, SmeWizardLiteFooterTemplateComponent_div_0_button_1_Template, 3, 1, "button", 2);
+            i0.ɵɵtemplate(2, SmeWizardLiteFooterTemplateComponent_div_0_sme_wizard_navigation_button_2_Template, 2, 1, "sme-wizard-navigation-button", 3);
+            i0.ɵɵtemplate(3, SmeWizardLiteFooterTemplateComponent_div_0_button_3_Template, 3, 1, "button", 4);
+            i0.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            var ctx_r0 = i0.ɵɵnextContext();
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx_r0.displayReviewButton);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx_r0.displayWizardButton);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx_r0.displayExitButton);
+        }
+    }
+    var SmeWizardLiteFooterTemplateComponent = /** @class */ (function (_super) {
+        __extends(SmeWizardLiteFooterTemplateComponent, _super);
+        function SmeWizardLiteFooterTemplateComponent(injector) {
+            var _this = _super.call(this, injector) || this;
+            _this.displayExitButton = true;
+            _this.displayWizardButton = true;
+            _this.displayReviewButton = true;
+            _this.reviewButtonClickedEventEmitter = new i0.EventEmitter();
+            _this.exitButtonClickedEventEmitter = new i0.EventEmitter();
+            _this.prevButtonClickedEventEmitter = new i0.EventEmitter();
+            _this.nextButtonClickedEventEmitter = new i0.EventEmitter();
+            _this.buttonsInternal = [];
+            return _this;
+        }
+        Object.defineProperty(SmeWizardLiteFooterTemplateComponent.prototype, "logSourceName", {
+            get: function () {
+                return 'SmeWizardLiteFooterTemplateComponent';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SmeWizardLiteFooterTemplateComponent.prototype, "buttons", {
+            get: function () {
+                return this.buttonsInternal;
+            },
+            set: function (buttons) {
+                this.buttonsInternal = buttons;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SmeWizardLiteFooterTemplateComponent.prototype, "reviewButtonTextForRendering", {
+            get: function () {
+                var _a;
+                return (_a = this.reviewButtonText) !== null && _a !== void 0 ? _a : this.strings.MsftSmeShell.Angular.Wizard.Lite.FooterTemplate.review;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SmeWizardLiteFooterTemplateComponent.prototype, "exitButtonTextForRendering", {
+            get: function () {
+                var _a;
+                return (_a = this.exitButtonText) !== null && _a !== void 0 ? _a : this.strings.MsftSmeShell.Angular.Wizard.Lite.FooterTemplate.exit;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * It handles the on selection changed event from the external pivot tab component.
+         * @param tab the current selected pivot tab.
+         * @returns void.
+         */
+        SmeWizardLiteFooterTemplateComponent.prototype.onSelectionChanged = function (tab) {
+            if (!tab || !tab.label) {
+                return;
+            }
+            if (tab.label === this.wizardButton.getCurrentActivatedButtonLabel()) {
+                return;
+            }
+            this.wizardButton.updateStartIndexByLabel(tab.label);
+        };
+        SmeWizardLiteFooterTemplateComponent.prototype.onPrevButtonClicked = function ($event) {
+            if (!this.wizardButton) {
+                return;
+            }
+            this.prevButtonClickedEventEmitter.emit($event);
+        };
+        SmeWizardLiteFooterTemplateComponent.prototype.onNextButtonClicked = function ($event) {
+            if (!this.wizardButton) {
+                return;
+            }
+            this.nextButtonClickedEventEmitter.emit($event);
+        };
+        SmeWizardLiteFooterTemplateComponent.prototype.onReviewButtonClicked = function ($event) {
+            this.reviewButtonClickedEventEmitter.emit($event);
+        };
+        SmeWizardLiteFooterTemplateComponent.prototype.onExitButtonClicked = function ($event) {
+            this.exitButtonClickedEventEmitter.emit($event);
+        };
+        return SmeWizardLiteFooterTemplateComponent;
+    }(CoreBaseComponent));
+    /** @nocollapse */ SmeWizardLiteFooterTemplateComponent.ɵfac = function SmeWizardLiteFooterTemplateComponent_Factory(t) { return new (t || SmeWizardLiteFooterTemplateComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
+    /** @nocollapse */ SmeWizardLiteFooterTemplateComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SmeWizardLiteFooterTemplateComponent, selectors: [["sme-wizard-lite-footer-template"]], viewQuery: function SmeWizardLiteFooterTemplateComponent_Query(rf, ctx) {
+            if (rf & 1) {
+                i0.ɵɵviewQuery(WizardNavigationButtonComponent, 1);
+            }
+            if (rf & 2) {
+                var _t = void 0;
+                i0.ɵɵqueryRefresh(_t = i0.ɵɵ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: [i0.ɵɵ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) {
+                i0.ɵɵtemplate(0, SmeWizardLiteFooterTemplateComponent_div_0_Template, 4, 3, "div", 0);
+            }
+            if (rf & 2) {
+                i0.ɵɵproperty("ngIf", ctx.displayReviewButton || ctx.displayWizardButton || ctx.displayExitButton);
+            }
+        }, directives: [i1$1.NgIf, WizardNavigationButtonComponent], encapsulation: 2 });
+    __decorate([
+        yield_decorator.Yield(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], SmeWizardLiteFooterTemplateComponent.prototype, "onPrevButtonClicked", null);
+    __decorate([
+        yield_decorator.Yield(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], SmeWizardLiteFooterTemplateComponent.prototype, "onNextButtonClicked", null);
+    __decorate([
+        yield_decorator.Yield(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], SmeWizardLiteFooterTemplateComponent.prototype, "onReviewButtonClicked", null);
+    __decorate([
+        yield_decorator.Yield(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], SmeWizardLiteFooterTemplateComponent.prototype, "onExitButtonClicked", null);
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SmeWizardLiteFooterTemplateComponent, [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sme-wizard-lite-footer-template',
+                        templateUrl: './sme-wizard-lite-footer-template.component.html'
+                    }]
+            }], function () { return [{ type: i0.Injector }]; }, { displayExitButton: [{
+                    type: i0.Input
+                }], displayWizardButton: [{
+                    type: i0.Input
+                }], displayReviewButton: [{
+                    type: i0.Input
+                }], reviewButtonText: [{
+                    type: i0.Input
+                }], exitButtonText: [{
+                    type: i0.Input
+                }], reviewButtonClickedEventEmitter: [{
+                    type: i0.Output
+                }], exitButtonClickedEventEmitter: [{
+                    type: i0.Output
+                }], prevButtonClickedEventEmitter: [{
+                    type: i0.Output
+                }], nextButtonClickedEventEmitter: [{
+                    type: i0.Output
+                }], wizardButton: [{
+                    type: i0.ViewChild,
+                    args: [WizardNavigationButtonComponent]
+                }], onPrevButtonClicked: [], onNextButtonClicked: [], onReviewButtonClicked: [], onExitButtonClicked: [] });
+    })();
+
+    var WizardNavigationButtonModule = /** @class */ (function () {
+        function WizardNavigationButtonModule() {
+        }
+        return WizardNavigationButtonModule;
+    }());
+    /** @nocollapse */ WizardNavigationButtonModule.ɵfac = function WizardNavigationButtonModule_Factory(t) { return new (t || WizardNavigationButtonModule)(); };
+    /** @nocollapse */ WizardNavigationButtonModule.ɵmod = i0.ɵɵdefineNgModule({ type: WizardNavigationButtonModule });
+    /** @nocollapse */ WizardNavigationButtonModule.ɵinj = i0.ɵɵdefineInjector({ imports: [[
+                i1.RouterModule,
+                i1$1.CommonModule
+            ]] });
+    (function () {
+        (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(WizardNavigationButtonModule, { declarations: [WizardNavigationButtonComponent], imports: [i1.RouterModule,
+                i1$1.CommonModule], exports: [WizardNavigationButtonComponent] });
+    })();
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WizardNavigationButtonModule, [{
+                type: i0.NgModule,
+                args: [{
+                        exports: [
+                            WizardNavigationButtonComponent
+                        ],
+                        declarations: [
+                            WizardNavigationButtonComponent
+                        ],
+                        imports: [
+                            i1.RouterModule,
+                            i1$1.CommonModule
+                        ]
+                    }]
+            }], null, null);
+    })();
+
+    var SmeWizardLiteFooterTemplateModule = /** @class */ (function () {
+        function SmeWizardLiteFooterTemplateModule() {
+        }
+        return SmeWizardLiteFooterTemplateModule;
+    }());
+    /** @nocollapse */ SmeWizardLiteFooterTemplateModule.ɵfac = function SmeWizardLiteFooterTemplateModule_Factory(t) { return new (t || SmeWizardLiteFooterTemplateModule)(); };
+    /** @nocollapse */ SmeWizardLiteFooterTemplateModule.ɵmod = i0.ɵɵdefineNgModule({ type: SmeWizardLiteFooterTemplateModule });
+    /** @nocollapse */ SmeWizardLiteFooterTemplateModule.ɵinj = i0.ɵɵdefineInjector({ imports: [[
+                i1$1.CommonModule,
+                PivotModule,
+                WizardNavigationButtonModule
+            ]] });
+    (function () {
+        (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(SmeWizardLiteFooterTemplateModule, { declarations: [SmeWizardLiteFooterTemplateComponent], imports: [i1$1.CommonModule,
+                PivotModule,
+                WizardNavigationButtonModule], exports: [SmeWizardLiteFooterTemplateComponent] });
+    })();
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SmeWizardLiteFooterTemplateModule, [{
+                type: i0.NgModule,
+                args: [{
+                        exports: [SmeWizardLiteFooterTemplateComponent],
+                        declarations: [SmeWizardLiteFooterTemplateComponent],
+                        imports: [
+                            i1$1.CommonModule,
+                            PivotModule,
+                            WizardNavigationButtonModule
+                        ]
+                    }]
+            }], null, null);
+    })();
+
+    var _c0$1H = ["*"];
+    var SmeUxPageComponent = /** @class */ (function (_super) {
+        __extends(SmeUxPageComponent, _super);
+        function SmeUxPageComponent(injector) {
+            return _super.call(this, injector) || this;
+        }
+        Object.defineProperty(SmeUxPageComponent.prototype, "logSourceName", {
+            get: function () {
+                return 'SmeUxPage';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return SmeUxPageComponent;
+    }(CoreBaseComponent));
+    /** @nocollapse */ SmeUxPageComponent.ɵfac = function SmeUxPageComponent_Factory(t) { return new (t || SmeUxPageComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
+    /** @nocollapse */ SmeUxPageComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SmeUxPageComponent, selectors: [["sme-ux-page"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1H, decls: 1, vars: 0, template: function SmeUxPageComponent_Template(rf, ctx) {
+            if (rf & 1) {
+                i0.ɵɵprojectionDef();
+                i0.ɵɵprojection(0);
+            }
+        }, encapsulation: 2 });
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SmeUxPageComponent, [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sme-ux-page',
+                        template: "<ng-content></ng-content>"
+                    }]
+            }], function () { return [{ type: i0.Injector }]; }, null);
+    })();
+
+    var SmeUxPageModule = /** @class */ (function () {
+        function SmeUxPageModule() {
+        }
+        return SmeUxPageModule;
+    }());
+    /** @nocollapse */ SmeUxPageModule.ɵfac = function SmeUxPageModule_Factory(t) { return new (t || SmeUxPageModule)(); };
+    /** @nocollapse */ SmeUxPageModule.ɵmod = i0.ɵɵdefineNgModule({ type: SmeUxPageModule });
+    /** @nocollapse */ SmeUxPageModule.ɵinj = i0.ɵɵdefineInjector({ imports: [[
+                i1$1.CommonModule,
+                SmeUxContentModule,
+                SmeUxFooterModule
+            ]] });
+    (function () {
+        (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(SmeUxPageModule, { declarations: [SmeUxPageComponent], imports: [i1$1.CommonModule,
+                SmeUxContentModule,
+                SmeUxFooterModule], exports: [SmeUxPageComponent] });
+    })();
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SmeUxPageModule, [{
+                type: i0.NgModule,
+                args: [{
+                        exports: [SmeUxPageComponent],
+                        declarations: [SmeUxPageComponent],
+                        imports: [
+                            i1$1.CommonModule,
+                            SmeUxContentModule,
+                            SmeUxFooterModule
+                        ]
+                    }]
+            }], null, null);
+    })();
+
     /**
      * Wizard navigation information class.
      */
@@ -55868,7 +56941,7 @@
         __metadata("design:returntype", void 0)
     ], WizardResponsiveWindowManager.prototype, "onWindowSizeChanged", null);
 
-    var _c0$1E = ["wizardFooter"];
+    var _c0$1I = ["wizardFooter"];
     function WizardComponent_div_1_sme_badge_3_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelement(0, "sme-badge", 14);
@@ -56905,7 +57978,7 @@
     /** @nocollapse */ WizardComponent.ɵfac = function WizardComponent_Factory(t) { return new (t || WizardComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(AppContextService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver), i0.ɵɵdirectiveInject(SME_LAYOUT_PROVIDER, 12)); };
     /** @nocollapse */ WizardComponent.ɵcmp = i0.ɵɵdefineComponent({ type: WizardComponent, selectors: [["sme-wizard"]], viewQuery: function WizardComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$1E, 1);
+                i0.ɵɵviewQuery(_c0$1I, 1);
             }
             if (rf & 2) {
                 var _t = void 0;
@@ -57829,285 +58902,284 @@
         return TemplateDrivenWizardStepComponent;
     }(FormWizardStepComponent));
 
-    var ContextDropdownComponent = /** @class */ (function () {
-        function ContextDropdownComponent() {
-            this.actions = [];
+    /**
+     * The wizard lite service that mainly handles the wizard button with the pivot relationship from internal shell.
+     */
+    var WizardLiteService = /** @class */ (function () {
+        function WizardLiteService() {
         }
-        return ContextDropdownComponent;
-    }());
-    /** @nocollapse */ ContextDropdownComponent.ɵfac = function ContextDropdownComponent_Factory(t) { return new (t || ContextDropdownComponent)(); };
-    /** @nocollapse */ ContextDropdownComponent.ɵcmp = i0.ɵɵ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) {
-                i0.ɵɵelementStart(0, "sme-dropdown", 0, 1);
-                i0.ɵɵelementStart(2, "button", 2, 3);
-                i0.ɵɵelementStart(4, "span");
-                i0.ɵɵtext(5);
-                i0.ɵɵelementEnd();
-                i0.ɵɵelement(6, "span", 4);
-                i0.ɵɵelementEnd();
-                i0.ɵɵelement(7, "sme-action-menu", 5);
-                i0.ɵɵelementEnd();
+        WizardLiteService.prototype.refreshComponents = function (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.
+         */
+        WizardLiteService.prototype.refreshFooterComponent = function (wizardLiteComponent) {
+            if (!wizardLiteComponent.customFooter &&
+                wizardLiteComponent.wizardLiteFooterTemplateElement &&
+                wizardLiteComponent.wizardLiteFooterTemplateElement.toArray().length) {
+                if (wizardLiteComponent.wizardLiteFooterTemplateElement.toArray().length !== 1) {
+                    logging.Logging.log({
+                        consoleGroupHeader: 'WizardLiteComponent',
+                        level: logLevel.LogLevel.Error,
+                        message: 'illegal count of wizard button was found.',
+                        source: 'WizardLiteComponent.ngAfterContentInit()'
+                    });
+                }
+                var wizardLiteFooterTemplateElement = wizardLiteComponent.wizardLiteFooterTemplateElement.toArray()[0];
+                wizardLiteComponent.wizardLiteFooterTemplate = wizardLiteFooterTemplateElement;
+                wizardLiteComponent.wizardButton = wizardLiteFooterTemplateElement.wizardButton;
+                wizardLiteFooterTemplateElement.buttons = wizardLiteComponent.buttons;
             }
-            if (rf & 2) {
-                i0.ɵɵproperty("displayToSide", true);
-                i0.ɵɵadvance(5);
-                i0.ɵɵtextInterpolate(ctx.actionGroupTitle);
-                i0.ɵɵadvance(2);
-                i0.ɵɵproperty("actions", ctx.actions);
+            else if (wizardLiteComponent.customFooter &&
+                wizardLiteComponent.wizardButtonElement &&
+                wizardLiteComponent.wizardButtonElement.toArray().length) {
+                if (wizardLiteComponent.wizardButtonElement.toArray().length !== 1) {
+                    logging.Logging.log({
+                        consoleGroupHeader: 'WizardLiteComponent',
+                        level: logLevel.LogLevel.Error,
+                        message: 'illegal count of wizard button was found.',
+                        source: 'WizardLiteComponent.ngAfterContentInit()'
+                    });
+                }
+                var wizardButtonElement = wizardLiteComponent.wizardButtonElement.toArray()[0];
+                wizardLiteComponent.wizardButton = wizardButtonElement;
+                wizardButtonElement.buttons = wizardLiteComponent.buttons;
             }
-        }, directives: [DropdownComponent, ActionMenuComponent], encapsulation: 2 });
+        };
+        /**
+         * It refreshes the internal object for the content component.
+         * @param wizardLiteComponent the wizard lite component.
+         */
+        WizardLiteService.prototype.refreshContentComponents = function (wizardLiteComponent) {
+            if (wizardLiteComponent.pivotElement && wizardLiteComponent.pivotElement.toArray().length) {
+                if (wizardLiteComponent.pivotElement.toArray().length !== 1) {
+                    logging.Logging.log({
+                        consoleGroupHeader: 'WizardLiteComponent',
+                        level: logLevel.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(function ($event) {
+                    wizardLiteComponent.onSelectionChanged($event);
+                }));
+            }
+        };
+        /**
+         * It sets up the interaction between the pivot component and the footer space wizard button from internal shell.
+         * @param wizardLiteComponent the wizard lite component.
+         */
+        WizardLiteService.prototype.setupEmitterSubscriptions = function (wizardLiteComponent) {
+            if (!wizardLiteComponent) {
+                return;
+            }
+            var pivotComponent = wizardLiteComponent.pivotComponent;
+            if (!pivotComponent) {
+                return;
+            }
+            var wizardLiteFooterTemplateElement = wizardLiteComponent.wizardLiteFooterTemplate;
+            if (!wizardLiteFooterTemplateElement) {
+                return;
+            }
+            wizardLiteFooterTemplateElement.prevButtonClickedEventEmitter.subscribe(function () {
+                pivotComponent.selectTabByLabel(wizardLiteFooterTemplateElement.wizardButton.getCurrentActivatedButtonLabel());
+            });
+            wizardLiteFooterTemplateElement.nextButtonClickedEventEmitter.subscribe(function () {
+                pivotComponent.selectTabByLabel(wizardLiteFooterTemplateElement.wizardButton.getCurrentActivatedButtonLabel());
+            });
+        };
+        /**
+         * It checks whether the component has been active.
+         * @param wizardLiteComponent the wizard lite component.
+         */
+        WizardLiteService.prototype.checkActive = function (wizardLiteComponent) {
+            wizardLiteComponent.active = !!wizardLiteComponent.wizardButton && !!wizardLiteComponent.pivotComponent;
+        };
+        return WizardLiteService;
+    }());
+    /** @nocollapse */ WizardLiteService.ɵfac = function WizardLiteService_Factory(t) { return new (t || WizardLiteService)(); };
+    /** @nocollapse */ WizardLiteService.ɵprov = i0.ɵɵdefineInjectable({ token: WizardLiteService, factory: WizardLiteService.ɵfac });
     (function () {
-        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextDropdownComponent, [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sme-context-dropdown',
-                        templateUrl: './context-dropdown.component.html'
-                    }]
-            }], null, { actionGroupTitle: [{
-                    type: i0.Input
-                }], actions: [{
-                    type: i0.Input
-                }] });
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WizardLiteService, [{
+                type: i0.Injectable
+            }], null, null);
     })();
 
-    function ContextMenuComponent_sme_dropdown_0_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "sme-dropdown", 1);
-            i0.ɵɵelementStart(1, "div", 2);
-            i0.ɵɵprojection(2);
-            i0.ɵɵelement(3, "sme-action-menu", 3, 4);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            var ctx_r0 = i0.ɵɵnextContext();
-            i0.ɵɵproperty("isContextMenu", true)("ngStyle", ctx_r0.getMenuPosition());
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("actions", ctx_r0.contextMenuItems)("target", ctx_r0.target);
-        }
-    }
-    var _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}
-     */
-    var ContextMenuComponent = /** @class */ (function (_super) {
-        __extends(ContextMenuComponent, _super);
-        function ContextMenuComponent(injector, element) {
+    var _c0$1J = ["*"];
+    var WizardLiteComponent = /** @class */ (function (_super) {
+        __extends(WizardLiteComponent, _super);
+        function WizardLiteComponent(injector, wizardLiteService) {
             var _this = _super.call(this, injector) || this;
-            _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 i0.EventEmitter();
+            _this.wizardLiteService = wizardLiteService;
+            _this.customFooter = false;
             /**
-             * Value that toggles the contextmenu
-            */
-            _this.isOpen = false;
+             * It determines the pivot control and footer wizard component both found.
+             */
+            _this.active = false;
+            _this.buttonsInternal = [];
             return _this;
         }
-        Object.defineProperty(ContextMenuComponent.prototype, "logSourceName", {
-            /**
-             * The source name to use for logging
-             */
+        Object.defineProperty(WizardLiteComponent.prototype, "logSourceName", {
             get: function () {
-                return 'ContextMenuComponent';
+                return 'WizardLiteComponent';
             },
             enumerable: false,
             configurable: true
         });
-        /**
-         * Function that does the positioning of the contextmenu depending on the right-click
-        */
-        ContextMenuComponent.prototype.getMenuPosition = function () {
-            if (this.mouseEventData) {
-                return {
-                    top: this.mouseEventData.clientY + "px",
-                    left: this.mouseEventData.clientX + "px"
-                };
-            }
+        Object.defineProperty(WizardLiteComponent.prototype, "pivotComponent", {
+            get: function () {
+                return this.pivotComponentInternal;
+            },
+            set: function (pivots) {
+                if (pivots) {
+                    var pivotLabels = pivots.getLabels();
+                    if (!this.buttons || !this.buttons.length) {
+                        this.buttonsInternal = pivotLabels.map(function (l) {
+                            return {
+                                'label': l
+                            };
+                        });
+                    }
+                }
+                this.pivotComponentInternal = pivots;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(WizardLiteComponent.prototype, "buttons", {
+            get: function () {
+                return this.buttonsInternal;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        WizardLiteComponent.prototype.ngAfterContentInit = function () {
+            this.refresh();
         };
         /**
-         * Function that adds focus to the element when using the keyboard
-        */
-        ContextMenuComponent.prototype.autoFocus = function () {
-            if (this.element.nativeElement) {
-                var firstFocusable = dom.Dom.getFirstFocusableDescendent(this.element.nativeElement);
-                if (firstFocusable) {
-                    firstFocusable.focus();
-                }
+         * It gets the subscription array from the core base component.
+         * @returns the subscriptions array.
+         */
+        WizardLiteComponent.prototype.getSubscriptions = function () {
+            return this.subscriptions;
+        };
+        WizardLiteComponent.prototype.refresh = function () {
+            this.wizardLiteService.refreshComponents(this);
+        };
+        WizardLiteComponent.prototype.onSelectionChanged = function (tab) {
+            if (!tab || !tab.label) {
+                return;
             }
+            if (tab.label === this.wizardButton.getCurrentActivatedButtonLabel()) {
+                return;
+            }
+            this.wizardButton.updateStartIndexByLabel(tab.label);
         };
-        return ContextMenuComponent;
+        return WizardLiteComponent;
     }(CoreBaseComponent));
-    /** @nocollapse */ ContextMenuComponent.ɵfac = function ContextMenuComponent_Factory(t) { return new (t || ContextMenuComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-    /** @nocollapse */ ContextMenuComponent.ɵcmp = i0.ɵɵdefineComponent({ type: ContextMenuComponent, selectors: [["sme-context-menu"]], inputs: { contextMenuItems: "contextMenuItems", mouseEventData: "mouseEventData", target: "target" }, outputs: { contextMenuItemClick: "contextMenuItemClick" }, features: [i0.ɵɵ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) {
+    /** @nocollapse */ WizardLiteComponent.ɵfac = function WizardLiteComponent_Factory(t) { return new (t || WizardLiteComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(WizardLiteService)); };
+    /** @nocollapse */ WizardLiteComponent.ɵcmp = i0.ɵɵdefineComponent({ type: WizardLiteComponent, selectors: [["sme-wizard-lite"]], contentQueries: function WizardLiteComponent_ContentQueries(rf, ctx, dirIndex) {
             if (rf & 1) {
-                i0.ɵɵprojectionDef();
-                i0.ɵɵtemplate(0, ContextMenuComponent_sme_dropdown_0_Template, 5, 4, "sme-dropdown", 0);
+                i0.ɵɵcontentQuery(dirIndex, PivotComponent, 1);
+                i0.ɵɵcontentQuery(dirIndex, WizardNavigationButtonComponent, 1);
+                i0.ɵɵcontentQuery(dirIndex, SmeWizardLiteFooterTemplateComponent, 1);
             }
             if (rf & 2) {
-                i0.ɵɵproperty("ngIf", ctx.isOpen);
+                var _t = void 0;
+                i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.pivotElement = _t);
+                i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.wizardButtonElement = _t);
+                i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.wizardLiteFooterTemplateElement = _t);
             }
-        }, directives: [i1$1.NgIf, DropdownComponent, i1$1.NgStyle, ActionMenuComponent], encapsulation: 2 });
+        }, inputs: { customFooter: "customFooter" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1J, decls: 2, vars: 0, template: function WizardLiteComponent_Template(rf, ctx) {
+            if (rf & 1) {
+                i0.ɵɵprojectionDef();
+                i0.ɵɵelementStart(0, "sme-ux-page");
+                i0.ɵɵprojection(1);
+                i0.ɵɵelementEnd();
+            }
+        }, directives: [SmeUxPageComponent], encapsulation: 2 });
     __decorate([
-        debounce_decorators.Debounce(1),
+        debounce_decorators.Debounce(),
         __metadata("design:type", Function),
         __metadata("design:paramtypes", []),
         __metadata("design:returntype", void 0)
-    ], ContextMenuComponent.prototype, "autoFocus", null);
+    ], WizardLiteComponent.prototype, "refresh", null);
     (function () {
-        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextMenuComponent, [{
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WizardLiteComponent, [{
                 type: i0.Component,
                 args: [{
-                        selector: 'sme-context-menu',
-                        templateUrl: './context-menu.component.html',
+                        selector: 'sme-wizard-lite',
+                        templateUrl: './wizard-lite.component.html'
                     }]
-            }], function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, { contextMenuItems: [{
-                    type: i0.Input
-                }], mouseEventData: [{
-                    type: i0.Input
-                }], target: [{
-                    type: i0.Input
-                }], contextMenuItemClick: [{
-                    type: i0.Output
-                }], autoFocus: [] });
-    })();
-
-    /**
-     * Directive that controls the opening and the closing of the context-menu,
-     * once the host element is right-clicked
-    */
-    var ContextMenuDirective = /** @class */ (function () {
-        function ContextMenuDirective(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
-        */
-        ContextMenuDirective.prototype.onClick = function (event) {
-            var 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
-        ContextMenuDirective.prototype.documentClick = function () {
-            this.smeContextMenu.isOpen = false;
-        };
-        // Prevents tab key event from closing the context menu
-        ContextMenuDirective.prototype.onKeyup = function (event) {
-            if (event.keyCode === accessibilityManager.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
-        */
-        ContextMenuDirective.prototype.openContextMenu = function ($event) {
-            var _this = this;
-            this.smeContextMenu.autoFocus();
-            if (this.smeContextMenu.isOpen) {
-                this.smeContextMenu.isOpen = false;
-            }
-            setTimeout(function () {
-                _this.smeContextMenu.mouseEventData = $event;
-                _this.smeContextMenu.isOpen = true;
-            });
-        };
-        return ContextMenuDirective;
-    }());
-    /** @nocollapse */ ContextMenuDirective.ɵfac = function ContextMenuDirective_Factory(t) { return new (t || ContextMenuDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
-    /** @nocollapse */ ContextMenuDirective.ɵdir = i0.ɵɵdefineDirective({ type: ContextMenuDirective, selectors: [["", "smeContextMenu", ""]], hostBindings: function ContextMenuDirective_HostBindings(rf, ctx) {
-            if (rf & 1) {
-                i0.ɵɵlistener("contextmenu", function ContextMenuDirective_contextmenu_HostBindingHandler($event) { return ctx.onClick($event); })("click", function ContextMenuDirective_click_HostBindingHandler() { return ctx.documentClick(); }, false, i0.ɵɵresolveDocument)("keyup", function ContextMenuDirective_keyup_HostBindingHandler($event) { return ctx.onKeyup($event); });
-            }
-        }, inputs: { smeContextMenu: "smeContextMenu" } });
-    (function () {
-        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextMenuDirective, [{
-                type: i0.Directive,
-                args: [{
-                        selector: '[smeContextMenu]'
-                    }]
-            }], function () { return [{ type: i0.ElementRef }]; }, { smeContextMenu: [{
+            }], function () { return [{ type: i0.Injector }, { type: WizardLiteService }]; }, { pivotElement: [{
+                    type: i0.ContentChildren,
+                    args: [PivotComponent, { descendants: true }]
+                }], wizardButtonElement: [{
+                    type: i0.ContentChildren,
+                    args: [WizardNavigationButtonComponent, { descendants: true }]
+                }], wizardLiteFooterTemplateElement: [{
+                    type: i0.ContentChildren,
+                    args: [SmeWizardLiteFooterTemplateComponent, { descendants: true }]
+                }], customFooter: [{
                     type: i0.Input
-                }], onClick: [{
-                    type: i0.HostListener,
-                    args: ['contextmenu', ['$event']]
-                }], documentClick: [{
-                    type: i0.HostListener,
-                    args: ['document:click']
-                }], onKeyup: [{
-                    type: i0.HostListener,
-                    args: ['keyup', ['$event']]
-                }] });
+                }], refresh: [] });
     })();
 
-    var ContextMenuModule = /** @class */ (function () {
-        function ContextMenuModule() {
+    var WizardLiteModule = /** @class */ (function () {
+        function WizardLiteModule() {
         }
-        return ContextMenuModule;
+        return WizardLiteModule;
     }());
-    /** @nocollapse */ ContextMenuModule.ɵfac = function ContextMenuModule_Factory(t) { return new (t || ContextMenuModule)(); };
-    /** @nocollapse */ ContextMenuModule.ɵmod = i0.ɵɵdefineNgModule({ type: ContextMenuModule });
-    /** @nocollapse */ ContextMenuModule.ɵinj = i0.ɵɵdefineInjector({ imports: [[
+    /** @nocollapse */ WizardLiteModule.ɵfac = function WizardLiteModule_Factory(t) { return new (t || WizardLiteModule)(); };
+    /** @nocollapse */ WizardLiteModule.ɵmod = i0.ɵɵdefineNgModule({ type: WizardLiteModule });
+    /** @nocollapse */ WizardLiteModule.ɵinj = i0.ɵɵdefineInjector({ providers: [
+            WizardLiteService
+        ], imports: [[
                 i1$1.CommonModule,
-                ActionsModule,
-                DropdownModule,
-                DataTableModule
+                i1.RouterModule,
+                WizardNavigationButtonModule,
+                SmeUxFooterModule,
+                SmeUxPageModule,
+                SmeUxContentModule,
+                SmeWizardLiteFooterTemplateModule
             ]] });
     (function () {
-        (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ContextMenuModule, { declarations: [ContextMenuComponent,
-                ContextMenuDirective,
-                ContextDropdownComponent], imports: [i1$1.CommonModule,
-                ActionsModule,
-                DropdownModule,
-                DataTableModule], exports: [ContextMenuComponent,
-                ContextMenuDirective,
-                ContextDropdownComponent] });
+        (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(WizardLiteModule, { declarations: [WizardLiteComponent], imports: [i1$1.CommonModule,
+                i1.RouterModule,
+                WizardNavigationButtonModule,
+                SmeUxFooterModule,
+                SmeUxPageModule,
+                SmeUxContentModule,
+                SmeWizardLiteFooterTemplateModule], exports: [WizardLiteComponent] });
     })();
     (function () {
-        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextMenuModule, [{
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WizardLiteModule, [{
                 type: i0.NgModule,
                 args: [{
+                        exports: [
+                            WizardLiteComponent
+                        ],
                         declarations: [
-                            ContextMenuComponent,
-                            ContextMenuDirective,
-                            ContextDropdownComponent
+                            WizardLiteComponent
                         ],
                         imports: [
                             i1$1.CommonModule,
-                            ActionsModule,
-                            DropdownModule,
-                            DataTableModule
+                            i1.RouterModule,
+                            WizardNavigationButtonModule,
+                            SmeUxFooterModule,
+                            SmeUxPageModule,
+                            SmeUxContentModule,
+                            SmeWizardLiteFooterTemplateModule
                         ],
-                        exports: [
-                            ContextMenuComponent,
-                            ContextMenuDirective,
-                            ContextDropdownComponent
+                        providers: [
+                            WizardLiteService
                         ]
                     }]
             }], null, null);
@@ -59575,7 +60647,15 @@
     exports.SmeSchemaProperty = SmeSchemaProperty;
     exports.SmeTemplateOutletModule = SmeTemplateOutletModule;
     exports.SmeUxComponent = SmeUxComponent;
+    exports.SmeUxContentComponent = SmeUxContentComponent;
+    exports.SmeUxContentModule = SmeUxContentModule;
+    exports.SmeUxFooterComponent = SmeUxFooterComponent;
+    exports.SmeUxFooterModule = SmeUxFooterModule;
     exports.SmeUxModule = SmeUxModule;
+    exports.SmeUxPageComponent = SmeUxPageComponent;
+    exports.SmeUxPageModule = SmeUxPageModule;
+    exports.SmeWizardLiteFooterTemplateComponent = SmeWizardLiteFooterTemplateComponent;
+    exports.SmeWizardLiteFooterTemplateModule = SmeWizardLiteFooterTemplateModule;
     exports.SnapInExtensionComponent = SnapInExtensionComponent;
     exports.SnapInExtensionModule = SnapInExtensionModule;
     exports.SplitViewComponent = SplitViewComponent;
@@ -59627,7 +60707,11 @@
     exports.WizardAsParent = WizardAsParent;
     exports.WizardBuilder = WizardBuilder;
     exports.WizardComponent = WizardComponent;
+    exports.WizardLiteComponent = WizardLiteComponent;
+    exports.WizardLiteModule = WizardLiteModule;
     exports.WizardModule = WizardModule;
+    exports.WizardNavigationButtonComponent = WizardNavigationButtonComponent;
+    exports.WizardNavigationButtonModule = WizardNavigationButtonModule;
     exports.WizardNavigationInformation = WizardNavigationInformation;
     exports.WizardStage = WizardStage;
     exports.WizardStep = WizardStep;