npm - @microsoft/windows-admin-center-sdk - Versions diffs - 2.128.0 → 2.152.0 - Mend

@microsoft/windows-admin-center-sdk 2.128.0 → 2.152.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

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

@@ -5334,10 +5334,10 @@
         });
         TooltipZoneDirective.prototype.onShortcut = function (event) {
             if (event.keyCode === accessibilityManager.KeyCode.F1 && event.altKey) {
-                event.stopImmediatePropagation();
                 if (this.tooltipDirective) {
                     if (!this.tooltipDirective.shown) {
                         this.tooltipDirective.show(true);
+                        event.stopImmediatePropagation();
                     }
                     else {
                         this.tooltipDirective.hide();
@@ -6019,6 +6019,260 @@
             }], null, null);
     })();
+    var _c0$4 = ["*"];
+    var _c1$1 = function (a0, a1) { return { "sme-icon-chevronDown": a0, "sme-icon-chevronRight": a1 }; };
+    function AccordionPanelComponent_span_4_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelement(0, "span", 6);
+        }
+        if (rf & 2) {
+            var ctx_r1 = i0.ɵɵnextContext();
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c1$1, ctx_r1.opened, !ctx_r1.opened));
+        }
+    }
+    function AccordionPanelComponent_div_8_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 7);
+            i0.ɵɵprojection(1, 1);
+            i0.ɵɵelementEnd();
+        }
+    }
+    var _c2 = [[["sme-panel-control"]], "*"];
+    var _c3 = ["sme-panel-control", "*"];
+    var PanelControlComponent = /** @class */ (function () {
+        function PanelControlComponent() {
+        }
+        return PanelControlComponent;
+    }());
+    /** @nocollapse */ PanelControlComponent.ɵfac = function PanelControlComponent_Factory(t) { return new (t || PanelControlComponent)(); };
+    /** @nocollapse */ PanelControlComponent.ɵcmp = i0.ɵɵdefineComponent({ type: PanelControlComponent, selectors: [["sme-panel-control"]], ngContentSelectors: _c0$4, decls: 1, vars: 0, template: function PanelControlComponent_Template(rf, ctx) {
+            if (rf & 1) {
+                i0.ɵɵprojectionDef();
+                i0.ɵɵprojection(0);
+            }
+        }, encapsulation: 2 });
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PanelControlComponent, [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sme-panel-control',
+                        template: '<ng-content></ng-content>'
+                    }]
+            }], null, null);
+    })();
+    var AccordionPanelComponent = /** @class */ (function () {
+        function AccordionPanelComponent() {
+            this.isExpandable = true;
+            this.toggled = new i0.EventEmitter();
+            this.opened = true;
+            this.canClose = this.isExpandable;
+        }
+        AccordionPanelComponent.prototype.onToggle = function () {
+            if (this.isExpandable) {
+                this.opened = !this.opened;
+                this.toggled.emit(this);
+            }
+        };
+        return AccordionPanelComponent;
+    }());
+    /** @nocollapse */ AccordionPanelComponent.ɵfac = function AccordionPanelComponent_Factory(t) { return new (t || AccordionPanelComponent)(); };
+    /** @nocollapse */ AccordionPanelComponent.ɵcmp = i0.ɵɵdefineComponent({ type: AccordionPanelComponent, selectors: [["sme-accordion-panel"]], inputs: { header: "header", opened: "opened", isExpandable: "isExpandable" }, outputs: { toggled: "toggled" }, ngContentSelectors: _c3, decls: 9, vars: 5, consts: [[1, "sme-accordion-panel"], [1, "sme-arrange-stack-h", "sme-panel-header"], [1, "sme-button", "sme-button-align-left", "sme-button-trigger", "sme-position-flex-auto", "sme-panel-expander", 3, "click"], ["accordionPanelButton", ""], ["class", "sme-position-flex-none sme-icon", 3, "ngClass", 4, "ngIf"], ["class", "sme-panel-body", 4, "ngIf"], [1, "sme-position-flex-none", "sme-icon", 3, "ngClass"], [1, "sme-panel-body"]], template: function AccordionPanelComponent_Template(rf, ctx) {
+            if (rf & 1) {
+                i0.ɵɵprojectionDef(_c2);
+                i0.ɵɵelementStart(0, "div", 0);
+                i0.ɵɵelementStart(1, "div", 1);
+                i0.ɵɵelementStart(2, "div", 2, 3);
+                i0.ɵɵlistener("click", function AccordionPanelComponent_Template_div_click_2_listener() { return ctx.onToggle(); });
+                i0.ɵɵtemplate(4, AccordionPanelComponent_span_4_Template, 1, 4, "span", 4);
+                i0.ɵɵelementStart(5, "span");
+                i0.ɵɵtext(6);
+                i0.ɵɵelementEnd();
+                i0.ɵɵelementEnd();
+                i0.ɵɵprojection(7);
+                i0.ɵɵelementEnd();
+                i0.ɵɵtemplate(8, AccordionPanelComponent_div_8_Template, 2, 0, "div", 5);
+                i0.ɵɵelementEnd();
+            }
+            if (rf & 2) {
+                i0.ɵɵadvance(2);
+                i0.ɵɵclassProp("sme-focus-zone", ctx.canClose);
+                i0.ɵɵadvance(2);
+                i0.ɵɵproperty("ngIf", ctx.canClose);
+                i0.ɵɵadvance(2);
+                i0.ɵɵtextInterpolate(ctx.header);
+                i0.ɵɵadvance(2);
+                i0.ɵɵproperty("ngIf", ctx.opened);
+            }
+        }, directives: [i1$1.NgIf, i1$1.NgClass], encapsulation: 2 });
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccordionPanelComponent, [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sme-accordion-panel',
+                        templateUrl: './accordion-panel.component.html'
+                    }]
+            }], function () { return []; }, { header: [{
+                    type: i0.Input
+                }], opened: [{
+                    type: i0.Input
+                }], isExpandable: [{
+                    type: i0.Input
+                }], toggled: [{
+                    type: i0.Output
+                }] });
+    })();
+    var _c0$5 = ["*"];
+    var AccordionComponent = /** @class */ (function (_super) {
+        __extends(AccordionComponent, _super);
+        function AccordionComponent(injector) {
+            var _this = _super.call(this, injector) || this;
+            _this.canOpenMultiple = true;
+            _this.canCloseAll = true;
+            _this.canCloseAny = false;
+            return _this;
+        }
+        Object.defineProperty(AccordionComponent.prototype, "logSourceName", {
+            /**
+             * The source name to use for logging
+             */
+            get: function () {
+                return 'AccordionComponent';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AccordionComponent.prototype, "canCloseAny", {
+            get: function () {
+                return this._canCloseAny;
+            },
+            set: function (value) {
+                var _this = this;
+                this._canCloseAny = value;
+                if (this.panels) {
+                    this.panels.forEach(function (p) { return p.canClose = _this._canCloseAny; });
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AccordionComponent.prototype.ngAfterContentInit = function () {
+            var _this = this;
+            this.subscriptions.push(rxjs.merge(rxjs.of(null).pipe(operators.mergeMap(function () { return _this.getToggleObservables(_this.panels); })), this.panels.changes.pipe(operators.mergeMap(function (panels) {
+                return _this.getToggleObservables(panels);
+            }))).subscribe(function (panel) { return _this.onPanelToggled(panel); }));
+            this.subscriptions.push(rxjs.merge(rxjs.of(null).pipe(operators.mergeMap(function () { return _this.getAllPanelObservables(_this.panels); })), this.panels.changes.pipe(operators.mergeMap(function (panels) {
+                return _this.getAllPanelObservables(panels);
+            }))).subscribe(function (panel) { return panel.canClose = _this.canCloseAny; }));
+        };
+        AccordionComponent.prototype.getToggleObservables = function (panels) {
+            var observables = panels.toArray().map(function (panel) {
+                return panel.toggled;
+            });
+            return rxjs.merge.apply(void 0, __spread(observables));
+        };
+        AccordionComponent.prototype.getAllPanelObservables = function (panels) {
+            var observables = panels.toArray().map(function (panel) {
+                return rxjs.of(panel);
+            });
+            return rxjs.merge.apply(void 0, __spread(observables));
+        };
+        AccordionComponent.prototype.onPanelToggled = function (panel) {
+            if (panel.opened) {
+                if (!this.canOpenMultiple) {
+                    this.closePanelsExcept(panel);
+                }
+            }
+            else {
+                if ((!this.canCloseAll && !this.panels.some(function (p) { return p.opened; })) || !this.canCloseAny) {
+                    panel.opened = true;
+                }
+            }
+        };
+        AccordionComponent.prototype.closePanelsExcept = function (panel) {
+            this.panels.toArray().forEach(function (p) {
+                if (p !== panel) {
+                    p.opened = false;
+                }
+            });
+        };
+        return AccordionComponent;
+    }(CoreBaseComponent));
+    /** @nocollapse */ AccordionComponent.ɵfac = function AccordionComponent_Factory(t) { return new (t || AccordionComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
+    /** @nocollapse */ AccordionComponent.ɵcmp = i0.ɵɵdefineComponent({ type: AccordionComponent, selectors: [["sme-accordion"]], contentQueries: function AccordionComponent_ContentQueries(rf, ctx, dirIndex) {
+            if (rf & 1) {
+                i0.ɵɵcontentQuery(dirIndex, AccordionPanelComponent, 0);
+            }
+            if (rf & 2) {
+                var _t = void 0;
+                i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.panels = _t);
+            }
+        }, inputs: { canOpenMultiple: "canOpenMultiple", canCloseAll: "canCloseAll", canCloseAny: "canCloseAny" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$5, decls: 1, vars: 0, template: function AccordionComponent_Template(rf, ctx) {
+            if (rf & 1) {
+                i0.ɵɵprojectionDef();
+                i0.ɵɵprojection(0);
+            }
+        }, encapsulation: 2 });
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccordionComponent, [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sme-accordion',
+                        templateUrl: './accordion.component.html'
+                    }]
+            }], function () { return [{ type: i0.Injector }]; }, { panels: [{
+                    type: i0.ContentChildren,
+                    args: [AccordionPanelComponent]
+                }], canOpenMultiple: [{
+                    type: i0.Input
+                }], canCloseAll: [{
+                    type: i0.Input
+                }], canCloseAny: [{
+                    type: i0.Input
+                }] });
+    })();
+    var AccordionModule = /** @class */ (function () {
+        function AccordionModule() {
+        }
+        return AccordionModule;
+    }());
+    /** @nocollapse */ AccordionModule.ɵfac = function AccordionModule_Factory(t) { return new (t || AccordionModule)(); };
+    /** @nocollapse */ AccordionModule.ɵmod = i0.ɵɵdefineNgModule({ type: AccordionModule });
+    /** @nocollapse */ AccordionModule.ɵinj = i0.ɵɵdefineInjector({ imports: [[
+                i1.RouterModule,
+                i1$1.CommonModule
+            ]] });
+    (function () {
+        (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(AccordionModule, { declarations: [AccordionComponent,
+                AccordionPanelComponent,
+                PanelControlComponent], imports: [i1.RouterModule,
+                i1$1.CommonModule], exports: [AccordionComponent,
+                AccordionPanelComponent,
+                PanelControlComponent] });
+    })();
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccordionModule, [{
+                type: i0.NgModule,
+                args: [{
+                        exports: [
+                            AccordionComponent,
+                            AccordionPanelComponent,
+                            PanelControlComponent
+                        ],
+                        declarations: [
+                            AccordionComponent,
+                            AccordionPanelComponent,
+                            PanelControlComponent
+                        ],
+                        imports: [
+                            i1.RouterModule,
+                            i1$1.CommonModule
+                        ]
+                    }]
+            }], null, null);
+    })();
     /**
      * Service for maintaining dropdown state.
      * Only one dropdown can be opened at a time.
@@ -6207,7 +6461,8 @@
             // if the esc key is pressed, close the popup and focus on the toggle element
             if (event.keyCode === accessibilityManager.KeyCode.Escape) {
                 if (this.activeDropdown && this.activeDropdown.toggleElement) {
-                    var nextElement = dom.Dom.getNextFocusableElement(this.activeDropdown.toggleElement.nativeElement);
+                    var docElement = this.activeDropdown.toggleElement.nativeElement;
+                    var nextElement = dom.Dom.getFirstFocusableDescendent(docElement) || dom.Dom.getNextFocusableElement(docElement);
                     if (nextElement) {
                         nextElement.focus();
                     }
@@ -6590,10 +6845,10 @@
             }], null, { closeNestedHelper: [] });
     })();
-    var _c0$4 = ["smeDropdownContent"];
-    var _c1$1 = ["smeDropdownToggle"];
-    var _c2 = [[["", 8, "sme-dropdown-toggle"]], [["", 8, "sme-dropdown-content"]]];
-    var _c3 = function (a0, a1, a2, a3) { return { "sme-layout-hidden": a0, "sme-layout-inline-block": a1, "sme-arrange-overflow-auto-x": a2, "sme-arrange-overflow-auto-y": a3 }; };
+    var _c0$6 = ["smeDropdownContent"];
+    var _c1$2 = ["smeDropdownToggle"];
+    var _c2$1 = [[["", 8, "sme-dropdown-toggle"]], [["", 8, "sme-dropdown-content"]]];
+    var _c3$1 = function (a0, a1, a2, a3) { return { "sme-layout-hidden": a0, "sme-layout-inline-block": a1, "sme-arrange-overflow-auto-x": a2, "sme-arrange-overflow-auto-y": a3 }; };
     var _c4 = [".sme-dropdown-toggle", ".sme-dropdown-content"];
     /**
      *
@@ -6790,8 +7045,8 @@
     /** @nocollapse */ DropdownComponent.ɵfac = function DropdownComponent_Factory(t) { return new (t || DropdownComponent)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(DropdownService), i0.ɵɵdirectiveInject(SME_LAYOUT_PROVIDER, 8)); };
     /** @nocollapse */ DropdownComponent.ɵcmp = i0.ɵɵdefineComponent({ type: DropdownComponent, selectors: [["sme-dropdown"]], viewQuery: function DropdownComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$4, 1);
-                i0.ɵɵviewQuery(_c1$1, 3);
+                i0.ɵɵviewQuery(_c0$6, 1);
+                i0.ɵɵviewQuery(_c1$2, 3);
             }
             if (rf & 2) {
                 var _t = void 0;
@@ -6807,7 +7062,7 @@
             }
         }, inputs: { autoToggle: "autoToggle", autoWidth: "autoWidth", calculateHeight: "calculateHeight", displayToSide: "displayToSide", isContextMenu: "isContextMenu", dropdownApplyFormFieldOffsetWidth: "dropdownApplyFormFieldOffsetWidth", disabled: "disabled" }, outputs: { onToggled: "onToggled", toggled: "toggled" }, ngContentSelectors: _c4, decls: 6, vars: 6, consts: [[1, "sme-dropdown-toggle-container"], ["smeDropdownToggle", ""], [1, "sme-layout-dropdown", "sme-layout-fixed", "sme-position-below", "sme-scheme-dropdown", "sme-layer-nav", "sme-shadow-dropdown", 3, "ngClass"], ["smeDropdownContent", ""]], template: function DropdownComponent_Template(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵprojectionDef(_c2);
+                i0.ɵɵprojectionDef(_c2$1);
                 i0.ɵɵelementStart(0, "div", 0, 1);
                 i0.ɵɵprojection(2);
                 i0.ɵɵelementEnd();
@@ -6817,7 +7072,7 @@
             }
             if (rf & 2) {
                 i0.ɵɵadvance(3);
-                i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction4(1, _c3, !ctx.isOpen, ctx.isOpen, ctx.overflowX, ctx.overflowY));
+                i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction4(1, _c3$1, !ctx.isOpen, ctx.isOpen, ctx.overflowX, ctx.overflowY));
             }
         }, directives: [i1$1.NgClass], encapsulation: 2 });
     (function () {
@@ -6900,7 +7155,7 @@
             }], null, null);
     })();
-    var _c0$5 = ["action"];
+    var _c0$7 = ["action"];
     // tslint:disable-next-line: directive-class-suffix
     var ActionContainerComponent = /** @class */ (function (_super) {
         __extends(ActionContainerComponent, _super);
@@ -7069,7 +7324,7 @@
     /** @nocollapse */ ActionContainerComponent.ɵfac = function ActionContainerComponent_Factory(t) { return new (t || ActionContainerComponent)(i0.ɵɵdirectiveInject(i0.IterableDiffers), i0.ɵɵdirectiveInject(i0.Injector)); };
     /** @nocollapse */ ActionContainerComponent.ɵdir = i0.ɵɵdefineDirective({ type: ActionContainerComponent, contentQueries: function ActionContainerComponent_ContentQueries(rf, ctx, dirIndex) {
             if (rf & 1) {
-                i0.ɵɵcontentQuery(dirIndex, _c0$5, 0);
+                i0.ɵɵcontentQuery(dirIndex, _c0$7, 0);
             }
             if (rf & 2) {
                 var _t = void 0;
@@ -7101,9 +7356,9 @@
                 }] });
     })();
-    var _c0$6 = ["actionBarElement"];
-    var _c1$2 = ["dropDownButton"];
-    var _c2$1 = ["dropDown"];
+    var _c0$8 = ["actionBarElement"];
+    var _c1$3 = ["dropDownButton"];
+    var _c2$2 = ["dropDown"];
     function ActionBarComponent_sme_dynamic_action_item_2_Template(rf, ctx) {
         if (rf & 1) {
             var _r6_1 = i0.ɵɵgetCurrentView();
@@ -7118,7 +7373,7 @@
             i0.ɵɵproperty("item", item_r4);
         }
     }
-    var _c3$1 = ["*"];
+    var _c3$2 = ["*"];
     /**
      *
      * @smeDoc {@label Actions @id sme-actions}
@@ -7487,9 +7742,9 @@
     /** @nocollapse */ ActionBarComponent.ɵfac = function ActionBarComponent_Factory(t) { return new (t || ActionBarComponent)(i0.ɵɵdirectiveInject(i0.IterableDiffers), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(SME_LAYOUT_PROVIDER, 8), i0.ɵɵdirectiveInject(i0.Injector)); };
     /** @nocollapse */ ActionBarComponent.ɵcmp = i0.ɵɵdefineComponent({ type: ActionBarComponent, selectors: [["sme-action-bar"]], viewQuery: function ActionBarComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$6, 1);
-                i0.ɵɵviewQuery(_c1$2, 1);
-                i0.ɵɵviewQuery(_c2$1, 1);
+                i0.ɵɵviewQuery(_c0$8, 1);
+                i0.ɵɵviewQuery(_c1$3, 1);
+                i0.ɵɵviewQuery(_c2$2, 1);
             }
             if (rf & 2) {
                 var _t = void 0;
@@ -7501,7 +7756,7 @@
             if (rf & 1) {
                 i0.ɵɵlistener("focusin", function ActionBarComponent_focusin_HostBindingHandler($event) { return ctx.onFocusEvent($event); })("focusout", function ActionBarComponent_focusout_HostBindingHandler($event) { return ctx.onFocusEvent($event); })("keydown", function ActionBarComponent_keydown_HostBindingHandler($event) { return ctx.onToggleKeydown($event); })("mouseenter", function ActionBarComponent_mouseenter_HostBindingHandler($event) { return ctx.onMouseEvent($event); })("mouseleave", function ActionBarComponent_mouseleave_HostBindingHandler($event) { return ctx.onMouseEvent($event); })("resize", function ActionBarComponent_resize_HostBindingHandler() { return ctx.onResize(); }, false, i0.ɵɵresolveWindow);
             }
-        }, outputs: { actionsUpdated: "actionsUpdated" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c3$1, decls: 12, vars: 14, consts: [["role", "menubar", 1, "sme-position-flex-none", "sme-arrange-stack-h"], ["actionBarElement", ""], ["class", "sme-arrange-stack-h sme-arrange-stack-centered sme-arrange-stack-inline", 3, "item", "sme-action-bar-item-no-padding-v", "itemChanged", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-position-flex-none"], ["dropDown", ""], ["type", "button", "role", "menuitem", "aria-haspopup", "true", 1, "sme-button-trigger", "sme-layout-action-bar-item-height", "sme-button-auto-width", "sme-dropdown-toggle"], ["dropDownButton", ""], [1, "sme-icon", "sme-icon-more", 3, "title"], [1, "sme-screen-reader"], ["role", "menu", 1, "sme-dropdown-content", 3, "actions", "target", "targetChange", "error", "executed"], [1, "sme-arrange-stack-h", "sme-arrange-stack-centered", "sme-arrange-stack-inline", 3, "item", "itemChanged"]], template: function ActionBarComponent_Template(rf, ctx) {
+        }, outputs: { actionsUpdated: "actionsUpdated" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c3$2, decls: 12, vars: 14, consts: [["role", "menubar", 1, "sme-position-flex-none", "sme-arrange-stack-h"], ["actionBarElement", ""], ["class", "sme-arrange-stack-h sme-arrange-stack-centered sme-arrange-stack-inline", 3, "item", "sme-action-bar-item-no-padding-v", "itemChanged", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-position-flex-none"], ["dropDown", ""], ["type", "button", "role", "menuitem", "aria-haspopup", "true", 1, "sme-button-trigger", "sme-layout-action-bar-item-height", "sme-button-auto-width", "sme-dropdown-toggle"], ["dropDownButton", ""], [1, "sme-icon", "sme-icon-more", 3, "title"], [1, "sme-screen-reader"], ["role", "menu", 1, "sme-dropdown-content", 3, "actions", "target", "targetChange", "error", "executed"], [1, "sme-arrange-stack-h", "sme-arrange-stack-centered", "sme-arrange-stack-inline", 3, "item", "itemChanged"]], template: function ActionBarComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵprojectionDef();
                 i0.ɵɵelementStart(0, "div", 0, 1);
@@ -8339,8 +8594,8 @@
                 }] });
     })();
-    var _c0$7 = ["dropDown"];
-    var _c1$3 = ["dropDownButton"];
+    var _c0$9 = ["dropDown"];
+    var _c1$4 = ["dropDownButton"];
     function ActionDropdownRendererComponent_span_7_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelement(0, "span", 8);
@@ -8351,7 +8606,7 @@
             i0.ɵɵelement(0, "span", 9);
         }
     }
-    var _c2$2 = ["action"];
+    var _c2$3 = ["action"];
     var ActionDropdown = /** @class */ (function (_super) {
         __extends(ActionDropdown, _super);
         /**
@@ -8443,8 +8698,8 @@
     /** @nocollapse */ ActionDropdownRendererComponent.ɵfac = function ActionDropdownRendererComponent_Factory(t) { return new (t || ActionDropdownRendererComponent)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
     /** @nocollapse */ ActionDropdownRendererComponent.ɵcmp = i0.ɵɵdefineComponent({ type: ActionDropdownRendererComponent, selectors: [["sme-action-dropdown-renderer"]], viewQuery: function ActionDropdownRendererComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$7, 1);
-                i0.ɵɵviewQuery(_c1$3, 1);
+                i0.ɵɵviewQuery(_c0$9, 1);
+                i0.ɵɵviewQuery(_c1$4, 1);
             }
             if (rf & 2) {
                 var _t = void 0;
@@ -8573,7 +8828,7 @@
     /** @nocollapse */ ActionDropdownComponent.ɵfac = function ActionDropdownComponent_Factory(t) { return new (t || ActionDropdownComponent)(i0.ɵɵdirectiveInject(ActionBarComponent)); };
     /** @nocollapse */ ActionDropdownComponent.ɵcmp = i0.ɵɵdefineComponent({ type: ActionDropdownComponent, selectors: [["sme-action-dropdown"]], contentQueries: function ActionDropdownComponent_ContentQueries(rf, ctx, dirIndex) {
             if (rf & 1) {
-                i0.ɵɵcontentQuery(dirIndex, _c2$2, 0);
+                i0.ɵɵcontentQuery(dirIndex, _c2$3, 0);
             }
             if (rf & 2) {
                 var _t = void 0;
@@ -8581,7 +8836,7 @@
             }
         }, viewQuery: function ActionDropdownComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$7, 1);
+                i0.ɵɵviewQuery(_c0$9, 1);
             }
             if (rf & 2) {
                 var _t = void 0;
@@ -8739,7 +8994,7 @@
             }], function () { return [{ type: ActionBarComponent }]; }, null);
     })();
-    var _c0$8 = ["container"];
+    var _c0$a = ["container"];
     // tslint:disable-next-line: directive-class-suffix
     var DynamicComponentBase = /** @class */ (function () {
         function DynamicComponentBase(componentFactoryResolver) {
@@ -8769,7 +9024,7 @@
     /** @nocollapse */ DynamicComponentBase.ɵfac = function DynamicComponentBase_Factory(t) { return new (t || DynamicComponentBase)(i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver)); };
     /** @nocollapse */ DynamicComponentBase.ɵdir = i0.ɵɵdefineDirective({ type: DynamicComponentBase, viewQuery: function DynamicComponentBase_Query(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵviewQuery(_c0$8, 3, i0.ViewContainerRef);
+                i0.ɵɵviewQuery(_c0$a, 3, i0.ViewContainerRef);
             }
             if (rf & 2) {
                 var _t = void 0;
@@ -8877,7 +9132,7 @@
             }], function () { return [{ type: ExtensionBrokerService }]; }, null);
     })();
-    var _c0$9 = ["type", "tags"];
+    var _c0$b = ["type", "tags"];
     var TagsActionButtonComponent = /** @class */ (function (_super) {
         __extends(TagsActionButtonComponent, _super);
         /**
@@ -8918,7 +9173,7 @@
         return TagsActionButtonComponent;
     }(ActionButtonAsyncComponent));
     /** @nocollapse */ TagsActionButtonComponent.ɵfac = function TagsActionButtonComponent_Factory(t) { return new (t || TagsActionButtonComponent)(i0.ɵɵdirectiveInject(ActionBarComponent), i0.ɵɵdirectiveInject(TagService)); };
-    /** @nocollapse */ TagsActionButtonComponent.ɵcmp = i0.ɵɵdefineComponent({ type: TagsActionButtonComponent, selectors: [["sme-action-button-async", "type", "tags"]], inputs: { componentId: "componentId", suggestions: "suggestions", target: "target", enabled: "enabled" }, outputs: { execute: "execute" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$9, decls: 0, vars: 0, template: function TagsActionButtonComponent_Template(rf, ctx) { }, encapsulation: 2 });
+    /** @nocollapse */ TagsActionButtonComponent.ɵcmp = i0.ɵɵdefineComponent({ type: TagsActionButtonComponent, selectors: [["sme-action-button-async", "type", "tags"]], inputs: { componentId: "componentId", suggestions: "suggestions", target: "target", enabled: "enabled" }, outputs: { execute: "execute" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$b, decls: 0, vars: 0, template: function TagsActionButtonComponent_Template(rf, ctx) { }, encapsulation: 2 });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TagsActionButtonComponent, [{
                 type: i0.Component,
@@ -9028,260 +9283,6 @@
     i0.ɵɵsetComponentScope(ActionMenuComponent, [i1$1.NgForOf, DynamicActionItemComponent], [FilterPipe]);
     i0.ɵɵsetComponentScope(ActionDropdownRendererComponent, [DropdownComponent, DisabledDirective, i1$1.NgClass, i1$1.NgIf, ActionMenuComponent], []);
-    var _c0$a = ["*"];
-    var _c1$4 = function (a0, a1) { return { "sme-icon-chevronDown": a0, "sme-icon-chevronRight": a1 }; };
-    function AccordionPanelComponent_span_4_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelement(0, "span", 6);
-        }
-        if (rf & 2) {
-            var ctx_r1 = i0.ɵɵnextContext();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c1$4, ctx_r1.opened, !ctx_r1.opened));
-        }
-    }
-    function AccordionPanelComponent_div_8_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 7);
-            i0.ɵɵprojection(1, 1);
-            i0.ɵɵelementEnd();
-        }
-    }
-    var _c2$3 = [[["sme-panel-control"]], "*"];
-    var _c3$2 = ["sme-panel-control", "*"];
-    var PanelControlComponent = /** @class */ (function () {
-        function PanelControlComponent() {
-        }
-        return PanelControlComponent;
-    }());
-    /** @nocollapse */ PanelControlComponent.ɵfac = function PanelControlComponent_Factory(t) { return new (t || PanelControlComponent)(); };
-    /** @nocollapse */ PanelControlComponent.ɵcmp = i0.ɵɵdefineComponent({ type: PanelControlComponent, selectors: [["sme-panel-control"]], ngContentSelectors: _c0$a, decls: 1, vars: 0, template: function PanelControlComponent_Template(rf, ctx) {
-            if (rf & 1) {
-                i0.ɵɵprojectionDef();
-                i0.ɵɵprojection(0);
-            }
-        }, encapsulation: 2 });
-    (function () {
-        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PanelControlComponent, [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sme-panel-control',
-                        template: '<ng-content></ng-content>'
-                    }]
-            }], null, null);
-    })();
-    var AccordionPanelComponent = /** @class */ (function () {
-        function AccordionPanelComponent() {
-            this.isExpandable = true;
-            this.toggled = new i0.EventEmitter();
-            this.opened = true;
-            this.canClose = this.isExpandable;
-        }
-        AccordionPanelComponent.prototype.onToggle = function () {
-            if (this.isExpandable) {
-                this.opened = !this.opened;
-                this.toggled.emit(this);
-            }
-        };
-        return AccordionPanelComponent;
-    }());
-    /** @nocollapse */ AccordionPanelComponent.ɵfac = function AccordionPanelComponent_Factory(t) { return new (t || AccordionPanelComponent)(); };
-    /** @nocollapse */ AccordionPanelComponent.ɵcmp = i0.ɵɵdefineComponent({ type: AccordionPanelComponent, selectors: [["sme-accordion-panel"]], inputs: { header: "header", opened: "opened", isExpandable: "isExpandable" }, outputs: { toggled: "toggled" }, ngContentSelectors: _c3$2, decls: 9, vars: 5, consts: [[1, "sme-accordion-panel"], [1, "sme-arrange-stack-h", "sme-panel-header"], [1, "sme-button", "sme-button-align-left", "sme-button-trigger", "sme-position-flex-auto", "sme-panel-expander", 3, "click"], ["accordionPanelButton", ""], ["class", "sme-position-flex-none sme-icon", 3, "ngClass", 4, "ngIf"], ["class", "sme-panel-body", 4, "ngIf"], [1, "sme-position-flex-none", "sme-icon", 3, "ngClass"], [1, "sme-panel-body"]], template: function AccordionPanelComponent_Template(rf, ctx) {
-            if (rf & 1) {
-                i0.ɵɵprojectionDef(_c2$3);
-                i0.ɵɵelementStart(0, "div", 0);
-                i0.ɵɵelementStart(1, "div", 1);
-                i0.ɵɵelementStart(2, "div", 2, 3);
-                i0.ɵɵlistener("click", function AccordionPanelComponent_Template_div_click_2_listener() { return ctx.onToggle(); });
-                i0.ɵɵtemplate(4, AccordionPanelComponent_span_4_Template, 1, 4, "span", 4);
-                i0.ɵɵelementStart(5, "span");
-                i0.ɵɵtext(6);
-                i0.ɵɵelementEnd();
-                i0.ɵɵelementEnd();
-                i0.ɵɵprojection(7);
-                i0.ɵɵelementEnd();
-                i0.ɵɵtemplate(8, AccordionPanelComponent_div_8_Template, 2, 0, "div", 5);
-                i0.ɵɵelementEnd();
-            }
-            if (rf & 2) {
-                i0.ɵɵadvance(2);
-                i0.ɵɵclassProp("sme-focus-zone", ctx.canClose);
-                i0.ɵɵadvance(2);
-                i0.ɵɵproperty("ngIf", ctx.canClose);
-                i0.ɵɵadvance(2);
-                i0.ɵɵtextInterpolate(ctx.header);
-                i0.ɵɵadvance(2);
-                i0.ɵɵproperty("ngIf", ctx.opened);
-            }
-        }, directives: [i1$1.NgIf, i1$1.NgClass], encapsulation: 2 });
-    (function () {
-        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccordionPanelComponent, [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sme-accordion-panel',
-                        templateUrl: './accordion-panel.component.html'
-                    }]
-            }], function () { return []; }, { header: [{
-                    type: i0.Input
-                }], opened: [{
-                    type: i0.Input
-                }], isExpandable: [{
-                    type: i0.Input
-                }], toggled: [{
-                    type: i0.Output
-                }] });
-    })();
-    var _c0$b = ["*"];
-    var AccordionComponent = /** @class */ (function (_super) {
-        __extends(AccordionComponent, _super);
-        function AccordionComponent(injector) {
-            var _this = _super.call(this, injector) || this;
-            _this.canOpenMultiple = true;
-            _this.canCloseAll = true;
-            _this.canCloseAny = false;
-            return _this;
-        }
-        Object.defineProperty(AccordionComponent.prototype, "logSourceName", {
-            /**
-             * The source name to use for logging
-             */
-            get: function () {
-                return 'AccordionComponent';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AccordionComponent.prototype, "canCloseAny", {
-            get: function () {
-                return this._canCloseAny;
-            },
-            set: function (value) {
-                var _this = this;
-                this._canCloseAny = value;
-                if (this.panels) {
-                    this.panels.forEach(function (p) { return p.canClose = _this._canCloseAny; });
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        AccordionComponent.prototype.ngAfterContentInit = function () {
-            var _this = this;
-            this.subscriptions.push(rxjs.merge(rxjs.of(null).pipe(operators.mergeMap(function () { return _this.getToggleObservables(_this.panels); })), this.panels.changes.pipe(operators.mergeMap(function (panels) {
-                return _this.getToggleObservables(panels);
-            }))).subscribe(function (panel) { return _this.onPanelToggled(panel); }));
-            this.subscriptions.push(rxjs.merge(rxjs.of(null).pipe(operators.mergeMap(function () { return _this.getAllPanelObservables(_this.panels); })), this.panels.changes.pipe(operators.mergeMap(function (panels) {
-                return _this.getAllPanelObservables(panels);
-            }))).subscribe(function (panel) { return panel.canClose = _this.canCloseAny; }));
-        };
-        AccordionComponent.prototype.getToggleObservables = function (panels) {
-            var observables = panels.toArray().map(function (panel) {
-                return panel.toggled;
-            });
-            return rxjs.merge.apply(void 0, __spread(observables));
-        };
-        AccordionComponent.prototype.getAllPanelObservables = function (panels) {
-            var observables = panels.toArray().map(function (panel) {
-                return rxjs.of(panel);
-            });
-            return rxjs.merge.apply(void 0, __spread(observables));
-        };
-        AccordionComponent.prototype.onPanelToggled = function (panel) {
-            if (panel.opened) {
-                if (!this.canOpenMultiple) {
-                    this.closePanelsExcept(panel);
-                }
-            }
-            else {
-                if ((!this.canCloseAll && !this.panels.some(function (p) { return p.opened; })) || !this.canCloseAny) {
-                    panel.opened = true;
-                }
-            }
-        };
-        AccordionComponent.prototype.closePanelsExcept = function (panel) {
-            this.panels.toArray().forEach(function (p) {
-                if (p !== panel) {
-                    p.opened = false;
-                }
-            });
-        };
-        return AccordionComponent;
-    }(CoreBaseComponent));
-    /** @nocollapse */ AccordionComponent.ɵfac = function AccordionComponent_Factory(t) { return new (t || AccordionComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
-    /** @nocollapse */ AccordionComponent.ɵcmp = i0.ɵɵdefineComponent({ type: AccordionComponent, selectors: [["sme-accordion"]], contentQueries: function AccordionComponent_ContentQueries(rf, ctx, dirIndex) {
-            if (rf & 1) {
-                i0.ɵɵcontentQuery(dirIndex, AccordionPanelComponent, 0);
-            }
-            if (rf & 2) {
-                var _t = void 0;
-                i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.panels = _t);
-            }
-        }, inputs: { canOpenMultiple: "canOpenMultiple", canCloseAll: "canCloseAll", canCloseAny: "canCloseAny" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$b, decls: 1, vars: 0, template: function AccordionComponent_Template(rf, ctx) {
-            if (rf & 1) {
-                i0.ɵɵprojectionDef();
-                i0.ɵɵprojection(0);
-            }
-        }, encapsulation: 2 });
-    (function () {
-        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccordionComponent, [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sme-accordion',
-                        templateUrl: './accordion.component.html'
-                    }]
-            }], function () { return [{ type: i0.Injector }]; }, { panels: [{
-                    type: i0.ContentChildren,
-                    args: [AccordionPanelComponent]
-                }], canOpenMultiple: [{
-                    type: i0.Input
-                }], canCloseAll: [{
-                    type: i0.Input
-                }], canCloseAny: [{
-                    type: i0.Input
-                }] });
-    })();
-    var AccordionModule = /** @class */ (function () {
-        function AccordionModule() {
-        }
-        return AccordionModule;
-    }());
-    /** @nocollapse */ AccordionModule.ɵfac = function AccordionModule_Factory(t) { return new (t || AccordionModule)(); };
-    /** @nocollapse */ AccordionModule.ɵmod = i0.ɵɵdefineNgModule({ type: AccordionModule });
-    /** @nocollapse */ AccordionModule.ɵinj = i0.ɵɵdefineInjector({ imports: [[
-                i1.RouterModule,
-                i1$1.CommonModule
-            ]] });
-    (function () {
-        (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(AccordionModule, { declarations: [AccordionComponent,
-                AccordionPanelComponent,
-                PanelControlComponent], imports: [i1.RouterModule,
-                i1$1.CommonModule], exports: [AccordionComponent,
-                AccordionPanelComponent,
-                PanelControlComponent] });
-    })();
-    (function () {
-        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccordionModule, [{
-                type: i0.NgModule,
-                args: [{
-                        exports: [
-                            AccordionComponent,
-                            AccordionPanelComponent,
-                            PanelControlComponent
-                        ],
-                        declarations: [
-                            AccordionComponent,
-                            AccordionPanelComponent,
-                            PanelControlComponent
-                        ],
-                        imports: [
-                            i1.RouterModule,
-                            i1$1.CommonModule
-                        ]
-                    }]
-            }], null, null);
-    })();
     var _c0$c = ["*"];
     var DropZoneComponent = /** @class */ (function (_super) {
         __extends(DropZoneComponent, _super);
@@ -11212,7 +11213,8 @@
              * Indicates that this alert is hidden
              */
             get: function () {
-                return !this.hasAlert || this.alert.hidden;
+                var _a;
+                return !!((_a = this.alert) === null || _a === void 0 ? void 0 : _a.hidden);
             },
             enumerable: false,
             configurable: true
@@ -12167,7 +12169,7 @@
             i0.ɵɵproperty("level", ctx_r0.dialogLevel)("showBackdrop", ctx_r0.showBackdrop)("allowBackgroundInteraction", ctx_r0.allowBackgroundInteraction);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngClass", ctx_r0.dialogClasses);
-            i0.ɵɵattribute("role", ctx_r0.dialogRole)("aria-hidden", !ctx_r0.visible)("aria-labelledby", ctx_r0.ariaLabel ? ctx_r0.idBag.ariaLabelSpan : null)("aria-describedby", ctx_r0.ariaDescription ? ctx_r0.idBag.ariaDescriptionSpan : null);
+            i0.ɵɵattribute("role", ctx_r0.dialogRole)("aria-hidden", !ctx_r0.visible)("aria-labelledby", ctx_r0.ariaLabel ? ctx_r0.idBag.ariaLabelSpan : "sme-dialog-title")("aria-describedby", ctx_r0.ariaDescription ? ctx_r0.idBag.ariaDescriptionSpan : "sme-dialog-desc");
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx_r0.closeButton);
             i0.ɵɵadvance(7);
@@ -15764,11 +15766,11 @@
     }
     var _c1$b = ["addButton"];
     var _c2$7 = ["type", "array"];
-    function ArrayFormFieldComponent_sme_accordion_panel_3_button_2_Template(rf, ctx) {
+    function ArrayFormFieldComponent_sme_accordion_panel_3_button_3_Template(rf, ctx) {
         if (rf & 1) {
             var _r9_1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "button", 13);
-            i0.ɵɵlistener("click", function ArrayFormFieldComponent_sme_accordion_panel_3_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9_1); var item_r2 = i0.ɵɵnextContext().$implicit; var ctx_r7 = i0.ɵɵnextContext(); return ctx_r7.moveUp(item_r2); });
+            i0.ɵɵlistener("click", function ArrayFormFieldComponent_sme_accordion_panel_3_button_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9_1); var item_r2 = i0.ɵɵnextContext().$implicit; var ctx_r7 = i0.ɵɵnextContext(); return ctx_r7.moveUp(item_r2); });
             i0.ɵɵelement(1, "span", 14);
             i0.ɵɵelementEnd();
         }
@@ -15778,11 +15780,11 @@
             i0.ɵɵattribute("aria-label", ctx_r4.strings.MsftSmeShell.Angular.Form.Array.promoteButtonAriaLabel);
         }
     }
-    function ArrayFormFieldComponent_sme_accordion_panel_3_button_3_Template(rf, ctx) {
+    function ArrayFormFieldComponent_sme_accordion_panel_3_button_4_Template(rf, ctx) {
         if (rf & 1) {
             var _r12_1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "button", 13);
-            i0.ɵɵlistener("click", function ArrayFormFieldComponent_sme_accordion_panel_3_button_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12_1); var item_r2 = i0.ɵɵnextContext().$implicit; var ctx_r10 = i0.ɵɵnextContext(); return ctx_r10.moveDown(item_r2); });
+            i0.ɵɵlistener("click", function ArrayFormFieldComponent_sme_accordion_panel_3_button_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12_1); var item_r2 = i0.ɵɵnextContext().$implicit; var ctx_r10 = i0.ɵɵnextContext(); return ctx_r10.moveDown(item_r2); });
             i0.ɵɵelement(1, "span", 15);
             i0.ɵɵelementEnd();
         }
@@ -15792,11 +15794,11 @@
             i0.ɵɵattribute("aria-label", ctx_r5.strings.MsftSmeShell.Angular.Form.Array.demoteButtonAriaLabel);
         }
     }
-    function ArrayFormFieldComponent_sme_accordion_panel_3_button_4_Template(rf, ctx) {
+    function ArrayFormFieldComponent_sme_accordion_panel_3_button_5_Template(rf, ctx) {
         if (rf & 1) {
             var _r15_1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "button", 13);
-            i0.ɵɵlistener("click", function ArrayFormFieldComponent_sme_accordion_panel_3_button_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15_1); var item_r2 = i0.ɵɵnextContext().$implicit; var ctx_r13 = i0.ɵɵnextContext(); return ctx_r13.delete(item_r2); });
+            i0.ɵɵlistener("click", function ArrayFormFieldComponent_sme_accordion_panel_3_button_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15_1); var item_r2 = i0.ɵɵnextContext().$implicit; var ctx_r13 = i0.ɵɵnextContext(); return ctx_r13.delete(item_r2); });
             i0.ɵɵelement(1, "span", 16);
             i0.ɵɵelementEnd();
         }
@@ -15811,16 +15813,17 @@
         if (rf & 1) {
             i0.ɵɵelementStart(0, "sme-accordion-panel", 7);
             i0.ɵɵelementStart(1, "sme-panel-control");
-            i0.ɵɵtemplate(2, ArrayFormFieldComponent_sme_accordion_panel_3_button_2_Template, 2, 3, "button", 8);
-            i0.ɵɵtemplate(3, ArrayFormFieldComponent_sme_accordion_panel_3_button_3_Template, 2, 3, "button", 8);
-            i0.ɵɵtemplate(4, ArrayFormFieldComponent_sme_accordion_panel_3_button_4_Template, 2, 3, "button", 8);
+            i0.ɵɵelementContainer(2, 8);
+            i0.ɵɵtemplate(3, ArrayFormFieldComponent_sme_accordion_panel_3_button_3_Template, 2, 3, "button", 9);
+            i0.ɵɵtemplate(4, ArrayFormFieldComponent_sme_accordion_panel_3_button_4_Template, 2, 3, "button", 9);
+            i0.ɵɵtemplate(5, ArrayFormFieldComponent_sme_accordion_panel_3_button_5_Template, 2, 3, "button", 9);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "span", 9);
-            i0.ɵɵtext(6);
+            i0.ɵɵelementStart(6, "span", 10);
+            i0.ɵɵtext(7);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(7, "fieldset", 10);
-            i0.ɵɵelementStart(8, "div", 11);
-            i0.ɵɵelementContainer(9, 12);
+            i0.ɵɵelementStart(8, "fieldset", 11);
+            i0.ɵɵelementStart(9, "div", 12);
+            i0.ɵɵelementContainer(10, 8);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
@@ -15831,6 +15834,8 @@
             var ctx_r0 = i0.ɵɵnextContext();
             i0.ɵɵproperty("header", ctx_r0.getItemTitle(item_r2, i_r3))("isExpandable", false);
             i0.ɵɵadvance(2);
+            i0.ɵɵproperty("template", ctx_r0.headerTemplate)("data", item_r2)("hostData", i0.ɵɵpureFunction2(17, _c3$3, i_r3, ctx_r0.getItemAriaId(i_r3, "itemHeader")));
+            i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx_r0.showMove);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx_r0.showMove);
@@ -15846,7 +15851,7 @@
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("id", ctx_r0.getItemAriaId(i_r3, "itemContainer"));
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("template", ctx_r0.itemTemplate)("data", item_r2)("hostData", i0.ɵɵpureFunction2(14, _c3$3, i_r3, ctx_r0.getItemAriaId(i_r3, "item")));
+            i0.ɵɵproperty("template", ctx_r0.itemTemplate)("data", item_r2)("hostData", i0.ɵɵpureFunction2(20, _c3$3, i_r3, ctx_r0.getItemAriaId(i_r3, "item")));
         }
     }
     function ArrayFormFieldComponent_button_4_Template(rf, ctx) {
@@ -16111,6 +16116,8 @@
             switch (idName) {
                 case 'item':
                     return this.idBag['item'] + "-" + index;
+                case 'itemHeader':
+                    return this.idBag['item'] + "-header-" + index;
                 case 'itemContainer':
                     return this.idBag['item'] + "-container-" + index;
                 default: return null;
@@ -16191,12 +16198,12 @@
             if (rf & 2) {
                 i0.ɵɵattribute("aria-label", ctx.ariaLabel);
             }
-        }, inputs: { adjustControlButtonLocation: "adjustControlButtonLocation", newItem: "newItem", showAdd: "showAdd", showRemove: "showRemove", showMove: "showMove", canCloseAll: "canCloseAll", canCloseAny: "canCloseAny", canOpenMultiple: "canOpenMultiple", maxItems: "maxItems", addButtonText: "addButtonText", itemTitle: "itemTitle" }, outputs: { askForNewItem: "askForNewItem", askForItemHeader: "askForItemHeader", askForRemoveEvaluator: "askForRemoveEvaluator" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c2$7, decls: 8, vars: 8, consts: [[3, "formField"], [1, "sme-array"], [3, "canCloseAny", "canCloseAll", "canOpenMultiple"], [3, "header", "isExpandable", 4, "ngFor", "ngForOf"], ["type", "button", "class", "sme-button-trigger sme-button-auto-width sme-icon sme-icon-add sme-margin-bottom-xs", 3, "smeDisabled", "title", "click", 4, "ngIf"], [3, "alert"], ["aria-live", "assertive", "aria-relevant", "all", 1, "sme-screen-reader"], [3, "header", "isExpandable"], ["type", "button", "class", "sme-button-trigger sme-button-auto-width sme-form-field-height sme-padding-horizontal-xs", 3, "title", "smeDisabled", "click", 4, "ngIf"], [1, "sme-screen-reader", 3, "id"], [1, "sme-arrange-stack-h", "sme-margin-bottom-lg", "sme-array-item"], [1, "sme-position-flex-auto", "sme-padding-inset-md", 3, "id"], ["smeTemplateOutlet", "", "hostDataName", "context", 3, "template", "data", "hostData"], ["type", "button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-form-field-height", "sme-padding-horizontal-xs", 3, "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-up"], [1, "sme-icon", "sme-icon-down"], [1, "sme-icon", "sme-icon-delete", "sme-color-red"], ["type", "button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-icon", "sme-icon-add", "sme-margin-bottom-xs", 3, "smeDisabled", "title", "click"], ["addButton", ""]], template: function ArrayFormFieldComponent_Template(rf, ctx) {
+        }, inputs: { adjustControlButtonLocation: "adjustControlButtonLocation", newItem: "newItem", showAdd: "showAdd", showRemove: "showRemove", showMove: "showMove", canCloseAll: "canCloseAll", canCloseAny: "canCloseAny", canOpenMultiple: "canOpenMultiple", maxItems: "maxItems", addButtonText: "addButtonText", headerTemplate: "headerTemplate", itemTitle: "itemTitle" }, outputs: { askForNewItem: "askForNewItem", askForItemHeader: "askForItemHeader", askForRemoveEvaluator: "askForRemoveEvaluator" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c2$7, decls: 8, vars: 8, consts: [[3, "formField"], [1, "sme-array"], [3, "canCloseAny", "canCloseAll", "canOpenMultiple"], [3, "header", "isExpandable", 4, "ngFor", "ngForOf"], ["type", "button", "class", "sme-button-trigger sme-button-auto-width sme-icon sme-icon-add sme-margin-bottom-xs", 3, "smeDisabled", "title", "click", 4, "ngIf"], [3, "alert"], ["aria-live", "assertive", "aria-relevant", "all", 1, "sme-screen-reader"], [3, "header", "isExpandable"], ["smeTemplateOutlet", "", "hostDataName", "context", 3, "template", "data", "hostData"], ["type", "button", "class", "sme-button-trigger sme-button-auto-width sme-form-field-height sme-padding-horizontal-xs", 3, "title", "smeDisabled", "click", 4, "ngIf"], [1, "sme-screen-reader", 3, "id"], [1, "sme-arrange-stack-h", "sme-margin-bottom-lg", "sme-array-item"], [1, "sme-position-flex-auto", "sme-padding-inset-md", 3, "id"], ["type", "button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-form-field-height", "sme-padding-horizontal-xs", 3, "title", "smeDisabled", "click"], [1, "sme-icon", "sme-icon-up"], [1, "sme-icon", "sme-icon-down"], [1, "sme-icon", "sme-icon-delete", "sme-color-red"], ["type", "button", 1, "sme-button-trigger", "sme-button-auto-width", "sme-icon", "sme-icon-add", "sme-margin-bottom-xs", 3, "smeDisabled", "title", "click"], ["addButton", ""]], template: function ArrayFormFieldComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵelementStart(0, "sme-form-field-layout", 0);
                 i0.ɵɵelementStart(1, "div", 1);
                 i0.ɵɵelementStart(2, "sme-accordion", 2);
-                i0.ɵɵtemplate(3, ArrayFormFieldComponent_sme_accordion_panel_3_Template, 10, 17, "sme-accordion-panel", 3);
+                i0.ɵɵtemplate(3, ArrayFormFieldComponent_sme_accordion_panel_3_Template, 11, 23, "sme-accordion-panel", 3);
                 i0.ɵɵelementEnd();
                 i0.ɵɵtemplate(4, ArrayFormFieldComponent_button_4_Template, 3, 4, "button", 4);
                 i0.ɵɵelementEnd();
@@ -16219,7 +16226,7 @@
                 i0.ɵɵadvance(2);
                 i0.ɵɵtextInterpolate(ctx.screenReaderEvent);
             }
-        }, directives: [FormFieldLayoutComponent, AccordionComponent, i1$1.NgForOf, i1$1.NgIf, ValidationAlertComponent, AccordionPanelComponent, PanelControlComponent, FieldsetDirective, TemplateOutletDirective, TooltipDirective, DisabledDirective], encapsulation: 2 });
+        }, directives: [FormFieldLayoutComponent, AccordionComponent, i1$1.NgForOf, i1$1.NgIf, ValidationAlertComponent, AccordionPanelComponent, PanelControlComponent, TemplateOutletDirective, FieldsetDirective, TooltipDirective, DisabledDirective], encapsulation: 2 });
     exports.ArrayFormFieldComponent = __decorate([
         SmeSchemaProperty({
             type: exports.SchemaPrimitiveType.Array,
@@ -16266,6 +16273,8 @@
                     type: i0.Input
                 }], addButtonText: [{
                     type: i0.Input
+                }], headerTemplate: [{
+                    type: i0.Input
                 }], itemTitle: [{
                     type: i0.Input
                 }], ariaLabel: [{
@@ -21221,7 +21230,8 @@
                     alerts['invalidDateRange'] = alert;
                 }
                 else {
-                    if (!this.endFormField.ngModel.valid && this.startFormField.ngModel.control.errors) {
+                    if ((this.endFormField && !this.endFormField.ngModel.valid) &&
+                        (this.startFormField && this.startFormField.ngModel.control.errors)) {
                         this.endFormField.ngModel.control.setErrors(null);
                     }
                 }
@@ -21232,7 +21242,7 @@
                     alerts['invalidDateRange'] = alert;
                 }
                 else {
-                    if (!this.startFormField.ngModel.valid && this.startFormField.ngModel.control.errors) {
+                    if (this.startFormField && !this.startFormField.ngModel.valid && this.startFormField.ngModel.control.errors) {
                         this.startFormField.ngModel.control.setErrors(null);
                     }
                 }
@@ -27281,7 +27291,7 @@
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            i0.ɵɵproperty("visibleToScreenReader", false)("showResizerCover", false);
+            i0.ɵɵproperty("visibleToScreenReader", true)("showResizerCover", false);
         }
     }
     var _c13 = function (a0) { return { "width": a0 }; };
@@ -28149,7 +28159,7 @@
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            i0.ɵɵproperty("visibleToScreenReader", false)("showResizerCover", false);
+            i0.ɵɵproperty("visibleToScreenReader", true)("showResizerCover", false);
         }
     }
     function TreeTableComponent_div_7_Template(rf, ctx) {
@@ -32714,7 +32724,7 @@
                 i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.lastFocusableShadowElement = _t.first);
                 i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dataTableTemplateLoaderComponents = _t);
             }
-        }, inputs: { isBusy: "isBusy", enableRightClickSelect: "enableRightClickSelect", loadingMessage: "loadingMessage", noRecordMessage: "noRecordMessage", editable: "editable", expandTreeNodeOnChecked: "expandTreeNodeOnChecked", isAllEditableRowsVisible: "isAllEditableRowsVisible", scrollableHorizontal: "scrollableHorizontal", lazyLoad: "lazyLoad", rememberTreeNodeToggle: "rememberTreeNodeToggle", rememberSelection: "rememberSelection", preventEnterKeyForDefaultAction: "preventEnterKeyForDefaultAction", getItemIdentityFunction: "getItemIdentityFunction", disableNaturalSort: "disableNaturalSort", shouldScrollToSelectionAfterSorting: "shouldScrollToSelectionAfterSorting", globalFilter: "globalFilter", caseSensitiveFilter: "caseSensitiveFilter", showAsTree: "showAsTree", editableNewDataItem: "editableNewDataItem", items: "items", selection: "selection", selectionMode: "selectionMode", defaultSortColumn: "defaultSortColumn", defaultSortMode: "defaultSortMode", groupColumn: "groupColumn", groupSortMode: "groupSortMode", useGroupToggle: "useGroupToggle", showHeader: "showHeader", tableAriaLabelledBy: "tableAriaLabelledBy", tableAriaLabel: "tableAriaLabel", showGrid: "showGrid", showAllItemCheckbox: "showAllItemCheckbox", selectAndCheck: "selectAndCheck", rowHeight: "rowHeight", linkParentChildrenSelections: "linkParentChildrenSelections", selectItemWhenNavigatingWithKeyboard: "selectItemWhenNavigatingWithKeyboard", showLeftMargin: "showLeftMargin", scrollable: "scrollable", disableUIVirtualization: "disableUIVirtualization", selectable: "selectable", editableAutoNewRow: "editableAutoNewRow", defaultGroupToggleExpanded: "defaultGroupToggleExpanded", autoRowHeight: "autoRowHeight", virtualCount: "virtualCount" }, outputs: { onChangesetUpdated: "onChangesetUpdated", changesetUpdated: "changesetUpdated", selectionChange: "selectionChange", onRowDblclick: "onRowDblclick", rowDblclick: "rowDblclick", onGroupToggleClicked: "onGroupToggleClicked", groupToggleClick: "groupToggleClick", onNewEditableRowAdded: "onNewEditableRowAdded", editableRowAdded: "editableRowAdded", renderedItemsChange: "renderedItemsChange", lazyLoadingData: "lazyLoadingData", onNodeExpand: "onNodeExpand", nodeExpanded: "nodeExpanded", onNodeCollapsed: "onNodeCollapsed", nodeCollapsed: "nodeCollapsed", onNodeSelect: "onNodeSelect", nodeSelected: "nodeSelected", itemsChange: "itemsChange", onFilter: "onFilter", filter: "filter", doCustomSort: "doCustomSort", onRowSelect: "onRowSelect", rowSelected: "rowSelected", onRowUnselect: "onRowUnselect", rowUnselected: "rowUnselected" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 30, vars: 45, consts: [["role", "presentation", 1, "sme-table-header", "sme-focus-zone", "sme-data-table-transition"], ["header", ""], ["role", "rowgroup", 1, "sme-table", "sme-table-virtualized"], ["headerTable", ""], ["role", "row", 1, "sme-table-row", "sme-arrange-stack-h", "sme-position-flex-auto", 3, "keydown"], [1, "sme-table-caption"], ["class", "sme-table-checkbox sme-table-header-checkbox", "role", "presentation", 4, "ngIf"], ["role", "presentation", 3, "ngStyle", "class", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-focus-zone", "sme-table-container", "sme-data-table-transition"], ["content", ""], ["role", "rowgroup", 1, "sme-table-scroll-container", "sme-layout-absolute", "sme-position-inset-none", 3, "ngClass"], ["scrollContainer", ""], ["role", "row", "class", "sme-table-row sme-table-row-placeholder", "tabindex", "0", 4, "ngIf"], ["role", "presentation", 1, "sme-layout-relative", "sme-position-stretch-h", "sme-arrange-overflow-hide"], ["scrollBody", ""], ["sme-lint-disable", "", 1, "sme-table", "sme-table-scrollable", "sme-table-virtualized", 3, "ngStyle"], ["scrollAboveData", ""], ["class", "sme-table-row sme-table-row-data sme-table-row-selectable", 3, "sme-table-row-active", "sme-table-row-selected", "sme-table-group-item", "sme-table-group-header", "sme-checked", 4, "ngFor", "ngForOf"], ["sme-lint-disable", "", "role", "presentation", 1, "sme-table", "sme-table-scrollable", 3, "ngStyle"], ["scrollData", ""], ["class", "sme-table-row sme-table-row-data sme-table-row-selectable", "role", "row", 3, "sme-table-row-active", "sme-table-row-selected", "sme-table-group-item", "sme-table-group-header", "sme-checked", "sme-table-row-editable", "sme-has-validation-error", "sme-data-table-row-new-item", "keydown", "keyup", "contextmenu", "click", "dblclick", "focus", "focusin", "focusout", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf"], [1, "sme-table-row"], ["tempRow", ""], ["tabindex", "0", 1, "sme-table-td"], [1, "sme-table-cell"], ["class", "sme-focus-zone", "data-sme-last-focusable-shadow-element", "", "tabindex", "0", 3, "focus", 4, "ngIf"], ["class", "sme-layout-absolute sme-position-inset-none", 4, "ngIf"], [1, "sme-width-xxs", "sme-layout-absolute", "sme-position-stretch-v", "sme-background-color-base-80", "sme-layer-flyout", "sme-layout-none"], ["resizerIndicator", ""], ["role", "presentation", 1, "sme-table-checkbox", "sme-table-header-checkbox"], ["sme-lint-disable-self", "", "type", "checkbox", 3, "checked", "change"], ["role", "presentation"], ["role", "presentation", 3, "ngStyle"], ["class", "sme-table-header-cell sme-focus-zone", "role", "columnheader", "aria-live", "polite", "tabindex", "0", 3, "title", "click", 4, "ngIf"], ["class", "sme-table-header-cell", "role", "columnheader", 3, "title", 4, "ngIf"], ["class", "sme-table-header-cell", "role", "columnheader", 4, "ngIf"], ["resizerHostSelector", "div.sme-table-header", "orientation", "left", 3, "visibleToScreenReader", "showResizerCover", "resized", "resizing", 4, "ngIf"], ["role", "columnheader", "aria-live", "polite", "tabindex", "0", 1, "sme-table-header-cell", "sme-focus-zone", 3, "title", "click"], [1, "sme-icon", "sme-margin-left-xxs", 3, "ngClass"], ["role", "columnheader", 1, "sme-table-header-cell", 3, "title"], ["role", "columnheader", 1, "sme-table-header-cell"], ["resizerHostSelector", "div.sme-table-header", "orientation", "left", 3, "visibleToScreenReader", "showResizerCover", "resized", "resizing"], ["role", "row", "tabindex", "0", 1, "sme-table-row", "sme-table-row-placeholder"], ["emptyMessage", ""], [3, "message", 4, "ngIf"], [1, "sme-table-cell", "sme-table-cell-placeholder"], ["role", "cell", 1, "sme-table-cell"], [3, "message"], [1, "sme-table-row", "sme-table-row-data", "sme-table-row-selectable"], [1, "sme-arrange-stack-h"], [1, "sme-table-td", "sme-position-flex-auto"], ["class", "sme-table-checkbox", "role", "presentation", 4, "ngIf"], [3, "ngClass", "ngStyle", "class", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-table-checkbox"], ["type", "checkbox", 3, "checked"], [3, "ngClass", "ngStyle"], ["class", "sme-screen-reader sme-screen-reader-disable-copy", 4, "ngIf"], ["class", "sme-table-cell", 3, "click", 4, "ngIf"], ["class", "sme-table-expander-cell", 3, "ngStyle", "ngClass", 4, "ngIf"], ["class", "sme-table-expander-cell", 3, "ngStyle", 4, "ngIf"], ["class", "sme-table-cell sme-table-checkbox-container", "role", "presentation", 4, "ngIf"], [4, "ngIf"], [1, "sme-screen-reader", "sme-screen-reader-disable-copy"], [1, "sme-table-cell", 3, "click"], ["class", "sme-icon sme-icon-size-xxs sme-margin-right-xxs", 3, "ngClass", 4, "ngIf"], [1, "sme-icon", "sme-icon-size-xxs", "sme-margin-right-xxs", 3, "ngClass"], [3, "template", "data"], [1, "sme-table-expander-cell", 3, "ngStyle", "ngClass"], ["role", "button", 1, "sme-icon", "sme-icon-size-xxs", 3, "ngClass", "click"], [1, "sme-table-expander-cell-placeholder"], [1, "sme-table-expander-cell", 3, "ngStyle"], ["size", "extra-small", 3, "inline", "isBackgroundTransparent"], ["role", "presentation", 1, "sme-table-cell", "sme-table-checkbox-container"], ["type", "checkbox", 3, "checked", "change"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", 4, "ngIf"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", "sme-table-cell-height-auto", 4, "ngIf"], [3, "template", "data", "rowIndex", 4, "ngIf"], [3, "template", "data", "rowIndex"], ["role", "row", 1, "sme-table-row", "sme-table-row-data", "sme-table-row-selectable", 3, "keydown", "keyup", "contextmenu", "click", "dblclick", "focus", "focusin", "focusout", "mouseenter", "mouseleave"], ["role", "presentation", 1, "sme-arrange-stack-h"], ["class", "sme-table-cell sme-table-checkbox-container", "role", "presentation", 3, "sme-table-cell-full-height", 4, "ngIf"], ["class", "sme-table-row-validation", 4, "ngIf"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", "id", 4, "ngIf"], ["class", "sme-table-cell", 3, "sme-table-cell-height-auto", "sme-table-cell-full-height", "id", 4, "ngIf"], [1, "sme-table-cell", 3, "id"], ["class", "sme-table-cell", 4, "ngIf"], [3, "renderedItem", "template", "data", "rowIndex", 4, "ngIf"], [3, "renderedItem", "template", "data", "rowIndex"], ["class", "sme-table-cell sme-table-edit-container", 4, "ngIf"], [1, "sme-table-cell", "sme-table-edit-container"], [3, "template", "field", "data", "rowIndex", "renderedItem", "validationAlert", "dataChanged", 4, "ngIf"], [3, "template", "field", "data", "rowIndex", "renderedItem", "validationAlert", "dataChanged"], [1, "sme-table-row-validation"], ["role", "presentation", 1, "sme-table-cell"], [4, "ngFor", "ngForOf"], [3, "alert"], ["data-sme-last-focusable-shadow-element", "", "tabindex", "0", 1, "sme-focus-zone", 3, "focus"], ["lastFocusableShadowElement", ""], [1, "sme-layout-absolute", "sme-position-inset-none"], [3, "isBackgroundTransparent"]], template: function DataTableComponent_Template(rf, ctx) {
+        }, inputs: { isBusy: "isBusy", enableRightClickSelect: "enableRightClickSelect", loadingMessage: "loadingMessage", noRecordMessage: "noRecordMessage", editable: "editable", expandTreeNodeOnChecked: "expandTreeNodeOnChecked", isAllEditableRowsVisible: "isAllEditableRowsVisible", scrollableHorizontal: "scrollableHorizontal", lazyLoad: "lazyLoad", rememberTreeNodeToggle: "rememberTreeNodeToggle", rememberSelection: "rememberSelection", preventEnterKeyForDefaultAction: "preventEnterKeyForDefaultAction", getItemIdentityFunction: "getItemIdentityFunction", disableNaturalSort: "disableNaturalSort", shouldScrollToSelectionAfterSorting: "shouldScrollToSelectionAfterSorting", globalFilter: "globalFilter", caseSensitiveFilter: "caseSensitiveFilter", showAsTree: "showAsTree", editableNewDataItem: "editableNewDataItem", items: "items", selection: "selection", selectionMode: "selectionMode", defaultSortColumn: "defaultSortColumn", defaultSortMode: "defaultSortMode", groupColumn: "groupColumn", groupSortMode: "groupSortMode", useGroupToggle: "useGroupToggle", showHeader: "showHeader", tableAriaLabelledBy: "tableAriaLabelledBy", tableAriaLabel: "tableAriaLabel", showGrid: "showGrid", showAllItemCheckbox: "showAllItemCheckbox", selectAndCheck: "selectAndCheck", rowHeight: "rowHeight", linkParentChildrenSelections: "linkParentChildrenSelections", selectItemWhenNavigatingWithKeyboard: "selectItemWhenNavigatingWithKeyboard", showLeftMargin: "showLeftMargin", scrollable: "scrollable", disableUIVirtualization: "disableUIVirtualization", selectable: "selectable", editableAutoNewRow: "editableAutoNewRow", defaultGroupToggleExpanded: "defaultGroupToggleExpanded", autoRowHeight: "autoRowHeight", virtualCount: "virtualCount" }, outputs: { onChangesetUpdated: "onChangesetUpdated", changesetUpdated: "changesetUpdated", selectionChange: "selectionChange", onRowDblclick: "onRowDblclick", rowDblclick: "rowDblclick", onGroupToggleClicked: "onGroupToggleClicked", groupToggleClick: "groupToggleClick", onNewEditableRowAdded: "onNewEditableRowAdded", editableRowAdded: "editableRowAdded", renderedItemsChange: "renderedItemsChange", lazyLoadingData: "lazyLoadingData", onNodeExpand: "onNodeExpand", nodeExpanded: "nodeExpanded", onNodeCollapsed: "onNodeCollapsed", nodeCollapsed: "nodeCollapsed", onNodeSelect: "onNodeSelect", nodeSelected: "nodeSelected", itemsChange: "itemsChange", onFilter: "onFilter", filter: "filter", doCustomSort: "doCustomSort", onRowSelect: "onRowSelect", rowSelected: "rowSelected", onRowUnselect: "onRowUnselect", rowUnselected: "rowUnselected" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 30, vars: 45, consts: [["role", "presentation", 1, "sme-table-header", "sme-focus-zone", "sme-data-table-transition"], ["header", ""], ["role", "rowgroup", 1, "sme-table", "sme-table-virtualized"], ["headerTable", ""], ["role", "row", 1, "sme-table-row", "sme-arrange-stack-h", "sme-position-flex-auto", 3, "keydown"], [1, "sme-table-caption"], ["class", "sme-table-checkbox sme-table-header-checkbox", "role", "presentation", 4, "ngIf"], ["role", "presentation", 3, "ngStyle", "class", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-focus-zone", "sme-table-container", "sme-data-table-transition"], ["content", ""], ["role", "rowgroup", 1, "sme-table-scroll-container", "sme-layout-absolute", "sme-position-inset-none", 3, "ngClass"], ["scrollContainer", ""], ["role", "row", "class", "sme-table-row sme-table-row-placeholder", "tabindex", "0", 4, "ngIf"], ["role", "presentation", 1, "sme-layout-relative", "sme-position-stretch-h", "sme-arrange-overflow-hide"], ["scrollBody", ""], ["sme-lint-disable", "", 1, "sme-table", "sme-table-scrollable", "sme-table-virtualized", 3, "ngStyle"], ["scrollAboveData", ""], ["class", "sme-table-row sme-table-row-data sme-table-row-selectable", 3, "sme-table-row-active", "sme-table-row-selected", "sme-table-group-item", "sme-table-group-header", "sme-checked", 4, "ngFor", "ngForOf"], ["sme-lint-disable", "", "role", "presentation", 1, "sme-table", "sme-table-scrollable", 3, "ngStyle"], ["scrollData", ""], ["class", "sme-table-row sme-table-row-data sme-table-row-selectable", "role", "row", 3, "sme-table-row-active", "sme-table-row-selected", "sme-table-group-item", "sme-table-group-header", "sme-checked", "sme-table-row-editable", "sme-has-validation-error", "sme-data-table-row-new-item", "keydown", "keyup", "contextmenu", "click", "dblclick", "focus", "focusin", "focusout", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf"], [1, "sme-table-row"], ["tempRow", ""], ["tabindex", "0", 1, "sme-table-td"], [1, "sme-table-cell"], ["class", "sme-focus-zone", "data-sme-last-focusable-shadow-element", "", "tabindex", "0", 3, "focus", 4, "ngIf"], ["class", "sme-layout-absolute sme-position-inset-none", 4, "ngIf"], [1, "sme-width-xxs", "sme-layout-absolute", "sme-position-stretch-v", "sme-background-color-base-80", "sme-layer-flyout", "sme-layout-none"], ["resizerIndicator", ""], ["role", "presentation", 1, "sme-table-checkbox", "sme-table-header-checkbox"], ["sme-lint-disable-self", "", "type", "checkbox", 3, "checked", "change"], ["role", "presentation"], ["role", "presentation", 3, "ngStyle"], ["class", "sme-table-header-cell sme-focus-zone", "role", "columnheader", "aria-live", "polite", "tabindex", "0", 3, "title", "click", 4, "ngIf"], ["class", "sme-table-header-cell", "role", "columnheader", 3, "title", 4, "ngIf"], ["class", "sme-table-header-cell", "role", "columnheader", 4, "ngIf"], ["tabindex", "0", "resizerHostSelector", "div.sme-table-header", "orientation", "left", "class", "sme-focus-zone", 3, "visibleToScreenReader", "showResizerCover", "resized", "resizing", 4, "ngIf"], ["role", "columnheader", "aria-live", "polite", "tabindex", "0", 1, "sme-table-header-cell", "sme-focus-zone", 3, "title", "click"], [1, "sme-icon", "sme-margin-left-xxs", 3, "ngClass"], ["role", "columnheader", 1, "sme-table-header-cell", 3, "title"], ["role", "columnheader", 1, "sme-table-header-cell"], ["tabindex", "0", "resizerHostSelector", "div.sme-table-header", "orientation", "left", 1, "sme-focus-zone", 3, "visibleToScreenReader", "showResizerCover", "resized", "resizing"], ["role", "row", "tabindex", "0", 1, "sme-table-row", "sme-table-row-placeholder"], ["emptyMessage", ""], [3, "message", 4, "ngIf"], [1, "sme-table-cell", "sme-table-cell-placeholder"], ["role", "cell", 1, "sme-table-cell"], [3, "message"], [1, "sme-table-row", "sme-table-row-data", "sme-table-row-selectable"], [1, "sme-arrange-stack-h"], [1, "sme-table-td", "sme-position-flex-auto"], ["class", "sme-table-checkbox", "role", "presentation", 4, "ngIf"], [3, "ngClass", "ngStyle", "class", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-table-checkbox"], ["type", "checkbox", 3, "checked"], [3, "ngClass", "ngStyle"], ["class", "sme-screen-reader sme-screen-reader-disable-copy", 4, "ngIf"], ["class", "sme-table-cell", 3, "click", 4, "ngIf"], ["class", "sme-table-expander-cell", 3, "ngStyle", "ngClass", 4, "ngIf"], ["class", "sme-table-expander-cell", 3, "ngStyle", 4, "ngIf"], ["class", "sme-table-cell sme-table-checkbox-container", "role", "presentation", 4, "ngIf"], [4, "ngIf"], [1, "sme-screen-reader", "sme-screen-reader-disable-copy"], [1, "sme-table-cell", 3, "click"], ["class", "sme-icon sme-icon-size-xxs sme-margin-right-xxs", 3, "ngClass", 4, "ngIf"], [1, "sme-icon", "sme-icon-size-xxs", "sme-margin-right-xxs", 3, "ngClass"], [3, "template", "data"], [1, "sme-table-expander-cell", 3, "ngStyle", "ngClass"], ["role", "button", 1, "sme-icon", "sme-icon-size-xxs", 3, "ngClass", "click"], [1, "sme-table-expander-cell-placeholder"], [1, "sme-table-expander-cell", 3, "ngStyle"], ["size", "extra-small", 3, "inline", "isBackgroundTransparent"], ["role", "presentation", 1, "sme-table-cell", "sme-table-checkbox-container"], ["type", "checkbox", 3, "checked", "change"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", 4, "ngIf"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", "sme-table-cell-height-auto", 4, "ngIf"], [3, "template", "data", "rowIndex", 4, "ngIf"], [3, "template", "data", "rowIndex"], ["role", "row", 1, "sme-table-row", "sme-table-row-data", "sme-table-row-selectable", 3, "keydown", "keyup", "contextmenu", "click", "dblclick", "focus", "focusin", "focusout", "mouseenter", "mouseleave"], ["role", "presentation", 1, "sme-arrange-stack-h"], ["class", "sme-table-cell sme-table-checkbox-container", "role", "presentation", 3, "sme-table-cell-full-height", 4, "ngIf"], ["class", "sme-table-row-validation", 4, "ngIf"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", "id", 4, "ngIf"], ["class", "sme-table-cell", 3, "sme-table-cell-height-auto", "sme-table-cell-full-height", "id", 4, "ngIf"], [1, "sme-table-cell", 3, "id"], ["class", "sme-table-cell", 4, "ngIf"], [3, "renderedItem", "template", "data", "rowIndex", 4, "ngIf"], [3, "renderedItem", "template", "data", "rowIndex"], ["class", "sme-table-cell sme-table-edit-container", 4, "ngIf"], [1, "sme-table-cell", "sme-table-edit-container"], [3, "template", "field", "data", "rowIndex", "renderedItem", "validationAlert", "dataChanged", 4, "ngIf"], [3, "template", "field", "data", "rowIndex", "renderedItem", "validationAlert", "dataChanged"], [1, "sme-table-row-validation"], ["role", "presentation", 1, "sme-table-cell"], [4, "ngFor", "ngForOf"], [3, "alert"], ["data-sme-last-focusable-shadow-element", "", "tabindex", "0", 1, "sme-focus-zone", 3, "focus"], ["lastFocusableShadowElement", ""], [1, "sme-layout-absolute", "sme-position-inset-none"], [3, "isBackgroundTransparent"]], template: function DataTableComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵelementStart(0, "div", 0, 1);
                 i0.ɵɵelementStart(2, "div", 2, 3);
@@ -33034,7 +33044,7 @@
         return TreeTableComponent;
     }(DataTableComponent));
     /** @nocollapse */ TreeTableComponent.ɵfac = function TreeTableComponent_Factory(t) { return new (t || TreeTableComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
-    /** @nocollapse */ TreeTableComponent.ɵcmp = i0.ɵɵdefineComponent({ type: TreeTableComponent, selectors: [["sme-tree-table"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 30, vars: 45, consts: [["role", "presentation", 1, "sme-table-header", "sme-focus-zone", "sme-data-table-transition"], ["header", ""], ["role", "rowgroup", 1, "sme-table", "sme-table-virtualized"], ["headerTable", ""], ["role", "row", 1, "sme-table-row", "sme-arrange-stack-h", "sme-position-flex-auto", 3, "keydown"], [1, "sme-table-caption"], ["class", "sme-table-checkbox sme-table-header-checkbox", "role", "presentation", 4, "ngIf"], ["role", "presentation", 3, "ngStyle", "class", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-focus-zone", "sme-table-container", "sme-data-table-transition"], ["content", ""], ["role", "rowgroup", 1, "sme-table-scroll-container", "sme-layout-absolute", "sme-position-inset-none", 3, "ngClass"], ["scrollContainer", ""], ["role", "row", "class", "sme-table-row sme-table-row-placeholder", "tabindex", "0", 4, "ngIf"], ["role", "presentation", 1, "sme-layout-relative", "sme-position-stretch-h", "sme-arrange-overflow-hide"], ["scrollBody", ""], ["sme-lint-disable", "", 1, "sme-table", "sme-table-scrollable", "sme-table-virtualized", 3, "ngStyle"], ["scrollAboveData", ""], ["class", "sme-table-row sme-table-row-data sme-table-row-selectable", 3, "sme-table-row-active", "sme-table-row-selected", "sme-table-group-item", "sme-table-group-header", "sme-checked", 4, "ngFor", "ngForOf"], ["sme-lint-disable", "", "role", "presentation", 1, "sme-table", "sme-table-scrollable", 3, "ngStyle"], ["scrollData", ""], ["class", "sme-table-row sme-table-row-data sme-table-row-selectable", "role", "row", 3, "sme-table-row-active", "sme-table-row-selected", "sme-table-group-item", "sme-table-group-header", "sme-checked", "sme-table-row-editable", "sme-has-validation-error", "sme-data-table-row-new-item", "keydown", "keyup", "contextmenu", "click", "dblclick", "focus", "focusin", "focusout", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf"], [1, "sme-table-row"], ["tempRow", ""], ["tabindex", "0", 1, "sme-table-td"], [1, "sme-table-cell"], ["class", "sme-focus-zone", "data-sme-last-focusable-shadow-element", "", "tabindex", "0", 3, "focus", 4, "ngIf"], ["class", "sme-layout-absolute sme-position-inset-none", 4, "ngIf"], [1, "sme-width-xxs", "sme-layout-absolute", "sme-position-stretch-v", "sme-background-color-base-80", "sme-layer-flyout", "sme-layout-none"], ["resizerIndicator", ""], ["role", "presentation", 1, "sme-table-checkbox", "sme-table-header-checkbox"], ["sme-lint-disable-self", "", "type", "checkbox", 3, "checked", "change"], ["role", "presentation"], ["role", "presentation", 3, "ngStyle"], ["class", "sme-table-header-cell sme-focus-zone", "role", "columnheader", "aria-live", "polite", "tabindex", "0", 3, "title", "click", 4, "ngIf"], ["class", "sme-table-header-cell", "role", "columnheader", 3, "title", 4, "ngIf"], ["class", "sme-table-header-cell", "role", "columnheader", 4, "ngIf"], ["resizerHostSelector", "div.sme-table-header", "orientation", "left", 3, "visibleToScreenReader", "showResizerCover", "resized", "resizing", 4, "ngIf"], ["role", "columnheader", "aria-live", "polite", "tabindex", "0", 1, "sme-table-header-cell", "sme-focus-zone", 3, "title", "click"], [1, "sme-icon", "sme-margin-left-xxs", 3, "ngClass"], ["role", "columnheader", 1, "sme-table-header-cell", 3, "title"], ["role", "columnheader", 1, "sme-table-header-cell"], ["resizerHostSelector", "div.sme-table-header", "orientation", "left", 3, "visibleToScreenReader", "showResizerCover", "resized", "resizing"], ["role", "row", "tabindex", "0", 1, "sme-table-row", "sme-table-row-placeholder"], ["emptyMessage", ""], [3, "message", 4, "ngIf"], [1, "sme-table-cell", "sme-table-cell-placeholder"], ["role", "cell", 1, "sme-table-cell"], [3, "message"], [1, "sme-table-row", "sme-table-row-data", "sme-table-row-selectable"], [1, "sme-arrange-stack-h"], [1, "sme-table-td", "sme-position-flex-auto"], ["class", "sme-table-checkbox", "role", "presentation", 4, "ngIf"], [3, "ngClass", "ngStyle", "class", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-table-checkbox"], ["type", "checkbox", 3, "checked"], [3, "ngClass", "ngStyle"], ["class", "sme-screen-reader sme-screen-reader-disable-copy", 4, "ngIf"], ["class", "sme-table-cell", 3, "click", 4, "ngIf"], ["class", "sme-table-expander-cell", 3, "ngStyle", "ngClass", 4, "ngIf"], ["class", "sme-table-expander-cell", 3, "ngStyle", 4, "ngIf"], ["class", "sme-table-cell sme-table-checkbox-container", "role", "presentation", 4, "ngIf"], [4, "ngIf"], [1, "sme-screen-reader", "sme-screen-reader-disable-copy"], [1, "sme-table-cell", 3, "click"], ["class", "sme-icon sme-icon-size-xxs sme-margin-right-xxs", 3, "ngClass", 4, "ngIf"], [1, "sme-icon", "sme-icon-size-xxs", "sme-margin-right-xxs", 3, "ngClass"], [3, "template", "data"], [1, "sme-table-expander-cell", 3, "ngStyle", "ngClass"], ["role", "button", 1, "sme-icon", "sme-icon-size-xxs", 3, "ngClass", "click"], [1, "sme-table-expander-cell-placeholder"], [1, "sme-table-expander-cell", 3, "ngStyle"], ["size", "extra-small", 3, "inline", "isBackgroundTransparent"], ["role", "presentation", 1, "sme-table-cell", "sme-table-checkbox-container"], ["type", "checkbox", 3, "checked", "change"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", 4, "ngIf"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", "sme-table-cell-height-auto", 4, "ngIf"], [3, "template", "data", "rowIndex", 4, "ngIf"], [3, "template", "data", "rowIndex"], ["role", "row", 1, "sme-table-row", "sme-table-row-data", "sme-table-row-selectable", 3, "keydown", "keyup", "contextmenu", "click", "dblclick", "focus", "focusin", "focusout", "mouseenter", "mouseleave"], ["role", "presentation", 1, "sme-arrange-stack-h"], ["class", "sme-table-cell sme-table-checkbox-container", "role", "presentation", 3, "sme-table-cell-full-height", 4, "ngIf"], ["class", "sme-table-row-validation", 4, "ngIf"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", "id", 4, "ngIf"], ["class", "sme-table-cell", 3, "sme-table-cell-height-auto", "sme-table-cell-full-height", "id", 4, "ngIf"], [1, "sme-table-cell", 3, "id"], ["class", "sme-table-cell", 4, "ngIf"], [3, "renderedItem", "template", "data", "rowIndex", 4, "ngIf"], [3, "renderedItem", "template", "data", "rowIndex"], ["class", "sme-table-cell sme-table-edit-container", 4, "ngIf"], [1, "sme-table-cell", "sme-table-edit-container"], [3, "template", "field", "data", "rowIndex", "renderedItem", "validationAlert", "dataChanged", 4, "ngIf"], [3, "template", "field", "data", "rowIndex", "renderedItem", "validationAlert", "dataChanged"], [1, "sme-table-row-validation"], ["role", "presentation", 1, "sme-table-cell"], [4, "ngFor", "ngForOf"], [3, "alert"], ["data-sme-last-focusable-shadow-element", "", "tabindex", "0", 1, "sme-focus-zone", 3, "focus"], ["lastFocusableShadowElement", ""], [1, "sme-layout-absolute", "sme-position-inset-none"], [3, "isBackgroundTransparent"]], template: function TreeTableComponent_Template(rf, ctx) {
+    /** @nocollapse */ TreeTableComponent.ɵcmp = i0.ɵɵdefineComponent({ type: TreeTableComponent, selectors: [["sme-tree-table"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 30, vars: 45, consts: [["role", "presentation", 1, "sme-table-header", "sme-focus-zone", "sme-data-table-transition"], ["header", ""], ["role", "rowgroup", 1, "sme-table", "sme-table-virtualized"], ["headerTable", ""], ["role", "row", 1, "sme-table-row", "sme-arrange-stack-h", "sme-position-flex-auto", 3, "keydown"], [1, "sme-table-caption"], ["class", "sme-table-checkbox sme-table-header-checkbox", "role", "presentation", 4, "ngIf"], ["role", "presentation", 3, "ngStyle", "class", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-focus-zone", "sme-table-container", "sme-data-table-transition"], ["content", ""], ["role", "rowgroup", 1, "sme-table-scroll-container", "sme-layout-absolute", "sme-position-inset-none", 3, "ngClass"], ["scrollContainer", ""], ["role", "row", "class", "sme-table-row sme-table-row-placeholder", "tabindex", "0", 4, "ngIf"], ["role", "presentation", 1, "sme-layout-relative", "sme-position-stretch-h", "sme-arrange-overflow-hide"], ["scrollBody", ""], ["sme-lint-disable", "", 1, "sme-table", "sme-table-scrollable", "sme-table-virtualized", 3, "ngStyle"], ["scrollAboveData", ""], ["class", "sme-table-row sme-table-row-data sme-table-row-selectable", 3, "sme-table-row-active", "sme-table-row-selected", "sme-table-group-item", "sme-table-group-header", "sme-checked", 4, "ngFor", "ngForOf"], ["sme-lint-disable", "", "role", "presentation", 1, "sme-table", "sme-table-scrollable", 3, "ngStyle"], ["scrollData", ""], ["class", "sme-table-row sme-table-row-data sme-table-row-selectable", "role", "row", 3, "sme-table-row-active", "sme-table-row-selected", "sme-table-group-item", "sme-table-group-header", "sme-checked", "sme-table-row-editable", "sme-has-validation-error", "sme-data-table-row-new-item", "keydown", "keyup", "contextmenu", "click", "dblclick", "focus", "focusin", "focusout", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf"], [1, "sme-table-row"], ["tempRow", ""], ["tabindex", "0", 1, "sme-table-td"], [1, "sme-table-cell"], ["class", "sme-focus-zone", "data-sme-last-focusable-shadow-element", "", "tabindex", "0", 3, "focus", 4, "ngIf"], ["class", "sme-layout-absolute sme-position-inset-none", 4, "ngIf"], [1, "sme-width-xxs", "sme-layout-absolute", "sme-position-stretch-v", "sme-background-color-base-80", "sme-layer-flyout", "sme-layout-none"], ["resizerIndicator", ""], ["role", "presentation", 1, "sme-table-checkbox", "sme-table-header-checkbox"], ["sme-lint-disable-self", "", "type", "checkbox", 3, "checked", "change"], ["role", "presentation"], ["role", "presentation", 3, "ngStyle"], ["class", "sme-table-header-cell sme-focus-zone", "role", "columnheader", "aria-live", "polite", "tabindex", "0", 3, "title", "click", 4, "ngIf"], ["class", "sme-table-header-cell", "role", "columnheader", 3, "title", 4, "ngIf"], ["class", "sme-table-header-cell", "role", "columnheader", 4, "ngIf"], ["tabindex", "0", "resizerHostSelector", "div.sme-table-header", "orientation", "left", "class", "sme-focus-zone", 3, "visibleToScreenReader", "showResizerCover", "resized", "resizing", 4, "ngIf"], ["role", "columnheader", "aria-live", "polite", "tabindex", "0", 1, "sme-table-header-cell", "sme-focus-zone", 3, "title", "click"], [1, "sme-icon", "sme-margin-left-xxs", 3, "ngClass"], ["role", "columnheader", 1, "sme-table-header-cell", 3, "title"], ["role", "columnheader", 1, "sme-table-header-cell"], ["tabindex", "0", "resizerHostSelector", "div.sme-table-header", "orientation", "left", 1, "sme-focus-zone", 3, "visibleToScreenReader", "showResizerCover", "resized", "resizing"], ["role", "row", "tabindex", "0", 1, "sme-table-row", "sme-table-row-placeholder"], ["emptyMessage", ""], [3, "message", 4, "ngIf"], [1, "sme-table-cell", "sme-table-cell-placeholder"], ["role", "cell", 1, "sme-table-cell"], [3, "message"], [1, "sme-table-row", "sme-table-row-data", "sme-table-row-selectable"], [1, "sme-arrange-stack-h"], [1, "sme-table-td", "sme-position-flex-auto"], ["class", "sme-table-checkbox", "role", "presentation", 4, "ngIf"], [3, "ngClass", "ngStyle", "class", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "sme-table-checkbox"], ["type", "checkbox", 3, "checked"], [3, "ngClass", "ngStyle"], ["class", "sme-screen-reader sme-screen-reader-disable-copy", 4, "ngIf"], ["class", "sme-table-cell", 3, "click", 4, "ngIf"], ["class", "sme-table-expander-cell", 3, "ngStyle", "ngClass", 4, "ngIf"], ["class", "sme-table-expander-cell", 3, "ngStyle", 4, "ngIf"], ["class", "sme-table-cell sme-table-checkbox-container", "role", "presentation", 4, "ngIf"], [4, "ngIf"], [1, "sme-screen-reader", "sme-screen-reader-disable-copy"], [1, "sme-table-cell", 3, "click"], ["class", "sme-icon sme-icon-size-xxs sme-margin-right-xxs", 3, "ngClass", 4, "ngIf"], [1, "sme-icon", "sme-icon-size-xxs", "sme-margin-right-xxs", 3, "ngClass"], [3, "template", "data"], [1, "sme-table-expander-cell", 3, "ngStyle", "ngClass"], ["role", "button", 1, "sme-icon", "sme-icon-size-xxs", 3, "ngClass", "click"], [1, "sme-table-expander-cell-placeholder"], [1, "sme-table-expander-cell", 3, "ngStyle"], ["size", "extra-small", 3, "inline", "isBackgroundTransparent"], ["role", "presentation", 1, "sme-table-cell", "sme-table-checkbox-container"], ["type", "checkbox", 3, "checked", "change"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", 4, "ngIf"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", "sme-table-cell-height-auto", 4, "ngIf"], [3, "template", "data", "rowIndex", 4, "ngIf"], [3, "template", "data", "rowIndex"], ["role", "row", 1, "sme-table-row", "sme-table-row-data", "sme-table-row-selectable", 3, "keydown", "keyup", "contextmenu", "click", "dblclick", "focus", "focusin", "focusout", "mouseenter", "mouseleave"], ["role", "presentation", 1, "sme-arrange-stack-h"], ["class", "sme-table-cell sme-table-checkbox-container", "role", "presentation", 3, "sme-table-cell-full-height", 4, "ngIf"], ["class", "sme-table-row-validation", 4, "ngIf"], ["class", "sme-table-cell", 3, "sme-table-cell-full-height", "id", 4, "ngIf"], ["class", "sme-table-cell", 3, "sme-table-cell-height-auto", "sme-table-cell-full-height", "id", 4, "ngIf"], [1, "sme-table-cell", 3, "id"], ["class", "sme-table-cell", 4, "ngIf"], [3, "renderedItem", "template", "data", "rowIndex", 4, "ngIf"], [3, "renderedItem", "template", "data", "rowIndex"], ["class", "sme-table-cell sme-table-edit-container", 4, "ngIf"], [1, "sme-table-cell", "sme-table-edit-container"], [3, "template", "field", "data", "rowIndex", "renderedItem", "validationAlert", "dataChanged", 4, "ngIf"], [3, "template", "field", "data", "rowIndex", "renderedItem", "validationAlert", "dataChanged"], [1, "sme-table-row-validation"], ["role", "presentation", 1, "sme-table-cell"], [4, "ngFor", "ngForOf"], [3, "alert"], ["data-sme-last-focusable-shadow-element", "", "tabindex", "0", 1, "sme-focus-zone", 3, "focus"], ["lastFocusableShadowElement", ""], [1, "sme-layout-absolute", "sme-position-inset-none"], [3, "isBackgroundTransparent"]], template: function TreeTableComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵelementStart(0, "div", 0, 1);
                 i0.ɵɵelementStart(2, "div", 2, 3);
@@ -33814,7 +33824,6 @@
          * @param tab The tab to select
          */
         PivotComponent.prototype.select = function (tab) {
-            var _this = this;
             /** At any given time we should have an attribute that lets us know if a tab is visible or not.
              *
              *
@@ -33834,14 +33843,14 @@
                 this.selection = tab;
                 this.selectionChange.emit(tab);
                 this.changeDetectorRef.detectChanges();
-                setTimeout(function () {
-                    _this.layoutChanged.emit();
-                });
+                this.emitLayoutChanged();
             }
         };
+        PivotComponent.prototype.emitLayoutChanged = function () {
+            this.layoutChanged.emit();
+        };
         PivotComponent.prototype.onLayoutChanged = function () {
-            var _this = this;
-            setTimeout(function () { _this.updatePivotTabs(); }, 0);
+            this.updatePivotTabs();
         };
         PivotComponent.prototype.getTabPanelIndex = function (id, currentTab) {
             var tabPanelSection = document.getElementById(id);
@@ -33905,9 +33914,7 @@
                     currentFill += tabWidth;
                 }
             }
-        };
-        PivotComponent.prototype.tabWidthChanged = function (pivotTab) {
-            this.updatePivotTabs();
+            this.emitLayoutChanged();
         };
         return PivotComponent;
     }(CoreBaseComponent));
@@ -33991,6 +33998,18 @@
         SmeInject(i0.ChangeDetectorRef),
         __metadata("design:type", i0.ChangeDetectorRef)
     ], PivotComponent.prototype, "changeDetectorRef", void 0);
+    __decorate([
+        debounce_decorators.Debounce(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], PivotComponent.prototype, "emitLayoutChanged", null);
+    __decorate([
+        debounce_decorators.Debounce(0),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], PivotComponent.prototype, "onLayoutChanged", null);
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PivotComponent, [{
                 type: i0.Component,
@@ -34041,7 +34060,7 @@
                 }], changeDetectorRef: [], dropDownButtonElement: [{
                     type: i0.ViewChild,
                     args: ['dropDownButton']
-                }] });
+                }], emitLayoutChanged: [], onLayoutChanged: [] });
     })();
     var PivotModule = /** @class */ (function () {
@@ -50418,8 +50437,8 @@
     function SettingsComponent_div_1_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 4);
-            i0.ɵɵelementStart(1, "h2", 5);
+            i0.ɵɵelementStart(0, "div", 8);
+            i0.ɵɵelementStart(1, "h2", 9);
             i0.ɵɵtext(2);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
@@ -50514,20 +50533,38 @@
                 'sme-settings'
             ]);
         };
+        SettingsComponent.prototype.isPaddingRequired = function () {
+            if (this.layoutComponent && this.layoutComponent.currentLayoutDefinition) {
+                return this.addPadding = this.layoutComponent.currentLayoutDefinition.name === 'narrow';
+            }
+        };
         return SettingsComponent;
     }(CoreBaseComponent));
     /** @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: { backRoute: "backRoute", settingsTitle: "settingsTitle" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$O, decls: 8, vars: 1, consts: [[1, "sme-arrange-stack-v", "sme-layout-absolute", "sme-position-inset-none", "sme-layout-responsive-zone-md"], ["class", " sme-layout-tool-header sme-position-flex-none sme-arrange-ellipsis", 4, "ngIf"], [1, "sme-position-flex-auto", "sme-arrange-stack-h"], [1, "sme-position-flex-auto", "sme-arrange-stack-v"], [1, "sme-layout-tool-header", "sme-position-flex-none", "sme-arrange-ellipsis"], [1, "sme-font-h3", 3, "title"]], template: function SettingsComponent_Template(rf, ctx) {
+    /** @nocollapse */ SettingsComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SettingsComponent, selectors: [["sme-settings"]], viewQuery: function SettingsComponent_Query(rf, ctx) {
+            if (rf & 1) {
+                i0.ɵɵviewQuery(LayoutComponent, 1);
+            }
+            if (rf & 2) {
+                var _t = void 0;
+                i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.layoutComponent = _t.first);
+            }
+        }, inputs: { backRoute: "backRoute", settingsTitle: "settingsTitle" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$O, decls: 12, vars: 8, consts: [[1, "sme-arrange-stack-v", "sme-layout-relative", "sme-arrange-overflow-auto-y", "sme-position-stretch"], ["class", " sme-layout-tool-header sme-position-flex-none sme-arrange-ellipsis", 4, "ngIf"], [1, "sme-position-flex-auto", "sme-arrange-overflow-auto", 3, "padLastItem", "layoutChanged"], ["layout", ""], ["name", "narrow", 3, "until", "columns"], ["name", "wide", 3, "columns"], [3, "columnSpan"], [3, "columnSpan", "ngClass"], [1, "sme-layout-tool-header", "sme-position-flex-none", "sme-arrange-ellipsis"], [1, "sme-font-h3", 3, "title"]], template: function SettingsComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵprojectionDef(_c0$1u);
                 i0.ɵɵelementStart(0, "div", 0);
                 i0.ɵɵtemplate(1, SettingsComponent_div_1_Template, 3, 3, "div", 1);
-                i0.ɵɵelementStart(2, "div", 2);
-                i0.ɵɵprojection(3);
-                i0.ɵɵelementStart(4, "div", 3);
-                i0.ɵɵprojection(5, 1);
-                i0.ɵɵprojection(6, 2);
-                i0.ɵɵprojection(7, 3);
+                i0.ɵɵelementStart(2, "sme-layout", 2, 3);
+                i0.ɵɵlistener("layoutChanged", function SettingsComponent_Template_sme_layout_layoutChanged_2_listener() { return ctx.isPaddingRequired(); });
+                i0.ɵɵelement(4, "sme-layout-definition", 4);
+                i0.ɵɵelement(5, "sme-layout-definition", 5);
+                i0.ɵɵelementStart(6, "sme-layout-item", 6);
+                i0.ɵɵprojection(7);
+                i0.ɵɵelementEnd();
+                i0.ɵɵelementStart(8, "sme-layout-item", 7);
+                i0.ɵɵprojection(9, 1);
+                i0.ɵɵprojection(10, 2);
+                i0.ɵɵprojection(11, 3);
                 i0.ɵɵelementEnd();
                 i0.ɵɵelementEnd();
                 i0.ɵɵelementEnd();
@@ -50535,8 +50572,18 @@
             if (rf & 2) {
                 i0.ɵɵadvance(1);
                 i0.ɵɵproperty("ngIf", ctx.settingsTitle);
+                i0.ɵɵadvance(1);
+                i0.ɵɵproperty("padLastItem", false);
+                i0.ɵɵadvance(2);
+                i0.ɵɵproperty("until", 800)("columns", 1);
+                i0.ɵɵadvance(1);
+                i0.ɵɵproperty("columns", 4);
+                i0.ɵɵadvance(1);
+                i0.ɵɵproperty("columnSpan", 1);
+                i0.ɵɵadvance(2);
+                i0.ɵɵproperty("columnSpan", 3)("ngClass", ctx.addPadding ? "sme-position-stretch sme-padding-left-xl" : "sme-position-stretch");
             }
-        }, directives: [i1$1.NgIf, TooltipDirective], encapsulation: 2 });
+        }, directives: [i1$1.NgIf, LayoutComponent, LayoutDefinitionComponent, LayoutItemComponent, i1$1.NgClass, TooltipDirective], encapsulation: 2 });
     __decorate([
         SmeInject(SettingsFormService),
         __metadata("design:type", SettingsFormService)
@@ -50556,6 +50603,9 @@
                     type: i0.Input
                 }], settingsTitle: [{
                     type: i0.Input
+                }], layoutComponent: [{
+                    type: i0.ViewChild,
+                    args: [LayoutComponent]
                 }], settingsForms: [], dialogService: [] });
     })();
@@ -50591,8 +50641,8 @@
     function CommonSettingsComponent_header_2_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "header", 6);
-            i0.ɵɵelementStart(1, "h2", 7);
+            i0.ɵɵelementStart(0, "header", 7);
+            i0.ɵɵelementStart(1, "h2", 8);
             i0.ɵɵtext(2);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
@@ -50605,9 +50655,9 @@
             i0.ɵɵtextInterpolate(ctx_r0.settingsTitle);
         }
     }
-    function CommonSettingsComponent_li_5_h3_1_Template(rf, ctx) {
+    function CommonSettingsComponent_li_6_h3_1_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "h3", 11);
+            i0.ɵɵelementStart(0, "h3", 12);
             i0.ɵɵtext(1);
             i0.ɵɵelementEnd();
         }
@@ -50621,12 +50671,12 @@
             i0.ɵɵtextInterpolate(group_r4.group);
         }
     }
-    function CommonSettingsComponent_li_5_a_2_Template(rf, ctx) {
+    function CommonSettingsComponent_li_6_a_2_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "a", 12);
-            i0.ɵɵelement(1, "div", 13);
-            i0.ɵɵelementStart(2, "div", 14);
-            i0.ɵɵelementStart(3, "span", 15);
+            i0.ɵɵelementStart(0, "a", 13);
+            i0.ɵɵelement(1, "div", 14);
+            i0.ɵɵelementStart(2, "div", 15);
+            i0.ɵɵelementStart(3, "span", 16);
             i0.ɵɵtext(4);
             i0.ɵɵelementEnd();
             i0.ɵɵelementEnd();
@@ -50649,11 +50699,11 @@
             i0.ɵɵtextInterpolate(setting_r9.label);
         }
     }
-    function CommonSettingsComponent_li_5_Template(rf, ctx) {
+    function CommonSettingsComponent_li_6_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "li", 8);
-            i0.ɵɵtemplate(1, CommonSettingsComponent_li_5_h3_1_Template, 2, 3, "h3", 9);
-            i0.ɵɵtemplate(2, CommonSettingsComponent_li_5_a_2_Template, 5, 19, "a", 10);
+            i0.ɵɵelementStart(0, "li", 9);
+            i0.ɵɵtemplate(1, CommonSettingsComponent_li_6_h3_1_Template, 2, 3, "h3", 10);
+            i0.ɵɵtemplate(2, CommonSettingsComponent_li_6_a_2_Template, 5, 19, "a", 11);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
@@ -50665,18 +50715,18 @@
             i0.ɵɵproperty("ngForOf", group_r4.options);
         }
     }
-    function CommonSettingsComponent_div_6_div_1_Template(rf, ctx) {
+    function CommonSettingsComponent_div_7_div_1_Template(rf, ctx) {
         if (rf & 1) {
             var _r15_1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 17);
-            i0.ɵɵlistener("click", function CommonSettingsComponent_div_6_div_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r15_1); var layer_r13 = ctx.$implicit; var ctx_r14 = i0.ɵɵnextContext(2); return ctx_r14.onOverlayClick(layer_r13); });
+            i0.ɵɵelementStart(0, "div", 18);
+            i0.ɵɵlistener("click", function CommonSettingsComponent_div_7_div_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r15_1); var layer_r13 = ctx.$implicit; var ctx_r14 = i0.ɵɵnextContext(2); return ctx_r14.onOverlayClick(layer_r13); });
             i0.ɵɵelementEnd();
         }
     }
-    function CommonSettingsComponent_div_6_Template(rf, ctx) {
+    function CommonSettingsComponent_div_7_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div");
-            i0.ɵɵtemplate(1, CommonSettingsComponent_div_6_div_1_Template, 1, 0, "div", 16);
+            i0.ɵɵtemplate(1, CommonSettingsComponent_div_7_div_1_Template, 1, 0, "div", 17);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
@@ -50685,9 +50735,9 @@
             i0.ɵɵproperty("ngForOf", ctx_r2.layers);
         }
     }
-    function CommonSettingsComponent_sme_settings_header_7_h3_1_Template(rf, ctx) {
+    function CommonSettingsComponent_sme_settings_header_8_h3_1_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "h3", 19);
+            i0.ɵɵelementStart(0, "h3", 20);
             i0.ɵɵtext(1);
             i0.ɵɵelementEnd();
         }
@@ -50695,13 +50745,13 @@
             var ctx_r16 = i0.ɵɵnextContext(2);
             i0.ɵɵattribute("aria-label", ctx_r16.selectedSettingTitle);
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate(ctx_r16.selectedSettingTitle);
+            i0.ɵɵtextInterpolate1(" ", ctx_r16.selectedSettingTitle, "");
         }
     }
-    function CommonSettingsComponent_sme_settings_header_7_Template(rf, ctx) {
+    function CommonSettingsComponent_sme_settings_header_8_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "sme-settings-header");
-            i0.ɵɵtemplate(1, CommonSettingsComponent_sme_settings_header_7_h3_1_Template, 2, 2, "h3", 18);
+            i0.ɵɵtemplate(1, CommonSettingsComponent_sme_settings_header_8_h3_1_Template, 2, 2, "h3", 19);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
@@ -50991,25 +51041,27 @@
                 var _t = void 0;
                 i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.settingsComponent = _t.first);
             }
-        }, inputs: { settingsTitle: "settingsTitle", settings: "settings", showHeader: "showHeader", hackShowOverlay: "hackShowOverlay", hackToolHeader: "hackToolHeader", backRoute: "backRoute" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0$1v, decls: 12, vars: 5, consts: [[3, "settingsTitle"], ["class", "sme-layout-tool-header", 4, "ngIf"], ["role", "tablist", 1, "sme-padding-horizontal-lg", "sme-arrange-stack-v", "sme-focus-zone"], ["role", "presentation", 1, "sme-position-flex-auto", "sme-arrange-stack-v", "sme-arrange-overflow-hide-x", "sme-arrange-overflow-auto-y"], ["class", "sme-margin-inset-none", "role", "presentation", 4, "ngFor", "ngForOf"], [4, "ngIf"], [1, "sme-layout-tool-header"], [1, "sme-position-flex-none", "sme-font-h3"], ["role", "presentation", 1, "sme-margin-inset-none"], ["class", "sme-margin-top-xs sme-font-h5", 3, "id", "title", 4, "ngIf"], ["class", "sme-padding-squish-v-sm sme-arrange-stack-h sme-scheme-nav-item", "role", "tab", "href", "setting.routeParams.extras && setting.routeParams.extras.replaceUrl", "routerLinkActive", "sme-active", 3, "routerLink", "preserveFragment", "skipLocationChange", "replaceUrl", "queryParams", "title", 4, "ngFor", "ngForOf"], [1, "sme-margin-top-xs", "sme-font-h5", 3, "id", "title"], ["role", "tab", "href", "setting.routeParams.extras && setting.routeParams.extras.replaceUrl", "routerLinkActive", "sme-active", 1, "sme-padding-squish-v-sm", "sme-arrange-stack-h", "sme-scheme-nav-item", 3, "routerLink", "preserveFragment", "skipLocationChange", "replaceUrl", "queryParams", "title"], [1, "sme-icon", "sme-margin-right-xs", 3, "ngClass"], [1, "sme-position-flex-auto"], [3, "id"], ["class", "sme-layout-absolute sme-position-inset-none sme-layer-above sme-scheme-backdrop-opaque", 3, "click", 4, "ngFor", "ngForOf"], [1, "sme-layout-absolute", "sme-position-inset-none", "sme-layer-above", "sme-scheme-backdrop-opaque", 3, "click"], ["id", "sme-shell-setting-selectedTitle", 4, "ngIf"], ["id", "sme-shell-setting-selectedTitle"]], template: function CommonSettingsComponent_Template(rf, ctx) {
+        }, inputs: { settingsTitle: "settingsTitle", settings: "settings", showHeader: "showHeader", hackShowOverlay: "hackShowOverlay", hackToolHeader: "hackToolHeader", backRoute: "backRoute" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0$1v, decls: 13, vars: 6, consts: [[3, "settingsTitle"], ["class", "sme-layout-tool-header", 4, "ngIf"], ["role", "region"], ["role", "tablist", 1, "sme-padding-horizontal-lg", "sme-arrange-stack-v", "sme-focus-zone"], ["role", "presentation", 1, "sme-position-flex-auto", "sme-arrange-stack-v", "sme-arrange-overflow-hide-x", "sme-arrange-overflow-auto-y"], ["class", "sme-margin-inset-none", "role", "presentation", 4, "ngFor", "ngForOf"], [4, "ngIf"], [1, "sme-layout-tool-header"], [1, "sme-position-flex-none", "sme-font-h3"], ["role", "presentation", 1, "sme-margin-inset-none"], ["class", "sme-margin-top-xs sme-font-h5", 3, "id", "title", 4, "ngIf"], ["class", "sme-padding-squish-v-sm sme-arrange-stack-h sme-scheme-nav-item", "role", "tab", "href", "setting.routeParams.extras && setting.routeParams.extras.replaceUrl", "routerLinkActive", "sme-active", 3, "routerLink", "preserveFragment", "skipLocationChange", "replaceUrl", "queryParams", "title", 4, "ngFor", "ngForOf"], [1, "sme-margin-top-xs", "sme-font-h5", 3, "id", "title"], ["role", "tab", "href", "setting.routeParams.extras && setting.routeParams.extras.replaceUrl", "routerLinkActive", "sme-active", 1, "sme-padding-squish-v-sm", "sme-arrange-stack-h", "sme-scheme-nav-item", 3, "routerLink", "preserveFragment", "skipLocationChange", "replaceUrl", "queryParams", "title"], [1, "sme-icon", "sme-margin-right-xs", 3, "ngClass"], [1, "sme-position-flex-auto"], [3, "id"], ["class", "sme-layout-absolute sme-position-inset-none sme-layer-above sme-scheme-backdrop-opaque", 3, "click", 4, "ngFor", "ngForOf"], [1, "sme-layout-absolute", "sme-position-inset-none", "sme-layer-above", "sme-scheme-backdrop-opaque", 3, "click"], ["id", "sme-shell-setting-selectedTitle", 4, "ngIf"], ["id", "sme-shell-setting-selectedTitle"]], template: function CommonSettingsComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵprojectionDef();
                 i0.ɵɵelementStart(0, "sme-settings", 0);
                 i0.ɵɵelementStart(1, "sme-settings-navigation");
                 i0.ɵɵtemplate(2, CommonSettingsComponent_header_2_Template, 3, 2, "header", 1);
-                i0.ɵɵelementStart(3, "nav", 2);
-                i0.ɵɵelementStart(4, "ul", 3);
-                i0.ɵɵtemplate(5, CommonSettingsComponent_li_5_Template, 3, 2, "li", 4);
+                i0.ɵɵelementStart(3, "div", 2);
+                i0.ɵɵelementStart(4, "nav", 3);
+                i0.ɵɵelementStart(5, "ul", 4);
+                i0.ɵɵtemplate(6, CommonSettingsComponent_li_6_Template, 3, 2, "li", 5);
                 i0.ɵɵelementEnd();
                 i0.ɵɵelementEnd();
-                i0.ɵɵtemplate(6, CommonSettingsComponent_div_6_Template, 2, 1, "div", 5);
                 i0.ɵɵelementEnd();
-                i0.ɵɵtemplate(7, CommonSettingsComponent_sme_settings_header_7_Template, 2, 1, "sme-settings-header", 5);
-                i0.ɵɵelementStart(8, "sme-settings-content");
-                i0.ɵɵelement(9, "router-outlet");
+                i0.ɵɵtemplate(7, CommonSettingsComponent_div_7_Template, 2, 1, "div", 6);
                 i0.ɵɵelementEnd();
-                i0.ɵɵelementStart(10, "sme-settings-footer");
-                i0.ɵɵprojection(11);
+                i0.ɵɵtemplate(8, CommonSettingsComponent_sme_settings_header_8_Template, 2, 1, "sme-settings-header", 6);
+                i0.ɵɵelementStart(9, "sme-settings-content");
+                i0.ɵɵelement(10, "router-outlet");
+                i0.ɵɵelementEnd();
+                i0.ɵɵelementStart(11, "sme-settings-footer");
+                i0.ɵɵprojection(12);
                 i0.ɵɵelementEnd();
                 i0.ɵɵelementEnd();
             }
@@ -51017,6 +51069,8 @@
                 i0.ɵɵproperty("settingsTitle", ctx.hackToolHeader ? "" : ctx.settingsTitle);
                 i0.ɵɵadvance(2);
                 i0.ɵɵproperty("ngIf", ctx.hackToolHeader);
+                i0.ɵɵadvance(1);
+                i0.ɵɵattribute("aria-label", ctx.settingsTitle);
                 i0.ɵɵadvance(3);
                 i0.ɵɵproperty("ngForOf", ctx.groupTools);
                 i0.ɵɵadvance(1);
@@ -51133,7 +51187,8 @@
          */
         SettingsContentComponent.prototype.getInitialHostClasses = function () {
             return _super.prototype.getInitialHostClasses.call(this).concat([
-                'sme-settings-content'
+                'sme-settings-content',
+                'sme-position-stretch'
             ]);
         };
         return SettingsContentComponent;
@@ -51365,6 +51420,7 @@
                 i1.RouterModule,
                 i1$1.CommonModule,
                 HeaderModule,
+                LayoutModule,
                 TooltipModule
             ]] });
     (function () {
@@ -51378,6 +51434,7 @@
                 CommonSettingsComponent], imports: [i1.RouterModule,
                 i1$1.CommonModule,
                 HeaderModule,
+                LayoutModule,
                 TooltipModule], exports: [SettingsComponent,
                 SettingsFormDirective,
                 SettingsFooterComponent,
@@ -51395,6 +51452,7 @@
                             i1.RouterModule,
                             i1$1.CommonModule,
                             HeaderModule,
+                            LayoutModule,
                             TooltipModule
                         ],
                         exports: [
@@ -51818,7 +51876,7 @@
          *
          * @param wizard the wizard component instance.
          */
-        function WizardNavigationInformation(wizard) {
+        function WizardNavigationInformation(wizard, wizardBuilder) {
             /**
              * The history of navigation of stage and step.
              */
@@ -51828,6 +51886,7 @@
              */
             this.initialized = false;
             this.wizard = wizard;
+            this.wizardBuilder = wizardBuilder;
         }
         Object.defineProperty(WizardNavigationInformation.prototype, "navigationHistory", {
             /**
@@ -52000,6 +52059,59 @@
             }
             return 0;
         };
+        /**
+         * Creates a new WizardStep, and adds it to the specified WizardStage.
+         * If the specified WizardStage does not exist, it will be created.
+         *
+         * @param stepName - The name for the new WizardStep.
+         * @param stepComponentType - The componentType for the new WizardStep.
+         * @param stageName - The name of the WizardStage in which this new WizardStep should be added.
+         */
+        WizardNavigationInformation.prototype.addStepInStage = function (stepName, stepComponentType, stageName) {
+            this.wizardBuilder.addStepInStage(stepName, stepComponentType, stageName);
+        };
+        /**
+         * Creates a new WizardStep, and adds it to the specified WizardStage at the specified index.
+         * If the specified WizardStage does not exist, it will be created.
+         *
+         * @param stepName - The name for the new WizardStep.
+         * @param stepComponentType - The componentType for the new WizardStep.
+         * @param stageName - The name of the WizardStage in which this new WizardStep should be added.
+         * @param index - The step index to insert step (will increase index of existing step at given index by 1 if any)
+         */
+        WizardNavigationInformation.prototype.addStepInStageByIndex = function (stepName, stepComponentType, stageName, index) {
+            this.wizardBuilder.addStepInStageByIndex(stepName, stepComponentType, stageName, index);
+        };
+        /**
+         * Removes WizardStep at specified index in specified stage.
+         * If the specified stage or index does not exist, false will be returned.
+         *
+         * @param stageName - The name of the Wizard stage in which to remove the step.
+         * @param index - The step index to be removed (will decrease indices of proceeding steps)
+         * @returns - True if step is removed successfully, false otherwise.
+         */
+        WizardNavigationInformation.prototype.removeStepInStageByIndex = function (stageName, index) {
+            return this.wizardBuilder.removeStepInStageByIndex(stageName, index);
+        };
+        /**
+         * Creates a new WizardStage at the specified index.
+         *
+         * @param stageName - The Name for the new WizardStage
+         * @param index - The stage index to insert stage (will increase index of existing stage at given index by 1 if any)
+         */
+        WizardNavigationInformation.prototype.addStageByIndex = function (stageName, index) {
+            this.wizardBuilder.addStageByIndex(stageName, index);
+        };
+        /**
+         * Clears all steps from given stage.
+         * If the specified stage does not exist, false will be returned.
+         *
+         * @param stageName - The name of the Wizard stage to clear steps from.
+         * @returns - True if stage is cleared successfully, false otherwise.
+         */
+        WizardNavigationInformation.prototype.clearStage = function (stageName) {
+            return this.wizardBuilder.clearStage(stageName);
+        };
         return WizardNavigationInformation;
     }());
     WizardNavigationInformation.NoStageNoStep = -1;
@@ -52304,7 +52416,6 @@
                 message: _this.strings.MsftSmeShell.Angular.Wizard.disabledStepAlert,
             };
             _this.modelChange = new i0.EventEmitter();
-            _this.navigationInformation = new WizardNavigationInformation(_this);
             _this.isExpanded = true;
             return _this;
         }
@@ -52569,6 +52680,9 @@
             }
             else if (!this.onLastStage) {
                 this.stageIndex++;
+                while (this.stages[this.stageIndex].steps.length === 0) {
+                    this.stageIndex++;
+                }
                 this.stepIndex = 0;
             }
             this.emitStepChanged();
@@ -52595,6 +52709,9 @@
                 if (this.stageIndex !== 0) {
                     this.stages[this.stageIndex].active = false;
                     this.stageIndex--;
+                    while (this.stages[this.stageIndex].steps.length === 0) {
+                        this.stageIndex--;
+                    }
                     this.stepIndex = this.stages[this.stageIndex].steps.length - 1;
                     this.stages[this.stageIndex].completed = false;
                 }
@@ -52619,6 +52736,7 @@
          */
         WizardComponent.prototype.ngOnInit = function () {
             var _this = this;
+            this.navigationInformation = new WizardNavigationInformation(this, this.wizardBuilder);
             this.stages = this.wizardBuilder.stages;
             this.heading = this.wizardBuilder.heading;
             this.exitButtonTitle = this.wizardBuilder.exitButtonTitle;
@@ -53368,6 +53486,75 @@
                 this.stages.push(new WizardStage({ name: stageName, steps: [step] }));
             }
         };
+        /**
+         * Creates a new WizardStep, and adds it to the specified WizardStage at the specified index.
+         * If the specified WizardStage does not exist, it will be created.
+         *
+         * @param stepName - The name for the new WizardStep.
+         * @param stepComponentType - The componentType for the new WizardStep.
+         * @param stageName - The name of the WizardStage in which this new WizardStep should be added.
+         * @param index - The step index to insert step (will increase index of existing step at given index by 1 if any)
+         */
+        WizardBuilder.prototype.addStepInStageByIndex = function (stepName, stepComponentType, stageName, index) {
+            var step = new WizardStep(stepComponentType, { name: stepName });
+            var existingStage = this.stages.find(function (eachStage) { return eachStage.name === stageName; });
+            if (existingStage) {
+                if (index > existingStage.steps.length - 1) {
+                    existingStage.steps.push(step);
+                }
+                else {
+                    existingStage.steps.splice(index, 0, step);
+                }
+            }
+            else {
+                this.stages.push(new WizardStage({ name: stageName, steps: [step] }));
+            }
+        };
+        /**
+         * Removes WizardStep at specified index in specified stage.
+         * If the specified stage or index does not exist, false will be returned.
+         *
+         * @param stageName - The name of the Wizard stage in which to remove the step.
+         * @param index - The step index to be removed (will decrease indices of proceeding steps)
+         * @returns - True if step is removed successfully, false otherwise.
+         */
+        WizardBuilder.prototype.removeStepInStageByIndex = function (stageName, index) {
+            var stage = this.stages.find(function (eachStage) { return eachStage.name === stageName; });
+            if (stage && index < stage.steps.length) {
+                stage.steps.splice(index, 1);
+                return true;
+            }
+            return false;
+        };
+        /**
+         * Creates a new WizardStage at the specified index.
+         *
+         * @param stageName - The Name for the new WizardStage
+         * @param index - The stage index to insert stage (will increase index of existing stage at given index by 1 if any)
+         */
+        WizardBuilder.prototype.addStageByIndex = function (stageName, index) {
+            if (index > this.stages.length - 1) {
+                this.stages.push(new WizardStage({ name: stageName, steps: [] }));
+            }
+            else {
+                this.stages.splice(index, 0, new WizardStage({ name: stageName, steps: [] }));
+            }
+        };
+        /**
+         * Clears all steps from given stage.
+         * If the specified stage does not exist, false will be returned.
+         *
+         * @param stageName - The name of the Wizard stage to clear steps from.
+         * @returns - True if stage is cleared successfully, false otherwise.
+         */
+        WizardBuilder.prototype.clearStage = function (stageName) {
+            var stage = this.stages.find(function (eachStage) { return eachStage.name === stageName; });
+            if (stage) {
+                stage.steps = [];
+                return true;
+            }
+            return false;
+        };
         /**
          * Creates a new WizardStep for the Finish view using the component specified.
          */
@@ -55138,6 +55325,9 @@
      * Generated bundle index. Do not edit.
      */
+    exports.AccordionComponent = AccordionComponent;
+    exports.AccordionModule = AccordionModule;
+    exports.AccordionPanelComponent = AccordionPanelComponent;
     exports.ActionBarComponent = ActionBarComponent;
     exports.ActionBarDirective = ActionBarDirective;
     exports.ActionButton = ActionButton;
@@ -55360,6 +55550,7 @@
     exports.OrderedListFormFieldLoaderComponent = OrderedListFormFieldLoaderComponent;
     exports.PageAlertBarComponent = PageAlertBarComponent;
     exports.PageAlertBarModule = PageAlertBarModule;
+    exports.PanelControlComponent = PanelControlComponent;
     exports.PasswordFormFieldLoaderComponent = PasswordFormFieldLoaderComponent;
     exports.PivotComponent = PivotComponent;
     exports.PivotModule = PivotModule;