@microsoft/windows-admin-center-sdk 2.508.0 → 2.510.1

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

@@ -9821,6 +9821,479 @@
                 }] });
     })();
 
+    (function (SmeResponsiveWindowBreakpointsValue) {
+        SmeResponsiveWindowBreakpointsValue[SmeResponsiveWindowBreakpointsValue["Reflow"] = 399.98] = "Reflow";
+        SmeResponsiveWindowBreakpointsValue[SmeResponsiveWindowBreakpointsValue["PhoneDown"] = 767.98] = "PhoneDown";
+        SmeResponsiveWindowBreakpointsValue[SmeResponsiveWindowBreakpointsValue["PhoneUp"] = Number.MAX_SAFE_INTEGER] = "PhoneUp";
+    })(exports.SmeResponsiveWindowBreakpointsValue || (exports.SmeResponsiveWindowBreakpointsValue = {}));
+    (function (SmeResponsiveWindowBreakpoints) {
+        SmeResponsiveWindowBreakpoints["Reflow"] = "Reflow";
+        SmeResponsiveWindowBreakpoints["PhoneDown"] = "PhoneDown";
+        SmeResponsiveWindowBreakpoints["PhoneUp"] = "PhoneUp";
+    })(exports.SmeResponsiveWindowBreakpoints || (exports.SmeResponsiveWindowBreakpoints = {}));
+    // tslint:disable-next-line: directive-class-suffix
+    var SmeResponsiveWindowManagerComponent = /** @class */ (function () {
+        /**
+         * The manager supports layout component and in the meantime listening to the window size change event.
+         * @param layout the layout component.
+         */
+        function SmeResponsiveWindowManagerComponent(layout) {
+            var _this = this;
+            this.layout = layout;
+            /**
+             * It defines whether the current window size is for super small window.
+             */
+            this.internalReflowMode = false;
+            /**
+             * It defines whether the current window size is phone down.
+             */
+            this.internalPhoneDown = false;
+            /**
+             * It defines whether the current window size is phone up.
+             */
+            this.internalPhoneUp = false;
+            /**
+             * It defines whether the current solution/tool is using css v2 to support responsive window.
+             */
+            this.internalCssV2 = false;
+            /**
+             * The array for subscription.
+             */
+            this.subscriptions = [];
+            this.setIsCssV2Enabled();
+            if (this.layout) {
+                // on parent layout changes, re-emit the layout change to our event
+                this.subscriptions.push(layout.layoutChanged.subscribe((function () { return _this.onLayoutChanged(); })));
+                // on window break point changes, emit the event about critical classes and styling updates signal.
+                this.subscriptions.push(layout.windowBreakpointChanged.subscribe(function () { return _this.onWindowBreakpointChanged(); }));
+                this.deferredOnLayoutChanged();
+            }
+        }
+        Object.defineProperty(SmeResponsiveWindowManagerComponent.prototype, "responsiveWindowState", {
+            /**
+             * Gets the current window responsive state.
+             */
+            get: function () {
+                return this.internalResponsiveWindowMode;
+            },
+            /**
+             * Sets the current window responsive state.
+             */
+            set: function (input) {
+                var _a;
+                var prevResponsiveWindowState = this.internalResponsiveWindowMode;
+                this.internalResponsiveWindowMode = input;
+                if (prevResponsiveWindowState !== this.internalResponsiveWindowMode) {
+                    (_a = this.layout) === null || _a === void 0 ? void 0 : _a.windowBreakpointChanged.emit();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SmeResponsiveWindowManagerComponent.prototype, "cssV2", {
+            /**
+             * Gets the value indicating whether css v2 should be used.
+             */
+            get: function () {
+                return this.internalCssV2;
+            },
+            /**
+             * It sets the value for whether the current tool/solution is using css v2 for window responsiveness.
+             */
+            set: function (input) {
+                this.internalCssV2 = !!input;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SmeResponsiveWindowManagerComponent.prototype, "phoneDown", {
+            /**
+             * Gets the phone down mode.
+             */
+            get: function () {
+                return this.internalPhoneDown;
+            },
+            /**
+             * Sets the phone down mode.
+             */
+            set: function (input) {
+                this.internalPhoneDown = !!input;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SmeResponsiveWindowManagerComponent.prototype, "phoneUp", {
+            /**
+             * Gets the phone up mode.
+             */
+            get: function () {
+                return this.internalPhoneUp;
+            },
+            /**
+             * Set the phone up mode.
+             */
+            set: function (input) {
+                this.internalPhoneUp = !!input;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SmeResponsiveWindowManagerComponent.prototype, "reflowMode", {
+            /**
+             * Gets the reflow mode.
+             */
+            get: function () {
+                return this.internalReflowMode;
+            },
+            /**
+             * Sets the reflow mode.
+             */
+            set: function (input) {
+                this.internalReflowMode = !!input;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SmeResponsiveWindowManagerComponent.prototype, "width", {
+            /**
+             * Gets the width of the window from the window object.
+             * Should only be called on layout or window size change.
+             */
+            get: function () {
+                return window === null || window === void 0 ? void 0 : window.innerWidth;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SmeResponsiveWindowManagerComponent.prototype, "height", {
+            /**
+             * Gets the height of the window from the window object.
+             * Should only be called on layout or window size change.
+             */
+            get: function () {
+                return window === null || window === void 0 ? void 0 : window.innerHeight;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SmeResponsiveWindowManagerComponent.prototype, "prevSize", {
+            /**
+             * Gets the last known window responsive data.
+             */
+            get: function () {
+                var _a, _b;
+                if (((_a = this.internalPrevSize) === null || _a === void 0 ? void 0 : _a.width) === this.width && ((_b = this.internalPrevSize) === null || _b === void 0 ? void 0 : _b.height) === this.height) {
+                    return this.internalPrevSize;
+                }
+                else {
+                    return this.getSmeResponsiveWindowData();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SmeResponsiveWindowManagerComponent.prototype, "size", {
+            /**
+             * Gets the window responsive break points.
+             */
+            get: function () {
+                var width = this.width;
+                if (width <= exports.SmeResponsiveWindowBreakpointsValue.Reflow) {
+                    this.reflowMode = true;
+                    this.phoneDown = false;
+                    this.phoneUp = false;
+                    this.responsiveWindowState = exports.SmeResponsiveWindowBreakpoints.Reflow;
+                }
+                else if (width <= exports.SmeResponsiveWindowBreakpointsValue.PhoneDown) {
+                    this.reflowMode = false;
+                    this.phoneDown = true;
+                    this.phoneUp = false;
+                    this.responsiveWindowState = exports.SmeResponsiveWindowBreakpoints.PhoneDown;
+                }
+                else {
+                    this.reflowMode = false;
+                    this.phoneDown = false;
+                    this.phoneUp = true;
+                    this.responsiveWindowState = exports.SmeResponsiveWindowBreakpoints.PhoneUp;
+                }
+                return this.responsiveWindowState;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * It sets whether the current solution/tool is using the css v2 for window responsiveness.
+         */
+        SmeResponsiveWindowManagerComponent.prototype.setIsCssV2Enabled = function () {
+            this.cssV2 = this.isUsingCssV2();
+        };
+        /**
+         * The implementation for checking whether the styles are being set.
+         * @returns true if the current tool/solution is using css v2 for window responsiveness.
+         */
+        SmeResponsiveWindowManagerComponent.prototype.isUsingCssV2 = function () {
+            var head = document.getElementsByTagName('head')[0];
+            var links = head.querySelectorAll('link');
+            var cssV2 = true;
+            // sme shell root would be containing style.css and either main.css or main-v2.css
+            // thus as long as it is not main.css, should be using css-v2
+            for (var i = 0; i < links.length; i++) {
+                var link = links[i];
+                if (link.href && link.href.includes('main.css')) {
+                    cssV2 = false;
+                    break;
+                }
+            }
+            return cssV2;
+        };
+        /**
+         * The functionality to update the core variables for window responsive data.
+         * @returns The SmeResponsiveWindowData object
+         */
+        SmeResponsiveWindowManagerComponent.prototype.getSmeResponsiveWindowData = function () {
+            // on window size or layout change, gets the width and height from the window object.
+            var width = this.width;
+            var height = this.height;
+            // based on the window size information, calculates the core paramters.
+            var size = this.size;
+            // the 3 gets above sets these following 3 parameters.
+            var reflowMode = this.reflowMode;
+            var phoneDown = this.phoneDown;
+            var phoneUp = this.phoneUp;
+            // sets the object and return.
+            this.internalPrevSize = {
+                width: width,
+                height: height,
+                size: size,
+                reflowMode: reflowMode,
+                phoneDown: phoneDown,
+                phoneUp: phoneUp
+            };
+            return this.internalPrevSize;
+        };
+        /**
+         * On layout changed event handler, occurs every time the layout has been changed.
+         */
+        SmeResponsiveWindowManagerComponent.prototype.onLayoutChanged = function () {
+            this.getSmeResponsiveWindowData();
+        };
+        /**
+         * The deferred layout changed handler.
+         */
+        SmeResponsiveWindowManagerComponent.prototype.deferredOnLayoutChanged = function () {
+            this.onLayoutChanged();
+        };
+        /**
+         * To respond to a layout breakpoint changed event.
+         * @returns void
+         */
+        SmeResponsiveWindowManagerComponent.prototype.onWindowBreakpointChanged = function () {
+            return;
+        };
+        /**
+         * Gets the parent element by html tag. By default, go up 10 levels for enhanced performance.
+         * @param inputElement The input element.
+         * @returns The targeted html element get by the html tag
+         */
+        SmeResponsiveWindowManagerComponent.prototype.getParentElementByTag = function (inputElement, parentHtmlTags, levelExternal, customKeywords, untilTagName) {
+            if (parentHtmlTags === void 0) { parentHtmlTags = ['sme-pivot', 'sme-split-view', 'sme-settings-page']; }
+            if (levelExternal === void 0) { levelExternal = 10; }
+            if (!inputElement) {
+                return undefined;
+            }
+            var level = levelExternal;
+            var found = false;
+            var parent = inputElement;
+            while (level > 0 && !found) {
+                if (parent) {
+                    parent = parent.parentElement;
+                }
+                var parentTagName = parent === null || parent === void 0 ? void 0 : parent.tagName.toLocaleLowerCase();
+                if (untilTagName) {
+                    if (parentTagName === untilTagName.toLowerCase()) {
+                        return undefined;
+                    }
+                }
+                if (parentHtmlTags.includes(parentTagName) || (customKeywords !== undefined && (parentTagName === null || parentTagName === void 0 ? void 0 : parentTagName.includes(customKeywords)))) {
+                    found = true;
+                    return parent;
+                }
+                level -= 1;
+            }
+            return undefined;
+        };
+        /**
+         * The core algorithm for adding and removing classes based on window size and window size settings.
+         * @param settings the settings object
+         * @param curSettings the current setting
+         * @param element the html element for setting up classes.
+         * @returns void.
+         */
+        SmeResponsiveWindowManagerComponent.prototype.updateClassArrayOnWindowSize = function (settings, curSettings, element) {
+            if (!settings) {
+                return;
+            }
+            settings = JSON.parse(JSON.stringify(settings));
+            var phoneDown = JSON.parse(JSON.stringify(settings.phoneDown));
+            var phoneUp = JSON.parse(JSON.stringify(settings.phoneUp));
+            var reflow = JSON.parse(JSON.stringify(settings.reflow));
+            var toBeRemovedClassList = [];
+            var toBeAddedClassList = [];
+            switch (curSettings) {
+                case 'phoneUp':
+                    toBeAddedClassList = phoneUp;
+                    toBeRemovedClassList = phoneDown;
+                    toBeRemovedClassList = this.uniqueArray(toBeRemovedClassList, reflow);
+                    break;
+                case 'phoneDown':
+                    toBeAddedClassList = phoneDown;
+                    toBeRemovedClassList = phoneUp;
+                    toBeRemovedClassList = this.uniqueArray(toBeRemovedClassList, reflow);
+                    break;
+                case 'reflow':
+                    toBeAddedClassList = reflow;
+                    toBeRemovedClassList = phoneDown;
+                    toBeRemovedClassList = this.uniqueArray(toBeRemovedClassList, phoneUp);
+                    break;
+            }
+            toBeRemovedClassList = this.removeExistedItem(toBeRemovedClassList, toBeAddedClassList);
+            for (var i = 0; i < toBeRemovedClassList.length; i++) {
+                if (element.classList.contains(toBeRemovedClassList[i])) {
+                    element.classList.remove(toBeRemovedClassList[i]);
+                }
+            }
+            for (var i = 0; i < toBeAddedClassList.length; i++) {
+                if (!element.classList.contains(toBeAddedClassList[i])) {
+                    element.classList.add(toBeAddedClassList[i]);
+                }
+            }
+        };
+        /**
+         * Merge two arrays with unique items.
+         * @param arrayA the input array A
+         * @param arrayB the input array B
+         * @returns an array that contains unique items from array A and array B
+         */
+        SmeResponsiveWindowManagerComponent.prototype.uniqueArray = function (arrayA, arrayB) {
+            if (arrayB && arrayB.length) {
+                for (var i = 0; i < arrayB.length; i++) {
+                    if (!arrayA.includes(arrayB[i])) {
+                        arrayA.push(arrayB[i]);
+                    }
+                }
+            }
+            return arrayA;
+        };
+        /**
+         * Guarantees will not remove the classes that needs to be added.
+         * @param toBeRemovedClassList the list of classes that needs to be removed.
+         * @param toBeAddedClassList the list of classes that needs to be added.
+         * @returns the list of classes that needs to be removed and doesn't overlap with the classes that needs to be added.
+         */
+        SmeResponsiveWindowManagerComponent.prototype.removeExistedItem = function (toBeRemovedClassList, toBeAddedClassList) {
+            if (!toBeAddedClassList || !toBeAddedClassList.length) {
+                return toBeRemovedClassList;
+            }
+            if (!toBeRemovedClassList || !toBeRemovedClassList.length) {
+                return [];
+            }
+            var res = [];
+            for (var i = 0; i < toBeRemovedClassList.length; i++) {
+                if (!toBeAddedClassList.includes(toBeRemovedClassList[i])) {
+                    res.push(toBeRemovedClassList[i]);
+                }
+            }
+            return res;
+        };
+        return SmeResponsiveWindowManagerComponent;
+    }());
+    /** @nocollapse */ SmeResponsiveWindowManagerComponent.ɵfac = function SmeResponsiveWindowManagerComponent_Factory(t) { return new (t || SmeResponsiveWindowManagerComponent)(i0.ɵɵdirectiveInject(SME_LAYOUT_PROVIDER)); };
+    /** @nocollapse */ SmeResponsiveWindowManagerComponent.ɵdir = i0.ɵɵdefineDirective({ type: SmeResponsiveWindowManagerComponent });
+    __decorate([
+        debounce_decorators.Debounce(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], SmeResponsiveWindowManagerComponent.prototype, "deferredOnLayoutChanged", null);
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SmeResponsiveWindowManagerComponent, [{
+                type: i0.Directive
+            }], function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [SME_LAYOUT_PROVIDER]
+                        }] }];
+        }, { deferredOnLayoutChanged: [] });
+    })();
+
+    (function (LayoutItemConfigPropertyWidthType) {
+        LayoutItemConfigPropertyWidthType["Percentage"] = "Percentage";
+        LayoutItemConfigPropertyWidthType["Number"] = "Number";
+    })(exports.LayoutItemConfigPropertyWidthType || (exports.LayoutItemConfigPropertyWidthType = {}));
+    (function (LayoutItemConfigMode) {
+        LayoutItemConfigMode["Default"] = "Default";
+        LayoutItemConfigMode["Custom"] = "Custom";
+    })(exports.LayoutItemConfigMode || (exports.LayoutItemConfigMode = {}));
+    (function (LayoutDrivenType) {
+        LayoutDrivenType["Default"] = "Default";
+        LayoutDrivenType["ResponsiveWindowManager"] = "ResponsiveWindowManager";
+    })(exports.LayoutDrivenType || (exports.LayoutDrivenType = {}));
+    /**
+     * The layout config generator.
+     *
+     * It determines the configurable width for the layout item.
+     * Usage:
+     *
+     * const layoutConfigGenerator = new LayoutConfigGenerator();
+     * layoutConfigGenerator.initialize([20, '100'])
+     *
+     * type number is used for pixel.
+     * type string is used for percentage.
+     */
+    var LayoutConfigGenerator = /** @class */ (function () {
+        function LayoutConfigGenerator() {
+        }
+        /**
+         * It initialized the layout configs for the layout component.
+         *
+         * @param phoneUp the layout config array for phone-up
+         * @param phoneDown the layout config array for phone-down
+         * @param reflow the layout config array for reflow
+         * @returns
+         */
+        LayoutConfigGenerator.prototype.initialize = function (phoneUp, phoneDown, reflow) {
+            var layoutConfig = {};
+            this.parseConfig(layoutConfig, phoneUp, exports.SmeResponsiveWindowBreakpoints.PhoneUp);
+            this.parseConfig(layoutConfig, phoneDown, exports.SmeResponsiveWindowBreakpoints.PhoneDown);
+            this.parseConfig(layoutConfig, reflow, exports.SmeResponsiveWindowBreakpoints.Reflow);
+            console.log(layoutConfig);
+            return layoutConfig;
+        };
+        LayoutConfigGenerator.prototype.parseConfig = function (layoutConfig, config, smeResponsiveWindowBreakpoints) {
+            if (!config) {
+                layoutConfig[smeResponsiveWindowBreakpoints] = {
+                    mode: exports.LayoutItemConfigMode.Default
+                };
+            }
+            else {
+                layoutConfig[smeResponsiveWindowBreakpoints] = {
+                    mode: exports.LayoutItemConfigMode.Custom,
+                    config: []
+                };
+                for (var i = 0; i <= config.length; i++) {
+                    layoutConfig[smeResponsiveWindowBreakpoints].config.push({
+                        width: {
+                            type: typeof config[i] === 'string' ?
+                                exports.LayoutItemConfigPropertyWidthType.Percentage : exports.LayoutItemConfigPropertyWidthType.Number,
+                            value: typeof config[i] === 'string' ? parseFloat(config[i]) : config[i]
+                        }
+                    });
+                }
+            }
+        };
+        return LayoutConfigGenerator;
+    }());
+
     var LayoutDefinitionComponent = /** @class */ (function () {
         function LayoutDefinitionComponent() {
             this.until = Number.MAX_VALUE;
@@ -9913,11 +10386,11 @@
         return LayoutItemComponent;
     }(CoreBaseComponent));
     /** @nocollapse */ LayoutItemComponent.ɵfac = function LayoutItemComponent_Factory(t) { return new (t || LayoutItemComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
-    /** @nocollapse */ LayoutItemComponent.ɵcmp = i0.ɵɵdefineComponent({ type: LayoutItemComponent, selectors: [["sme-layout-item"]], hostVars: 6, hostBindings: function LayoutItemComponent_HostBindings(rf, ctx) {
+    /** @nocollapse */ LayoutItemComponent.ɵcmp = i0.ɵɵdefineComponent({ type: LayoutItemComponent, selectors: [["sme-layout-item"]], hostVars: 10, hostBindings: function LayoutItemComponent_HostBindings(rf, ctx) {
             if (rf & 2) {
-                i0.ɵɵstyleProp("width", ctx.width)("padding-right", ctx.paddingRight)("padding-bottom", ctx.paddingBottom);
+                i0.ɵɵstyleProp("width", ctx.width)("padding-right", ctx.paddingRight)("padding-bottom", ctx.paddingBottom)("flex", ctx.flex)("min-width", ctx.minWidth);
             }
-        }, inputs: { columnSpan: "columnSpan", caption: "caption", maxWidth: "maxWidth" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$e, decls: 2, vars: 1, consts: [["class", "sme-font-family-bold sme-border-bottom-sm sme-border-bottom-color-base-40 sme-padding-bottom-xs sme-margin-vertical-sm", 4, "ngIf"], [1, "sme-font-family-bold", "sme-border-bottom-sm", "sme-border-bottom-color-base-40", "sme-padding-bottom-xs", "sme-margin-vertical-sm"]], template: function LayoutItemComponent_Template(rf, ctx) {
+        }, inputs: { columnSpan: "columnSpan", caption: "caption", customConfig: "customConfig", maxWidth: "maxWidth" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$e, decls: 2, vars: 1, consts: [["class", "sme-font-family-bold sme-border-bottom-sm sme-border-bottom-color-base-40 sme-padding-bottom-xs sme-margin-vertical-sm", 4, "ngIf"], [1, "sme-font-family-bold", "sme-border-bottom-sm", "sme-border-bottom-color-base-40", "sme-padding-bottom-xs", "sme-margin-vertical-sm"]], template: function LayoutItemComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵprojectionDef();
                 i0.ɵɵtemplate(0, LayoutItemComponent_div_0_Template, 2, 1, "div", 0);
@@ -9943,15 +10416,45 @@
                 }], paddingBottom: [{
                     type: i0.HostBinding,
                     args: ['style.paddingBottom']
+                }], flex: [{
+                    type: i0.HostBinding,
+                    args: ['style.flex']
+                }], minWidth: [{
+                    type: i0.HostBinding,
+                    args: ['style.min-width']
                 }], columnSpan: [{
                     type: i0.Input
                 }], caption: [{
                     type: i0.Input
+                }], customConfig: [{
+                    type: i0.Input
                 }], maxWidth: [{
                     type: i0.Input
                 }] });
     })();
 
+    var LayoutResponsiveWindowManager = /** @class */ (function (_super) {
+        __extends(LayoutResponsiveWindowManager, _super);
+        function LayoutResponsiveWindowManager() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.name = 'sme-layout';
+            return _this;
+        }
+        LayoutResponsiveWindowManager.prototype.onWindowSizeChanged = function () {
+            if (!this.cssV2) {
+                return;
+            }
+            // Can handle dynamic configuration, custom styling on different size of the window later on.
+        };
+        return LayoutResponsiveWindowManager;
+    }(SmeResponsiveWindowManagerComponent));
+    __decorate([
+        yield_decorator.Yield(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], LayoutResponsiveWindowManager.prototype, "onWindowSizeChanged", null);
+
     var _c0$f = [[["sme-layout-item"]]];
     var _c1$6 = ["sme-layout-item"];
     /**
@@ -9960,19 +10463,66 @@
     var LayoutComponent = /** @class */ (function (_super) {
         __extends(LayoutComponent, _super);
         function LayoutComponent(injector, layout) {
+            var _b;
             var _this = _super.call(this, injector) || this;
-            _this.layout = layout;
+            /**
+             * The default horizontal space in between layout items.
+             */
             _this.itemHorizontalSpace = 32;
+            /**
+             * The default vertical space in between layout items.
+             */
             _this.itemVerticalSpace = 32;
+            /**
+             * If true, will always try to fill the whole row for each layout item.
+             */
             _this.tryToFillWholeRow = true;
+            /**
+             * The layout definition.
+             */
             _this.definition = {};
+            /**
+             * If false, it will not assign extra paddings to the right for the last layout item.
+             */
             _this.padLastItem = false;
+            /**
+             * If true, not extra right padding when there is only one item that uses the whole width of the row.
+             */
             _this.noExtraRightPaddingOneItemPerRow = true;
+            /**
+             * It determines whether the layout is for settings where it contains a left and right layout item.
+             * If true, will apply special design for settings layout.
+             * On phone-up, the left side navigation layout item will be using a fixed width by default 300px,
+             * the right side layout item will be using the remaining width by default.
+             *
+             * On phone-down or 400% zoom, nothing is different from the regular settings page,
+             * the left right layout will be transformed to top bottom layout.
+             */
+            _this.layoutConfig = (_b = {},
+                _b[exports.SmeResponsiveWindowBreakpoints.PhoneUp] = { 'mode': exports.LayoutItemConfigMode.Default },
+                _b[exports.SmeResponsiveWindowBreakpoints.PhoneDown] = { 'mode': exports.LayoutItemConfigMode.Default },
+                _b[exports.SmeResponsiveWindowBreakpoints.Reflow] = { 'mode': exports.LayoutItemConfigMode.Default },
+                _b);
+            /**
+             * Implementation of the Layout interface
+             */
             _this.layoutChanged = new i0.EventEmitter();
-            _this.subscriptions.push(_this.layout.layoutChanged.subscribe(function () { return _this.onLayoutChanged(); }));
-            setTimeout(function () {
-                _this.updateLayout();
-            });
+            /**
+             * Implementation of the Layout interface
+             */
+            _this.windowBreakpointChanged = new i0.EventEmitter();
+            _this.columnCount = 1;
+            _this.columnSpanTotal = 0;
+            _this.layoutDrivenType = exports.LayoutDrivenType.Default;
+            _this.stylePixel = 'px';
+            if (layout) {
+                _this.layoutResponsiveWindowManager = new LayoutResponsiveWindowManager(layout);
+                // on parent layout changes, re-emit the layout change to our event
+                _this.subscriptions.push(layout.layoutChanged.subscribe((function () { return _this.onLayoutChanged(); })));
+                // on window break point changes, emit the event about critical classes and styling updates signal.
+                _this.subscriptions.push(layout.windowBreakpointChanged.subscribe(function () { return _this.onWindowBreakpointChanged(); }));
+                _this.deferredOnLayoutChanged();
+            }
             return _this;
         }
         Object.defineProperty(LayoutComponent.prototype, "logSourceName", {
@@ -9992,16 +10542,61 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(LayoutComponent.prototype, "currentLayoutDrivenType", {
+            get: function () {
+                return this.layoutDrivenType;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(LayoutComponent.prototype, "currentWindowBreakpoint", {
+            get: function () {
+                var _a;
+                return (_a = this.layoutResponsiveWindowManager) === null || _a === void 0 ? void 0 : _a.prevSize.size;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(LayoutComponent.prototype, "currentLayoutItems", {
+            get: function () {
+                return this.layoutItems;
+            },
+            enumerable: false,
+            configurable: true
+        });
         LayoutComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
             this.subscriptions.push(this.layoutItems.changes.subscribe(function () { return _this.onLayoutChanged(); }));
         };
+        /**
+         * The open API for refreshing the control externally.
+         */
+        LayoutComponent.prototype.refresh = function () {
+            this.resetFlex();
+            this.onLayoutChanged();
+        };
         /**
          * On layout changed event handler, occurs every time the layout has been changed.
          */
         LayoutComponent.prototype.onLayoutChanged = function () {
             this.updateLayout();
         };
+        /**
+         * The deferred layout changed handler.
+         */
+        LayoutComponent.prototype.deferredOnLayoutChanged = function () {
+            this.onLayoutChanged();
+        };
+        /**
+         * The on window breakpoint changed handler.
+         * Adding yield for component to get ElementRef after initialization.
+         */
+        LayoutComponent.prototype.onWindowBreakpointChanged = function () {
+            if (!this.layoutItems || !this.layoutItems.toArray()) {
+                return;
+            }
+            this.layoutResponsiveWindowManager.onWindowSizeChanged();
+        };
         // Adds classes listed to the root component
         // On phone down the flex start needs to be flex start to make sure no extra space being generated.
         LayoutComponent.prototype.getInitialHostClasses = function () {
@@ -10012,83 +10607,308 @@
         LayoutComponent.prototype.updateLayout = function () {
             var _this = this;
             setTimeout(function () {
-                var _a;
-                if (_this.layoutItems) {
-                    var layoutWidth = _this.hostElement.nativeElement.clientWidth || Number.MAX_VALUE;
-                    var columnCount = 1;
-                    var layoutItems = _this.layoutItems.toArray();
-                    var columnSpanTotal_1 = 0;
-                    layoutItems.forEach(function (item) { return columnSpanTotal_1 += item.columnSpan; });
+                if (!_this.layoutItems) {
+                    return;
+                }
+                var layoutItems = _this.layoutItems.toArray();
+                _this.getTotalColumnSpan(layoutItems);
+                var currentWindowSize = _this.layoutResponsiveWindowManager.prevSize.size;
+                _this.updateLayoutConfig(currentWindowSize);
+                var layoutWidth = _this.hostElement.nativeElement.clientWidth || Number.MAX_VALUE;
+                if (_this.layoutDrivenType === exports.LayoutDrivenType.Default) {
                     var definitions = _this.definitions.toArray().sort(function (a, b) { return a.until - b.until; });
                     var previousLayoutDefinition = _this.currentLayoutDefinition;
-                    _this.currentLayoutDefinition = undefined;
-                    for (var i = definitions.length - 1; i >= 0; i--) {
-                        var definitionColumns = definitions[i].columns;
-                        if (layoutWidth <= definitions[i].until || (_this.tryToFillWholeRow && columnSpanTotal_1 <= definitionColumns)) {
-                            columnCount = definitionColumns;
-                            _this.currentLayoutDefinition = definitions[i];
-                        }
-                    }
+                    _this.updateCurrentLayoutDefinition(definitions, layoutWidth);
                     var itemHorizontalSpacePercentage = Math.round(_this.itemHorizontalSpace * 100 / layoutWidth);
                     var columnCountModifier = _this.padLastItem ? 0 : 1;
-                    var availableLayoutWidthPercentage = 100 - itemHorizontalSpacePercentage * (columnCount - columnCountModifier);
-                    var percentageSoFar = 0;
-                    var columnIndex = 0;
-                    for (var i = 0; i < layoutItems.length; i++) {
-                        var percentage = 0;
-                        columnIndex += layoutItems[i].columnSpan;
-                        if (columnIndex === columnCount) {
-                            // If true, it means this layout item is the last one in the row.
-                            // It ensures the last one in the row use rest of the percentage.
-                            // Example: If it's a 3 column layout, the last one's percentage is 33.34%, not 33.33%
-                            percentage = 100 - percentageSoFar;
+                    var availableLayoutWidthPercentage = 100 - itemHorizontalSpacePercentage * (_this.columnCount - columnCountModifier);
+                    _this.layoutDefinitionWithColumnSpanCalculation(layoutItems, availableLayoutWidthPercentage, itemHorizontalSpacePercentage);
+                    if (previousLayoutDefinition !== _this.currentLayoutDefinition) {
+                        setTimeout(function () {
+                            _this.layoutChanged.emit();
+                        });
+                    }
+                }
+                else if (_this.layoutDrivenType === exports.LayoutDrivenType.ResponsiveWindowManager) {
+                    var availableLayoutWidthInPixel = layoutWidth - _this.itemHorizontalSpace;
+                    availableLayoutWidthInPixel = availableLayoutWidthInPixel > 0 ? availableLayoutWidthInPixel : 0;
+                    if (availableLayoutWidthInPixel <= 0) {
+                        return;
+                    }
+                    _this.configDrivenCalculation(layoutItems, availableLayoutWidthInPixel);
+                }
+            });
+        };
+        LayoutComponent.prototype.updateLayoutConfig = function (currentWindowSize) {
+            if (!currentWindowSize) {
+                this.layoutDrivenType = exports.LayoutDrivenType.Default;
+                return;
+            }
+            var phoneUp = this.layoutConfig.PhoneUp;
+            var phoneDown = this.layoutConfig.PhoneDown;
+            var reflow = this.layoutConfig.Reflow;
+            if (!phoneUp || !phoneDown || !reflow) {
+                logging.Logging.log({
+                    level: logLevel.LogLevel.Debug,
+                    message: 'Invalid layout config has been passed in',
+                    source: 'DataTableComponent.onContentTablePressed'
+                });
+                var defaultMode = { 'mode': exports.LayoutItemConfigMode.Default };
+                if (!phoneUp) {
+                    this.layoutConfig.PhoneUp = defaultMode;
+                }
+                if (!phoneDown) {
+                    this.layoutConfig.PhoneDown = defaultMode;
+                }
+                if (!reflow) {
+                    this.layoutConfig.Reflow = defaultMode;
+                }
+            }
+            var currentConfig = this.layoutConfig[currentWindowSize];
+            if (currentConfig.mode === exports.LayoutItemConfigMode.Default) {
+                this.setLayoutDrivenType(exports.LayoutDrivenType.Default);
+            }
+            else if (currentConfig.mode === exports.LayoutItemConfigMode.Custom && currentConfig.config && currentConfig.config.length) {
+                this.setLayoutDrivenType(exports.LayoutDrivenType.ResponsiveWindowManager);
+                this.currentLayoutItemConfig = currentConfig.config;
+            }
+        };
+        LayoutComponent.prototype.resetFlex = function () {
+            var layoutItems = this.layoutItems.toArray();
+            for (var i = 0; i < layoutItems.length; i++) {
+                var layoutItem = layoutItems[i];
+                if (layoutItem.flex) {
+                    layoutItem.flex = undefined;
+                }
+            }
+        };
+        LayoutComponent.prototype.setLayoutDrivenType = function (layoutDrivenType) {
+            if (this.layoutDrivenType === exports.LayoutDrivenType.ResponsiveWindowManager && layoutDrivenType === exports.LayoutDrivenType.Default) {
+                this.resetFlex();
+            }
+            this.layoutDrivenType = layoutDrivenType;
+        };
+        LayoutComponent.prototype.getTotalColumnSpan = function (layoutItems) {
+            var _this = this;
+            this.columnSpanTotal = 0;
+            layoutItems.forEach(function (item) { return _this.columnSpanTotal += item.columnSpan; });
+        };
+        LayoutComponent.prototype.updateCurrentLayoutDefinition = function (definitions, layoutWidth) {
+            this.currentLayoutDefinition = undefined;
+            for (var i = definitions.length - 1; i >= 0; i--) {
+                var definitionColumns = definitions[i].columns;
+                if (layoutWidth <= definitions[i].until || (this.tryToFillWholeRow && this.columnSpanTotal <= definitionColumns)) {
+                    this.columnCount = definitionColumns;
+                    this.currentLayoutDefinition = definitions[i];
+                }
+            }
+        };
+        LayoutComponent.prototype.layoutDefinitionWithColumnSpanCalculation = function (layoutItems, availableLayoutWidthPercentage, itemHorizontalSpacePercentage) {
+            var _a;
+            var percentageSoFar = 0;
+            var columnIndex = 0;
+            for (var i = 0; i < layoutItems.length; i++) {
+                var percentage = 0;
+                columnIndex += layoutItems[i].columnSpan;
+                if (columnIndex === this.columnCount) {
+                    // If true, it means this layout item is the last one in the row.
+                    // It ensures the last one in the row use rest of the percentage.
+                    // Example: If it's a 3 column layout, the last one's percentage is 33.34%, not 33.33%
+                    percentage = 100 - percentageSoFar;
+                    percentageSoFar = 0;
+                    // 1 column and 1 layout item.
+                    if (columnIndex === 1 && this.columnCount === 1 && !this.noExtraRightPaddingOneItemPerRow) {
+                        layoutItems[i].paddingRight = '0px';
+                    }
+                    else {
+                        layoutItems[i].paddingRight = this.padLastItem ? this.itemHorizontalSpace + this.stylePixel : '0' + this.stylePixel;
+                    }
+                    columnIndex = 0;
+                }
+                else {
+                    var columnPercentage = Math.round(availableLayoutWidthPercentage * 100 / this.columnCount) / 100;
+                    percentage = layoutItems[i].columnSpan * (columnPercentage + itemHorizontalSpacePercentage);
+                    percentageSoFar += percentage;
+                    if (percentageSoFar > 100) {
+                        // put item on next row if it is too big
+                        if (percentage > 100) {
+                            percentage = 100;
+                        }
+                        percentageSoFar = 0;
+                        columnIndex = 0;
+                        layoutItems[i].paddingRight = this.padLastItem ? this.itemHorizontalSpace + this.stylePixel : '0' + this.stylePixel;
+                    }
+                    else {
+                        layoutItems[i].paddingRight = this.itemHorizontalSpace + this.stylePixel;
+                    }
+                }
+                if ((_a = this === null || this === void 0 ? void 0 : this.currentLayoutDefinition) === null || _a === void 0 ? void 0 : _a.addBottomPadding) {
+                    layoutItems[i].paddingBottom = this.itemVerticalSpace + this.stylePixel;
+                }
+                else {
+                    // If bottom padding already exists and currentLayoutDefinition.addBottomPadding is False
+                    // Remove the bottom padding.
+                    if (layoutItems[i].paddingBottom === this.itemVerticalSpace + this.stylePixel) {
+                        layoutItems[i].paddingBottom = '0' + this.stylePixel;
+                    }
+                }
+                layoutItems[i].width = percentage + '%';
+                layoutItems[i].ready();
+            }
+        };
+        LayoutComponent.prototype.configDrivenCalculation = function (layoutItems, availableLayoutWidthInPixel) {
+            var isHybridMode = this.updateCustomConfig(layoutItems);
+            if (isHybridMode) {
+                this.configDrivenCalculationHybrid(layoutItems, availableLayoutWidthInPixel);
+            }
+            else {
+                this.configDrivenCalculationDefault(layoutItems, availableLayoutWidthInPixel);
+            }
+        };
+        /**
+         * It deal with configurations that only has either percentage or number.
+         * Aiming at performance optimization.
+         *
+         * @param layoutItems The layout item object array
+         * @param availableLayoutWidthInPixel available width in pixel horizontally.
+         */
+        LayoutComponent.prototype.configDrivenCalculationDefault = function (layoutItems, availableLayoutWidthInPixel) {
+            var defaultWidthForLayoutItemInPixel = 200;
+            var widthUsedInPixel = 0;
+            var percentageSoFar = 0;
+            for (var i = 0; i < layoutItems.length; i++) {
+                if (layoutItems[i].customConfig.width) {
+                    var widthObject = layoutItems[i].customConfig.width;
+                    var remainingWidthInPixel = availableLayoutWidthInPixel - widthUsedInPixel;
+                    if (widthObject.type === exports.LayoutItemConfigPropertyWidthType.Percentage) {
+                        if (widthObject.value > 100 || widthObject.value < 0) {
+                            widthObject.value = 100;
+                        }
+                        var percentage = widthObject.value;
+                        percentageSoFar += percentage;
+                        var paddingRight = this.itemHorizontalSpace;
+                        layoutItems[i].paddingRight = paddingRight.toString().concat(this.stylePixel);
+                        layoutItems[i].width = percentage + '%';
+                        if (percentageSoFar > 100) {
                             percentageSoFar = 0;
-                            // 1 column and 1 layout item.
-                            if (columnIndex === 1 && columnCount === 1 && !_this.noExtraRightPaddingOneItemPerRow) {
-                                layoutItems[i].paddingRight = '0px';
-                            }
-                            else {
-                                layoutItems[i].paddingRight = _this.padLastItem ? _this.itemHorizontalSpace + 'px' : '0px';
-                            }
-                            columnIndex = 0;
+                        }
+                    }
+                    else if (widthObject.type === exports.LayoutItemConfigPropertyWidthType.Number) {
+                        if (widthObject.value < 0) {
+                            widthObject.value =
+                                defaultWidthForLayoutItemInPixel <= remainingWidthInPixel ?
+                                    defaultWidthForLayoutItemInPixel : remainingWidthInPixel;
+                        }
+                        widthUsedInPixel += widthObject.value;
+                        // how to determine if it is the last item in a row?
+                        var paddingRight = this.itemHorizontalSpace;
+                        widthUsedInPixel += paddingRight;
+                        layoutItems[i].paddingRight = paddingRight.toString().concat(this.stylePixel);
+                        layoutItems[i].width = widthObject.value + this.stylePixel;
+                    }
+                    else {
+                        logging.Logging.log({
+                            level: logLevel.LogLevel.Debug,
+                            message: 'Invalid width',
+                            source: 'LayoutComponent.configDrivenCalculationDefault'
+                        });
+                    }
+                }
+                else {
+                    logging.Logging.log({
+                        level: logLevel.LogLevel.Debug,
+                        message: 'Invalid width',
+                        source: 'LayoutComponent.configDrivenCalculationDefault'
+                    });
+                }
+                layoutItems[i].ready();
+            }
+        };
+        /**
+         * It deal with configurations that only has both percentage and number.
+         * Aiming at performance optimization.
+         *
+         * @param layoutItems The layout item object array
+         * @param availableLayoutWidthInPixel available width in pixel horizontally.
+         */
+        LayoutComponent.prototype.configDrivenCalculationHybrid = function (layoutItems, availableLayoutWidthInPixel) {
+            var defaultWidthForLayoutItemInPixel = 200;
+            var widthUsedInPixel = 0;
+            for (var i = 0; i < layoutItems.length; i++) {
+                if (layoutItems[i].customConfig.width) {
+                    var widthObject = layoutItems[i].customConfig.width;
+                    var remainingWidthInPixel = availableLayoutWidthInPixel - widthUsedInPixel;
+                    if (widthObject.type === exports.LayoutItemConfigPropertyWidthType.Percentage) {
+                        if (widthObject.value > 100 || widthObject.value < 0) {
+                            widthObject.value = 100;
+                        }
+                        // how to determine if it is the last item in a row?
+                        var paddingRight = this.itemHorizontalSpace;
+                        widthUsedInPixel += paddingRight;
+                        layoutItems[i].paddingRight = paddingRight.toString().concat(this.stylePixel);
+                        var potentialWidthInPixel = (widthObject.value / 100) * remainingWidthInPixel;
+                        if (potentialWidthInPixel === 0) {
+                            widthUsedInPixel = 0;
+                            widthUsedInPixel += paddingRight;
+                            potentialWidthInPixel = (widthObject.value / 100) * (availableLayoutWidthInPixel - widthUsedInPixel);
                         }
                         else {
-                            var columnPercentage = Math.round(availableLayoutWidthPercentage * 100 / columnCount) / 100;
-                            percentage = layoutItems[i].columnSpan * (columnPercentage + itemHorizontalSpacePercentage);
-                            percentageSoFar += percentage;
-                            if (percentageSoFar > 100) {
-                                // put item on next row if it is too big
-                                if (percentage > 100) {
-                                    percentage = 100;
-                                }
-                                percentageSoFar = 0;
-                                columnIndex = 0;
-                                layoutItems[i].paddingRight = _this.padLastItem ? _this.itemHorizontalSpace + 'px' : '0px';
+                            if (potentialWidthInPixel >= remainingWidthInPixel) {
+                                potentialWidthInPixel = remainingWidthInPixel;
+                                // resets the used pixel for a new row.
+                                widthUsedInPixel = 0;
                             }
                             else {
-                                layoutItems[i].paddingRight = _this.itemHorizontalSpace + 'px';
+                                widthUsedInPixel += potentialWidthInPixel;
                             }
+                            layoutItems[i].flex = '1 0 0';
+                            layoutItems[i].minWidth = defaultWidthForLayoutItemInPixel.toString().concat(this.stylePixel);
                         }
-                        if ((_a = _this === null || _this === void 0 ? void 0 : _this.currentLayoutDefinition) === null || _a === void 0 ? void 0 : _a.addBottomPadding) {
-                            layoutItems[i].paddingBottom = _this.itemVerticalSpace + 'px';
-                        }
-                        else {
-                            // If bottom padding already exists and currentLayoutDefinition.addBottomPadding is False
-                            // Remove the bottom padding.
-                            if (layoutItems[i].paddingBottom === _this.itemVerticalSpace + 'px') {
-                                layoutItems[i].paddingBottom = 0 + 'px';
-                            }
+                        layoutItems[i].width = potentialWidthInPixel + this.stylePixel;
+                    }
+                    else if (widthObject.type === exports.LayoutItemConfigPropertyWidthType.Number) {
+                        if (widthObject.value < 0) {
+                            widthObject.value =
+                                defaultWidthForLayoutItemInPixel <= remainingWidthInPixel ?
+                                    defaultWidthForLayoutItemInPixel : remainingWidthInPixel;
                         }
-                        layoutItems[i].width = percentage + '%';
-                        layoutItems[i].ready();
+                        widthUsedInPixel += widthObject.value;
+                        // how to determine if it is the last item in a row?
+                        var paddingRight = this.itemHorizontalSpace;
+                        widthUsedInPixel += paddingRight;
+                        layoutItems[i].paddingRight = paddingRight.toString().concat(this.stylePixel);
+                        layoutItems[i].width = widthObject.value + this.stylePixel;
                     }
-                    if (previousLayoutDefinition !== _this.currentLayoutDefinition) {
-                        setTimeout(function () {
-                            _this.layoutChanged.emit();
+                    else {
+                        logging.Logging.log({
+                            level: logLevel.LogLevel.Debug,
+                            message: 'Invalid width',
+                            source: 'LayoutComponent.configDrivenCalculationHybrid'
                         });
                     }
                 }
-            });
+                else {
+                    logging.Logging.log({
+                        level: logLevel.LogLevel.Debug,
+                        message: 'Invalid width',
+                        source: 'LayoutComponent.configDrivenCalculationHybrid'
+                    });
+                }
+                layoutItems[i].ready();
+            }
+        };
+        LayoutComponent.prototype.updateCustomConfig = function (layoutItems) {
+            var widthType = [];
+            for (var i = 0; i < layoutItems.length; i++) {
+                layoutItems[i].customConfig = this.currentLayoutItemConfig[i];
+                if (!widthType.includes(layoutItems[i].customConfig.width.type)) {
+                    widthType.push(layoutItems[i].customConfig.width.type);
+                }
+            }
+            if (widthType.length <= 1) {
+                return false;
+            }
+            return true;
         };
         return LayoutComponent;
     }(CoreBaseComponent));
@@ -10103,12 +10923,30 @@
                 i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.layoutItems = _t);
                 i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.definitions = _t);
             }
-        }, inputs: { itemHorizontalSpace: "itemHorizontalSpace", itemVerticalSpace: "itemVerticalSpace", tryToFillWholeRow: "tryToFillWholeRow", definition: "definition", padLastItem: "padLastItem", noExtraRightPaddingOneItemPerRow: "noExtraRightPaddingOneItemPerRow" }, outputs: { layoutChanged: "layoutChanged" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$6, decls: 1, vars: 0, template: function LayoutComponent_Template(rf, ctx) {
+        }, inputs: { itemHorizontalSpace: "itemHorizontalSpace", itemVerticalSpace: "itemVerticalSpace", tryToFillWholeRow: "tryToFillWholeRow", definition: "definition", padLastItem: "padLastItem", noExtraRightPaddingOneItemPerRow: "noExtraRightPaddingOneItemPerRow", layoutConfig: "layoutConfig" }, outputs: { layoutChanged: "layoutChanged", windowBreakpointChanged: "windowBreakpointChanged" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$6, decls: 1, vars: 0, template: function LayoutComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵprojectionDef(_c0$f);
                 i0.ɵɵprojection(0);
             }
         }, encapsulation: 2 });
+    __decorate([
+        debounce_decorators.Debounce(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], LayoutComponent.prototype, "refresh", null);
+    __decorate([
+        debounce_decorators.Debounce(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], LayoutComponent.prototype, "deferredOnLayoutChanged", null);
+    __decorate([
+        yield_decorator.Yield(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], LayoutComponent.prototype, "onWindowBreakpointChanged", null);
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayoutComponent, [{
                 type: i0.Component,
@@ -10139,9 +10977,13 @@
                     type: i0.Input
                 }], noExtraRightPaddingOneItemPerRow: [{
                     type: i0.Input
+                }], layoutConfig: [{
+                    type: i0.Input
                 }], layoutChanged: [{
                     type: i0.Output
-                }] });
+                }], windowBreakpointChanged: [{
+                    type: i0.Output
+                }], refresh: [], deferredOnLayoutChanged: [], onWindowBreakpointChanged: [] });
     })();
 
     var _c0$g = [[["sme-editable-layout-item"]]];
@@ -27807,411 +28649,6 @@
         __metadata("design:returntype", void 0)
     ], DataTableAccessibilityManager.prototype, "focusInTableCell", null);
 
-    (function (SmeResponsiveWindowBreakpointsValue) {
-        SmeResponsiveWindowBreakpointsValue[SmeResponsiveWindowBreakpointsValue["Reflow"] = 399.98] = "Reflow";
-        SmeResponsiveWindowBreakpointsValue[SmeResponsiveWindowBreakpointsValue["PhoneDown"] = 767.98] = "PhoneDown";
-        SmeResponsiveWindowBreakpointsValue[SmeResponsiveWindowBreakpointsValue["PhoneUp"] = Number.MAX_SAFE_INTEGER] = "PhoneUp";
-    })(exports.SmeResponsiveWindowBreakpointsValue || (exports.SmeResponsiveWindowBreakpointsValue = {}));
-    (function (SmeResponsiveWindowBreakpoints) {
-        SmeResponsiveWindowBreakpoints["Reflow"] = "Reflow";
-        SmeResponsiveWindowBreakpoints["PhoneDown"] = "PhoneDown";
-        SmeResponsiveWindowBreakpoints["PhoneUp"] = "PhoneUp";
-    })(exports.SmeResponsiveWindowBreakpoints || (exports.SmeResponsiveWindowBreakpoints = {}));
-    // tslint:disable-next-line: directive-class-suffix
-    var SmeResponsiveWindowManagerComponent = /** @class */ (function () {
-        /**
-         * The manager supports layout component and in the meantime listening to the window size change event.
-         * @param layout the layout component.
-         */
-        function SmeResponsiveWindowManagerComponent(layout) {
-            var _this = this;
-            this.layout = layout;
-            /**
-             * It defines whether the current window size is for super small window.
-             */
-            this.internalReflowMode = false;
-            /**
-             * It defines whether the current window size is phone down.
-             */
-            this.internalPhoneDown = false;
-            /**
-             * It defines whether the current window size is phone up.
-             */
-            this.internalPhoneUp = false;
-            /**
-             * It defines whether the current solution/tool is using css v2 to support responsive window.
-             */
-            this.internalCssV2 = false;
-            /**
-             * The array for subscription.
-             */
-            this.subscriptions = [];
-            this.setIsCssV2Enabled();
-            if (this.layout) {
-                // on parent layout changes, re-emit the layout change to our event
-                this.subscriptions.push(layout.layoutChanged.subscribe((function () { return _this.onLayoutChanged(); })));
-                // on window break point changes, emit the event about critical classes and styling updates signal.
-                this.subscriptions.push(layout.windowBreakpointChanged.subscribe(function () { return _this.onWindowBreakpointChanged(); }));
-                this.deferredOnLayoutChanged();
-            }
-        }
-        Object.defineProperty(SmeResponsiveWindowManagerComponent.prototype, "responsiveWindowState", {
-            /**
-             * Gets the current window responsive state.
-             */
-            get: function () {
-                return this.internalResponsiveWindowMode;
-            },
-            /**
-             * Sets the current window responsive state.
-             */
-            set: function (input) {
-                var _a;
-                var prevResponsiveWindowState = this.internalResponsiveWindowMode;
-                this.internalResponsiveWindowMode = input;
-                if (prevResponsiveWindowState !== this.internalResponsiveWindowMode) {
-                    (_a = this.layout) === null || _a === void 0 ? void 0 : _a.windowBreakpointChanged.emit();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SmeResponsiveWindowManagerComponent.prototype, "cssV2", {
-            /**
-             * Gets the value indicating whether css v2 should be used.
-             */
-            get: function () {
-                return this.internalCssV2;
-            },
-            /**
-             * It sets the value for whether the current tool/solution is using css v2 for window responsiveness.
-             */
-            set: function (input) {
-                this.internalCssV2 = !!input;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SmeResponsiveWindowManagerComponent.prototype, "phoneDown", {
-            /**
-             * Gets the phone down mode.
-             */
-            get: function () {
-                return this.internalPhoneDown;
-            },
-            /**
-             * Sets the phone down mode.
-             */
-            set: function (input) {
-                this.internalPhoneDown = !!input;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SmeResponsiveWindowManagerComponent.prototype, "phoneUp", {
-            /**
-             * Gets the phone up mode.
-             */
-            get: function () {
-                return this.internalPhoneUp;
-            },
-            /**
-             * Set the phone up mode.
-             */
-            set: function (input) {
-                this.internalPhoneUp = !!input;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SmeResponsiveWindowManagerComponent.prototype, "reflowMode", {
-            /**
-             * Gets the reflow mode.
-             */
-            get: function () {
-                return this.internalReflowMode;
-            },
-            /**
-             * Sets the reflow mode.
-             */
-            set: function (input) {
-                this.internalReflowMode = !!input;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SmeResponsiveWindowManagerComponent.prototype, "width", {
-            /**
-             * Gets the width of the window from the window object.
-             * Should only be called on layout or window size change.
-             */
-            get: function () {
-                return window === null || window === void 0 ? void 0 : window.innerWidth;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SmeResponsiveWindowManagerComponent.prototype, "height", {
-            /**
-             * Gets the height of the window from the window object.
-             * Should only be called on layout or window size change.
-             */
-            get: function () {
-                return window === null || window === void 0 ? void 0 : window.innerHeight;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SmeResponsiveWindowManagerComponent.prototype, "prevSize", {
-            /**
-             * Gets the last known window responsive data.
-             */
-            get: function () {
-                var _a, _b;
-                if (((_a = this.internalPrevSize) === null || _a === void 0 ? void 0 : _a.width) === this.width && ((_b = this.internalPrevSize) === null || _b === void 0 ? void 0 : _b.height) === this.height) {
-                    return this.internalPrevSize;
-                }
-                else {
-                    return this.getSmeResponsiveWindowData();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SmeResponsiveWindowManagerComponent.prototype, "size", {
-            /**
-             * Gets the window responsive break points.
-             */
-            get: function () {
-                var width = this.width;
-                if (width <= exports.SmeResponsiveWindowBreakpointsValue.Reflow) {
-                    this.reflowMode = true;
-                    this.phoneDown = false;
-                    this.phoneUp = false;
-                    this.responsiveWindowState = exports.SmeResponsiveWindowBreakpoints.Reflow;
-                }
-                else if (width <= exports.SmeResponsiveWindowBreakpointsValue.PhoneDown) {
-                    this.reflowMode = false;
-                    this.phoneDown = true;
-                    this.phoneUp = false;
-                    this.responsiveWindowState = exports.SmeResponsiveWindowBreakpoints.PhoneDown;
-                }
-                else {
-                    this.reflowMode = false;
-                    this.phoneDown = false;
-                    this.phoneUp = true;
-                    this.responsiveWindowState = exports.SmeResponsiveWindowBreakpoints.PhoneUp;
-                }
-                return this.responsiveWindowState;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * It sets whether the current solution/tool is using the css v2 for window responsiveness.
-         */
-        SmeResponsiveWindowManagerComponent.prototype.setIsCssV2Enabled = function () {
-            this.cssV2 = this.isUsingCssV2();
-        };
-        /**
-         * The implementation for checking whether the styles are being set.
-         * @returns true if the current tool/solution is using css v2 for window responsiveness.
-         */
-        SmeResponsiveWindowManagerComponent.prototype.isUsingCssV2 = function () {
-            var head = document.getElementsByTagName('head')[0];
-            var links = head.querySelectorAll('link');
-            var cssV2 = true;
-            // sme shell root would be containing style.css and either main.css or main-v2.css
-            // thus as long as it is not main.css, should be using css-v2
-            for (var i = 0; i < links.length; i++) {
-                var link = links[i];
-                if (link.href && link.href.includes('main.css')) {
-                    cssV2 = false;
-                    break;
-                }
-            }
-            return cssV2;
-        };
-        /**
-         * The functionality to update the core variables for window responsive data.
-         * @returns The SmeResponsiveWindowData object
-         */
-        SmeResponsiveWindowManagerComponent.prototype.getSmeResponsiveWindowData = function () {
-            // on window size or layout change, gets the width and height from the window object.
-            var width = this.width;
-            var height = this.height;
-            // based on the window size information, calculates the core paramters.
-            var size = this.size;
-            // the 3 gets above sets these following 3 parameters.
-            var reflowMode = this.reflowMode;
-            var phoneDown = this.phoneDown;
-            var phoneUp = this.phoneUp;
-            // sets the object and return.
-            this.internalPrevSize = {
-                width: width,
-                height: height,
-                size: size,
-                reflowMode: reflowMode,
-                phoneDown: phoneDown,
-                phoneUp: phoneUp
-            };
-            return this.internalPrevSize;
-        };
-        /**
-         * On layout changed event handler, occurs every time the layout has been changed.
-         */
-        SmeResponsiveWindowManagerComponent.prototype.onLayoutChanged = function () {
-            this.getSmeResponsiveWindowData();
-        };
-        /**
-         * The deferred layout changed handler.
-         */
-        SmeResponsiveWindowManagerComponent.prototype.deferredOnLayoutChanged = function () {
-            this.onLayoutChanged();
-        };
-        /**
-         * To respond to a layout breakpoint changed event.
-         * @returns void
-         */
-        SmeResponsiveWindowManagerComponent.prototype.onWindowBreakpointChanged = function () {
-            return;
-        };
-        /**
-         * Gets the parent element by html tag. By default, go up 10 levels for enhanced performance.
-         * @param inputElement The input element.
-         * @returns The targeted html element get by the html tag
-         */
-        SmeResponsiveWindowManagerComponent.prototype.getParentElementByTag = function (inputElement, parentHtmlTags, levelExternal, customKeywords, untilTagName) {
-            if (parentHtmlTags === void 0) { parentHtmlTags = ['sme-pivot', 'sme-split-view', 'sme-settings-page']; }
-            if (levelExternal === void 0) { levelExternal = 10; }
-            if (!inputElement) {
-                return undefined;
-            }
-            var level = levelExternal;
-            var found = false;
-            var parent = inputElement;
-            while (level > 0 && !found) {
-                if (parent) {
-                    parent = parent.parentElement;
-                }
-                var parentTagName = parent === null || parent === void 0 ? void 0 : parent.tagName.toLocaleLowerCase();
-                if (untilTagName) {
-                    if (parentTagName === untilTagName.toLowerCase()) {
-                        return undefined;
-                    }
-                }
-                if (parentHtmlTags.includes(parentTagName) || (customKeywords !== undefined && (parentTagName === null || parentTagName === void 0 ? void 0 : parentTagName.includes(customKeywords)))) {
-                    found = true;
-                    return parent;
-                }
-                level -= 1;
-            }
-            return undefined;
-        };
-        /**
-         * The core algorithm for adding and removing classes based on window size and window size settings.
-         * @param settings the settings object
-         * @param curSettings the current setting
-         * @param element the html element for setting up classes.
-         * @returns void.
-         */
-        SmeResponsiveWindowManagerComponent.prototype.updateClassArrayOnWindowSize = function (settings, curSettings, element) {
-            if (!settings) {
-                return;
-            }
-            settings = JSON.parse(JSON.stringify(settings));
-            var phoneDown = JSON.parse(JSON.stringify(settings.phoneDown));
-            var phoneUp = JSON.parse(JSON.stringify(settings.phoneUp));
-            var reflow = JSON.parse(JSON.stringify(settings.reflow));
-            var toBeRemovedClassList = [];
-            var toBeAddedClassList = [];
-            switch (curSettings) {
-                case 'phoneUp':
-                    toBeAddedClassList = phoneUp;
-                    toBeRemovedClassList = phoneDown;
-                    toBeRemovedClassList = this.uniqueArray(toBeRemovedClassList, reflow);
-                    break;
-                case 'phoneDown':
-                    toBeAddedClassList = phoneDown;
-                    toBeRemovedClassList = phoneUp;
-                    toBeRemovedClassList = this.uniqueArray(toBeRemovedClassList, reflow);
-                    break;
-                case 'reflow':
-                    toBeAddedClassList = reflow;
-                    toBeRemovedClassList = phoneDown;
-                    toBeRemovedClassList = this.uniqueArray(toBeRemovedClassList, phoneUp);
-                    break;
-            }
-            toBeRemovedClassList = this.removeExistedItem(toBeRemovedClassList, toBeAddedClassList);
-            for (var i = 0; i < toBeRemovedClassList.length; i++) {
-                if (element.classList.contains(toBeRemovedClassList[i])) {
-                    element.classList.remove(toBeRemovedClassList[i]);
-                }
-            }
-            for (var i = 0; i < toBeAddedClassList.length; i++) {
-                if (!element.classList.contains(toBeAddedClassList[i])) {
-                    element.classList.add(toBeAddedClassList[i]);
-                }
-            }
-        };
-        /**
-         * Merge two arrays with unique items.
-         * @param arrayA the input array A
-         * @param arrayB the input array B
-         * @returns an array that contains unique items from array A and array B
-         */
-        SmeResponsiveWindowManagerComponent.prototype.uniqueArray = function (arrayA, arrayB) {
-            if (arrayB && arrayB.length) {
-                for (var i = 0; i < arrayB.length; i++) {
-                    if (!arrayA.includes(arrayB[i])) {
-                        arrayA.push(arrayB[i]);
-                    }
-                }
-            }
-            return arrayA;
-        };
-        /**
-         * Guarantees will not remove the classes that needs to be added.
-         * @param toBeRemovedClassList the list of classes that needs to be removed.
-         * @param toBeAddedClassList the list of classes that needs to be added.
-         * @returns the list of classes that needs to be removed and doesn't overlap with the classes that needs to be added.
-         */
-        SmeResponsiveWindowManagerComponent.prototype.removeExistedItem = function (toBeRemovedClassList, toBeAddedClassList) {
-            if (!toBeAddedClassList || !toBeAddedClassList.length) {
-                return toBeRemovedClassList;
-            }
-            if (!toBeRemovedClassList || !toBeRemovedClassList.length) {
-                return [];
-            }
-            var res = [];
-            for (var i = 0; i < toBeRemovedClassList.length; i++) {
-                if (!toBeAddedClassList.includes(toBeRemovedClassList[i])) {
-                    res.push(toBeRemovedClassList[i]);
-                }
-            }
-            return res;
-        };
-        return SmeResponsiveWindowManagerComponent;
-    }());
-    /** @nocollapse */ SmeResponsiveWindowManagerComponent.ɵfac = function SmeResponsiveWindowManagerComponent_Factory(t) { return new (t || SmeResponsiveWindowManagerComponent)(i0.ɵɵdirectiveInject(SME_LAYOUT_PROVIDER)); };
-    /** @nocollapse */ SmeResponsiveWindowManagerComponent.ɵdir = i0.ɵɵdefineDirective({ type: SmeResponsiveWindowManagerComponent });
-    __decorate([
-        debounce_decorators.Debounce(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], SmeResponsiveWindowManagerComponent.prototype, "deferredOnLayoutChanged", null);
-    (function () {
-        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SmeResponsiveWindowManagerComponent, [{
-                type: i0.Directive
-            }], function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [SME_LAYOUT_PROVIDER]
-                        }] }];
-        }, { deferredOnLayoutChanged: [] });
-    })();
-
     var DataTableResponsiveWindowManager = /** @class */ (function (_super) {
         __extends(DataTableResponsiveWindowManager, _super);
         function DataTableResponsiveWindowManager() {
@@ -43777,26 +44214,60 @@
         ConfirmationListDialogComponent], []);
     i0.ɵɵsetComponentScope(DialogComponent, [i1$1.NgIf, BackdropComponent, i1$1.NgClass, TooltipDirective], []);
 
+    function HeaderComponent_div_0_span_2_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelement(0, "span", 11);
+        }
+        if (rf & 2) {
+            var ctx_r5 = i0.ɵɵnextContext(2);
+            i0.ɵɵclassMap(ctx_r5.smeIconClassName ? ctx_r5.smeIconClassName : "");
+        }
+    }
+    function HeaderComponent_div_0_span_3_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelement(0, "span", 12);
+        }
+        if (rf & 2) {
+            var ctx_r6 = i0.ɵɵnextContext(2);
+            i0.ɵɵstyleProp("background-image", ctx_r6.urlIcon);
+        }
+    }
+    function HeaderComponent_div_0_ng_container_6_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementContainer(0);
+        }
+    }
     function HeaderComponent_div_0_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 3);
-            i0.ɵɵelementStart(1, "h2", 4);
-            i0.ɵɵtext(2);
+            i0.ɵɵelementStart(0, "div", 5);
+            i0.ɵɵelementStart(1, "span", 6);
+            i0.ɵɵtemplate(2, HeaderComponent_div_0_span_2_Template, 1, 2, "span", 7);
+            i0.ɵɵtemplate(3, HeaderComponent_div_0_span_3_Template, 1, 2, "span", 8);
+            i0.ɵɵelementStart(4, "span", 9);
+            i0.ɵɵtext(5);
             i0.ɵɵelementEnd();
-            i0.ɵɵprojection(3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(6, HeaderComponent_div_0_ng_container_6_Template, 1, 0, "ng-container", 10);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
             var ctx_r0 = i0.ɵɵnextContext();
+            var _r3 = i0.ɵɵreference(4);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngClass", ctx_r0.level === "" ? "sme-font-h3" : ctx_r0.styleTo);
             i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx_r0.smeIconClassName);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx_r0.urlIcon);
+            i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(ctx_r0.text);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngTemplateOutlet", _r3);
         }
     }
     function HeaderComponent_h2_1_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "h2", 5);
+            i0.ɵɵelementStart(0, "h2", 13);
             i0.ɵɵtext(1);
             i0.ɵɵelementEnd();
         }
@@ -43804,27 +44275,40 @@
             var ctx_r1 = i0.ɵɵnextContext();
             i0.ɵɵproperty("ngClass", ctx_r1.level === "" ? "sme-font-h3" : ctx_r1.styleTo);
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate1(" ", ctx_r1.text, " ");
+            i0.ɵɵtextInterpolate1(" ", ctx_r1.text, "\n");
+        }
+    }
+    function HeaderComponent_div_2_ng_container_3_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementContainer(0);
         }
     }
     function HeaderComponent_div_2_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 6);
-            i0.ɵɵelementStart(1, "h3", 4);
+            i0.ɵɵelementStart(0, "div", 14);
+            i0.ɵɵelementStart(1, "h3", 6);
             i0.ɵɵtext(2);
             i0.ɵɵelementEnd();
-            i0.ɵɵprojection(3, 1);
+            i0.ɵɵtemplate(3, HeaderComponent_div_2_ng_container_3_Template, 1, 0, "ng-container", 10);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
             var ctx_r2 = i0.ɵɵnextContext();
+            var _r3 = i0.ɵɵreference(4);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngClass", ctx_r2.level !== "" ? ctx_r2.styleTo : "");
             i0.ɵɵadvance(1);
             i0.ɵɵtextInterpolate(ctx_r2.text);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngTemplateOutlet", _r3);
         }
     }
-    var _c0$1d = ["*", "*"];
+    function HeaderComponent_ng_template_3_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵprojection(0);
+        }
+    }
+    var _c0$1d = ["*"];
     /**
      *
      * @smeDoc {@label Header @id sme-header}
@@ -43837,13 +44321,33 @@
      * @file {@filename component.html @filepath ./examples/header-example.component.html}
      *
      */
-    var HeaderComponent = /** @class */ (function () {
-        function HeaderComponent() {
-            this.styleTo = '';
-            this.type = HeaderComponent.tool;
-            this.text = '';
-            this.level = '';
+    var HeaderComponent = /** @class */ (function (_super) {
+        __extends(HeaderComponent, _super);
+        function HeaderComponent(injector) {
+            var _this = _super.call(this, injector) || this;
+            _this.styleTo = '';
+            _this.type = HeaderComponent.tool;
+            _this.text = '';
+            _this.level = '';
+            if (_this.smeIconClassName && _this.urlIcon) {
+                logging.Logging.log({
+                    level: logLevel.LogLevel.Warning,
+                    message: 'Either sme icon or url icon is accepted.',
+                    source: _this.logSourceName + ".constructor"
+                });
+            }
+            return _this;
         }
+        Object.defineProperty(HeaderComponent.prototype, "logSourceName", {
+            /**
+             * The source name to use for logging
+             */
+            get: function () {
+                return 'HeaderComponent';
+            },
+            enumerable: false,
+            configurable: true
+        });
         /**
          * The method run when the component is initialized
          */
@@ -43865,35 +44369,26 @@
                     this.styleTo = HeaderComponent.h4style;
                     break;
                 }
-                case '5': {
-                    this.styleTo = HeaderComponent.h5style;
-                    break;
-                }
-                case '6': {
-                    this.styleTo = HeaderComponent.h6style;
-                    break;
-                }
                 default: {
                     this.styleTo = '';
                 }
             }
         };
         return HeaderComponent;
-    }());
+    }(CoreBaseComponent));
     HeaderComponent.tool = 'tool-header'; // default
     HeaderComponent.h1style = 'sme-font-h1';
     HeaderComponent.h2style = 'sme-font-h2';
     HeaderComponent.h3style = 'sme-font-h3';
-    HeaderComponent.h4style = 'sme-font-h4';
-    HeaderComponent.h5style = 'sme-font-h5';
-    HeaderComponent.h6style = 'sme-font-h6';
-    /** @nocollapse */ HeaderComponent.ɵfac = function HeaderComponent_Factory(t) { return new (t || HeaderComponent)(); };
-    /** @nocollapse */ HeaderComponent.ɵcmp = i0.ɵɵdefineComponent({ type: HeaderComponent, selectors: [["sme-header"]], inputs: { type: "type", text: "text", level: "level" }, ngContentSelectors: _c0$1d, decls: 3, vars: 3, consts: [["class", "sme-position-flex-none sme-layout-tool-header", 4, "ngIf"], ["id", "sme-dialog-title", 3, "ngClass", 4, "ngIf"], ["class", "sme-position-flex-none sme-layout-settings-header", 4, "ngIf"], [1, "sme-position-flex-none", "sme-layout-tool-header"], [3, "ngClass"], ["id", "sme-dialog-title", 3, "ngClass"], [1, "sme-position-flex-none", "sme-layout-settings-header"]], template: function HeaderComponent_Template(rf, ctx) {
+    HeaderComponent.h4style = 'sme-font-h4 sme-font-h4-no-spacing';
+    /** @nocollapse */ HeaderComponent.ɵfac = function HeaderComponent_Factory(t) { return new (t || HeaderComponent)(i0.ɵɵdirectiveInject(i0.Injector)); };
+    /** @nocollapse */ HeaderComponent.ɵcmp = i0.ɵɵdefineComponent({ type: HeaderComponent, selectors: [["sme-header"]], inputs: { type: "type", text: "text", level: "level", smeIconClassName: "smeIconClassName", urlIcon: "urlIcon" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1d, decls: 5, vars: 3, consts: [["class", "sme-layout-flex sme-position-flex-align-center sme-layout-tool-header", 4, "ngIf"], ["id", "sme-dialog-title", 3, "ngClass", 4, "ngIf"], ["class", "sme-position-flex-none sme-layout-settings-header", 4, "ngIf"], ["class", "sme-padding-left-xs"], ["contentTemplate", ""], [1, "sme-layout-flex", "sme-position-flex-align-center", "sme-layout-tool-header"], [3, "ngClass"], ["class", "sme-position-align-v-inline-middle sme-icon", 3, "class", 4, "ngIf"], ["class", "sme-position-align-v-inline-middle sme-url-icon", 3, "background-image", 4, "ngIf"], [1, "sme-position-align-v-inline-middle"], [4, "ngTemplateOutlet"], [1, "sme-position-align-v-inline-middle", "sme-icon"], [1, "sme-position-align-v-inline-middle", "sme-url-icon"], ["id", "sme-dialog-title", 3, "ngClass"], [1, "sme-position-flex-none", "sme-layout-settings-header"]], template: function HeaderComponent_Template(rf, ctx) {
             if (rf & 1) {
-                i0.ɵɵprojectionDef(_c0$1d);
-                i0.ɵɵtemplate(0, HeaderComponent_div_0_Template, 4, 2, "div", 0);
+                i0.ɵɵprojectionDef();
+                i0.ɵɵtemplate(0, HeaderComponent_div_0_Template, 7, 5, "div", 0);
                 i0.ɵɵtemplate(1, HeaderComponent_h2_1_Template, 2, 2, "h2", 1);
-                i0.ɵɵtemplate(2, HeaderComponent_div_2_Template, 4, 2, "div", 2);
+                i0.ɵɵtemplate(2, HeaderComponent_div_2_Template, 4, 3, "div", 2);
+                i0.ɵɵtemplate(3, HeaderComponent_ng_template_3_Template, 1, 0, "ng-template", 3, 4, i0.ɵɵtemplateRefExtractor);
             }
             if (rf & 2) {
                 i0.ɵɵproperty("ngIf", ctx.type === "tool-header");
@@ -43902,7 +44397,7 @@
                 i0.ɵɵadvance(1);
                 i0.ɵɵproperty("ngIf", ctx.type === "settings-page-header");
             }
-        }, directives: [i1$1.NgIf, i1$1.NgClass], encapsulation: 2 });
+        }, directives: [i1$1.NgIf, i1$1.NgClass, i1$1.NgTemplateOutlet], encapsulation: 2 });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HeaderComponent, [{
                 type: i0.Component,
@@ -43910,12 +44405,16 @@
                         selector: 'sme-header',
                         templateUrl: './header.component.html'
                     }]
-            }], null, { type: [{
+            }], function () { return [{ type: i0.Injector }]; }, { type: [{
                     type: i0.Input
                 }], text: [{
                     type: i0.Input
                 }], level: [{
                     type: i0.Input
+                }], smeIconClassName: [{
+                    type: i0.Input
+                }], urlIcon: [{
+                    type: i0.Input
                 }] });
     })();
 
@@ -48154,6 +48653,10 @@
              * Implementation of the Layout interface
              */
             _this.layoutChanged = new i0.EventEmitter();
+            /**
+             * Implementation of the Layout interface
+             */
+            _this.windowBreakpointChanged = new i0.EventEmitter();
             _this.propertyGridResponsiveWindowManager = new PropertyGridResponsiveWindowManager();
             // old style supported sme-property-grid-arrange-vertical class. default to vertical orientation if this class is applied.
             var hasVerticalClass = _this.hostElement.nativeElement.classList.contains('sme-property-grid-arrange-vertical');
@@ -48283,7 +48786,7 @@
                 i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.internalLinkTemplate = _t.first);
                 i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.externalLinkTemplate = _t.first);
             }
-        }, inputs: { orientation: "orientation" }, outputs: { layoutChanged: "layoutChanged" }, features: [i0.ɵɵProvidersFeature([
+        }, inputs: { orientation: "orientation" }, outputs: { layoutChanged: "layoutChanged", windowBreakpointChanged: "windowBreakpointChanged" }, features: [i0.ɵɵProvidersFeature([
                 { provide: SME_LAYOUT_PROVIDER, useExisting: i0.forwardRef((function () { return PropertyGridComponent; })) }
             ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 16, vars: 6, consts: [[1, "sme-position-inset-none", "sme-position-stretch-h", 3, "padLastItem"], ["layout", ""], ["name", "narrow", 3, "until", "columns"], ["name", "medium", 3, "until", "columns", 4, "ngIf"], ["name", "wide", 3, "columns", 4, "ngIf"], [3, "columnSpan", "maxWidth", 4, "ngFor", "ngForOf"], ["readonlyTemplate", ""], ["actionLinkTemplate", ""], ["internalLinkTemplate", ""], ["externalLinkTemplate", ""], ["iconTemplate", ""], ["name", "medium", 3, "until", "columns"], ["name", "wide", 3, "columns"], [3, "columnSpan", "maxWidth"], ["tabindex", "0", "aria-live", "polite", "aria-atomic", "true", "smeTooltipZone", "", 1, "sme-property-grid-item"], ["zone", "smeTooltipZone"], [1, "sme-arrange-stack-h"], ["class", "sme-position-flex-none sme-icon sme-icon-info sme-info-bubble sme-margin-left-xs", "aria-hidden", "true", 3, "title", "tooltipZone", 4, "ngIf"], [1, "sme-screen-reader"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["aria-hidden", "true", 1, "sme-position-flex-none", "sme-icon", "sme-icon-info", "sme-info-bubble", "sme-margin-left-xs", 3, "title", "tooltipZone"], ["size", "extra-small", 3, "inline", "isBackgroundTransparent", 4, "ngIf"], [4, "ngIf"], ["size", "extra-small", 3, "inline", "isBackgroundTransparent"], [1, "read-only-template"], ["class", "sme-padding-right-xs", 4, "ngIf"], ["tabindex", "0", "role", "link", 1, "sme-link", "sme-focus-zone", "action-link-template", 3, "click"], [1, "sme-padding-right-xs"], ["role", "link", 1, "sme-link", "sme-focus-zone", 3, "routerLink"], ["role", "link", "target", "_blank", 1, "sme-link", "sme-focus-zone", 3, "href"], [1, "sme-icon", "sme-icon-openInNewWindow", "sme-margin-left-xs"], [3, "class", 4, "ngIf"], ["class", "sme-layout-inline-block sme-margin-right-xs ", "size", "16px", 3, "status", 4, "ngIf"], ["size", "16px", 1, "sme-layout-inline-block", "sme-margin-right-xs", 3, "status"]], template: function PropertyGridComponent_Template(rf, ctx) {
             if (rf & 1) {
@@ -48349,6 +48852,8 @@
                     type: i0.Input
                 }], layoutChanged: [{
                     type: i0.Output
+                }], windowBreakpointChanged: [{
+                    type: i0.Output
                 }] });
     })();
 
@@ -52994,6 +53499,10 @@
              * Separator used in sticky header on top of Settings page
              */
             _this.headerSeparator = '|';
+            /**
+             * The generator for layout config.
+             */
+            _this.layoutConfigGenerator = new LayoutConfigGenerator();
             _this.autoFocus = true;
             return _this;
         }
@@ -53020,6 +53529,7 @@
                 _this.autoFocus = true;
             }), this.settingsForms.formRemoved().subscribe(function (form) { MsftSme.remove(_this.allForms, form); }));
             this.fullSettingsTitle = this.settingsTitle;
+            this.currentLayoutConfig = this.layoutConfigGenerator.initialize([300, '100']);
         };
         SettingsComponent.prototype.ngOnDestroy = function () {
             _super.prototype.ngOnDestroy.call(this);
@@ -53080,7 +53590,7 @@
         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: { addPadding: "addPadding", backRoute: "backRoute", settingsTitle: "settingsTitle", selectedSettingsTitle: "selectedSettingsTitle" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$Q, decls: 12, vars: 8, consts: [[1, "sme-arrange-stack-v", "sme-layout-relative", "sme-arrange-overflow-auto-y-phone-up", "sme-position-stretch"], ["class", "sme-layout-tool-header sme-position-flex-none sme-arrange-ellipsis sme-padding-bottom-none sme-padding-left-md", 4, "ngIf"], [1, "sme-position-flex-auto", "sme-arrange-overflow-auto", 3, "padLastItem"], ["layout", ""], ["name", "narrow", 3, "until", "columns"], ["name", "wide", 3, "columns"], [3, "columnSpan", "ngClass"], [1, "sme-position-stretch", "sme-padding-left-xl", "sme-padding-top-xs", 3, "columnSpan"], [1, "sme-layout-tool-header", "sme-position-flex-none", "sme-arrange-ellipsis", "sme-padding-bottom-none", "sme-padding-left-md"], [1, "sme-font-h3", "sme-arrange-ellipsis", "sme-position-stretch-h", 3, "title"], ["class", "sme-padding-horizontal-sm sme-font-family-normal", 4, "ngIf"], ["class", "sme-font-family-normal", 4, "ngIf"], [1, "sme-padding-horizontal-sm", "sme-font-family-normal"], [1, "sme-font-family-normal"]], template: function SettingsComponent_Template(rf, ctx) {
+    /** @nocollapse */ SettingsComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SettingsComponent, selectors: [["sme-settings"]], inputs: { addPadding: "addPadding", backRoute: "backRoute", settingsTitle: "settingsTitle", selectedSettingsTitle: "selectedSettingsTitle" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$Q, decls: 12, vars: 10, consts: [[1, "sme-arrange-stack-v", "sme-layout-relative", "sme-arrange-overflow-auto-y-phone-up", "sme-position-stretch"], ["class", "sme-layout-tool-header sme-position-flex-none sme-arrange-ellipsis sme-padding-bottom-none sme-padding-left-md", 4, "ngIf"], [1, "sme-position-flex-auto", "sme-arrange-overflow-auto", 3, "padLastItem", "layoutConfig", "itemHorizontalSpace"], ["layout", ""], ["name", "narrow", 3, "until", "columns"], ["name", "wide", 3, "columns"], [3, "columnSpan", "ngClass"], [1, "sme-position-stretch", "sme-padding-left-xl", "sme-padding-top-xs", 3, "columnSpan"], [1, "sme-layout-tool-header", "sme-position-flex-none", "sme-arrange-ellipsis", "sme-padding-bottom-none", "sme-padding-left-md"], [1, "sme-font-h3", "sme-arrange-ellipsis", "sme-position-stretch-h", 3, "title"], ["class", "sme-padding-horizontal-sm sme-font-family-normal", 4, "ngIf"], ["class", "sme-font-family-normal", 4, "ngIf"], [1, "sme-padding-horizontal-sm", "sme-font-family-normal"], [1, "sme-font-family-normal"]], template: function SettingsComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0.ɵɵprojectionDef(_c0$1u);
                 i0.ɵɵelementStart(0, "div", 0);
@@ -53104,7 +53614,7 @@
                 i0.ɵɵadvance(1);
                 i0.ɵɵproperty("ngIf", ctx.settingsTitle);
                 i0.ɵɵadvance(1);
-                i0.ɵɵproperty("padLastItem", false);
+                i0.ɵɵproperty("padLastItem", false)("layoutConfig", ctx.currentLayoutConfig)("itemHorizontalSpace", 36);
                 i0.ɵɵadvance(2);
                 i0.ɵɵproperty("until", 768)("columns", 1);
                 i0.ɵɵadvance(1);
@@ -58815,6 +59325,7 @@
     exports.JsonFormFieldLoaderComponent = JsonFormFieldLoaderComponent;
     exports.LayeredIconComponent = LayeredIconComponent;
     exports.LayoutComponent = LayoutComponent;
+    exports.LayoutConfigGenerator = LayoutConfigGenerator;
     exports.LayoutDefinitionComponent = LayoutDefinitionComponent;
     exports.LayoutItemComponent = LayoutItemComponent;
     exports.LayoutModule = LayoutModule;