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

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

@@ -8481,6 +8481,444 @@ const ɵEditableLayoutItemComponent_BaseFactory = /*@__PURE__*/ ɵɵgetInherited
             args: ['document:mousemove', ['$event']]
         }] }); })();
 
+/**
+ * It defines the number of breakpoints that WAC currently support.
+ * add more scenarios when WAC is going to support scenarios like tablet etc.
+ */
+var SmeResponsiveWindowBreakpointsValue;
+(function (SmeResponsiveWindowBreakpointsValue) {
+    SmeResponsiveWindowBreakpointsValue[SmeResponsiveWindowBreakpointsValue["Reflow"] = 399.98] = "Reflow";
+    SmeResponsiveWindowBreakpointsValue[SmeResponsiveWindowBreakpointsValue["PhoneDown"] = 767.98] = "PhoneDown";
+    SmeResponsiveWindowBreakpointsValue[SmeResponsiveWindowBreakpointsValue["PhoneUp"] = Number.MAX_SAFE_INTEGER] = "PhoneUp";
+})(SmeResponsiveWindowBreakpointsValue || (SmeResponsiveWindowBreakpointsValue = {}));
+/**
+ * It defines the current supported scenario for window sizes.
+ */
+var SmeResponsiveWindowBreakpoints;
+(function (SmeResponsiveWindowBreakpoints) {
+    SmeResponsiveWindowBreakpoints["Reflow"] = "Reflow";
+    SmeResponsiveWindowBreakpoints["PhoneDown"] = "PhoneDown";
+    SmeResponsiveWindowBreakpoints["PhoneUp"] = "PhoneUp";
+})(SmeResponsiveWindowBreakpoints || (SmeResponsiveWindowBreakpoints = {}));
+// tslint:disable-next-line: directive-class-suffix
+class SmeResponsiveWindowManagerComponent {
+    /**
+     * The manager supports layout component and in the meantime listening to the window size change event.
+     * @param layout the layout component.
+     */
+    constructor(layout) {
+        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((() => this.onLayoutChanged())));
+            // on window break point changes, emit the event about critical classes and styling updates signal.
+            this.subscriptions.push(layout.windowBreakpointChanged.subscribe(() => this.onWindowBreakpointChanged()));
+            this.deferredOnLayoutChanged();
+        }
+    }
+    /**
+     * Gets the current window responsive state.
+     */
+    get responsiveWindowState() {
+        return this.internalResponsiveWindowMode;
+    }
+    /**
+     * Sets the current window responsive state.
+     */
+    set responsiveWindowState(input) {
+        var _a;
+        const prevResponsiveWindowState = this.internalResponsiveWindowMode;
+        this.internalResponsiveWindowMode = input;
+        if (prevResponsiveWindowState !== this.internalResponsiveWindowMode) {
+            (_a = this.layout) === null || _a === void 0 ? void 0 : _a.windowBreakpointChanged.emit();
+        }
+    }
+    /**
+     * Gets the value indicating whether css v2 should be used.
+     */
+    get cssV2() {
+        return this.internalCssV2;
+    }
+    /**
+     * It sets the value for whether the current tool/solution is using css v2 for window responsiveness.
+     */
+    set cssV2(input) {
+        this.internalCssV2 = !!input;
+    }
+    /**
+     * Gets the phone down mode.
+     */
+    get phoneDown() {
+        return this.internalPhoneDown;
+    }
+    /**
+     * Sets the phone down mode.
+     */
+    set phoneDown(input) {
+        this.internalPhoneDown = !!input;
+    }
+    /**
+     * Gets the phone up mode.
+     */
+    get phoneUp() {
+        return this.internalPhoneUp;
+    }
+    /**
+     * Set the phone up mode.
+     */
+    set phoneUp(input) {
+        this.internalPhoneUp = !!input;
+    }
+    /**
+     * Gets the reflow mode.
+     */
+    get reflowMode() {
+        return this.internalReflowMode;
+    }
+    /**
+     * Sets the reflow mode.
+     */
+    set reflowMode(input) {
+        this.internalReflowMode = !!input;
+    }
+    /**
+     * Gets the width of the window from the window object.
+     * Should only be called on layout or window size change.
+     */
+    get width() {
+        return window === null || window === void 0 ? void 0 : window.innerWidth;
+    }
+    /**
+     * Gets the height of the window from the window object.
+     * Should only be called on layout or window size change.
+     */
+    get height() {
+        return window === null || window === void 0 ? void 0 : window.innerHeight;
+    }
+    /**
+     * Gets the last known window responsive data.
+     */
+    get prevSize() {
+        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();
+        }
+    }
+    /**
+     * Gets the window responsive break points.
+     */
+    get size() {
+        const width = this.width;
+        if (width <= SmeResponsiveWindowBreakpointsValue.Reflow) {
+            this.reflowMode = true;
+            this.phoneDown = false;
+            this.phoneUp = false;
+            this.responsiveWindowState = SmeResponsiveWindowBreakpoints.Reflow;
+        }
+        else if (width <= SmeResponsiveWindowBreakpointsValue.PhoneDown) {
+            this.reflowMode = false;
+            this.phoneDown = true;
+            this.phoneUp = false;
+            this.responsiveWindowState = SmeResponsiveWindowBreakpoints.PhoneDown;
+        }
+        else {
+            this.reflowMode = false;
+            this.phoneDown = false;
+            this.phoneUp = true;
+            this.responsiveWindowState = SmeResponsiveWindowBreakpoints.PhoneUp;
+        }
+        return this.responsiveWindowState;
+    }
+    /**
+     * It sets whether the current solution/tool is using the css v2 for window responsiveness.
+     */
+    setIsCssV2Enabled() {
+        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.
+     */
+    isUsingCssV2() {
+        const head = document.getElementsByTagName('head')[0];
+        const links = head.querySelectorAll('link');
+        let 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 (let i = 0; i < links.length; i++) {
+            const 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
+     */
+    getSmeResponsiveWindowData() {
+        // on window size or layout change, gets the width and height from the window object.
+        const width = this.width;
+        const height = this.height;
+        // based on the window size information, calculates the core paramters.
+        const size = this.size;
+        // the 3 gets above sets these following 3 parameters.
+        const reflowMode = this.reflowMode;
+        const phoneDown = this.phoneDown;
+        const 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.
+     */
+    onLayoutChanged() {
+        this.getSmeResponsiveWindowData();
+    }
+    /**
+     * The deferred layout changed handler.
+     */
+    deferredOnLayoutChanged() {
+        this.onLayoutChanged();
+    }
+    /**
+     * To respond to a layout breakpoint changed event.
+     * @returns void
+     */
+    onWindowBreakpointChanged() {
+        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
+     */
+    getParentElementByTag(inputElement, parentHtmlTags = ['sme-pivot', 'sme-split-view', 'sme-settings-page'], levelExternal = 10, customKeywords, untilTagName) {
+        if (!inputElement) {
+            return undefined;
+        }
+        let level = levelExternal;
+        let found = false;
+        let parent = inputElement;
+        while (level > 0 && !found) {
+            if (parent) {
+                parent = parent.parentElement;
+            }
+            const 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.
+     */
+    updateClassArrayOnWindowSize(settings, curSettings, element) {
+        if (!settings) {
+            return;
+        }
+        settings = JSON.parse(JSON.stringify(settings));
+        const phoneDown = JSON.parse(JSON.stringify(settings.phoneDown));
+        const phoneUp = JSON.parse(JSON.stringify(settings.phoneUp));
+        const reflow = JSON.parse(JSON.stringify(settings.reflow));
+        let toBeRemovedClassList = [];
+        let 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 (let i = 0; i < toBeRemovedClassList.length; i++) {
+            if (element.classList.contains(toBeRemovedClassList[i])) {
+                element.classList.remove(toBeRemovedClassList[i]);
+            }
+        }
+        for (let 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
+     */
+    uniqueArray(arrayA, arrayB) {
+        if (arrayB && arrayB.length) {
+            for (let 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.
+     */
+    removeExistedItem(toBeRemovedClassList, toBeAddedClassList) {
+        if (!toBeAddedClassList || !toBeAddedClassList.length) {
+            return toBeRemovedClassList;
+        }
+        if (!toBeRemovedClassList || !toBeRemovedClassList.length) {
+            return [];
+        }
+        const res = [];
+        for (let i = 0; i < toBeRemovedClassList.length; i++) {
+            if (!toBeAddedClassList.includes(toBeRemovedClassList[i])) {
+                res.push(toBeRemovedClassList[i]);
+            }
+        }
+        return res;
+    }
+}
+/** @nocollapse */ SmeResponsiveWindowManagerComponent.ɵfac = function SmeResponsiveWindowManagerComponent_Factory(t) { return new (t || SmeResponsiveWindowManagerComponent)(ɵɵdirectiveInject(SME_LAYOUT_PROVIDER)); };
+/** @nocollapse */ SmeResponsiveWindowManagerComponent.ɵdir = ɵɵdefineDirective({ type: SmeResponsiveWindowManagerComponent });
+__decorate([
+    Debounce$1(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SmeResponsiveWindowManagerComponent.prototype, "deferredOnLayoutChanged", null);
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(SmeResponsiveWindowManagerComponent, [{
+        type: Directive
+    }], function () { return [{ type: undefined, decorators: [{
+                type: Inject,
+                args: [SME_LAYOUT_PROVIDER]
+            }] }]; }, { deferredOnLayoutChanged: [] }); })();
+
+var LayoutItemConfigPropertyWidthType;
+(function (LayoutItemConfigPropertyWidthType) {
+    LayoutItemConfigPropertyWidthType["Percentage"] = "Percentage";
+    LayoutItemConfigPropertyWidthType["Number"] = "Number";
+})(LayoutItemConfigPropertyWidthType || (LayoutItemConfigPropertyWidthType = {}));
+var LayoutItemConfigMode;
+(function (LayoutItemConfigMode) {
+    LayoutItemConfigMode["Default"] = "Default";
+    LayoutItemConfigMode["Custom"] = "Custom";
+})(LayoutItemConfigMode || (LayoutItemConfigMode = {}));
+var LayoutDrivenType;
+(function (LayoutDrivenType) {
+    LayoutDrivenType["Default"] = "Default";
+    LayoutDrivenType["ResponsiveWindowManager"] = "ResponsiveWindowManager";
+})(LayoutDrivenType || (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.
+ */
+class 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
+     */
+    initialize(phoneUp, phoneDown, reflow) {
+        const layoutConfig = {};
+        this.parseConfig(layoutConfig, phoneUp, SmeResponsiveWindowBreakpoints.PhoneUp);
+        this.parseConfig(layoutConfig, phoneDown, SmeResponsiveWindowBreakpoints.PhoneDown);
+        this.parseConfig(layoutConfig, reflow, SmeResponsiveWindowBreakpoints.Reflow);
+        console.log(layoutConfig);
+        return layoutConfig;
+    }
+    parseConfig(layoutConfig, config, smeResponsiveWindowBreakpoints) {
+        if (!config) {
+            layoutConfig[smeResponsiveWindowBreakpoints] = {
+                mode: LayoutItemConfigMode.Default
+            };
+        }
+        else {
+            layoutConfig[smeResponsiveWindowBreakpoints] = {
+                mode: LayoutItemConfigMode.Custom,
+                config: []
+            };
+            for (let i = 0; i <= config.length; i++) {
+                layoutConfig[smeResponsiveWindowBreakpoints].config.push({
+                    width: {
+                        type: typeof config[i] === 'string' ?
+                            LayoutItemConfigPropertyWidthType.Percentage : LayoutItemConfigPropertyWidthType.Number,
+                        value: typeof config[i] === 'string' ? parseFloat(config[i]) : config[i]
+                    }
+                });
+            }
+        }
+    }
+}
+
 class LayoutDefinitionComponent {
     constructor() {
         this.until = Number.MAX_VALUE;
@@ -8556,9 +8994,9 @@ class LayoutItemComponent extends CoreBaseComponent {
     }
 }
 /** @nocollapse */ LayoutItemComponent.ɵfac = function LayoutItemComponent_Factory(t) { return new (t || LayoutItemComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ LayoutItemComponent.ɵcmp = ɵɵdefineComponent({ type: LayoutItemComponent, selectors: [["sme-layout-item"]], hostVars: 6, hostBindings: function LayoutItemComponent_HostBindings(rf, ctx) { if (rf & 2) {
-        ɵɵstyleProp("width", ctx.width)("padding-right", ctx.paddingRight)("padding-bottom", ctx.paddingBottom);
-    } }, inputs: { columnSpan: "columnSpan", caption: "caption", maxWidth: "maxWidth" }, features: [ɵɵ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) {
+/** @nocollapse */ LayoutItemComponent.ɵcmp = ɵɵdefineComponent({ type: LayoutItemComponent, selectors: [["sme-layout-item"]], hostVars: 10, hostBindings: function LayoutItemComponent_HostBindings(rf, ctx) { if (rf & 2) {
+        ɵɵstyleProp("width", ctx.width)("padding-right", ctx.paddingRight)("padding-bottom", ctx.paddingBottom)("flex", ctx.flex)("min-width", ctx.minWidth);
+    } }, inputs: { columnSpan: "columnSpan", caption: "caption", customConfig: "customConfig", maxWidth: "maxWidth" }, features: [ɵɵ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) {
         ɵɵprojectionDef();
         ɵɵtemplate(0, LayoutItemComponent_div_0_Template, 2, 1, "div", 0);
         ɵɵprojection(1);
@@ -8580,14 +9018,41 @@ class LayoutItemComponent extends CoreBaseComponent {
         }], paddingBottom: [{
             type: HostBinding,
             args: ['style.paddingBottom']
+        }], flex: [{
+            type: HostBinding,
+            args: ['style.flex']
+        }], minWidth: [{
+            type: HostBinding,
+            args: ['style.min-width']
         }], columnSpan: [{
             type: Input
         }], caption: [{
             type: Input
+        }], customConfig: [{
+            type: Input
         }], maxWidth: [{
             type: Input
         }] }); })();
 
+class LayoutResponsiveWindowManager extends SmeResponsiveWindowManagerComponent {
+    constructor() {
+        super(...arguments);
+        this.name = 'sme-layout';
+    }
+    onWindowSizeChanged() {
+        if (!this.cssV2) {
+            return;
+        }
+        // Can handle dynamic configuration, custom styling on different size of the window later on.
+    }
+}
+__decorate([
+    Yield$1(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], LayoutResponsiveWindowManager.prototype, "onWindowSizeChanged", null);
+
 const _c0$f = [[["sme-layout-item"]]];
 const _c1$6 = ["sme-layout-item"];
 /**
@@ -8596,18 +9061,64 @@ const _c1$6 = ["sme-layout-item"];
 class LayoutComponent extends CoreBaseComponent {
     constructor(injector, layout) {
         super(injector);
-        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 = {
+            [SmeResponsiveWindowBreakpoints.PhoneUp]: { 'mode': LayoutItemConfigMode.Default },
+            [SmeResponsiveWindowBreakpoints.PhoneDown]: { 'mode': LayoutItemConfigMode.Default },
+            [SmeResponsiveWindowBreakpoints.Reflow]: { 'mode': LayoutItemConfigMode.Default }
+        };
+        /**
+         * Implementation of the Layout interface
+         */
         this.layoutChanged = new EventEmitter();
-        this.subscriptions.push(this.layout.layoutChanged.subscribe(() => this.onLayoutChanged()));
-        setTimeout(() => {
-            this.updateLayout();
-        });
+        /**
+         * Implementation of the Layout interface
+         */
+        this.windowBreakpointChanged = new EventEmitter();
+        this.columnCount = 1;
+        this.columnSpanTotal = 0;
+        this.layoutDrivenType = 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((() => this.onLayoutChanged())));
+            // on window break point changes, emit the event about critical classes and styling updates signal.
+            this.subscriptions.push(layout.windowBreakpointChanged.subscribe(() => this.onWindowBreakpointChanged()));
+            this.deferredOnLayoutChanged();
+        }
     }
     /**
      * The source name to use for logging
@@ -8618,15 +9129,48 @@ class LayoutComponent extends CoreBaseComponent {
     get currentLayoutDefinitionName() {
         return this.currentLayoutDefinition ? this.currentLayoutDefinition.name : '';
     }
+    get currentLayoutDrivenType() {
+        return this.layoutDrivenType;
+    }
+    get currentWindowBreakpoint() {
+        var _a;
+        return (_a = this.layoutResponsiveWindowManager) === null || _a === void 0 ? void 0 : _a.prevSize.size;
+    }
+    get currentLayoutItems() {
+        return this.layoutItems;
+    }
     ngAfterViewInit() {
         this.subscriptions.push(this.layoutItems.changes.subscribe(() => this.onLayoutChanged()));
     }
+    /**
+     * The open API for refreshing the control externally.
+     */
+    refresh() {
+        this.resetFlex();
+        this.onLayoutChanged();
+    }
     /**
      * On layout changed event handler, occurs every time the layout has been changed.
      */
     onLayoutChanged() {
         this.updateLayout();
     }
+    /**
+     * The deferred layout changed handler.
+     */
+    deferredOnLayoutChanged() {
+        this.onLayoutChanged();
+    }
+    /**
+     * The on window breakpoint changed handler.
+     * Adding yield for component to get ElementRef after initialization.
+     */
+    onWindowBreakpointChanged() {
+        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.
     getInitialHostClasses() {
@@ -8636,83 +9180,307 @@ class LayoutComponent extends CoreBaseComponent {
     }
     updateLayout() {
         setTimeout(() => {
-            var _a;
-            if (this.layoutItems) {
-                const layoutWidth = this.hostElement.nativeElement.clientWidth || Number.MAX_VALUE;
-                let columnCount = 1;
-                const layoutItems = this.layoutItems.toArray();
-                let columnSpanTotal = 0;
-                layoutItems.forEach(item => columnSpanTotal += item.columnSpan);
+            if (!this.layoutItems) {
+                return;
+            }
+            const layoutItems = this.layoutItems.toArray();
+            this.getTotalColumnSpan(layoutItems);
+            const currentWindowSize = this.layoutResponsiveWindowManager.prevSize.size;
+            this.updateLayoutConfig(currentWindowSize);
+            const layoutWidth = this.hostElement.nativeElement.clientWidth || Number.MAX_VALUE;
+            if (this.layoutDrivenType === LayoutDrivenType.Default) {
                 const definitions = this.definitions.toArray().sort((a, b) => a.until - b.until);
                 const previousLayoutDefinition = this.currentLayoutDefinition;
-                this.currentLayoutDefinition = undefined;
-                for (let i = definitions.length - 1; i >= 0; i--) {
-                    const definitionColumns = definitions[i].columns;
-                    if (layoutWidth <= definitions[i].until || (this.tryToFillWholeRow && columnSpanTotal <= definitionColumns)) {
-                        columnCount = definitionColumns;
-                        this.currentLayoutDefinition = definitions[i];
-                    }
-                }
+                this.updateCurrentLayoutDefinition(definitions, layoutWidth);
                 const itemHorizontalSpacePercentage = Math.round(this.itemHorizontalSpace * 100 / layoutWidth);
                 const columnCountModifier = this.padLastItem ? 0 : 1;
-                const availableLayoutWidthPercentage = 100 - itemHorizontalSpacePercentage * (columnCount - columnCountModifier);
-                let percentageSoFar = 0;
-                let columnIndex = 0;
-                for (let i = 0; i < layoutItems.length; i++) {
-                    let 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;
+                const availableLayoutWidthPercentage = 100 - itemHorizontalSpacePercentage * (this.columnCount - columnCountModifier);
+                this.layoutDefinitionWithColumnSpanCalculation(layoutItems, availableLayoutWidthPercentage, itemHorizontalSpacePercentage);
+                if (previousLayoutDefinition !== this.currentLayoutDefinition) {
+                    setTimeout(() => {
+                        this.layoutChanged.emit();
+                    });
+                }
+            }
+            else if (this.layoutDrivenType === LayoutDrivenType.ResponsiveWindowManager) {
+                let availableLayoutWidthInPixel = layoutWidth - this.itemHorizontalSpace;
+                availableLayoutWidthInPixel = availableLayoutWidthInPixel > 0 ? availableLayoutWidthInPixel : 0;
+                if (availableLayoutWidthInPixel <= 0) {
+                    return;
+                }
+                this.configDrivenCalculation(layoutItems, availableLayoutWidthInPixel);
+            }
+        });
+    }
+    updateLayoutConfig(currentWindowSize) {
+        if (!currentWindowSize) {
+            this.layoutDrivenType = LayoutDrivenType.Default;
+            return;
+        }
+        const phoneUp = this.layoutConfig.PhoneUp;
+        const phoneDown = this.layoutConfig.PhoneDown;
+        const reflow = this.layoutConfig.Reflow;
+        if (!phoneUp || !phoneDown || !reflow) {
+            Logging.log({
+                level: LogLevel.Debug,
+                message: 'Invalid layout config has been passed in',
+                source: 'DataTableComponent.onContentTablePressed'
+            });
+            const defaultMode = { 'mode': LayoutItemConfigMode.Default };
+            if (!phoneUp) {
+                this.layoutConfig.PhoneUp = defaultMode;
+            }
+            if (!phoneDown) {
+                this.layoutConfig.PhoneDown = defaultMode;
+            }
+            if (!reflow) {
+                this.layoutConfig.Reflow = defaultMode;
+            }
+        }
+        const currentConfig = this.layoutConfig[currentWindowSize];
+        if (currentConfig.mode === LayoutItemConfigMode.Default) {
+            this.setLayoutDrivenType(LayoutDrivenType.Default);
+        }
+        else if (currentConfig.mode === LayoutItemConfigMode.Custom && currentConfig.config && currentConfig.config.length) {
+            this.setLayoutDrivenType(LayoutDrivenType.ResponsiveWindowManager);
+            this.currentLayoutItemConfig = currentConfig.config;
+        }
+    }
+    resetFlex() {
+        const layoutItems = this.layoutItems.toArray();
+        for (let i = 0; i < layoutItems.length; i++) {
+            const layoutItem = layoutItems[i];
+            if (layoutItem.flex) {
+                layoutItem.flex = undefined;
+            }
+        }
+    }
+    setLayoutDrivenType(layoutDrivenType) {
+        if (this.layoutDrivenType === LayoutDrivenType.ResponsiveWindowManager && layoutDrivenType === LayoutDrivenType.Default) {
+            this.resetFlex();
+        }
+        this.layoutDrivenType = layoutDrivenType;
+    }
+    getTotalColumnSpan(layoutItems) {
+        this.columnSpanTotal = 0;
+        layoutItems.forEach(item => this.columnSpanTotal += item.columnSpan);
+    }
+    updateCurrentLayoutDefinition(definitions, layoutWidth) {
+        this.currentLayoutDefinition = undefined;
+        for (let i = definitions.length - 1; i >= 0; i--) {
+            const definitionColumns = definitions[i].columns;
+            if (layoutWidth <= definitions[i].until || (this.tryToFillWholeRow && this.columnSpanTotal <= definitionColumns)) {
+                this.columnCount = definitionColumns;
+                this.currentLayoutDefinition = definitions[i];
+            }
+        }
+    }
+    layoutDefinitionWithColumnSpanCalculation(layoutItems, availableLayoutWidthPercentage, itemHorizontalSpacePercentage) {
+        var _a;
+        let percentageSoFar = 0;
+        let columnIndex = 0;
+        for (let i = 0; i < layoutItems.length; i++) {
+            let 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 {
+                const 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();
+        }
+    }
+    configDrivenCalculation(layoutItems, availableLayoutWidthInPixel) {
+        const 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.
+     */
+    configDrivenCalculationDefault(layoutItems, availableLayoutWidthInPixel) {
+        const defaultWidthForLayoutItemInPixel = 200;
+        let widthUsedInPixel = 0;
+        let percentageSoFar = 0;
+        for (let i = 0; i < layoutItems.length; i++) {
+            if (layoutItems[i].customConfig.width) {
+                const widthObject = layoutItems[i].customConfig.width;
+                const remainingWidthInPixel = availableLayoutWidthInPixel - widthUsedInPixel;
+                if (widthObject.type === LayoutItemConfigPropertyWidthType.Percentage) {
+                    if (widthObject.value > 100 || widthObject.value < 0) {
+                        widthObject.value = 100;
+                    }
+                    const percentage = widthObject.value;
+                    percentageSoFar += percentage;
+                    const 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 === 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?
+                    const paddingRight = this.itemHorizontalSpace;
+                    widthUsedInPixel += paddingRight;
+                    layoutItems[i].paddingRight = paddingRight.toString().concat(this.stylePixel);
+                    layoutItems[i].width = widthObject.value + this.stylePixel;
+                }
+                else {
+                    Logging.log({
+                        level: LogLevel.Debug,
+                        message: 'Invalid width',
+                        source: 'LayoutComponent.configDrivenCalculationDefault'
+                    });
+                }
+            }
+            else {
+                Logging.log({
+                    level: 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.
+     */
+    configDrivenCalculationHybrid(layoutItems, availableLayoutWidthInPixel) {
+        const defaultWidthForLayoutItemInPixel = 200;
+        let widthUsedInPixel = 0;
+        for (let i = 0; i < layoutItems.length; i++) {
+            if (layoutItems[i].customConfig.width) {
+                const widthObject = layoutItems[i].customConfig.width;
+                const remainingWidthInPixel = availableLayoutWidthInPixel - widthUsedInPixel;
+                if (widthObject.type === LayoutItemConfigPropertyWidthType.Percentage) {
+                    if (widthObject.value > 100 || widthObject.value < 0) {
+                        widthObject.value = 100;
+                    }
+                    // how to determine if it is the last item in a row?
+                    const paddingRight = this.itemHorizontalSpace;
+                    widthUsedInPixel += paddingRight;
+                    layoutItems[i].paddingRight = paddingRight.toString().concat(this.stylePixel);
+                    let potentialWidthInPixel = (widthObject.value / 100) * remainingWidthInPixel;
+                    if (potentialWidthInPixel === 0) {
+                        widthUsedInPixel = 0;
+                        widthUsedInPixel += paddingRight;
+                        potentialWidthInPixel = (widthObject.value / 100) * (availableLayoutWidthInPixel - widthUsedInPixel);
                     }
                     else {
-                        const 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 === 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?
+                    const 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(() => {
-                        this.layoutChanged.emit();
+                else {
+                    Logging.log({
+                        level: LogLevel.Debug,
+                        message: 'Invalid width',
+                        source: 'LayoutComponent.configDrivenCalculationHybrid'
                     });
                 }
             }
-        });
+            else {
+                Logging.log({
+                    level: LogLevel.Debug,
+                    message: 'Invalid width',
+                    source: 'LayoutComponent.configDrivenCalculationHybrid'
+                });
+            }
+            layoutItems[i].ready();
+        }
+    }
+    updateCustomConfig(layoutItems) {
+        const widthType = [];
+        for (let 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;
     }
 }
 /** @nocollapse */ LayoutComponent.ɵfac = function LayoutComponent_Factory(t) { return new (t || LayoutComponent)(ɵɵdirectiveInject(Injector), ɵɵdirectiveInject(SME_LAYOUT_PROVIDER)); };
@@ -8723,10 +9491,28 @@ class LayoutComponent extends CoreBaseComponent {
         let _t;
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.layoutItems = _t);
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.definitions = _t);
-    } }, inputs: { itemHorizontalSpace: "itemHorizontalSpace", itemVerticalSpace: "itemVerticalSpace", tryToFillWholeRow: "tryToFillWholeRow", definition: "definition", padLastItem: "padLastItem", noExtraRightPaddingOneItemPerRow: "noExtraRightPaddingOneItemPerRow" }, outputs: { layoutChanged: "layoutChanged" }, features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$6, decls: 1, vars: 0, template: function LayoutComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { itemHorizontalSpace: "itemHorizontalSpace", itemVerticalSpace: "itemVerticalSpace", tryToFillWholeRow: "tryToFillWholeRow", definition: "definition", padLastItem: "padLastItem", noExtraRightPaddingOneItemPerRow: "noExtraRightPaddingOneItemPerRow", layoutConfig: "layoutConfig" }, outputs: { layoutChanged: "layoutChanged", windowBreakpointChanged: "windowBreakpointChanged" }, features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$6, decls: 1, vars: 0, template: function LayoutComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵprojectionDef(_c0$f);
         ɵɵprojection(0);
     } }, encapsulation: 2 });
+__decorate([
+    Debounce$1(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], LayoutComponent.prototype, "refresh", null);
+__decorate([
+    Debounce$1(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], LayoutComponent.prototype, "deferredOnLayoutChanged", null);
+__decorate([
+    Yield$1(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], LayoutComponent.prototype, "onWindowBreakpointChanged", null);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(LayoutComponent, [{
         type: Component,
         args: [{
@@ -8754,9 +9540,13 @@ class LayoutComponent extends CoreBaseComponent {
             type: Input
         }], noExtraRightPaddingOneItemPerRow: [{
             type: Input
+        }], layoutConfig: [{
+            type: Input
         }], layoutChanged: [{
             type: Output
-        }] }); })();
+        }], windowBreakpointChanged: [{
+            type: Output
+        }], refresh: [], deferredOnLayoutChanged: [], onWindowBreakpointChanged: [] }); })();
 
 const _c0$g = [[["sme-editable-layout-item"]]];
 const _c1$7 = ["sme-editable-layout-item"];
@@ -24665,376 +25455,6 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], DataTableAccessibilityManager.prototype, "focusInTableCell", null);
 
-/**
- * It defines the number of breakpoints that WAC currently support.
- * add more scenarios when WAC is going to support scenarios like tablet etc.
- */
-var SmeResponsiveWindowBreakpointsValue;
-(function (SmeResponsiveWindowBreakpointsValue) {
-    SmeResponsiveWindowBreakpointsValue[SmeResponsiveWindowBreakpointsValue["Reflow"] = 399.98] = "Reflow";
-    SmeResponsiveWindowBreakpointsValue[SmeResponsiveWindowBreakpointsValue["PhoneDown"] = 767.98] = "PhoneDown";
-    SmeResponsiveWindowBreakpointsValue[SmeResponsiveWindowBreakpointsValue["PhoneUp"] = Number.MAX_SAFE_INTEGER] = "PhoneUp";
-})(SmeResponsiveWindowBreakpointsValue || (SmeResponsiveWindowBreakpointsValue = {}));
-/**
- * It defines the current supported scenario for window sizes.
- */
-var SmeResponsiveWindowBreakpoints;
-(function (SmeResponsiveWindowBreakpoints) {
-    SmeResponsiveWindowBreakpoints["Reflow"] = "Reflow";
-    SmeResponsiveWindowBreakpoints["PhoneDown"] = "PhoneDown";
-    SmeResponsiveWindowBreakpoints["PhoneUp"] = "PhoneUp";
-})(SmeResponsiveWindowBreakpoints || (SmeResponsiveWindowBreakpoints = {}));
-// tslint:disable-next-line: directive-class-suffix
-class SmeResponsiveWindowManagerComponent {
-    /**
-     * The manager supports layout component and in the meantime listening to the window size change event.
-     * @param layout the layout component.
-     */
-    constructor(layout) {
-        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((() => this.onLayoutChanged())));
-            // on window break point changes, emit the event about critical classes and styling updates signal.
-            this.subscriptions.push(layout.windowBreakpointChanged.subscribe(() => this.onWindowBreakpointChanged()));
-            this.deferredOnLayoutChanged();
-        }
-    }
-    /**
-     * Gets the current window responsive state.
-     */
-    get responsiveWindowState() {
-        return this.internalResponsiveWindowMode;
-    }
-    /**
-     * Sets the current window responsive state.
-     */
-    set responsiveWindowState(input) {
-        var _a;
-        const prevResponsiveWindowState = this.internalResponsiveWindowMode;
-        this.internalResponsiveWindowMode = input;
-        if (prevResponsiveWindowState !== this.internalResponsiveWindowMode) {
-            (_a = this.layout) === null || _a === void 0 ? void 0 : _a.windowBreakpointChanged.emit();
-        }
-    }
-    /**
-     * Gets the value indicating whether css v2 should be used.
-     */
-    get cssV2() {
-        return this.internalCssV2;
-    }
-    /**
-     * It sets the value for whether the current tool/solution is using css v2 for window responsiveness.
-     */
-    set cssV2(input) {
-        this.internalCssV2 = !!input;
-    }
-    /**
-     * Gets the phone down mode.
-     */
-    get phoneDown() {
-        return this.internalPhoneDown;
-    }
-    /**
-     * Sets the phone down mode.
-     */
-    set phoneDown(input) {
-        this.internalPhoneDown = !!input;
-    }
-    /**
-     * Gets the phone up mode.
-     */
-    get phoneUp() {
-        return this.internalPhoneUp;
-    }
-    /**
-     * Set the phone up mode.
-     */
-    set phoneUp(input) {
-        this.internalPhoneUp = !!input;
-    }
-    /**
-     * Gets the reflow mode.
-     */
-    get reflowMode() {
-        return this.internalReflowMode;
-    }
-    /**
-     * Sets the reflow mode.
-     */
-    set reflowMode(input) {
-        this.internalReflowMode = !!input;
-    }
-    /**
-     * Gets the width of the window from the window object.
-     * Should only be called on layout or window size change.
-     */
-    get width() {
-        return window === null || window === void 0 ? void 0 : window.innerWidth;
-    }
-    /**
-     * Gets the height of the window from the window object.
-     * Should only be called on layout or window size change.
-     */
-    get height() {
-        return window === null || window === void 0 ? void 0 : window.innerHeight;
-    }
-    /**
-     * Gets the last known window responsive data.
-     */
-    get prevSize() {
-        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();
-        }
-    }
-    /**
-     * Gets the window responsive break points.
-     */
-    get size() {
-        const width = this.width;
-        if (width <= SmeResponsiveWindowBreakpointsValue.Reflow) {
-            this.reflowMode = true;
-            this.phoneDown = false;
-            this.phoneUp = false;
-            this.responsiveWindowState = SmeResponsiveWindowBreakpoints.Reflow;
-        }
-        else if (width <= SmeResponsiveWindowBreakpointsValue.PhoneDown) {
-            this.reflowMode = false;
-            this.phoneDown = true;
-            this.phoneUp = false;
-            this.responsiveWindowState = SmeResponsiveWindowBreakpoints.PhoneDown;
-        }
-        else {
-            this.reflowMode = false;
-            this.phoneDown = false;
-            this.phoneUp = true;
-            this.responsiveWindowState = SmeResponsiveWindowBreakpoints.PhoneUp;
-        }
-        return this.responsiveWindowState;
-    }
-    /**
-     * It sets whether the current solution/tool is using the css v2 for window responsiveness.
-     */
-    setIsCssV2Enabled() {
-        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.
-     */
-    isUsingCssV2() {
-        const head = document.getElementsByTagName('head')[0];
-        const links = head.querySelectorAll('link');
-        let 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 (let i = 0; i < links.length; i++) {
-            const 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
-     */
-    getSmeResponsiveWindowData() {
-        // on window size or layout change, gets the width and height from the window object.
-        const width = this.width;
-        const height = this.height;
-        // based on the window size information, calculates the core paramters.
-        const size = this.size;
-        // the 3 gets above sets these following 3 parameters.
-        const reflowMode = this.reflowMode;
-        const phoneDown = this.phoneDown;
-        const 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.
-     */
-    onLayoutChanged() {
-        this.getSmeResponsiveWindowData();
-    }
-    /**
-     * The deferred layout changed handler.
-     */
-    deferredOnLayoutChanged() {
-        this.onLayoutChanged();
-    }
-    /**
-     * To respond to a layout breakpoint changed event.
-     * @returns void
-     */
-    onWindowBreakpointChanged() {
-        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
-     */
-    getParentElementByTag(inputElement, parentHtmlTags = ['sme-pivot', 'sme-split-view', 'sme-settings-page'], levelExternal = 10, customKeywords, untilTagName) {
-        if (!inputElement) {
-            return undefined;
-        }
-        let level = levelExternal;
-        let found = false;
-        let parent = inputElement;
-        while (level > 0 && !found) {
-            if (parent) {
-                parent = parent.parentElement;
-            }
-            const 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.
-     */
-    updateClassArrayOnWindowSize(settings, curSettings, element) {
-        if (!settings) {
-            return;
-        }
-        settings = JSON.parse(JSON.stringify(settings));
-        const phoneDown = JSON.parse(JSON.stringify(settings.phoneDown));
-        const phoneUp = JSON.parse(JSON.stringify(settings.phoneUp));
-        const reflow = JSON.parse(JSON.stringify(settings.reflow));
-        let toBeRemovedClassList = [];
-        let 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 (let i = 0; i < toBeRemovedClassList.length; i++) {
-            if (element.classList.contains(toBeRemovedClassList[i])) {
-                element.classList.remove(toBeRemovedClassList[i]);
-            }
-        }
-        for (let 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
-     */
-    uniqueArray(arrayA, arrayB) {
-        if (arrayB && arrayB.length) {
-            for (let 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.
-     */
-    removeExistedItem(toBeRemovedClassList, toBeAddedClassList) {
-        if (!toBeAddedClassList || !toBeAddedClassList.length) {
-            return toBeRemovedClassList;
-        }
-        if (!toBeRemovedClassList || !toBeRemovedClassList.length) {
-            return [];
-        }
-        const res = [];
-        for (let i = 0; i < toBeRemovedClassList.length; i++) {
-            if (!toBeAddedClassList.includes(toBeRemovedClassList[i])) {
-                res.push(toBeRemovedClassList[i]);
-            }
-        }
-        return res;
-    }
-}
-/** @nocollapse */ SmeResponsiveWindowManagerComponent.ɵfac = function SmeResponsiveWindowManagerComponent_Factory(t) { return new (t || SmeResponsiveWindowManagerComponent)(ɵɵdirectiveInject(SME_LAYOUT_PROVIDER)); };
-/** @nocollapse */ SmeResponsiveWindowManagerComponent.ɵdir = ɵɵdefineDirective({ type: SmeResponsiveWindowManagerComponent });
-__decorate([
-    Debounce$1(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], SmeResponsiveWindowManagerComponent.prototype, "deferredOnLayoutChanged", null);
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(SmeResponsiveWindowManagerComponent, [{
-        type: Directive
-    }], function () { return [{ type: undefined, decorators: [{
-                type: Inject,
-                args: [SME_LAYOUT_PROVIDER]
-            }] }]; }, { deferredOnLayoutChanged: [] }); })();
-
 class DataTableResponsiveWindowManager extends SmeResponsiveWindowManagerComponent {
     constructor() {
         super(...arguments);
@@ -38871,45 +39291,80 @@ class DialogModule {
     ConfirmationListDialogComponent], []);
 ɵɵsetComponentScope(DialogComponent, [NgIf, BackdropComponent, NgClass, TooltipDirective], []);
 
+function HeaderComponent_div_0_span_2_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelement(0, "span", 11);
+} if (rf & 2) {
+    const ctx_r5 = ɵɵnextContext(2);
+    ɵɵclassMap(ctx_r5.smeIconClassName ? ctx_r5.smeIconClassName : "");
+} }
+function HeaderComponent_div_0_span_3_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelement(0, "span", 12);
+} if (rf & 2) {
+    const ctx_r6 = ɵɵnextContext(2);
+    ɵɵstyleProp("background-image", ctx_r6.urlIcon);
+} }
+function HeaderComponent_div_0_ng_container_6_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementContainer(0);
+} }
 function HeaderComponent_div_0_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "div", 3);
-    ɵɵelementStart(1, "h2", 4);
-    ɵɵtext(2);
+    ɵɵelementStart(0, "div", 5);
+    ɵɵelementStart(1, "span", 6);
+    ɵɵtemplate(2, HeaderComponent_div_0_span_2_Template, 1, 2, "span", 7);
+    ɵɵtemplate(3, HeaderComponent_div_0_span_3_Template, 1, 2, "span", 8);
+    ɵɵelementStart(4, "span", 9);
+    ɵɵtext(5);
+    ɵɵelementEnd();
     ɵɵelementEnd();
-    ɵɵprojection(3);
+    ɵɵtemplate(6, HeaderComponent_div_0_ng_container_6_Template, 1, 0, "ng-container", 10);
     ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = ɵɵnextContext();
+    const _r3 = ɵɵreference(4);
     ɵɵadvance(1);
     ɵɵproperty("ngClass", ctx_r0.level === "" ? "sme-font-h3" : ctx_r0.styleTo);
     ɵɵadvance(1);
+    ɵɵproperty("ngIf", ctx_r0.smeIconClassName);
+    ɵɵadvance(1);
+    ɵɵproperty("ngIf", ctx_r0.urlIcon);
+    ɵɵadvance(2);
     ɵɵtextInterpolate(ctx_r0.text);
+    ɵɵadvance(1);
+    ɵɵproperty("ngTemplateOutlet", _r3);
 } }
 function HeaderComponent_h2_1_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "h2", 5);
+    ɵɵelementStart(0, "h2", 13);
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = ɵɵnextContext();
     ɵɵproperty("ngClass", ctx_r1.level === "" ? "sme-font-h3" : ctx_r1.styleTo);
     ɵɵadvance(1);
-    ɵɵtextInterpolate1(" ", ctx_r1.text, " ");
+    ɵɵtextInterpolate1(" ", ctx_r1.text, "\n");
+} }
+function HeaderComponent_div_2_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+    ɵɵelementContainer(0);
 } }
 function HeaderComponent_div_2_Template(rf, ctx) { if (rf & 1) {
-    ɵɵelementStart(0, "div", 6);
-    ɵɵelementStart(1, "h3", 4);
+    ɵɵelementStart(0, "div", 14);
+    ɵɵelementStart(1, "h3", 6);
     ɵɵtext(2);
     ɵɵelementEnd();
-    ɵɵprojection(3, 1);
+    ɵɵtemplate(3, HeaderComponent_div_2_ng_container_3_Template, 1, 0, "ng-container", 10);
     ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = ɵɵnextContext();
+    const _r3 = ɵɵreference(4);
     ɵɵadvance(1);
     ɵɵproperty("ngClass", ctx_r2.level !== "" ? ctx_r2.styleTo : "");
     ɵɵadvance(1);
     ɵɵtextInterpolate(ctx_r2.text);
+    ɵɵadvance(1);
+    ɵɵproperty("ngTemplateOutlet", _r3);
+} }
+function HeaderComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    ɵɵprojection(0);
 } }
-const _c0$1d = ["*", "*"];
+const _c0$1d = ["*"];
 /**
  *
  * @smeDoc {@label Header @id sme-header}
@@ -38922,12 +39377,26 @@ const _c0$1d = ["*", "*"];
  * @file {@filename component.html @filepath ./examples/header-example.component.html}
  *
  */
-class HeaderComponent {
-    constructor() {
+class HeaderComponent extends CoreBaseComponent {
+    constructor(injector) {
+        super(injector);
         this.styleTo = '';
         this.type = HeaderComponent.tool;
         this.text = '';
         this.level = '';
+        if (this.smeIconClassName && this.urlIcon) {
+            Logging.log({
+                level: LogLevel.Warning,
+                message: 'Either sme icon or url icon is accepted.',
+                source: `${this.logSourceName}.constructor`
+            });
+        }
+    }
+    /**
+     * The source name to use for logging
+     */
+    get logSourceName() {
+        return 'HeaderComponent';
     }
     /**
      * The method run when the component is initialized
@@ -38950,14 +39419,6 @@ class HeaderComponent {
                 this.styleTo = HeaderComponent.h4style;
                 break;
             }
-            case '5': {
-                this.styleTo = HeaderComponent.h5style;
-                break;
-            }
-            case '6': {
-                this.styleTo = HeaderComponent.h6style;
-                break;
-            }
             default: {
                 this.styleTo = '';
             }
@@ -38968,34 +39429,37 @@ 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 = ɵɵ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) { if (rf & 1) {
-        ɵɵprojectionDef(_c0$1d);
-        ɵɵtemplate(0, HeaderComponent_div_0_Template, 4, 2, "div", 0);
+HeaderComponent.h4style = 'sme-font-h4 sme-font-h4-no-spacing';
+/** @nocollapse */ HeaderComponent.ɵfac = function HeaderComponent_Factory(t) { return new (t || HeaderComponent)(ɵɵdirectiveInject(Injector)); };
+/** @nocollapse */ HeaderComponent.ɵcmp = ɵɵdefineComponent({ type: HeaderComponent, selectors: [["sme-header"]], inputs: { type: "type", text: "text", level: "level", smeIconClassName: "smeIconClassName", urlIcon: "urlIcon" }, features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$1d, decls: 5, vars: 3, consts: [["class", "sme-layout-flex sme-position-flex-align-center sme-layout-tool-header", 4, "ngIf"], ["id", "sme-dialog-title", 3, "ngClass", 4, "ngIf"], ["class", "sme-position-flex-none sme-layout-settings-header", 4, "ngIf"], ["class", "sme-padding-left-xs"], ["contentTemplate", ""], [1, "sme-layout-flex", "sme-position-flex-align-center", "sme-layout-tool-header"], [3, "ngClass"], ["class", "sme-position-align-v-inline-middle sme-icon", 3, "class", 4, "ngIf"], ["class", "sme-position-align-v-inline-middle sme-url-icon", 3, "background-image", 4, "ngIf"], [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) {
+        ɵɵprojectionDef();
+        ɵɵtemplate(0, HeaderComponent_div_0_Template, 7, 5, "div", 0);
         ɵɵtemplate(1, HeaderComponent_h2_1_Template, 2, 2, "h2", 1);
-        ɵɵtemplate(2, HeaderComponent_div_2_Template, 4, 2, "div", 2);
+        ɵɵtemplate(2, HeaderComponent_div_2_Template, 4, 3, "div", 2);
+        ɵɵtemplate(3, HeaderComponent_ng_template_3_Template, 1, 0, "ng-template", 3, 4, ɵɵtemplateRefExtractor);
     } if (rf & 2) {
         ɵɵproperty("ngIf", ctx.type === "tool-header");
         ɵɵadvance(1);
         ɵɵproperty("ngIf", ctx.type === "dialog-header");
         ɵɵadvance(1);
         ɵɵproperty("ngIf", ctx.type === "settings-page-header");
-    } }, directives: [NgIf, NgClass], encapsulation: 2 });
+    } }, directives: [NgIf, NgClass, NgTemplateOutlet], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(HeaderComponent, [{
         type: Component,
         args: [{
                 selector: 'sme-header',
                 templateUrl: './header.component.html'
             }]
-    }], null, { type: [{
+    }], function () { return [{ type: Injector }]; }, { type: [{
             type: Input
         }], text: [{
             type: Input
         }], level: [{
             type: Input
+        }], smeIconClassName: [{
+            type: Input
+        }], urlIcon: [{
+            type: Input
         }] }); })();
 
 class HeaderModule {
@@ -42602,6 +43066,10 @@ class PropertyGridComponent extends CoreBaseComponent {
          * Implementation of the Layout interface
          */
         this.layoutChanged = new EventEmitter();
+        /**
+         * Implementation of the Layout interface
+         */
+        this.windowBreakpointChanged = new EventEmitter();
         this.propertyGridResponsiveWindowManager = new PropertyGridResponsiveWindowManager();
         // old style supported sme-property-grid-arrange-vertical class. default to vertical orientation if this class is applied.
         const hasVerticalClass = this.hostElement.nativeElement.classList.contains('sme-property-grid-arrange-vertical');
@@ -42718,7 +43186,7 @@ class PropertyGridComponent extends CoreBaseComponent {
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.actionLinkTemplate = _t.first);
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.internalLinkTemplate = _t.first);
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.externalLinkTemplate = _t.first);
-    } }, inputs: { orientation: "orientation" }, outputs: { layoutChanged: "layoutChanged" }, features: [ɵɵProvidersFeature([
+    } }, inputs: { orientation: "orientation" }, outputs: { layoutChanged: "layoutChanged", windowBreakpointChanged: "windowBreakpointChanged" }, features: [ɵɵProvidersFeature([
             { provide: SME_LAYOUT_PROVIDER, useExisting: forwardRef((() => PropertyGridComponent)) }
         ]), ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature], decls: 16, vars: 6, consts: [[1, "sme-position-inset-none", "sme-position-stretch-h", 3, "padLastItem"], ["layout", ""], ["name", "narrow", 3, "until", "columns"], ["name", "medium", 3, "until", "columns", 4, "ngIf"], ["name", "wide", 3, "columns", 4, "ngIf"], [3, "columnSpan", "maxWidth", 4, "ngFor", "ngForOf"], ["readonlyTemplate", ""], ["actionLinkTemplate", ""], ["internalLinkTemplate", ""], ["externalLinkTemplate", ""], ["iconTemplate", ""], ["name", "medium", 3, "until", "columns"], ["name", "wide", 3, "columns"], [3, "columnSpan", "maxWidth"], ["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) {
         ɵɵelementStart(0, "sme-layout", 0, 1);
@@ -42778,6 +43246,8 @@ class PropertyGridComponent extends CoreBaseComponent {
             type: Input
         }], layoutChanged: [{
             type: Output
+        }], windowBreakpointChanged: [{
+            type: Output
         }] }); })();
 
 class PropertyGridModule {
@@ -46987,6 +47457,10 @@ class SettingsComponent extends CoreBaseComponent {
          * Separator used in sticky header on top of Settings page
          */
         this.headerSeparator = '|';
+        /**
+         * The generator for layout config.
+         */
+        this.layoutConfigGenerator = new LayoutConfigGenerator();
         this.autoFocus = true;
     }
     /**
@@ -47007,6 +47481,7 @@ class SettingsComponent extends CoreBaseComponent {
             this.autoFocus = true;
         }), this.settingsForms.formRemoved().subscribe((form) => { MsftSme.remove(this.allForms, form); }));
         this.fullSettingsTitle = this.settingsTitle;
+        this.currentLayoutConfig = this.layoutConfigGenerator.initialize([300, '100']);
     }
     ngOnDestroy() {
         super.ngOnDestroy();
@@ -47065,7 +47540,7 @@ class SettingsComponent extends CoreBaseComponent {
     }
 }
 /** @nocollapse */ SettingsComponent.ɵfac = function SettingsComponent_Factory(t) { return new (t || SettingsComponent)(ɵɵdirectiveInject(Injector)); };
-/** @nocollapse */ SettingsComponent.ɵcmp = ɵɵdefineComponent({ type: SettingsComponent, selectors: [["sme-settings"]], inputs: { addPadding: "addPadding", backRoute: "backRoute", settingsTitle: "settingsTitle", selectedSettingsTitle: "selectedSettingsTitle" }, features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$Q, decls: 12, vars: 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) { if (rf & 1) {
+/** @nocollapse */ SettingsComponent.ɵcmp = ɵɵdefineComponent({ type: SettingsComponent, selectors: [["sme-settings"]], inputs: { addPadding: "addPadding", backRoute: "backRoute", settingsTitle: "settingsTitle", selectedSettingsTitle: "selectedSettingsTitle" }, features: [ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$Q, decls: 12, vars: 10, consts: [[1, "sme-arrange-stack-v", "sme-layout-relative", "sme-arrange-overflow-auto-y-phone-up", "sme-position-stretch"], ["class", "sme-layout-tool-header sme-position-flex-none sme-arrange-ellipsis sme-padding-bottom-none sme-padding-left-md", 4, "ngIf"], [1, "sme-position-flex-auto", "sme-arrange-overflow-auto", 3, "padLastItem", "layoutConfig", "itemHorizontalSpace"], ["layout", ""], ["name", "narrow", 3, "until", "columns"], ["name", "wide", 3, "columns"], [3, "columnSpan", "ngClass"], [1, "sme-position-stretch", "sme-padding-left-xl", "sme-padding-top-xs", 3, "columnSpan"], [1, "sme-layout-tool-header", "sme-position-flex-none", "sme-arrange-ellipsis", "sme-padding-bottom-none", "sme-padding-left-md"], [1, "sme-font-h3", "sme-arrange-ellipsis", "sme-position-stretch-h", 3, "title"], ["class", "sme-padding-horizontal-sm sme-font-family-normal", 4, "ngIf"], ["class", "sme-font-family-normal", 4, "ngIf"], [1, "sme-padding-horizontal-sm", "sme-font-family-normal"], [1, "sme-font-family-normal"]], template: function SettingsComponent_Template(rf, ctx) { if (rf & 1) {
         ɵɵprojectionDef(_c0$1u);
         ɵɵelementStart(0, "div", 0);
         ɵɵtemplate(1, SettingsComponent_div_1_Template, 5, 5, "div", 1);
@@ -47087,7 +47562,7 @@ class SettingsComponent extends CoreBaseComponent {
         ɵɵadvance(1);
         ɵɵproperty("ngIf", ctx.settingsTitle);
         ɵɵadvance(1);
-        ɵɵproperty("padLastItem", false);
+        ɵɵproperty("padLastItem", false)("layoutConfig", ctx.currentLayoutConfig)("itemHorizontalSpace", 36);
         ɵɵadvance(2);
         ɵɵproperty("until", 768)("columns", 1);
         ɵɵadvance(1);
@@ -51970,5 +52445,5 @@ function getFullRouteParams(route) {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionModule, AccordionPanelComponent, ActionBarComponent, ActionBarDirective, ActionButton, ActionButtonAsync, ActionButtonAsyncComponent, ActionButtonComponent, ActionButtonRendererComponent, ActionContainerComponent, ActionDropdown, ActionDropdownComponent, ActionDropdownRendererComponent, ActionItem, ActionItemComponent, ActionItemRendererComponent, ActionItemSeparator, ActionItemSeparatorComponent, ActionItemSeparatorRendererComponent, ActionMenuComponent, ActionsModule, ActiveConnectionService, ActiveDirectoryModule, ActiveDirectorySearchFormFieldComponent, ActiveDirectoryService, AlertBarComponent, AlertBarModule, AlertBarService, AlertSeverity, AppContextService, AppErrorHandler, ApplyMode, AriaLiveOptions, ArrayFormFieldComponent, ArrayFormFieldLoaderComponent, ArrayPropertySchemaFieldLoaderComponent, AuthorizationService, AutofocusDirective, AutofocusModule, AzureManagerService, BackdropComponent, BackdropModule, BackgroundExtensionRootComponent, BadgeBaseComponent, BadgeFeatureTypes, BadgeModule, BannerComponent, BannerModule, BaseComponent, BaseDialogComponent, BaseFormData, BasePropertiesForm, BasicFormLoaderComponent, BatchService, BooleanConverterPipe, BooleanConverterPipeModule, BreadcrumbComponent, BreadcrumbHeaderComponent, BreadcrumbHeaderModule, BreadcrumbModule, BreadcrumbSeparator, BugFixesFeatureBadgeComponent, ByteUnitConverterPipe, ByteUnitConverterPipeModule, CAPSLOCK_VALIDATOR, CalendarFormFieldComponent, CanDeactivateGuard, CapacityBarChartComponent, CapacityBase, CapacityDoughnutChartComponent, CapsLockValidatorDirective, ChartComponent, ChartModule, CheckboxFormFieldComponent, CheckboxFormFieldLoaderComponent, ChecklistFormFieldComponent, ChecklistFormFieldLoaderComponent, ChoiceDialogComponent, CimService, CimStreamService, ClampDirective, ClampModule, ClockFormFieldComponent, CodeFormFieldComponent, CodeFormFieldLoaderComponent, ColumnPickerService, ComboboxFormFieldComponent, ComboboxFormFieldLoaderComponent, ComingSoonBadgeComponent, CommonDialogsComponent, CommonSettingsComponent, CommonSettingsComponentBase, ConfirmationDialogComponent, ConfirmationListDialogComponent, ConnectionService, ConnectivityEnforcer, ConnectivityLevel, ContextDropdownComponent, ContextMenuComponent, ContextMenuDirective, ContextMenuModule, CoreServiceModule, CredSSPEnabledBadgeComponent, CredSSPManagerService, CriticalBadgeComponent, CustomBadgeComponent, DataOnlyFormFieldLoaderComponent, DataTableColumnComponent, DataTableColumnPickerExtension, DataTableComponent, DataTableModule, DataTableMultipleSelectMode, DataTableRenderedItemType, DataTableSortMode, DateConverterPipe, DateConverterPipeModule, DateFormFieldComponent, DateTimeFormFieldComponent, DateTimeRangeFormFieldComponent, DateTimeRangeOptionComponent, Debounce, DeleteColumnComponent, Deprecated, DetailsComponent, DetailsModule, DevGuardService, DialogChangeEvent, DialogCloseReason, DialogComponent, DialogContentComponent, DialogFooterComponent, DialogHeaderComponent, DialogMode, DialogModule, DialogService, DisabledChangedEvent, DisabledDirective, DisabledModule, DiscardDirective, DiscardModule, DocumentationComponent, DocumentationModule, DoughnutChartComponent, DoughnutChartModule, DropdownComponent, DropdownModule, DropdownService, DynamicActionItemComponent, DynamicComponentBase, EditableCollectionItem, EditableLayoutComponent, EditableLayoutItemComponent, ElectronService, EnumConverterPipe, EnumConverterPipeModule, ExperimentGuardService, ExtensionBrokerService, ExtensionDialogComponent, ExtensionRootModule, FeedbackBadgeComponent, FieldsetDirective, FileFormFieldComponent, FileFormFieldLoaderComponent, FileTransferService, FilterPipe, FilterPipeModule, FormAsyncValidatorBase, FormField, FormFieldAccessor, FormFieldAccessorDirective, FormFieldAsyncValidatorDirective, FormFieldComponent, FormFieldIsolatorComponent, FormFieldLayoutComponent, FormFieldOptionComponent, FormFieldOptionSubFormTemplateLoaderComponent, FormFieldOrientation, FormFieldTemplateDirective, FormFieldValidatorDirective, FormValidatorBase, FormWizardStepComponent, FormatPipe, FormatPipeModule, FrameService, GatewayService, GuardsModule, GuidedPaneComponent, GuidedPanelComponent, GuidedPanelModule, HeaderComponent, HeaderModule, HealthAlertSeverity, HighlightPipe, HighlightPipeModule, HorizontalBarChartComponent, HorizontalBarChartModule, HttpService, IconLayerComponent, IconModule, IdleComponent, IdleModule, ImprovementFeatureBadgeComponent, InputValidatorDirective, InstallationTypeGuardService, JobsService, JsonFormFieldComponent, JsonFormFieldLoaderComponent, LayeredIconComponent, LayoutComponent, LayoutDefinitionComponent, LayoutItemComponent, LayoutModule, LegendComponent, LegendEntryComponent, LegendModule, LifetimeService, LineChartComponent, LineChartModule, LineChartType, ListFormFieldComponent, LoadingWheelComponent, LoadingWheelModule, LoadingWheelSize, LocalDateConverterPipe, MachineNameValidatorDirective, MarkdownDirective, MarkdownModule, MasterViewComponent, MasterViewModule, MatchFieldValidatorDirective, MediaConversion2, MessageDialogComponent, Monaco, Navigation, NavigationService, NavigationTitle, NewBadgeComponent, NewFeatureBadgeComponent, NodeCredentialsFormComponent, NodeCredentialsFormModule, NodeService, NotificationService, NumberFormFieldComponent, NumberFormFieldLoaderComponent, ObjectDefaultFormFieldLoaderComponent, ObjectPropertySchemaFieldLoaderComponent, OptionsFormFieldComponent, OrderedListFormFieldComponent, OrderedListFormFieldLoaderComponent, PageAlertBarComponent, PageAlertBarModule, PanelControlComponent, PasswordFormFieldComponent, PasswordFormFieldLoaderComponent, PivotComponent, PivotModule, PivotTabComponent, PivotTabType, PowerShellService, PowerShellStreamService, PreviewBadgeComponent, PropertyGridComponent, PropertyGridItemComponent, PropertyGridModule, QueryDataItemPresetGenerator, QueryDataItemValueType, QueryDataOperand, QueryEditorComponent, QueryEditorModule, RadioGroupFormFieldComponent, RadioGroupFormFieldLoaderComponent, RatingRadioGroupFormFieldComponent, ReactiveForm, ReactiveFormAccessor, ReactiveFormWizardStepComponent, ReadonlyFormFieldComponent, RequiredTrimmedValidatorDirective, ResizerComponent, ResizerModule, ResourceService, RpcService, RpcShellService, SME_ASYNC_VALIDATORS, SME_FORM_FIELD_VALIDATION_ALERT_CONTAINER_PROVIDER, SME_LAYOUT_PROVIDER, SME_VALIDATORS, ScheduleRebootService, SchemaDataTypeStore, SchemaFieldContext, SchemaFieldHostComponent, SchemaFieldHostModule, SchemaFieldLoaderComponentBase, SchemaFormComponent, SchemaFormModule, SchemaPrimitiveType, SchemaUtilities, SearchFormFieldComponent, SecureExtensionDataService, SelectFormFieldDirective, SettingsComponent, SettingsContentComponent, SettingsFooterComponent, SettingsFormDirective, SettingsFormService, SettingsHeaderComponent, SettingsModule, SettingsNavigationComponent, SettingsPageComponent, SettingsService, SimplePropertySchemaFieldLoaderComponent, SliderFormFieldComponent, SliderFormFieldLoaderComponent, SmeExtensionService, SmeFormsModule, SmeInject, SmeInjectable, SmeInjectableBase, SmeInternalFormFieldComponent, SmeResponsiveWindowBreakpoints, SmeResponsiveWindowBreakpointsValue, SmeResponsiveWindowManagerComponent, SmeRouterLinkDirective, SmeRouterModule, SmeSchemaProperty, SmeTemplateOutletModule, SmeUxComponent, SmeUxModule, SnapInExtensionComponent, SnapInExtensionModule, SplitViewComponent, SplitViewContentComponent, SplitViewModule, SplitViewPaneComponent, StackedBarComponent, StackedHorizontalBarChartComponent, StatusIconComponent, StatusIconType, SvgDirective, SvgInlineDirective, SvgInlineResource, SvgModule, SvgResource, TabbedFormController, TabbedFormItemController, TabbedFormLoaderComponent, TabbedLineChartGroupComponent, TagService, TagsActionButtonComponent, TagsColumnComponent, TagsFormFieldComponent, TagsFormFieldLoaderComponent, TelemetryDirective, TelemetryDirectiveModule, TemplateDrivenWizardStepComponent, TemplateOutletDirective, TextFormFieldComponent, TextFormFieldLoaderComponent, TileComponent, TileContentComponent, TileDirectivesModule, TileImageDirective, TileModule, TileRadioGroupFormFieldComponent, TimeFormFieldComponent, ToggleSwitchFormFieldComponent, ToggleSwitchFormFieldLoaderComponent, ToolHeaderComponent, ToolHeaderModule, TooltipDirective, TooltipHostComponent, TooltipHostInstance, TooltipModule, TooltipPlacement, TooltipZoneDirective, TreeTableComponent, UserAliveService, UxExtensionRootComponent, ValidationAlertComponent, ValidationAlertSeverity, WarningBadgeComponent, WebsocketStreamService, WizardAsParent, WizardBuilder, WizardComponent, WizardModule, WizardNavigationInformation, WizardStage, WizardStep, WizardStepComponent, WorkItemService, YesNoConverterPipe, YesNoConverterPipeModule, Yield, alertDialog, getFullRouteParams, modalDialog };
+export { AccordionComponent, AccordionModule, AccordionPanelComponent, ActionBarComponent, ActionBarDirective, ActionButton, ActionButtonAsync, ActionButtonAsyncComponent, ActionButtonComponent, ActionButtonRendererComponent, ActionContainerComponent, ActionDropdown, ActionDropdownComponent, ActionDropdownRendererComponent, ActionItem, ActionItemComponent, ActionItemRendererComponent, ActionItemSeparator, ActionItemSeparatorComponent, ActionItemSeparatorRendererComponent, ActionMenuComponent, ActionsModule, ActiveConnectionService, ActiveDirectoryModule, ActiveDirectorySearchFormFieldComponent, ActiveDirectoryService, AlertBarComponent, AlertBarModule, AlertBarService, AlertSeverity, AppContextService, AppErrorHandler, ApplyMode, AriaLiveOptions, ArrayFormFieldComponent, ArrayFormFieldLoaderComponent, ArrayPropertySchemaFieldLoaderComponent, AuthorizationService, AutofocusDirective, AutofocusModule, AzureManagerService, BackdropComponent, BackdropModule, BackgroundExtensionRootComponent, BadgeBaseComponent, BadgeFeatureTypes, BadgeModule, BannerComponent, BannerModule, BaseComponent, BaseDialogComponent, BaseFormData, BasePropertiesForm, BasicFormLoaderComponent, BatchService, BooleanConverterPipe, BooleanConverterPipeModule, BreadcrumbComponent, BreadcrumbHeaderComponent, BreadcrumbHeaderModule, BreadcrumbModule, BreadcrumbSeparator, BugFixesFeatureBadgeComponent, ByteUnitConverterPipe, ByteUnitConverterPipeModule, CAPSLOCK_VALIDATOR, CalendarFormFieldComponent, CanDeactivateGuard, CapacityBarChartComponent, CapacityBase, CapacityDoughnutChartComponent, CapsLockValidatorDirective, ChartComponent, ChartModule, CheckboxFormFieldComponent, CheckboxFormFieldLoaderComponent, ChecklistFormFieldComponent, ChecklistFormFieldLoaderComponent, ChoiceDialogComponent, CimService, CimStreamService, ClampDirective, ClampModule, ClockFormFieldComponent, CodeFormFieldComponent, CodeFormFieldLoaderComponent, ColumnPickerService, ComboboxFormFieldComponent, ComboboxFormFieldLoaderComponent, ComingSoonBadgeComponent, CommonDialogsComponent, CommonSettingsComponent, CommonSettingsComponentBase, ConfirmationDialogComponent, ConfirmationListDialogComponent, ConnectionService, ConnectivityEnforcer, ConnectivityLevel, ContextDropdownComponent, ContextMenuComponent, ContextMenuDirective, ContextMenuModule, CoreServiceModule, CredSSPEnabledBadgeComponent, CredSSPManagerService, CriticalBadgeComponent, CustomBadgeComponent, DataOnlyFormFieldLoaderComponent, DataTableColumnComponent, DataTableColumnPickerExtension, DataTableComponent, DataTableModule, DataTableMultipleSelectMode, DataTableRenderedItemType, DataTableSortMode, DateConverterPipe, DateConverterPipeModule, DateFormFieldComponent, DateTimeFormFieldComponent, DateTimeRangeFormFieldComponent, DateTimeRangeOptionComponent, Debounce, DeleteColumnComponent, Deprecated, DetailsComponent, DetailsModule, DevGuardService, DialogChangeEvent, DialogCloseReason, DialogComponent, DialogContentComponent, DialogFooterComponent, DialogHeaderComponent, DialogMode, DialogModule, DialogService, DisabledChangedEvent, DisabledDirective, DisabledModule, DiscardDirective, DiscardModule, DocumentationComponent, DocumentationModule, DoughnutChartComponent, DoughnutChartModule, DropdownComponent, DropdownModule, DropdownService, DynamicActionItemComponent, DynamicComponentBase, EditableCollectionItem, EditableLayoutComponent, EditableLayoutItemComponent, ElectronService, EnumConverterPipe, EnumConverterPipeModule, ExperimentGuardService, ExtensionBrokerService, ExtensionDialogComponent, ExtensionRootModule, FeedbackBadgeComponent, FieldsetDirective, FileFormFieldComponent, FileFormFieldLoaderComponent, FileTransferService, FilterPipe, FilterPipeModule, FormAsyncValidatorBase, FormField, FormFieldAccessor, FormFieldAccessorDirective, FormFieldAsyncValidatorDirective, FormFieldComponent, FormFieldIsolatorComponent, FormFieldLayoutComponent, FormFieldOptionComponent, FormFieldOptionSubFormTemplateLoaderComponent, FormFieldOrientation, FormFieldTemplateDirective, FormFieldValidatorDirective, FormValidatorBase, FormWizardStepComponent, FormatPipe, FormatPipeModule, FrameService, GatewayService, GuardsModule, GuidedPaneComponent, GuidedPanelComponent, GuidedPanelModule, HeaderComponent, HeaderModule, HealthAlertSeverity, HighlightPipe, HighlightPipeModule, HorizontalBarChartComponent, HorizontalBarChartModule, HttpService, IconLayerComponent, IconModule, IdleComponent, IdleModule, ImprovementFeatureBadgeComponent, InputValidatorDirective, InstallationTypeGuardService, JobsService, JsonFormFieldComponent, JsonFormFieldLoaderComponent, LayeredIconComponent, LayoutComponent, LayoutConfigGenerator, LayoutDefinitionComponent, LayoutDrivenType, LayoutItemComponent, LayoutItemConfigMode, LayoutItemConfigPropertyWidthType, LayoutModule, LegendComponent, LegendEntryComponent, LegendModule, LifetimeService, LineChartComponent, LineChartModule, LineChartType, ListFormFieldComponent, LoadingWheelComponent, LoadingWheelModule, LoadingWheelSize, LocalDateConverterPipe, MachineNameValidatorDirective, MarkdownDirective, MarkdownModule, MasterViewComponent, MasterViewModule, MatchFieldValidatorDirective, MediaConversion2, MessageDialogComponent, Monaco, Navigation, NavigationService, NavigationTitle, NewBadgeComponent, NewFeatureBadgeComponent, NodeCredentialsFormComponent, NodeCredentialsFormModule, NodeService, NotificationService, NumberFormFieldComponent, NumberFormFieldLoaderComponent, ObjectDefaultFormFieldLoaderComponent, ObjectPropertySchemaFieldLoaderComponent, OptionsFormFieldComponent, OrderedListFormFieldComponent, OrderedListFormFieldLoaderComponent, PageAlertBarComponent, PageAlertBarModule, PanelControlComponent, PasswordFormFieldComponent, PasswordFormFieldLoaderComponent, PivotComponent, PivotModule, PivotTabComponent, PivotTabType, PowerShellService, PowerShellStreamService, PreviewBadgeComponent, PropertyGridComponent, PropertyGridItemComponent, PropertyGridModule, QueryDataItemPresetGenerator, QueryDataItemValueType, QueryDataOperand, QueryEditorComponent, QueryEditorModule, RadioGroupFormFieldComponent, RadioGroupFormFieldLoaderComponent, RatingRadioGroupFormFieldComponent, ReactiveForm, ReactiveFormAccessor, ReactiveFormWizardStepComponent, ReadonlyFormFieldComponent, RequiredTrimmedValidatorDirective, ResizerComponent, ResizerModule, ResourceService, RpcService, RpcShellService, SME_ASYNC_VALIDATORS, SME_FORM_FIELD_VALIDATION_ALERT_CONTAINER_PROVIDER, SME_LAYOUT_PROVIDER, SME_VALIDATORS, ScheduleRebootService, SchemaDataTypeStore, SchemaFieldContext, SchemaFieldHostComponent, SchemaFieldHostModule, SchemaFieldLoaderComponentBase, SchemaFormComponent, SchemaFormModule, SchemaPrimitiveType, SchemaUtilities, SearchFormFieldComponent, SecureExtensionDataService, SelectFormFieldDirective, SettingsComponent, SettingsContentComponent, SettingsFooterComponent, SettingsFormDirective, SettingsFormService, SettingsHeaderComponent, SettingsModule, SettingsNavigationComponent, SettingsPageComponent, SettingsService, SimplePropertySchemaFieldLoaderComponent, SliderFormFieldComponent, SliderFormFieldLoaderComponent, SmeExtensionService, SmeFormsModule, SmeInject, SmeInjectable, SmeInjectableBase, SmeInternalFormFieldComponent, SmeResponsiveWindowBreakpoints, SmeResponsiveWindowBreakpointsValue, SmeResponsiveWindowManagerComponent, SmeRouterLinkDirective, SmeRouterModule, SmeSchemaProperty, SmeTemplateOutletModule, SmeUxComponent, SmeUxModule, SnapInExtensionComponent, SnapInExtensionModule, SplitViewComponent, SplitViewContentComponent, SplitViewModule, SplitViewPaneComponent, StackedBarComponent, StackedHorizontalBarChartComponent, StatusIconComponent, StatusIconType, SvgDirective, SvgInlineDirective, SvgInlineResource, SvgModule, SvgResource, TabbedFormController, TabbedFormItemController, TabbedFormLoaderComponent, TabbedLineChartGroupComponent, TagService, TagsActionButtonComponent, TagsColumnComponent, TagsFormFieldComponent, TagsFormFieldLoaderComponent, TelemetryDirective, TelemetryDirectiveModule, TemplateDrivenWizardStepComponent, TemplateOutletDirective, TextFormFieldComponent, TextFormFieldLoaderComponent, TileComponent, TileContentComponent, TileDirectivesModule, TileImageDirective, TileModule, TileRadioGroupFormFieldComponent, TimeFormFieldComponent, ToggleSwitchFormFieldComponent, ToggleSwitchFormFieldLoaderComponent, ToolHeaderComponent, ToolHeaderModule, TooltipDirective, TooltipHostComponent, TooltipHostInstance, TooltipModule, TooltipPlacement, TooltipZoneDirective, TreeTableComponent, UserAliveService, UxExtensionRootComponent, ValidationAlertComponent, ValidationAlertSeverity, WarningBadgeComponent, WebsocketStreamService, WizardAsParent, WizardBuilder, WizardComponent, WizardModule, WizardNavigationInformation, WizardStage, WizardStep, WizardStepComponent, WorkItemService, YesNoConverterPipe, YesNoConverterPipeModule, Yield, alertDialog, getFullRouteParams, modalDialog };
 //# sourceMappingURL=microsoft-windows-admin-center-sdk-angular.js.map