@sapui5/sap.ushell 1.114.0 → 1.115.1

package/src/main/js/sap/ushell/renderers/fiori2/ShellAsync.view.js

@@ -41,6 +41,11 @@ sap.ui.define([
         return sap.ui.getCore().byId(oContext.getObject());
     }
 
+    var BINDING_TYPE = {
+        Property: "Property",
+        List: "List"
+    };
+
     return View.extend("sap.ushell.renderers.fiori2.ShellAsync", {
         getControllerName: function () {
             return "sap.ushell.renderers.fiori2.Shell";
@@ -49,7 +54,7 @@ sap.ui.define([
         waitForShellLayout: function () {
             if (!this._oShellLayoutPromise) {
                 this._oShellLayoutPromise = new Promise(function (resolve) {
-                    this.aDoables.push(EventHub.once("ShellLayoutApplied").do(resolve));
+                    this.getController().addDoable(EventHub.once("ShellLayoutApplied").do(resolve));
                 }.bind(this));
             }
             return this._oShellLayoutPromise;
@@ -63,34 +68,27 @@ sap.ui.define([
             return this.getViewData().helperModel;
         },
 
-        createContent: function (oController) {
-            this.oController = oController;
+        getViewDataConfig: function () {
             var oViewData = this.getViewData() || {};
             var oConfig = oViewData.config || {};
+            return oConfig;
+        },
 
-            this.oConfig = oConfig;
-            this.aDoables = [];
-            this.aDanglingControls = [];
-            this.aDanglingBindings = [];
-            this.aPendingInitializations = [];
-
+        createContent: function () {
             // Change config if more then three buttons moved to the header
-            this._allowUpToThreeActionInShellHeader(oConfig);
+            this._allowUpToThreeActionInShellHeader();
 
             // BackgroundImage
             this.initBackgroundImage();
 
-            // ShellHeader
-            var oShellHeaderPromise = this.createShellHeader(oConfig, this.getShellModel());
+            // ShellHeader + HeaderControlManager.init
+            var oShellHeaderPromise = this.createShellHeader();
 
             // NavigationBar
             this.setNavigationBarMinHeight();
 
             // RendererRootView / viewPortContainer
-            var oRendererRootViewPromise = this.createRendererRootView(oController);
-
-            // todo check when/where we want to have this
-            this.initCanvasShapesManager();
+            var oRendererRootViewPromise = this.createRendererRootView();
 
             this.setDisplayBlock(true);
 
@@ -101,31 +99,43 @@ sap.ui.define([
                 oShellHeaderPromise // we have to wait as well otherwise the HeaderControlManager is initialized late
             ]).then(function (aResults) {
                 var oRendererRootView = aResults[0];
+
+                this.initCanvasShapesManager();
+
                 return oRendererRootView;
-            });
+            }.bind(this));
         },
 
         initBackgroundImage: function () {
             this.waitForShellLayout().then(function () {
                 var oDomRef = document.getElementById(ShellLayoutMapping.BackgroundImage);
-                oDomRef.classList.add("sapMShellBG", "sapUiGlobalBackgroundImage", "sapUiShellBackgroundImage", "sapUiGlobalBackgroundImageForce", "sapUshellShellBG", "sapContrastPlus");
+                var sBackgroundHtml = [
+                    // "Shell Canvas" category in ThemeDesigner
+                    "<div class='sapUiShellBackgroundImage sapUiGlobalBackgroundImageForce sapUshellShellBG sapContrastPlus'></div>",
+                    // "Application Background" category in ThemeDesigner
+                    "<div class='sapUshellShellBGsapMShellBG sapUiGlobalBackgroundImage'></div>"
+                ].join("\n");
+                oDomRef.insertAdjacentHTML("afterbegin", sBackgroundHtml);
             });
         },
 
-        createRendererRootView: function (oController) {
+        createRendererRootView: function () {
+            var oController = this.getController();
             return Fragment.load({
                 name: "sap.ushell.ui.RendererRootView",
                 controller: oController
             }).then(function (oRendererRootView) {
                 oRendererRootView.updateAggregation = this.updateShellAggregation;
 
-                this.addDanglingControl(sap.ui.getCore().byId("viewPortContainer")); // todo why should this be dangling?
+                sap.ui.getCore().byId("viewPortContainer");
 
                 return oRendererRootView;
             }.bind(this));
         },
 
-        createShellHeader: function (oConfig, oShellModel) {
+        createShellHeader: function () {
+            var oConfig = this.getViewDataConfig();
+            var oShellModel = this.getShellModel();
             // Create own model for the header
             var oShellHeaderModel = Config.createModel("/core/shellHeader", JSONModel);
             var oHeaderController = new ShellHeaderController();
@@ -175,52 +185,49 @@ sap.ui.define([
         },
 
         createRightFloatingContainer: function () {
-            sap.ui.require(["sap/ushell/ui/shell/RightFloatingContainer"], function (RightFloatingContainer) {
-                var oRightFloatingContainer = new RightFloatingContainer({
-                    id: "right-floating-container",
-                    top: "2",
-                    hideItemsAfterPresentation: true,
-                    visible: "{/currentState/showRightFloatingContainer}",
-                    floatingContainerItems: {
-                        path: "/currentState/RightFloatingContainerItems",
-                        factory: fnShellUpdateAggItem
-                    }
-                });
-                oRightFloatingContainer.updateAggregation = this.updateShellAggregation;
+            this.addPendingInitialization(new Promise(function (resolve) {
+                sap.ui.require(["sap/ushell/ui/shell/RightFloatingContainer"], function (RightFloatingContainer) {
+                    var oRightFloatingContainer = new RightFloatingContainer({
+                        id: "right-floating-container",
+                        top: "2",
+                        hideItemsAfterPresentation: true,
+                        visible: "{/currentState/showRightFloatingContainer}",
+                        floatingContainerItems: {
+                            path: "/currentState/RightFloatingContainerItems",
+                            factory: fnShellUpdateAggItem
+                        }
+                    });
+                    oRightFloatingContainer.updateAggregation = this.updateShellAggregation;
 
-                oRightFloatingContainer.setModel(this.getShellModel());
-                this.addDanglingControl(oRightFloatingContainer);
-                // save for later use
-                this._oRightFloatingContainer = oRightFloatingContainer;
+                    oRightFloatingContainer.setModel(this.getShellModel());
+                    this.addDanglingControl(oRightFloatingContainer);
+                    // save for later use
+                    this._oRightFloatingContainer = oRightFloatingContainer;
+                    resolve();
 
-                this.waitForShellLayout().then(function () {
-                    oRightFloatingContainer.placeAt(ShellLayoutMapping.RightFloatingContainer, "only");
-                });
-            }.bind(this));
+                    this.waitForShellLayout().then(function () {
+                        oRightFloatingContainer.placeAt(ShellLayoutMapping.RightFloatingContainer, "only");
+                    });
+                }.bind(this));
+            }.bind(this)));
         },
 
         initCanvasShapesManager: function () {
-            var oShellModel = this.getViewData().shellModel;
-            if (oShellModel.getProperty("/enableBackGroundShapes")) {
-                this.createCanvasShapesManager();
-            } else {
-                var oBinding = oShellModel.bindProperty("/enableBackGroundShapes");
-                this.addDanglingBinding(oBinding);
-                oBinding.attachChange(function () {
-                    var bBackgroundShapesEnabled = oBinding.getValue();
-                    if (bBackgroundShapesEnabled) {
-                        this.removeDanglingBinding(oBinding);
-                        oBinding.destroy();
-                        this.createCanvasShapesManager();
-                    }
-                }, this);
-            }
+            this.bindFactory({
+                model: this.getShellModel(),
+                factory: this.createCanvasShapesManager.bind(this),
+                bindingPath: "/enableBackGroundShapes",
+                bindingType: BINDING_TYPE.Property,
+                valueCheck: function (bValue) {
+                    return !!bValue;
+                }
+            });
         },
 
         createCanvasShapesManager: function () {
-            var iTimeout = setTimeout(function () {
+            var iInterval = setInterval(function () {
                 if (Core.isThemeApplied()) {
-                    clearTimeout(iTimeout);
+                    clearInterval(iInterval);
                     sap.ui.require(["sap/ushell/CanvasShapesManager"], function (CanvasShapesManager) {
                         CanvasShapesManager.drawShapes();
                     });
@@ -398,7 +405,6 @@ sap.ui.define([
          * Begin factory functions for lazy instantiation of Shell Layout controls
          */
         createPostCoreExtControls: function () {
-            var oBinding;
             var oShellModel = this.getShellModel();
 
             // apply the highest z-index used by the shell
@@ -407,98 +413,68 @@ sap.ui.define([
             });
 
             // RightFloatingContainer
-            if (oShellModel.getProperty("/currentState/showRightFloatingContainer")) {
-                this.createRightFloatingContainer();
-            } else {
-                oBinding = oShellModel.bindProperty("/currentState/showRightFloatingContainer");
-                this.addDanglingBinding(oBinding);
-                oBinding.attachChange(function (oEvent) { // eslint-disable-next-line no-shadow
-                    var oBinding = oEvent.getSource();
-                    var bRightFloatingContainerVisible = oBinding.getValue();
-                    if (bRightFloatingContainerVisible) {
-                        this.removeDanglingBinding(oBinding);
-                        oBinding.destroy();
-                        this.createRightFloatingContainer();
-                    }
-                }, this);
-            }
+            this.bindFactory({
+                model: oShellModel,
+                factory: this.createRightFloatingContainer.bind(this),
+                bindingPath: "/currentState/showRightFloatingContainer",
+                bindingType: BINDING_TYPE.Property,
+                valueCheck: function (bValue) {
+                    return !!bValue;
+                }
+            });
 
             // SubHeader
-            if (oShellModel.getProperty("/currentState/subHeader").length) {
-                this.createSubHeader();
-            } else {
-                oBinding = oShellModel.bindList("/currentState/subHeader");
-                this.addDanglingBinding(oBinding);
-                oBinding.attachChange(function (oEvent) { // eslint-disable-next-line no-shadow
-                    var oBinding = oEvent.getSource();
-                    var bSubHeaderVisible = oBinding.getCount();
-                    if (bSubHeaderVisible) {
-                        this.removeDanglingBinding(oBinding);
-                        oBinding.destroy();
-                        this.createSubHeader();
-                    }
-                }, this);
-            }
+            this.bindFactory({
+                model: oShellModel,
+                factory: this.createSubHeader.bind(this),
+                bindingPath: "/currentState/subHeader",
+                bindingType: BINDING_TYPE.List,
+                valueCheck: function (aValues) {
+                    return !!aValues.length;
+                }
+            });
 
             // ToolArea
-            if (oShellModel.getProperty("/currentState/toolAreaVisible")) {
-                this.createToolArea();
-            } else {
-                oBinding = oShellModel.bindProperty("/currentState/toolAreaVisible");
-                this.addDanglingBinding(oBinding);
-                oBinding.attachChange(function (oEvent) { // eslint-disable-next-line no-shadow
-                    var oBinding = oEvent.getSource();
-                    var bToolAreaVisible = oBinding.getValue();
-                    if (bToolAreaVisible) {
-                        this.removeDanglingBinding(oBinding);
-                        oBinding.destroy();
-                        this.createToolArea();
-                    }
-                }, this);
-            }
+            this.bindFactory({
+                model: oShellModel,
+                factory: this.createToolArea.bind(this),
+                bindingPath: "/currentState/toolAreaVisible",
+                bindingType: BINDING_TYPE.Property,
+                valueCheck: function (bValue) {
+                    return !!bValue;
+                }
+            });
 
             // (Left)SidePane
-            if (oShellModel.getProperty("/currentState/showPane")) {
-                this.createSidePane();
-            } else {
-                oBinding = oShellModel.bindProperty("/currentState/showPane");
-                this.addDanglingBinding(oBinding);
-                oBinding.attachChange(function (oEvent) { // eslint-disable-next-line no-shadow
-                    var oBinding = oEvent.getSource();
-                    var bSidePaneVisible = oBinding.getValue();
-                    if (bSidePaneVisible) {
-                        this.removeDanglingBinding(oBinding);
-                        oBinding.destroy();
-                        this.createSidePane();
-                    }
-                }, this);
-            }
+            this.bindFactory({
+                model: oShellModel,
+                factory: this.createSidePane.bind(this),
+                bindingPath: "/currentState/showPane",
+                bindingType: BINDING_TYPE.Property,
+                valueCheck: function (bValue) {
+                    return !!bValue;
+                }
+            });
 
             // FloatingActions (deprecated)
-            if (oShellModel.getProperty("/currentState/floatingActions").length) {
-                this.createFloatingActions();
-            } else {
-                oBinding = oShellModel.bindList("/currentState/floatingActions");
-                this.addDanglingBinding(oBinding);
-                oBinding.attachChange(function (oEvent) { // eslint-disable-next-line no-shadow
-                    var oBinding = oEvent.getSource();
-                    var bFloatingActionsVisible = oBinding.getCount();
-                    if (bFloatingActionsVisible) {
-                        this.removeDanglingBinding(oBinding);
-                        oBinding.destroy();
-                        this.createFloatingActions();
-                    }
-                }, this);
-            }
+            this.bindFactory({
+                model: oShellModel,
+                factory: this.createFloatingActions.bind(this),
+                bindingPath: "/currentState/floatingActions",
+                bindingType: BINDING_TYPE.List,
+                valueCheck: function (aValues) {
+                    return !!aValues.length;
+                }
+            });
 
             this.addPendingInitialization(this.initAllMyAppsView());
         },
 
         /**
          * allow up to 3 actions in shell header
-         * @param {object} oConfig view configuration
          */
-        _allowUpToThreeActionInShellHeader: function (oConfig) {
+        _allowUpToThreeActionInShellHeader: function () {
+            var oConfig = this.getViewDataConfig();
             // in order to save performance time when these properties are not defined
             if (Object.keys(oConfig).length > 3) {
                 var aParameter = [
@@ -506,9 +482,9 @@ sap.ui.define([
                     "moveUserSettingsActionToShellHeader",
                     "moveContactSupportActionToShellHeader",
                     "moveEditHomePageActionToShellHeader"
-                ],
-                    count = 0,
-                    sParameter;
+                ];
+                var count = 0;
+                var sParameter;
 
                 // count the number of "true" values, once get to three, force the other to be "false"
                 for (var index = 0; index < 5; index++) {
@@ -555,89 +531,85 @@ sap.ui.define([
         },
 
         /**
-         * Adds a binding which is destroyed on Renderer destroy
-         * @param {sap.ui.model.Binding} oBinding The Binding
-         * @see sap.ushell.renderers.fiori2.Shell.controller#onExit
+         * Executes the factory instantly in case the <code>model already fulfills the valueCheck.
+         * Otherwise binds the factory against the model path.
+         * Once the binding fulfills the valueCheck the binding gets destroyed.
          *
-         * @private
-         * @since 1.114.0
-         */
-        addDanglingBinding: function (oBinding) {
-            this.aDanglingBindings.push(oBinding);
-        },
-
-        /**
-         * @param {sap.ui.model.Binding} oTargetBinding The Binding
-         * @see sap.ushell.renderers.fiori2.Shell.controller#onExit
+         * @param {object} oSettings The settings
+         * @param {sap.ui.model.Model} oSettings.model The model
+         * @param {function} oSettings.factory The handler which gets executed
+         * @param {string} oSettings.bindingPath The binding path
+         * @param {string} oSettings.bindingType The type of binding. Either "Property" or "List".
+         * @param {function} oSettings.valueCheck The check function.
+         *  it receives the bound property as argument. It should return true once the value fulfills the requirements.
          *
          * @private
-         * @since 1.114.0
+         * @since 1.115.0
          */
-        removeDanglingBinding: function (oTargetBinding) {
-            var iBindingIndex = this.aDanglingBindings.findIndex(function (oBinding) {
-                return oBinding === oTargetBinding;
-            });
-
-            if (iBindingIndex > -1) {
-                this.aDanglingBindings.splice(iBindingIndex, 1);
-            }
-        },
+        bindFactory: function (oSettings) {
+            var oModel = oSettings.model;
+            var fnFactory = oSettings.factory;
+            var sPath = oSettings.bindingPath;
+            var sBindingType = oSettings.bindingType;
+            var fnValueCheck = oSettings.valueCheck;
+
+            var vValue = oModel.getProperty(sPath);
+            if (fnValueCheck(vValue)) { // model already fulfills the requirements
+                fnFactory();
+            } else {
+                var oBinding;
+                switch (sBindingType) {
+                    case BINDING_TYPE.List:
+                        oBinding = oModel.bindList(sPath);
+                        break;
+                    default: // BINDING_TYPE.Property
+                        oBinding = oModel.bindProperty(sPath);
+                }
+                this.addDanglingBinding(oBinding);
+                oBinding.attachChange(function () {
+                    vValue = oBinding.getModel().getProperty(oBinding.getPath());
+                    if (fnValueCheck(vValue)) {
+                        this.removeDanglingBinding(oBinding);
+                        oBinding.destroy();
 
-        /**
-         * @see sap.ushell.renderers.fiori2.Shell.controller#onExit
-         *
-         * @private
-         * @since 1.114.0
-         */
-        destroyDanglingBindings: function () {
-            if (this.aDanglingBindings) {
-                this.aDanglingBindings.forEach(function (oBinding) {
-                    oBinding.destroy();
-                });
+                        fnFactory();
+                    }
+                }, this);
             }
         },
 
         /**
-         * @param {sap.ui.core.Control} oControl The Control
+         * Adds a binding which is destroyed on Renderer destroy
+         * @param {sap.ui.model.Binding} oBinding The Binding
          * @see sap.ushell.renderers.fiori2.Shell.controller#onExit
          *
          * @private
          * @since 1.114.0
          */
-        addDanglingControl: function (oControl) {
-            this.aDanglingControls.push(oControl);
+        addDanglingBinding: function (oBinding) {
+            this.getController().addDanglingBinding(oBinding);
         },
 
         /**
+         * @param {sap.ui.model.Binding} oBinding The Binding
          * @see sap.ushell.renderers.fiori2.Shell.controller#onExit
          *
          * @private
          * @since 1.114.0
          */
-        destroyDanglingControls: function () {
-            if (this.aDanglingControls) {
-                this.aDanglingControls.forEach(function (oControl) {
-                    if (oControl.destroyContent) {
-                        oControl.destroyContent();
-                    }
-                    oControl.destroy();
-                });
-            }
+        removeDanglingBinding: function (oBinding) {
+            this.getController().removeDanglingBinding(oBinding);
         },
 
         /**
+         * @param {sap.ui.core.Control} oControl The Control
          * @see sap.ushell.renderers.fiori2.Shell.controller#onExit
          *
          * @private
          * @since 1.114.0
          */
-        destroyDoables: function () {
-            if (this.aDoables) {
-                this.aDoables.forEach(function (oDoable) {
-                    oDoable.off();
-                });
-                this.aDoables = [];
-            }
+        addDanglingControl: function (oControl) {
+            this.getController().addDanglingControl(oControl);
         },
 
         /**
@@ -650,34 +622,7 @@ sap.ui.define([
          * @since 1.114.0
          */
         addPendingInitialization: function (oPromise) {
-            if (this.aPendingInitializations) {
-                this.aPendingInitializations.push(oPromise);
-                return oPromise;
-            }
-        },
-
-        /**
-         * Only used in test environments!
-         * @returns {Promise} Resolves once all initializations have settled
-         *
-         * @private
-         * @since 1.114.0
-         */
-        awaitPendingInitializations: function () {
-            if (this.aPendingInitializations) {
-                return Promise.allSettled(this.aPendingInitializations);
-            }
-            return Promise.resolve();
-        },
-
-        /**
-         * @private
-         * @ui5-restricted sap.ui.rta
-         */
-        getOUnifiedShell: function () {
-            return {
-                getHeader: this.getShellHeader.bind(this)
-            };
+            return this.getController().addPendingInitialization(oPromise);
         }
     });
 });

package/src/main/js/sap/ushell/renderers/fiori2/ShellLayout.js

@@ -30,34 +30,38 @@ sap.ui.define([
         var oRendererPlaceAtElement = document.getElementById(sRendererPlaceAtElementId);
         LAYOUT_MAPPING.RendererRootView = sRendererPlaceAtElementId;
 
+        // data-sap-ui-root-content
+        // Controls like sap/m/App change the element styles of all parents
+        // This attribute is a marker to stop changing more parents
+
         var sHTMLTemplate = [
             "<div id='shellLayout' class='sapUshellFlexRow'>",
-            "    <div id='backgroundImage-shellArea'></div>",
-            "    <div id='shapes-shellArea'></div>",
-            // this area helps the WebAssistant colleagues to prevent popup overlaps (see sap.ui.core.Popup.setWithinArea)
+            "    <div id='backgroundImage-shellArea' data-sap-ui-root-content=true></div>",
+            "    <div id='shapes-shellArea' data-sap-ui-root-content=true></div>",
+            // the area "sapUshellPopupWithinArea" helps the WebAssistant colleagues to prevent popup overlaps (see sap.ui.core.Popup.setWithinArea)
             "    <div id='sapUshellPopupWithinArea' class='sapUshellFlexGrowShrink sapUshellFlexRow'>",
-            "        <div id='floatingContainerDockStart-shellArea' class='sapUshellFloatingContainerDock'></div>",
+            "        <div id='floatingContainerDockStart-shellArea' class='sapUshellFloatingContainerDock' data-sap-ui-root-content=true></div>",
             "        <div class='sapUshellFlexGrowShrink sapUshellFlexColumn'>",
-            "            <div id='header-shellArea'></div>",
-            "            <div id='subHeader-shellArea'></div>",
+            "            <div id='header-shellArea' data-sap-ui-root-content=true></div>",
+            "            <div id='subHeader-shellArea' data-sap-ui-root-content=true></div>",
             "            <div class='sapUshellFlexGrowShrink sapUshellFlexRow'>",
-            "                <aside id='toolArea-shellArea' class='sapUshellPositionRelative'></aside>",
-            "                <div id='sidePane-shellArea'></div>",
+            "                <aside id='toolArea-shellArea' class='sapUshellPositionRelative' data-sap-ui-root-content=true></aside>",
+            "                <div id='sidePane-shellArea' data-sap-ui-root-content=true></div>",
             "                <div class='sapUshellFlexGrowShrink sapUshellFlexColumn'>",
-            "                    <div id='navigationBar-shellArea'></div>",
+            "                    <div id='navigationBar-shellArea' data-sap-ui-root-content=true></div>",
             "                    <div class='sapUshellFlexGrowShrink sapUshellPositionRelative sapUshellOverflowHidden sapUshellFlexColumn'>",
-            "                        <div id='" + LAYOUT_MAPPING.RendererRootView + "' class='sapUshellFlexGrowShrink sapUshellPositionRelative sapUshellShell'></div>",
-            "                        <div id='floatingActions-shellArea'></div>",
-            "                        <div id='rightFloatingContainer-shellArea'></div>",
+            "                        <div id='" + LAYOUT_MAPPING.RendererRootView + "' class='sapUshellFlexGrowShrink sapUshellPositionRelative sapUshellShell' data-sap-ui-root-content=true></div>",
+            "                        <div id='floatingActions-shellArea' data-sap-ui-root-content=true></div>",
+            "                        <div id='rightFloatingContainer-shellArea' data-sap-ui-root-content=true></div>",
             "                    </div>",
             "                </div>",
             "            </div>",
-            "            <footer id='footer-shellArea' class='sapUshellPositionStatic sapMPageFooter'></footer>",
+            "            <footer id='footer-shellArea' class='sapUshellPositionStatic sapMPageFooter' data-sap-ui-root-content=true></footer>",
             "        </div>",
-            "        <div id='floatingContainerDockEnd-shellArea' class='sapUshellFloatingContainerDock'></div>",
-            "        <div id='floatingContainer-shellArea'></div>",
+            "        <div id='floatingContainerDockEnd-shellArea' class='sapUshellFloatingContainerDock' data-sap-ui-root-content=true></div>",
+            "        <div id='floatingContainer-shellArea' data-sap-ui-root-content=true></div>",
             "    </div>",
-            "    <div id='helpContent-shellArea'></div>",
+            "    <div id='helpContent-shellArea' data-sap-ui-root-content=true></div>",
             "</div>"
         ].join("\n");
 
@@ -87,19 +91,9 @@ sap.ui.define([
         }
     }
 
-    function createTestCanvas (sCanvasId, sParentDomRef) {
-        sCanvasId = sCanvasId || "qunit-canvas";
-        sParentDomRef = sParentDomRef || "qunit-fixture";
-
-        var oRendererDomRef = document.createElement("div");
-        oRendererDomRef.setAttribute("id", sCanvasId);
-        document.getElementById(sParentDomRef).appendChild(oRendererDomRef);
-    }
-
     return {
         applyLayout: applyLayout,
         destroyLayout: destroyLayout,
-        createTestCanvas: createTestCanvas, // for testing
         LAYOUT_MAPPING: LAYOUT_MAPPING
     };
 });