REFA: Moved alignment and arrangement setting

src/component.js

@@ -44,6 +44,7 @@ class Component extends StyleAndScriptStoringComponent {
         this._modifier = new Modifier()
             .margin(new Sides().all(0));
         this._modifier._modifications['display'] = "flex";
+        this._modifier._modifications["box-sizing"] = "border-box";
 
         this._toRegister = [];
     }
@@ -498,11 +499,6 @@ class Component extends StyleAndScriptStoringComponent {
         this._wenity = new WebTrinity();
 
         /* DEAL WITH COMPONENT MODIFICATION FIRST */
-        this._modifier._modifications["box-sizing"] = "border-box";
-        this._modifier._modifications["justify-content"] = this._arrangement;
-        this._modifier._modifications["align-content"] = this._alignment;
-        this._modifier._modifications["align-items"] = this._alignment;
-        this._modifier._modifications["text-align"] = this._alignment;
 
 
         let collectedWenities = [];

src/componentAncestry/addStyleAndFunctions.js

@@ -53,6 +53,50 @@ class StyleAndScriptStoringComponent extends ModifiableComponent {
         this._functions = [];
     }
 
+
+    /**
+     * @todo: Unify logic extract modifications into responsible construct
+     * @todo: Make it work as expected, fix docu
+     * @todo: Differentiate between directions (horizontal, vertiacl)
+     * @override
+     * @inheritdoc
+     * Sets the alignment (modifications) for this element or more specific for its children. 
+     * @param {Alignment} alignment 
+     * @returns {Component} this component object
+     */
+    alignment(alignment) {
+        /*
+        this._modifier._modifications["display"] = "flex";
+        this._modifier._modifications["align-content"] = alignment;
+        this._modifier._modifications["align-items"] = alignment;
+        this._modifier._modifications["text-align"] = alignment;
+        */
+        this._alignment = alignment;
+        this._modifier._modifications["align-content"] = this._alignment;
+        this._modifier._modifications["align-items"] = this._alignment;
+        this._modifier._modifications["text-align"] = this._alignment; 
+        return this;
+    }
+
+    /**
+     * @todo: Unify logic extract modifications into responsible construct
+     * @todo: Differentiate between directions (horizontal, vertical)
+     * @todo: Make it work as expected, fix docu
+     * @override
+     * @inheritdoc
+     * Sets the arrangement (modifications) for this element or more specific for its children. 
+     * @param {Arrangement} arrangement 
+     * @returns {Component} this component object
+     */
+    arrangement(arrangement) {
+        /*
+        this._modifier._modifications["justify-content"] = arrangement;
+        */
+        this._arrangement = arrangement;
+        this._modifier._modifications["justify-content"] = this._arrangement;
+        return this;
+    }
+
     /**
      * Defines/Sets the general "storage-behaviour" for styling of this component.
      * Further for potential css definitions.