@otto-de/b2b-core-components 1.22.0 → 1.23.1

package/dist/collection/components/date-picker/date-picker.stories.js

@@ -77,7 +77,7 @@ const meta = {
 };
 export default meta;
 export const Default = {
-    args: Object.assign({}, meta.args),
+    args: Object.assign(Object.assign({}, meta.args), { preSelectedDate: '01.01.2025' }),
     play: async ({ canvasElement }) => {
         setTimeout(async () => {
             var _a;
@@ -110,7 +110,7 @@ export const DisableFutureDates = {
     },
 };
 export const DisableWeekends = {
-    args: Object.assign(Object.assign({}, meta.args), { disableWeekends: true }),
+    args: Object.assign(Object.assign({}, meta.args), { disableWeekends: true, preSelectedDate: '01.01.2025' }),
     play: async ({ canvasElement }) => {
         setTimeout(async () => {
             var _a;
@@ -121,7 +121,7 @@ export const DisableWeekends = {
     },
 };
 export const DisableDates = {
-    args: Object.assign(Object.assign({}, meta.args), { disableWeekends: true, disableDates: '["21.01.2025", "10.01.2025"]' }),
+    args: Object.assign(Object.assign({}, meta.args), { preSelectedDate: '01.01.2025', disableDates: '["10.01.2025", "21.01.2025"]' }),
     play: async ({ canvasElement }) => {
         setTimeout(async () => {
             var _a;
@@ -132,7 +132,7 @@ export const DisableDates = {
     },
 };
 export const DisableDays = {
-    args: Object.assign(Object.assign({}, meta.args), { disableWeekends: true, disableDays: '["Mo", "Tu"]' }),
+    args: Object.assign(Object.assign({}, meta.args), { preSelectedDate: '01.01.2025', disableDays: '["Mo", "Tu"]' }),
     play: async ({ canvasElement }) => {
         setTimeout(async () => {
             var _a;
@@ -143,7 +143,7 @@ export const DisableDays = {
     },
 };
 export const DisableDatesUntil = {
-    args: Object.assign(Object.assign({}, meta.args), { disableDatesUntil: '20.01.2025' }),
+    args: Object.assign(Object.assign({}, meta.args), { preSelectedDate: '26.01.2025', disableDatesUntil: '20.01.2025' }),
     play: async ({ canvasElement }) => {
         setTimeout(async () => {
             var _a;
@@ -154,7 +154,7 @@ export const DisableDatesUntil = {
     },
 };
 export const DisableDatesFrom = {
-    args: Object.assign(Object.assign({}, meta.args), { disableDatesFrom: '20.01.2025' }),
+    args: Object.assign(Object.assign({}, meta.args), { preSelectedDate: '01.01.2025', disableDatesFrom: '10.01.2025' }),
     play: async ({ canvasElement }) => {
         setTimeout(async () => {
             var _a;
@@ -168,10 +168,10 @@ export const WithCustomHintMessage = {
     args: Object.assign(Object.assign({}, meta.args), { showHint: true, hint: 'This is a long hint text message which is longer than the normal default hint message' }),
 };
 export const WithPlaceholder = {
-    args: Object.assign(Object.assign({}, meta.args), { placeholder: 'this is date picker' }),
+    args: Object.assign(Object.assign({}, meta.args), { preSelectedDate: '01.01.2025', placeholder: 'this is date picker' }),
 };
 export const WithWidth = {
-    args: Object.assign(Object.assign({}, meta.args), { width: 500 }),
+    args: Object.assign(Object.assign({}, meta.args), { width: 500, preSelectedDate: '01.01.2025' }),
     play: async ({ canvasElement }) => {
         setTimeout(async () => {
             var _a;
@@ -182,7 +182,7 @@ export const WithWidth = {
     },
 };
 export const EnglishDatepicker = {
-    args: Object.assign(Object.assign({}, meta.args), { language: 'en' }),
+    args: Object.assign(Object.assign({}, meta.args), { language: 'en', preSelectedDate: '01.01.2025' }),
     play: async ({ canvasElement }) => {
         setTimeout(async () => {
             var _a;

package/dist/collection/components/dropdown/dropdown.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

package/dist/collection/components/flyout-menu/flyout-menu-option.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -223,7 +225,7 @@
 }
 :host(.b2b-flyout-menu__option:hover),
 :host(.b2b-flyout-menu__option:focus) {
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
   outline: none;
 }
 :host(.b2b-flyout-menu__option--disabled):hover,

package/dist/collection/components/flyout-menu/flyout-menu.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -283,7 +285,7 @@
   border-bottom: 1px solid var(--b2b-color-grey-200);
 }
 .b2b-flyout-menu__option:hover, .b2b-flyout-menu__option:focus {
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
   outline: none;
 }
 .b2b-flyout-menu__option--disabled {

package/dist/collection/components/flyout-menu/flyout-menu.e2e.js

@@ -5,7 +5,7 @@ describe('B2B-FlyoutMenu', () => {
         page = await newE2EPage();
         await page.setContent(`
       <b2b-flyout-menu>
-        <b2b-icon icon="b2b_icon-ellipsis" slot='trigger' clickable focusable></b2b-icon>
+        <b2b-icon-100 icon="b2b_icon-ellipsis" slot='trigger' clickable focusable></b2b-icon-100>
         <b2b-flyout-menu-option slot='option' option='option1' >
         </b2b-flyout-menu-option>
         <b2b-flyout-menu-option slot='option' option='option2' >
@@ -24,14 +24,14 @@ describe('B2B-FlyoutMenu', () => {
         expect(icon).not.toBeNull();
     });
     it('should show the menu when icon is clicked', async () => {
-        const iconContainer = await page.find('b2b-icon');
+        const iconContainer = await page.find('b2b-icon-100');
         iconContainer.click();
         await page.waitForChanges();
         const flyoutMenuOption = await page.find('b2b-flyout-menu-option');
         expect(await flyoutMenuOption.isVisible()).toBe(true);
     });
     it('should hide the menu when it loses focus', async () => {
-        const iconContainer = await page.find('b2b-icon');
+        const iconContainer = await page.find('b2b-icon-100');
         iconContainer.click();
         await page.waitForChanges();
         const flyoutMenuOption = await page.find('b2b-flyout-menu-option');
@@ -44,7 +44,7 @@ describe('B2B-FlyoutMenu', () => {
     /** Test is extremely flaky due to unknown global interaction. Test suite runs fine in isolation, so skipping for now. */
     xit('should emit the selected event when a menu option is clicked', async () => {
         const optionSelectedEventSpy = await page.spyOnEvent('b2b-option-selected');
-        const icon = await page.find('b2b-icon >>> div');
+        const icon = await page.find('b2b-icon-100 >>> div');
         await icon.click();
         await page.waitForChanges();
         const flyoutMenuOption = await page.find('b2b-flyout-menu-option');
@@ -58,7 +58,7 @@ describe('B2B-FlyoutMenu', () => {
     });
     it('should disable an option when disabled is true', async () => {
         const optionSelectedEventSpy = await page.spyOnEvent('b2b-option-selected');
-        const icon = await page.find('b2b-icon');
+        const icon = await page.find('b2b-icon-100');
         icon.click();
         await page.waitForChanges();
         const flyoutMenuOption = await page.find('b2b-flyout-menu-option[option="option3"]');
@@ -68,7 +68,7 @@ describe('B2B-FlyoutMenu', () => {
         expect(optionSelectedEventSpy).not.toHaveReceivedEvent();
     });
     it('should display separator after an option when separator is true', async () => {
-        const icon = await page.find('b2b-icon');
+        const icon = await page.find('b2b-icon-100');
         icon.click();
         await page.waitForChanges();
         const flyoutMenuOptions = await page.findAll('b2b-flyout-menu-option');

package/dist/collection/components/flyout-menu/flyout-menu.stories.js

@@ -21,11 +21,11 @@ const meta = {
         var args = __rest(_a, []);
         return html ` <div style="margin-left: 100px">
     <b2b-flyout-menu>
-      <b2b-icon
+      <b2b-icon-100
         icon="b2b_icon-ellipsis"
         slot="trigger"
         clickable
-        focusable></b2b-icon>
+        focusable></b2b-icon-100>
       <b2b-flyout-menu-option
         slot="option"
         option="Delete"
@@ -64,11 +64,11 @@ export const AllStates = {
         var args = __rest(_a, []);
         return html ` <div style="margin-left: 100px">
     <b2b-flyout-menu opened="true">
-      <b2b-icon
+      <b2b-icon-100
         icon="b2b_icon-ellipsis"
         slot="trigger"
         clickable
-        focusable></b2b-icon>
+        focusable></b2b-icon-100>
       <b2b-flyout-menu-option
         slot="option"
         option="Delete"

package/dist/collection/components/grid/column.js

@@ -1,30 +1,19 @@
 import { h, Host } from "@stencil/core";
 export class B2bGridColumnComponent {
     constructor() {
-        this.calculateGrowDimension = (growth) => {
-            const gap = this.hostElement.closest('b2b-grid-row').columnGap;
-            // if a span is not specified, we still need to subtract gap width and a growth factor of 1
-            let growthFactor;
-            if (gap > 0 && growth != undefined) {
-                growthFactor = `- ${gap - 2 * growth}px`;
+        this.calculateGrowDimension = (span) => {
+            if (span !== undefined) {
+                const flex = (span / 12) * 100;
+                return {
+                    ['flex']: `${flex}`,
+                };
             }
-            else if (gap <= 0 && growth != undefined) {
-                growthFactor = '';
-            }
-            else {
-                growthFactor = `- ${gap - 2}px`;
-            }
-            const flexGrow = growth == undefined ? 1 : 0;
-            const width = growth == undefined ? 1 : growth;
-            return {
-                ['flex']: `${flexGrow} 0 calc(${(width / 12) * 100}% ${growthFactor})`,
-            };
         };
         this.span = undefined;
         this.textAlign = 'left';
     }
     render() {
-        return (h(Host, { key: 'f83b2c034afd37db56dd216e61b17718c96fc3ec', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: 'ddf44e8dab7ed9267c2be3e4a2a1ff6ba13bb53b' })));
+        return (h(Host, { key: '84919b56153393d378a29ce84d4048af80a95fea', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: '1fef59961b312a1efdd94488865aa0a436170489' })));
     }
     static get is() { return "b2b-grid-col"; }
     static get encapsulation() { return "shadow"; }