FEAT,MODIFY,FIX: ExtStore functionallity and parent-dependent-sizing

since some browser don't support the css value "calc"
as in "calc(100% - 16px);"
Therefore a "useFlag" was introduced and implemented in the handling.

Furhter the "collected" distribution of a (higher) component
was implemented.

And the passing of the _paddingValues property of the modifier
on modifer.join() was implemented.

src/component.js

@@ -330,15 +330,38 @@ class Component extends StyleAndScriptStoringComponent {
          *          for error tracking. 
          */
         if (extStore._type === ExtStoreType.INTERNALIZED_WITHIN) {
+            let sizings = Object.keys(this._modifier._modifications)
+                .filter(e => e.includes("width") || e.includes("height"))
+                .filter(e => this._modifier._modifications[e].includes("calc"))
+                .reduce((a, c) => a.add(
+                    c,
+                    this._modifier
+                        ._modifications[c]
+                        .split('(')[1]
+                        .split(' - ')[0]
+                ), new ObjectAccessObject());
+
             fillAttrsInContainerByCb(
                 this._modifier._modifications,
                 this._element,
                 (key, val, el) => { el.style[key] = val; }
             );
+
+            let hasElSizing = sizings.keys.some(k => Object.keys(this._element.style).includes(k));
+            if (sizings.keys.length > 0 && !hasElSizing) {
+                console.log("Fixing sizing - because not supported 'calc'", sizings);
+
+                fillAttrsInContainerByCb(
+                    sizings,
+                    this._element,
+                    (key, val, el) => { el.style[key] = val; }
+                );
+            }
+
         } else {
             /* ADDS ELEMENT MODIFIER TO this._styles list for styles processing */
             let modifierSSD = new SStoreDefinition();
-            modifierSSD._identifier = this._compName;
+            modifierSSD._identifier = "." + this._compName;
             modifierSSD._definition = this._modifier._modifications;
             modifierSSD._extStore = extStore;
             this._styles.unshift(modifierSSD);
@@ -372,16 +395,8 @@ class Component extends StyleAndScriptStoringComponent {
                     break;
 
                 case ExtStoreType.INDIVIDUALLY_DOC_HEAD:
-
-                    let container = document.createElement("style");
+                    let container = generateAndFillStyleTag([ssd]);
                     container.setAttribute("data-compel-individually-nr", counter++);
-
-                    let styleRules = Object.keys(ssd._definition);
-
-                    for (let j = 0; j < styleRules.length; j++) {
-                        let rule = styleRules[j];
-                        container.innerText += `${rule} {${ssd._definition[rule]} } `;
-                    }
                     Page.addElementToPage(container, refESType);
                     break;
 
@@ -476,6 +491,7 @@ 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;
@@ -494,7 +510,9 @@ class Component extends StyleAndScriptStoringComponent {
                 child = child.toComponent();
             }
 
-            child._modifier._updateDimensionsBy(this._modifier._paddingValues);
+            if (Page._useCssCalc) {
+                child._modifier._updateDimensionsBy(this._modifier._paddingValues);
+            }
             child = child.generate();
 
             let wenity = this._appendChildComponent(child);
@@ -513,10 +531,66 @@ class Component extends StyleAndScriptStoringComponent {
          */
         const funcCollections = this._processFunctions(functionStore);
 
+        /**
+         * 
+         * @param {Map<ExtStoreType, Array<SStoreDefinition>>} source 
+         * @param {Map<ExtStoreType, Array<SStoreDefinition>>} target 
+         * @param {ExtStoreType} extStoreType 
+         * @returns 
+         */
+        function transferCollectedFunctions(source, target, extStoreType) {
+            if (source) {
+                if (source.has(extStoreType)) {
+                    if (funcCollections.has(extStoreType)) {
+                        target.get(extStoreType)
+                            .push(source.get(extStoreType))
+                    } else {
+                        target.set(
+                            extStoreType,
+                            source.get(extStoreType)
+                        );
+                    }
+                }
+            }
+
+            return target;
+        }
+
+        function executeOnExtStoreTypeCollectedTriple(func) {
+            return new Map([
+                { [ExtStoreType.COLLECTED_SEGMENT_BEGIN]: func(ExtStoreType.COLLECTED_SEGMENT_BEGIN) },
+                { [ExtStoreType.COLLECTED_DOC_HEAD]: func(ExtStoreType.COLLECTED_DOC_HEAD) },
+                { [ExtStoreType.COLLECTED_DOC_FOOTER]: func(ExtStoreType.COLLECTED_DOC_FOOTER) }
+            ]);
+        }
+
+        for (let i = 0; i < collectedWenities.length; i++) {
+            const child = collectedWenities[i];
+            if (child.js) {
+                executeOnExtStoreTypeCollectedTriple(
+                    (extstoretype) => transferCollectedFunctions(child.js, funcCollections, extstoretype)
+                );
+            }
+        }
         if (this.#isCompel) {
-            funcCollections.get(ExtStoreType.COLLECTED_DOC_FOOTER)
-            funcCollections.get(ExtStoreType.COLLECTED_DOC_HEAD)
-            funcCollections.get(ExtStoreType.COLLECTED_SEGMENT_BEGIN)
+            function dealCollected(map, extStoreType) {
+                if (map.has(extStoreType)) {
+                    let collectionScriptTag = generateAndFillScriptTag(map.get(extStoreType));
+                    if (extStoreType === ExtStoreType.COLLECTED_SEGMENT_BEGIN) {
+                        this._element.insertAdjacentElement(
+                            "afterbegin",
+                            generateAndFillScriptTag(segment)
+                        );
+                    } else {
+                        Page.addElementToPage(
+                            collectionScriptTag,
+                            extStoreType
+                        );
+                    }
+                }
+            }
+            executeOnExtStoreTypeCollectedTriple((est) => dealCollected(funcCollections, est));
+
         } else {
             this._wenity.js = funcCollections;
             this._wenity.css = styleCollection;

src/context.js

@@ -12,11 +12,19 @@
 class PageBuilder extends ScriptAndStyleContext {
     #autoRegisteredComponents;
     #registeredComponents;
+    /**
+     * @type {boolean}
+     */
+    _useCssCalc;
 
     constructor() {
         super();
         this.#autoRegisteredComponents = [];
         this.#registeredComponents = [];
+
+    useCssCalc() {
+        this._useCssCalc = true;
+    }
     }
 
     autoRegisterComponent() {

src/modifier.js

@@ -204,6 +204,9 @@ class Modifier {
                 delete this._modifications[removeMods[i]];
             }
         }
+        if (modifier._paddingValues) {
+            this._paddingValues = modifier._paddingValues;
+        }
         return this;
     }