@otto-de/b2b-core-components 1.26.1 → 1.26.2

package/dist/custom-elements.json

@@ -2194,6 +2194,9 @@
             {
               "name": "b2b_icon-chair"
             },
+            {
+              "name": "b2b_icon-chat"
+            },
             {
               "name": "b2b_icon-chatbot"
             },
@@ -2461,6 +2464,9 @@
             {
               "name": "b2b_icon-laptop"
             },
+            {
+              "name": "b2b_icon-leaving-page-50"
+            },
             {
               "name": "b2b_icon-leaving-page"
             },
@@ -3031,11 +3037,203 @@
             {
               "name": "b2b_logo-carrier-ups"
             },
+            {
+              "name": "b2b_icon-archive-6m"
+            },
+            {
+              "name": "b2b_icon-arrow-long-down"
+            },
+            {
+              "name": "b2b_icon-arrow-long-left"
+            },
+            {
+              "name": "b2b_icon-arrow-long-right"
+            },
+            {
+              "name": "b2b_icon-arrow-long-up"
+            },
+            {
+              "name": "b2b_icon-browser-content-skyscraper"
+            },
+            {
+              "name": "b2b_icon-browser-duration"
+            },
+            {
+              "name": "b2b_icon-browser-list-click"
+            },
+            {
+              "name": "b2b_icon-browser-magnifying-glass-info"
+            },
+            {
+              "name": "b2b_icon-browser-person-click"
+            },
+            {
+              "name": "b2b_icon-browser-target"
+            },
+            {
+              "name": "b2b_icon-browser-teaser"
+            },
             {
               "name": "b2b_icon-bullet-list"
             },
+            {
+              "name": "b2b_icon-chat-ellipsis"
+            },
+            {
+              "name": "b2b_icon-clover-four-leaf"
+            },
+            {
+              "name": "b2b_icon-cookie"
+            },
+            {
+              "name": "b2b_icon-data-filter"
+            },
+            {
+              "name": "b2b_icon-decision"
+            },
+            {
+              "name": "b2b_icon-delivery-curb"
+            },
+            {
+              "name": "b2b_icon-factory"
+            },
+            {
+              "name": "b2b_icon-flame"
+            },
+            {
+              "name": "b2b_icon-flyer"
+            },
+            {
+              "name": "b2b_icon-globe-hand"
+            },
+            {
+              "name": "b2b_icon-iceberg"
+            },
+            {
+              "name": "b2b_icon-laptop-phone-ads"
+            },
+            {
+              "name": "b2b_icon-laptop-phone-youtube"
+            },
+            {
+              "name": "b2b_icon-laptop-phone"
+            },
+            {
+              "name": "b2b_icon-letter-opened"
+            },
+            {
+              "name": "b2b_icon-link"
+            },
+            {
+              "name": "b2b_icon-money-banknotes"
+            },
+            {
+              "name": "b2b_icon-money-coins-arrow"
+            },
+            {
+              "name": "b2b_icon-movie"
+            },
+            {
+              "name": "b2b_icon-ogh-change"
+            },
+            {
+              "name": "b2b_icon-order-return-arrow"
+            },
             {
               "name": "b2b_icon-ordered-list"
+            },
+            {
+              "name": "b2b_icon-otto-change"
+            },
+            {
+              "name": "b2b_icon-out-of-home-digital"
+            },
+            {
+              "name": "b2b_icon-out-of-home"
+            },
+            {
+              "name": "b2b_icon-person-arrow-graph"
+            },
+            {
+              "name": "b2b_icon-person-exchange"
+            },
+            {
+              "name": "b2b_icon-person-influencer"
+            },
+            {
+              "name": "b2b_icon-person-magnifying-glass"
+            },
+            {
+              "name": "b2b_icon-phone-play"
+            },
+            {
+              "name": "b2b_icon-plus-hint"
+            },
+            {
+              "name": "b2b_icon-price-tag-premium"
+            },
+            {
+              "name": "b2b_icon-reach"
+            },
+            {
+              "name": "b2b_icon-refresh"
+            },
+            {
+              "name": "b2b_icon-room"
+            },
+            {
+              "name": "b2b_icon-screenshot"
+            },
+            {
+              "name": "b2b_icon-search-navigation"
+            },
+            {
+              "name": "b2b_icon-skip-link"
+            },
+            {
+              "name": "b2b_icon-speech-bubble-eye"
+            },
+            {
+              "name": "b2b_icon-sprache"
+            },
+            {
+              "name": "b2b_icon-success-hint-filled"
+            },
+            {
+              "name": "b2b_icon-sulfur-dioxide-sulfite"
+            },
+            {
+              "name": "b2b_icon-sustainability"
+            },
+            {
+              "name": "b2b_icon-sustainable-animal-welfare"
+            },
+            {
+              "name": "b2b_icon-sustainable-natural-cosmetics"
+            },
+            {
+              "name": "b2b_icon-sustainable-organic-materials"
+            },
+            {
+              "name": "b2b_icon-sustainable-recyclable-design"
+            },
+            {
+              "name": "b2b_icon-sustainable-social-initiatives"
+            },
+            {
+              "name": "b2b_icon-touch"
+            },
+            {
+              "name": "b2b_icon-tv-smart"
+            },
+            {
+              "name": "b2b_icon-tv-target"
+            },
+            {
+              "name": "b2b_icon-tv"
+            },
+            {
+              "name": "b2b_icon-youtube"
             }
           ]
         },
@@ -3173,10 +3371,10 @@
               "name": "b2b_icon-wishlist"
             },
             {
-              "name": "b2b_icon-info-hint"
+              "name": "b2b_icon-refresh"
             },
             {
-              "name": "b2b_icon-refresh"
+              "name": "b2b_icon-info-hint"
             },
             {
               "name": "b2b_icon-success-hint"

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

@@ -11,102 +11,65 @@ const B2bGridRowComponent = class {
     componentDidLoad() {
         this.adjustColumnFlex();
     }
-    calculateRowsAndsSpaceForColumnsWithSpan(columns, currentRowTotal, rows, currentRow) {
-        columns.forEach(column => {
-            let span = parseInt(column.getAttribute('span'), 10);
-            if (currentRowTotal + span > 12) {
-                rows.push(currentRow);
-                currentRow = [];
-                currentRowTotal = 0;
-            }
-            currentRow.push(column);
-            currentRowTotal += span;
-        });
-        if (currentRow.length > 0) {
-            rows.push(currentRow);
-        }
-    }
     adjustColumnFlex() {
-        const columns = this.hostElement.querySelectorAll(':scope > b2b-grid-col');
-        let totalSpan = 0;
-        let columnsWithoutSpan = [];
-        let columnsWithSpan = [];
-        columns.forEach((column) => {
-            const span = column.getAttribute('span');
-            if (span) {
-                totalSpan += parseInt(span, 10);
-                columnsWithSpan.push(column);
-            }
-            else {
-                columnsWithoutSpan.push(column);
-            }
-        });
-        if (totalSpan > 12 && columnsWithoutSpan.length === 0) {
-            this.handleOverflowingColumns(columnsWithSpan);
-            return;
-        }
-        if (columnsWithoutSpan.length > 0) {
-            this.handleRowsWithColumnsWithoutSpan(columnsWithoutSpan, columnsWithSpan, totalSpan);
-            return;
-        }
-        if (totalSpan < 12 && columnsWithoutSpan.length === 0) {
-            this.handleNonOverflowingColumnsWithSpan(columnsWithSpan);
-            return;
-        }
-    }
-    handleNonOverflowingColumnsWithSpan(columnsWithSpan) {
-        columnsWithSpan.forEach(column => {
-            let span = parseInt(column.getAttribute('span'), 10);
-            let widthPercentage = (span / 12) * 100;
-            column.style.flex = `0 0 calc(${widthPercentage}% - ${this.columnGap}px)`;
-            column.style.maxWidth = `calc(${widthPercentage}% - ${this.columnGap}px)`;
-        });
-    }
-    handleOverflowingColumns(columns) {
-        let rows = [];
-        let currentRow = [];
-        let currentRowTotal = 0;
-        this.calculateRowsAndsSpaceForColumnsWithSpan(columns, currentRowTotal, rows, currentRow);
-        rows.forEach(row => {
-            row.forEach(column => {
-                let span = parseInt(column.getAttribute('span'), 10);
-                let widthPercentage = (span / 12) * 100;
-                column.style.flex = `0 0 calc(${widthPercentage}% - ${this.columnGap}px)`;
-                column.style.maxWidth = `calc(${widthPercentage}% - ${this.columnGap}px)`;
-            });
-        });
-    }
-    handleRowsWithColumnsWithoutSpan(columnsWithoutSpan, columnsWithSpan, totalSpan) {
-        let remainingSpan = 12 - totalSpan <= 0 ? 12 : 12 - totalSpan;
+        const columns = Array.from(this.hostElement.querySelectorAll(':scope > b2b-grid-col'));
         let rows = [];
         let currentRow = [];
-        let currentRowTotal = 0;
-        this.calculateRowsAndsSpaceForColumnsWithSpan(columnsWithSpan, currentRowTotal, rows, currentRow);
-        columnsWithoutSpan.forEach(column => {
-            let spanPerColumn = Math.max(1, Math.floor(remainingSpan / columnsWithoutSpan.length));
-            if (currentRowTotal + spanPerColumn > 12) {
-                rows.push(currentRow);
-                currentRow = [];
-                currentRowTotal = 0;
+        let currentRowSpan = 0;
+        columns.forEach(column => {
+            const span = column.hasAttribute('span')
+                ? parseInt(column.getAttribute('span'), 10)
+                : null;
+            if (span !== null) {
+                if (currentRowSpan + span > 12 && currentRow.length > 0) {
+                    rows.push(currentRow);
+                    currentRow = [];
+                    currentRowSpan = 0;
+                }
+                currentRow.push(column);
+                currentRowSpan += span;
+            }
+            else {
+                if (currentRowSpan > 0) {
+                    const remainingSpan = 12 - currentRowSpan;
+                    if (remainingSpan <= 0) {
+                        rows.push(currentRow);
+                        currentRow = [];
+                        currentRowSpan = 0;
+                    }
+                }
+                currentRow.push(column);
             }
-            column.setAttribute('span', spanPerColumn.toString());
-            currentRow.push(column);
-            currentRowTotal += spanPerColumn;
         });
         if (currentRow.length > 0) {
             rows.push(currentRow);
         }
         rows.forEach(row => {
+            const totalSpan = row.reduce((sum, col) => {
+                return (sum +
+                    (col.hasAttribute('span')
+                        ? parseInt(col.getAttribute('span'), 10)
+                        : 0));
+            }, 0);
+            const remainingSpan = 12 - totalSpan;
+            const unspannedColumns = row.filter(col => !col.hasAttribute('span'));
+            if (unspannedColumns.length > 0 && remainingSpan > 0) {
+                const spanPerColumn = Math.max(1, Math.floor(remainingSpan / unspannedColumns.length));
+                unspannedColumns.forEach(col => {
+                    col.setAttribute('span', spanPerColumn.toString());
+                });
+            }
+            const columnCount = row.length;
             row.forEach(column => {
-                let span = parseInt(column.getAttribute('span'), 10) || 1;
-                let widthPercentage = (span / 12) * 100;
-                column.style.flex = `0 0 calc(${widthPercentage}% - ${this.columnGap}px)`;
-                column.style.maxWidth = `calc(${widthPercentage}% - ${this.columnGap}px)`;
+                const span = parseInt(column.getAttribute('span'), 10) || 1;
+                const widthPercentage = (span / 12) * 100;
+                column.style.flex = `0 0 calc(${widthPercentage}% - ${this.columnGap * (1 - 1 / columnCount)}px)`;
+                column.style.maxWidth = `calc(${widthPercentage}% - ${this.columnGap * (1 - 1 / columnCount)}px)`;
             });
         });
     }
     render() {
-        return (h(Host, { key: 'da13d7265983cb9a8e70b43c0f7e152912b8e353', style: {
+        return (h(Host, { key: '1becdec8aebc57592c319a68beee14c10aaed53d', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -114,7 +77,7 @@ const B2bGridRowComponent = class {
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: 'b0be12c2eeda9cf109875a17e1509755960f1e65' })));
+            } }, h("slot", { key: '6857b50b30eb2eeff2678c3d51c5b8f690c12563' })));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/b2b-icon-100.entry.js

@@ -7,11 +7,16 @@ const iconTypes = [
     "b2b_icon-advice",
     "b2b_icon-allergen-sulfur-dioxide-sulfite",
     "b2b_icon-almond",
+    "b2b_icon-archive-6m",
     "b2b_icon-archive",
     "b2b_icon-armchair",
     "b2b_icon-arrow-down",
     "b2b_icon-arrow-graph",
     "b2b_icon-arrow-left",
+    "b2b_icon-arrow-long-down",
+    "b2b_icon-arrow-long-left",
+    "b2b_icon-arrow-long-right",
+    "b2b_icon-arrow-long-up",
     "b2b_icon-arrow-right",
     "b2b_icon-arrow-up",
     "b2b_icon-assembly",
@@ -31,8 +36,15 @@ const iconTypes = [
     "b2b_icon-brandshop",
     "b2b_icon-brazil-nut",
     "b2b_icon-browser-click",
+    "b2b_icon-browser-content-skyscraper",
     "b2b_icon-browser-content",
+    "b2b_icon-browser-duration",
+    "b2b_icon-browser-list-click",
+    "b2b_icon-browser-magnifying-glass-info",
+    "b2b_icon-browser-person-click",
     "b2b_icon-browser-psm",
+    "b2b_icon-browser-target",
+    "b2b_icon-browser-teaser",
     "b2b_icon-bullet-list",
     "b2b_icon-burger",
     "b2b_icon-bus",
@@ -45,6 +57,8 @@ const iconTypes = [
     "b2b_icon-celery",
     "b2b_icon-certificate",
     "b2b_icon-chair",
+    "b2b_icon-chat-ellipsis",
+    "b2b_icon-chat",
     "b2b_icon-chatbot",
     "b2b_icon-check-bold",
     "b2b_icon-check",
@@ -53,8 +67,10 @@ const iconTypes = [
     "b2b_icon-clear",
     "b2b_icon-close-bold",
     "b2b_icon-close",
+    "b2b_icon-clover-four-leaf",
     "b2b_icon-code-management",
     "b2b_icon-contact-mail",
+    "b2b_icon-cookie",
     "b2b_icon-copy",
     "b2b_icon-cow",
     "b2b_icon-crab",
@@ -62,9 +78,12 @@ const iconTypes = [
     "b2b_icon-curtain",
     "b2b_icon-cut-out",
     "b2b_icon-dashboard",
+    "b2b_icon-data-filter",
+    "b2b_icon-decision",
     "b2b_icon-deer",
     "b2b_icon-delete",
     "b2b_icon-delivery-24h",
+    "b2b_icon-delivery-curb",
     "b2b_icon-delivery-desired-date-selection",
     "b2b_icon-delivery-desired-date",
     "b2b_icon-delivery-express",
@@ -103,20 +122,24 @@ const iconTypes = [
     "b2b_icon-event",
     "b2b_icon-events",
     "b2b_icon-expand",
+    "b2b_icon-factory",
     "b2b_icon-faq",
     "b2b_icon-feedback",
     "b2b_icon-filter",
     "b2b_icon-fish",
     "b2b_icon-fitness",
     "b2b_icon-flag-chequered",
+    "b2b_icon-flame",
     "b2b_icon-flexible-work",
     "b2b_icon-flip",
+    "b2b_icon-flyer",
     "b2b_icon-food-processor",
     "b2b_icon-fullscreen",
     "b2b_icon-gallery-view",
     "b2b_icon-gamepad",
     "b2b_icon-garlic",
     "b2b_icon-gender-intersex",
+    "b2b_icon-globe-hand",
     "b2b_icon-globe",
     "b2b_icon-gluten",
     "b2b_icon-glutenfree",
@@ -126,6 +149,7 @@ const iconTypes = [
     "b2b_icon-hide",
     "b2b_icon-high-heels",
     "b2b_icon-home",
+    "b2b_icon-iceberg",
     "b2b_icon-info-small",
     "b2b_icon-info",
     "b2b_icon-inplace-zoom-reverse",
@@ -133,13 +157,19 @@ const iconTypes = [
     "b2b_icon-insurance",
     "b2b_icon-kamut",
     "b2b_icon-laptop-os",
+    "b2b_icon-laptop-phone-ads",
+    "b2b_icon-laptop-phone-youtube",
+    "b2b_icon-laptop-phone",
     "b2b_icon-laptop",
+    "b2b_icon-leaving-page-50",
     "b2b_icon-leaving-page",
+    "b2b_icon-letter-opened",
     "b2b_icon-light-bulb",
     "b2b_icon-like-fingers",
     "b2b_icon-like-product",
     "b2b_icon-like",
     "b2b_icon-line-graph",
+    "b2b_icon-link",
     "b2b_icon-list-view",
     "b2b_icon-location",
     "b2b_icon-lupine",
@@ -152,12 +182,15 @@ const iconTypes = [
     "b2b_icon-milk",
     "b2b_icon-minus",
     "b2b_icon-module-operations",
+    "b2b_icon-money-banknotes",
+    "b2b_icon-money-coins-arrow",
     "b2b_icon-money-coins",
     "b2b_icon-money-document",
     "b2b_icon-money-plus",
     "b2b_icon-money-stack",
     "b2b_icon-money",
     "b2b_icon-move",
+    "b2b_icon-movie",
     "b2b_icon-mustard",
     "b2b_icon-nav",
     "b2b_icon-new",
@@ -165,6 +198,7 @@ const iconTypes = [
     "b2b_icon-notification",
     "b2b_icon-nuts",
     "b2b_icon-oat",
+    "b2b_icon-ogh-change",
     "b2b_icon-order-cancelled",
     "b2b_icon-order-delivered",
     "b2b_icon-order-form",
@@ -174,6 +208,7 @@ const iconTypes = [
     "b2b_icon-order-packed",
     "b2b_icon-order-payment",
     "b2b_icon-order-received",
+    "b2b_icon-order-return-arrow",
     "b2b_icon-order-return",
     "b2b_icon-order-shipped",
     "b2b_icon-order-state-unknown",
@@ -182,11 +217,14 @@ const iconTypes = [
     "b2b_icon-ordered-list",
     "b2b_icon-otto-app",
     "b2b_icon-otto-campus",
+    "b2b_icon-otto-change",
     "b2b_icon-otto-company",
     "b2b_icon-otto-laptop",
     "b2b_icon-otto-logo",
     "b2b_icon-otto-up-points",
     "b2b_icon-otto-up",
+    "b2b_icon-out-of-home-digital",
+    "b2b_icon-out-of-home",
     "b2b_icon-paper-plane",
     "b2b_icon-pause",
     "b2b_icon-payment-credit-card",
@@ -199,13 +237,17 @@ const iconTypes = [
     "b2b_icon-pecan-nut",
     "b2b_icon-pending",
     "b2b_icon-person-access",
+    "b2b_icon-person-arrow-graph",
     "b2b_icon-person-callcenter",
     "b2b_icon-person-check",
     "b2b_icon-person-colleagues",
     "b2b_icon-person-community",
     "b2b_icon-person-development",
+    "b2b_icon-person-exchange",
     "b2b_icon-person-female",
+    "b2b_icon-person-influencer",
     "b2b_icon-person-info",
+    "b2b_icon-person-magnifying-glass",
     "b2b_icon-person-male",
     "b2b_icon-person-rating",
     "b2b_icon-person-support",
@@ -213,6 +255,7 @@ const iconTypes = [
     "b2b_icon-person-workshop",
     "b2b_icon-person",
     "b2b_icon-phone-permission",
+    "b2b_icon-phone-play",
     "b2b_icon-phone",
     "b2b_icon-pig",
     "b2b_icon-pin",
@@ -222,8 +265,10 @@ const iconTypes = [
     "b2b_icon-plant",
     "b2b_icon-play-1",
     "b2b_icon-play",
+    "b2b_icon-plus-hint",
     "b2b_icon-plus",
     "b2b_icon-price-alert",
+    "b2b_icon-price-tag-premium",
     "b2b_icon-price-tag",
     "b2b_icon-print",
     "b2b_icon-puzzle",
@@ -235,17 +280,22 @@ const iconTypes = [
     "b2b_icon-rating-half",
     "b2b_icon-rating-order",
     "b2b_icon-rating-payment",
+    "b2b_icon-reach",
+    "b2b_icon-refresh",
     "b2b_icon-remote-work",
     "b2b_icon-repair",
     "b2b_icon-reply",
     "b2b_icon-retirement-provision",
     "b2b_icon-rocket",
+    "b2b_icon-room",
     "b2b_icon-rye",
     "b2b_icon-sabbatical",
     "b2b_icon-sale",
     "b2b_icon-save",
+    "b2b_icon-screenshot",
     "b2b_icon-sea",
     "b2b_icon-search-enter",
+    "b2b_icon-search-navigation",
     "b2b_icon-search",
     "b2b_icon-seo",
     "b2b_icon-service-info",
@@ -259,6 +309,7 @@ const iconTypes = [
     "b2b_icon-shopping-cart-euro",
     "b2b_icon-shopping-cart",
     "b2b_icon-show",
+    "b2b_icon-skip-link",
     "b2b_icon-smiley-angry",
     "b2b_icon-smiley-happy",
     "b2b_icon-smiley-negative",
@@ -270,15 +321,25 @@ const iconTypes = [
     "b2b_icon-sort-descending",
     "b2b_icon-sort",
     "b2b_icon-soy",
+    "b2b_icon-speech-bubble-eye",
     "b2b_icon-spelt",
+    "b2b_icon-sprache",
     "b2b_icon-stationary",
     "b2b_icon-studies",
+    "b2b_icon-success-hint-filled",
     "b2b_icon-success",
+    "b2b_icon-sulfur-dioxide-sulfite",
+    "b2b_icon-sustainability",
+    "b2b_icon-sustainable-animal-welfare",
     "b2b_icon-sustainable-delivery",
     "b2b_icon-sustainable-energy-efficient",
+    "b2b_icon-sustainable-natural-cosmetics",
+    "b2b_icon-sustainable-organic-materials",
     "b2b_icon-sustainable-production",
+    "b2b_icon-sustainable-recyclable-design",
     "b2b_icon-sustainable-recycling",
     "b2b_icon-sustainable-resource",
+    "b2b_icon-sustainable-social-initiatives",
     "b2b_icon-swipe-gesture",
     "b2b_icon-sync-device",
     "b2b_icon-t-shirt",
@@ -287,6 +348,7 @@ const iconTypes = [
     "b2b_icon-target-group",
     "b2b_icon-teddy",
     "b2b_icon-test-result",
+    "b2b_icon-touch",
     "b2b_icon-town",
     "b2b_icon-trash",
     "b2b_icon-trend-down",
@@ -295,6 +357,9 @@ const iconTypes = [
     "b2b_icon-trend-up",
     "b2b_icon-trousers",
     "b2b_icon-trusted",
+    "b2b_icon-tv-smart",
+    "b2b_icon-tv-target",
+    "b2b_icon-tv",
     "b2b_icon-unpin",
     "b2b_icon-upload",
     "b2b_icon-user-management",
@@ -319,6 +384,7 @@ const iconTypes = [
     "b2b_icon-wishlist",
     "b2b_icon-work-life",
     "b2b_icon-workshop",
+    "b2b_icon-youtube",
     "b2b_icon-zoom-in",
     "b2b_icon-zoom-out",
     "b2b_logo-carrier-dhl",

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

@@ -9,10 +9,6 @@ export declare class B2bGridRowComponent {
     /** Horizontal alignment of columns. */
     justify: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
     componentDidLoad(): void;
-    private calculateRowsAndsSpaceForColumnsWithSpan;
     private adjustColumnFlex;
-    private handleNonOverflowingColumnsWithSpan;
-    private handleOverflowingColumns;
-    private handleRowsWithColumnsWithoutSpan;
     render(): any;
 }