IMPRO,FEAT: added modifyChildren

enables passing a modifier to all children of a flex container.
Similar to distributeSpacingEvengly.
might be refactored into component in general.

src/builder.js

@@ -272,7 +272,21 @@ const builder = {
       * @param {Modifier} modifier 
       * @returns {Component}
       */
-     select: function (attr = {}, modifier = null) { return builder.genTag("select", attr, modifier); },
+     select: function (attr = {}, modifier = null) { 
+          let comp = new InputComponent(
+               document.createElement("select"),
+               attr,
+               modifier
+          )
+               .addStyleClass(`el-input`);
+
+          if (this.components.previous) {
+               comp._parentComponent = this.components.previous;
+               this.components.previous = null;
+          }
+
+          return comp;
+     },
 
      /**
       * 

src/component/ChildbearerComponent.js

@@ -61,11 +61,7 @@ class ElementWrapper {
      * @returns {Component} this component object
      */
     text(text) {
-        if (this._element instanceof HTMLInputElement && this._element.type === "text") {
+        this._element.innerText = text;
-            this._element.value = text;
-        } else {
-            this._element.innerText = text;
-        }
         return this;
     }
 

src/component/FlexContainerComponent.js

@@ -9,6 +9,15 @@ class FlexContainerComponent extends Component {
      * @type {boolean}
      */
     _distributeEvenglyAfterGenerate;
+    /**
+     * @type {number} the amount that should be left out of the total space before the children
+     *                space is set. 
+     */
+    #distributionRecess;
+    /**
+     * @type {number} the additional gap that should be left for children before their space is set
+     */
+    #distributionGapPerChild;
     /**
      * @type {string}
      */
@@ -68,14 +77,86 @@ class FlexContainerComponent extends Component {
     }
 
     /**
-     *
+     * 
+     * @param {number} [recessFraction=0.0] recessFraction a fraction/percentage of the recess 
+     *                 that should be left out before distributing the remaining space.
+     * @param {number} [gapPerChild=1] gapPerChild the gap per child, therefore inbetween children 
+     *                 that shouldn't be distributed to the children
+     */
+    _distributingSpacing(recessFraction = 0.0, gapPerChild = 1) {
+        if (this._children && this._children.length > 1) {
+
+            let distributableSpace = 100 - 100 * recessFraction - (this._children.length - 1) * gapPerChild;
+
+            let childDistributionFraction = Math.floor(
+                (distributableSpace / this._children.length) * 100
+            ) / 100;
+
+            let direction = (this._flexDirection === 'column' ? 'height' : "width");
+
+            for (const icomp of this._children) {
+                /* sets the width for all elements,
+                to avoid overlapping or line break because of lacking width,
+                a percent is subtracted for every child element  */
+                /* To enable "override" a new Modifier is generated and joined
+                with the modifier of the component */
+                icomp._modifier._modifications[direction] = childDistributionFraction + "%";
+                icomp._modifier._modifications["max-" + direction] = childDistributionFraction + "%";
+            }
+        }
+    }
+
+    /**
+     * Distributes the spacing of the childrens evengly, 
+     * according to the flexdirection of this component.
+     * By default this will be executed imediately when called.
+     * 
+     * @param {boolean} [rightNow=true] if set to false it will set properties accordingly
+     *                  so that the distribution will be executed on generate
+     * @param {number} [recessFraction=0.0] recessFraction a fraction/percentage of the recess 
+     *                 that should be left out before distributing the remaining space.
+     * @param {number} [gapPerChild=1] gapPerChild the gap per child, therefore inbetween children 
+     *                 that shouldn't be distributed to the children 
      * @returns {FlexContainerComponent}
      */
-    distibuteSpacingEvenly() {
+    distibuteSpacingEvenly(rightNow = true, recessFraction = 0.0, gapPerChild = 1) {
-        this._distributeEvenglyAfterGenerate = true;
+        if (rightNow) {
+            this._distributingSpacing(recessFraction, gapPerChild);
+        } else {
+            this.#distributionRecess = recessFraction;
+            this.#distributionGapPerChild = gapPerChild;
+            this._distributeEvenglyAfterGenerate = true;
+        }
         return this;
     }
 
+    /**
+     * Adds, sets, updates or overwrites the Modification of/for the children of this component.
+     * Just calls .modifier(modifier) on each child. 
+     * 
+     * @param {Modifier} modifier 
+     * @param {boolean|ExtStorage|ExtStoreType|OverwriteBehaviour} [extStore=null] 
+     * @returns {FlexContainerComponent} this component object
+    */
+    modifyChildren(modifier, underTheName = "", extStore = false) {
+        if (underTheName === "") {
+            underTheName = `.${this._compName}-style-children`;
+        }
+        if (!extStore) {
+            for (const child of this._children) {
+                child.modifier(modifier)
+            }
+        } else {
+            this.addStyleClass(underTheName);
+            this._styles.push(
+                new SStoreDefinition(
+                    underTheName,
+                    modifier.ensureModifier()
+                )
+            );
+        }
+        return this;
+    }
 
     /**
      * @override
@@ -83,25 +164,8 @@ class FlexContainerComponent extends Component {
      * @extends Component.generate()
      */
     generate(generator = singlepage, styleStore = null, functionStore = null) {
-        if (this._children && this._children.length > 1) {
+        if (this._distributeEvenglyAfterGenerate) {
-
+            this._distributingSpacing(this.#distributionRecess, this.#distributionGapPerChild);
-            if (this._distributeEvenglyAfterGenerate) {
-                let childDistributionFraction = Math.floor(
-                    ((100 - this._children.length) / this._children.length) * 100
-                ) / 100;
-
-                let direction = (this._flexDirection === 'column' ? 'height' : "width");
-
-                for (const icomp of this._children) {
-                    /* sets the width for all elements,
-                    to avoid overlapping or line break because of lacking width,
-                    a percent is subtracted for every child element  */
-                    /* To enable "override" a new Modifier is generated and joined
-                    with the modifier of the component */
-                    icomp._modifier._modifications[direction] = childDistributionFraction + "%";
-                    icomp._modifier._modifications["max-" + direction] = childDistributionFraction + "%";
-                }
-            }
         }
 
         return super.generate(generator, styleStore, functionStore);

src/component/InputComponent.js

@@ -18,6 +18,24 @@ class InputComponent extends Component {
         }
     }
 
+    /**
+     * This overrides the text() method in such a way,
+     * that it sets the value attribute for input elements instead.
+     * 
+     * @override
+     * @inheritdoc
+     * @param {string} text 
+     * @returns {InputComponent}
+     */
+    text(text){
+        if (this._element instanceof HTMLInputElement) {
+            this._element.value = text;
+        } else {
+            super.text(text);
+        }
+        return this;
+    }
+
     /**
      * The parameter makes it optional to trigger the state by a variable
      * @param {boolean} readonly