@otto-de/b2b-core-components 1.23.0 → 1.23.2

package/dist/components/b2b-grid-row.js

@@ -10,8 +10,39 @@ const B2bGridRowComponent = /*@__PURE__*/ proxyCustomElement(class B2bGridRowCom
         this.alignItems = 'stretch';
         this.justify = 'start';
     }
+    componentDidLoad() {
+        this.adjustColumnFlex();
+    }
+    adjustColumnFlex() {
+        const columns = this.hostElement.querySelectorAll(':scope > b2b-grid-col');
+        let totalSpan = 0;
+        let columnsWithoutSpan = [];
+        columns.forEach((column) => {
+            const span = column.getAttribute('span');
+            if (span) {
+                totalSpan += parseInt(span, 10);
+            }
+            else {
+                columnsWithoutSpan.push(column);
+            }
+        });
+        const remainingSpan = 12 - totalSpan;
+        if (remainingSpan == 12) {
+            if (columnsWithoutSpan.length > 0) {
+                columnsWithoutSpan.forEach(column => {
+                    column.setAttribute('span', '1');
+                });
+            }
+        }
+        if (columnsWithoutSpan.length > 0) {
+            const flexPerColumn = ((remainingSpan / 12) * 100) / columnsWithoutSpan.length;
+            columnsWithoutSpan.forEach(column => {
+                column.style.flex = `${flexPerColumn}%`;
+            });
+        }
+    }
     render() {
-        return (h(Host, { key: 'cea79124fea736c6276b0f60c8ba983d3085dbdb', style: {
+        return (h(Host, { key: '469913a61a9e77d16ef17fd2e7947ab303b50081', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -19,7 +50,7 @@ const B2bGridRowComponent = /*@__PURE__*/ proxyCustomElement(class B2bGridRowCom
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: '218cf8da76adc6f58983f90fb808629a4785f6a6' })));
+            } }, h("slot", { key: 'd3e960866ad5a611b690827bb03ca25caf118bde' })));
     }
     get hostElement() { return this; }
 }, [1, "b2b-grid-row", {

package/dist/components/b2b-grid.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const gridCss = ":host(.b2b-grid){width:100%;margin:0 auto;box-sizing:border-box}";
+const gridCss = ":host(.b2b-grid){width:100%;margin:0 auto;box-sizing:border-box}:host(.b2b-grid-row){display:flex;flex-wrap:wrap}:host(.b2b-grid-col){display:flex;flex-direction:column}.b2b-grid-col>.b2b-grid-row{flex:1}";
 const B2bGridStyle0 = gridCss;
 
 const B2bGridComponent = /*@__PURE__*/ proxyCustomElement(class B2bGridComponent extends HTMLElement {

package/dist/esm/b2b-grid-col.entry.js

@@ -4,17 +4,18 @@ const B2bGridColumnComponent = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.calculateGrowDimension = (span) => {
-            const colSpan = span !== null && span !== void 0 ? span : 1;
-            const flex = (colSpan / 12) * 100;
-            return {
-                ['flex']: `${flex}`,
-            };
+            if (span !== undefined) {
+                const flex = (span / 12) * 100;
+                return {
+                    ['flex']: `${flex}`,
+                };
+            }
         };
         this.span = undefined;
         this.textAlign = 'left';
     }
     render() {
-        return (h(Host, { key: 'ad6a14cd39b9429064c305bfbe6e0d6b9f506faa', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: '1b488c100774214fb52eeec64ffe70a8fadf0a3c' })));
+        return (h(Host, { key: '84919b56153393d378a29ce84d4048af80a95fea', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: '1fef59961b312a1efdd94488865aa0a436170489' })));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/b2b-grid-row.entry.js

@@ -8,8 +8,39 @@ const B2bGridRowComponent = class {
         this.alignItems = 'stretch';
         this.justify = 'start';
     }
+    componentDidLoad() {
+        this.adjustColumnFlex();
+    }
+    adjustColumnFlex() {
+        const columns = this.hostElement.querySelectorAll(':scope > b2b-grid-col');
+        let totalSpan = 0;
+        let columnsWithoutSpan = [];
+        columns.forEach((column) => {
+            const span = column.getAttribute('span');
+            if (span) {
+                totalSpan += parseInt(span, 10);
+            }
+            else {
+                columnsWithoutSpan.push(column);
+            }
+        });
+        const remainingSpan = 12 - totalSpan;
+        if (remainingSpan == 12) {
+            if (columnsWithoutSpan.length > 0) {
+                columnsWithoutSpan.forEach(column => {
+                    column.setAttribute('span', '1');
+                });
+            }
+        }
+        if (columnsWithoutSpan.length > 0) {
+            const flexPerColumn = ((remainingSpan / 12) * 100) / columnsWithoutSpan.length;
+            columnsWithoutSpan.forEach(column => {
+                column.style.flex = `${flexPerColumn}%`;
+            });
+        }
+    }
     render() {
-        return (h(Host, { key: 'cea79124fea736c6276b0f60c8ba983d3085dbdb', style: {
+        return (h(Host, { key: '469913a61a9e77d16ef17fd2e7947ab303b50081', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -17,7 +48,7 @@ const B2bGridRowComponent = class {
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: '218cf8da76adc6f58983f90fb808629a4785f6a6' })));
+            } }, h("slot", { key: 'd3e960866ad5a611b690827bb03ca25caf118bde' })));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/b2b-grid.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-ab9eb36d.js';
 
-const gridCss = ":host(.b2b-grid){width:100%;margin:0 auto;box-sizing:border-box}";
+const gridCss = ":host(.b2b-grid){width:100%;margin:0 auto;box-sizing:border-box}:host(.b2b-grid-row){display:flex;flex-wrap:wrap}:host(.b2b-grid-col){display:flex;flex-direction:column}.b2b-grid-col>.b2b-grid-row{flex:1}";
 const B2bGridStyle0 = gridCss;
 
 const B2bGridComponent = class {

package/dist/types/components/grid/row.d.ts

@@ -8,5 +8,7 @@ export declare class B2bGridRowComponent {
     alignItems: 'stretch' | 'flex-start' | 'center' | 'flex-end';
     /** Horizontal alignment of columns. */
     justify: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
+    componentDidLoad(): void;
+    private adjustColumnFlex;
     render(): any;
 }

package/dist/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@otto-de/b2b-core-components",
-  "version": "1.22.0",
+  "version": "1.23.1",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@otto-de/b2b-core-components",
-  "version": "1.23.0",
+  "version": "1.23.2",
   "description": "Core components defined with Stencil",
   "author": "Otto GmbH",
   "license": "Apache-2.0",
@@ -40,7 +40,7 @@
     "build:storybook": "npm run copy-md-files && storybook build -o docs-build/design-system"
   },
   "dependencies": {
-    "@otto-de/b2b-tokens": "1.23.0",
+    "@otto-de/b2b-tokens": "1.23.2",
     "@stencil-community/eslint-plugin": "^0.5.0",
     "@stencil/core": "^4.12.4"
   },

package/dist/b2b-core-components/p-02ceefdf.entry.js

@@ -1 +0,0 @@
-import{r as t,h as e,H as s,g as a}from"./p-b6a753e8.js";const r=class{constructor(e){t(this,e),this.calculateGrowDimension=t=>({flex:""+(null!=t?t:1)/12*100}),this.span=void 0,this.textAlign="left"}render(){return e(s,{key:"ad6a14cd39b9429064c305bfbe6e0d6b9f506faa",style:Object.assign(Object.assign({},this.calculateGrowDimension(this.span)),{"text-align":`${this.textAlign}`})},e("slot",{key:"1b488c100774214fb52eeec64ffe70a8fadf0a3c"}))}get hostElement(){return a(this)}};export{r as b2b_grid_col}

package/dist/b2b-core-components/p-545b6ba2.entry.js

@@ -1 +0,0 @@
-import{r as e,h as s,H as t,g as r}from"./p-b6a753e8.js";const a=class{constructor(s){e(this,s),this.margin=24}render(){return s(t,{key:"d969835eaef0a092de761496f817e3aeb9fe9da3",style:{padding:`${this.margin}px`},class:"b2b-grid"},s("slot",{key:"457acba45d11bb8ed33008c1158f89d33f5222f6"}))}get hostElement(){return r(this)}};a.style=":host(.b2b-grid){width:100%;margin:0 auto;box-sizing:border-box}";export{a as b2b_grid}

package/dist/b2b-core-components/p-744e8fc3.entry.js

@@ -1 +0,0 @@
-import{r as t,h as s,H as r,g as a}from"./p-b6a753e8.js";const e=class{constructor(s){t(this,s),this.columnGap=24,this.rowGap=24,this.alignItems="stretch",this.justify="start"}render(){return s(r,{key:"cea79124fea736c6276b0f60c8ba983d3085dbdb",style:{"justify-content":`${this.justify}`,gap:`${this.columnGap}px`,margin:`${this.rowGap}px 0`,"align-items":`${this.alignItems}`,display:"flex","flex-wrap":"wrap","box-sizing":"border-box"}},s("slot",{key:"218cf8da76adc6f58983f90fb808629a4785f6a6"}))}get hostElement(){return a(this)}};export{e as b2b_grid_row}