Merge branch 'v4-dev' into FRONT-4652-featured-item-alignemnt

.size-limit.json

@@ -27,14 +27,14 @@
   },
   {
     "path": "dist/packages/ec/scripts/ecl-ec.js",
-    "limit": "235 KB",
+    "limit": "240 KB",
     "webpack": false,
     "gzip": false,
     "brotli": false
   },
   {
     "path": "dist/packages/eu/scripts/ecl-eu.js",
-    "limit": "235 KB",
+    "limit": "240 KB",
     "webpack": false,
     "gzip": false,
     "brotli": false

package.json

@@ -33,9 +33,10 @@
     "update-version": "scripts/update-version.sh"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "7.25.7",
-    "@babel/plugin-proposal-export-default-from": "7.25.7",
+    "@babel/eslint-parser": "7.25.8",
+    "@babel/plugin-proposal-export-default-from": "7.25.8",
     "@babel/plugin-transform-runtime": "7.25.7",
+    "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@prettier/plugin-xml": "3.4.1",
     "@size-limit/preset-big-lib": "11.1.6",
     "babel-jest": "29.7.0",
@@ -67,7 +68,7 @@
     "rimraf": "6.0.1",
     "size-limit": "11.1.6",
     "ssri": "10.0.6",
-    "stylelint": "16.9.0",
+    "stylelint": "16.10.0",
     "stylelint-config-css-modules": "4.4.0",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-standard": "36.0.1",
@@ -112,8 +113,6 @@
     "ip": ">=2.0.1",
     "ws": ">=8.17.1",
     "micromatch": ">=4.0.8",
-    "serve-static": ">=1.16.0",
-    "send": ">=0.19.0",
     "path-to-regexp": "0.1.10"
   },
   "engines": {

src/implementations/vanilla/components/datepicker/datepicker.js

@@ -1,3 +1,5 @@
+/* global moment */
+
 /**
  * @param {HTMLElement} element DOM element for component instantiation and scope
  * @param {Object} options
@@ -26,6 +28,7 @@ export class Datepicker {
       theme = 'ecl-datepicker-theme',
       yearRange = 40,
       reposition = false,
+      attachResizeListener = true,
       i18n = {
         previousMonth: 'Previous Month',
         nextMonth: 'Next Month',
@@ -69,6 +72,8 @@ export class Datepicker {
 
     // Options
     this.picker = null;
+    this.resizeTimer = null;
+    this.pikadayEl = null;
     this.format = format;
     this.theme = theme;
     this.yearRange = yearRange;
@@ -78,6 +83,10 @@ export class Datepicker {
       enableSelectionDaysInNextAndPreviousMonths;
     this.reposition = reposition;
     this.direction = 'ltr';
+    this.attachResizeListener = attachResizeListener;
+
+    // Bindings
+    this.handleResize = this.handleResize.bind(this);
   }
 
   /**
@@ -96,6 +105,41 @@ export class Datepicker {
 
     this.direction = getComputedStyle(this.element).direction;
 
+    if (this.attachResizeListener) {
+      window.addEventListener('resize', this.handleResize);
+    }
+
+    /**
+     * Resize logic.
+     *
+     * @param {HTMLElement} el - The pikaday dropdown.
+     */
+    Datepicker.resizeLogic = (el) => {
+      this.pikadayEl = el;
+      const vw = Math.max(
+        document.documentElement.clientWidth || 0,
+        window.innerWidth || 0,
+      );
+      const { direction } = getComputedStyle(el);
+      const elRect = el.getBoundingClientRect();
+
+      if (direction === 'rtl') {
+        const pickerMargin = vw - elRect.right;
+        if (vw < 768) {
+          el.style.left = `${pickerMargin}px`;
+        } else {
+          el.style.left = 'auto';
+        }
+      } else {
+        const pickerMargin = elRect.left;
+        if (vw < 768) {
+          el.style.right = `${pickerMargin}px`;
+        } else {
+          el.style.right = 'auto';
+        }
+      }
+    };
+
     const options = {
       field: this.element,
       yearRange: this.yearRange,
@@ -121,35 +165,30 @@ export class Datepicker {
         return `${day}-${month}-${year}`;
       };
     }
-
     // eslint-disable-next-line no-undef
     this.picker = new Pikaday({
       ...options,
-      onOpen() {
-        this.direction = getComputedStyle(this.el).direction;
-
-        // Extend picker size on mobile
-        const vw = Math.max(
-          document.documentElement.clientWidth || 0,
-          window.innerWidth || 0,
-        );
-        const elRect = this.el.getBoundingClientRect();
-
-        if (this.direction === 'rtl') {
-          const pickerMargin = vw - elRect.right;
-          if (vw < 768) {
-            this.el.style.left = `${pickerMargin}px`;
-          } else {
-            this.el.style.left = 'auto';
-          }
-        } else {
-          const pickerMargin = elRect.left;
-          if (vw < 768) {
-            this.el.style.right = `${pickerMargin}px`;
-          } else {
-            this.el.style.right = 'auto';
+      parse(input, format) {
+        if (!options.format) {
+          // Here we are using the default DD-MM-YYYY
+          const [day, month, year] = input.split('-').map(Number);
+          const fullYear = year < 100 ? 2000 + year : year;
+          return new Date(fullYear, month - 1, day);
+        }
+        // If we have a custom format we rely on moment.js
+        if (typeof moment !== 'undefined' && input !== '') {
+          const parsedDate = moment(input, format, false);
+
+          if (parsedDate.isValid()) {
+            return parsedDate.toDate();
           }
         }
+
+        return input;
+      },
+      onOpen() {
+        // Call the static method to check styles.
+        Datepicker.resizeLogic(this.el);
       },
     });
 
@@ -168,11 +207,27 @@ export class Datepicker {
       this.picker.destroy();
       this.picker = null;
     }
+    if (this.attachResizeListener) {
+      window.removeEventListener('resize', this.handleResize);
+    }
     if (this.element) {
       this.element.removeAttribute('data-ecl-auto-initialized');
       ECL.components.delete(this.element);
     }
   }
+
+  /**
+   * Instance method to handle resizing with debouncing
+   */
+  handleResize() {
+    clearTimeout(this.resizeTimer);
+
+    this.resizeTimer = setTimeout(() => {
+      if (this.pikadayEl) {
+        Datepicker.resizeLogic(this.pikadayEl);
+      }
+    }, 150);
+  }
 }
 
 export default Datepicker;

src/implementations/vanilla/components/site-header/_site-header-language-switcher.scss

@@ -78,6 +78,7 @@ $language-list: null !default;
   align-items: center;
   display: flex;
   justify-content: space-between;
+  padding-inline-start: var(--s-s);
 }
 
 .ecl-site-header__language-title {

src/implementations/vanilla/components/splash-page/splash-page.scss

@@ -45,6 +45,7 @@ $language-list: null !default;
 .ecl-splash-page__language-title {
   font: map.get($language-list, 'header-font-mobile');
   margin: 0;
+  padding-inline-start: var(--s-s);
 }
 
 .ecl-splash-page__language-content {

src/playground/ec/package.json

@@ -10,8 +10,8 @@
     "start": "STORYBOOK_SYSTEM=EC node start.js"
   },
   "devDependencies": {
-    "@babel/core": "7.25.7",
-    "@babel/preset-env": "7.25.7",
+    "@babel/core": "7.25.8",
+    "@babel/preset-env": "7.25.8",
     "@babel/preset-react": "7.25.7",
     "@babel/runtime": "7.25.7",
     "@iframe-resizer/child": "5.3.1",

src/playground/eu/package.json

@@ -10,8 +10,8 @@
     "start": "STORYBOOK_SYSTEM=EU node start.js"
   },
   "devDependencies": {
-    "@babel/core": "7.25.7",
-    "@babel/preset-env": "7.25.7",
+    "@babel/core": "7.25.8",
+    "@babel/preset-env": "7.25.8",
     "@babel/preset-react": "7.25.7",
     "@babel/runtime": "7.25.7",
     "@iframe-resizer/child": "5.3.1",

src/themes/ec/variables/_language-list.scss

@@ -3,18 +3,18 @@
 
 $language-list: (
   color: var(--c-d),
-  container-padding: var(--s-3xl),
+  container-padding: var(--s-3xl) var(--s-3xl) var(--s-3xl) 28px,
   header-font-mobile: var(--f-l),
   header-font-desktop: var(--f-xl),
   content-margin-mobile: var(--s-s),
   content-margin-desktop: var(--s-s),
   category-title-font: var(--f-m),
   category-title-font-weight: map.get($font-weight, 'regular'),
-  category-title-padding: var(--s-l) 0 var(--s-xs),
+  category-title-padding: var(--s-l) 0 var(--s-xs) var(--s-s),
   category-separator: 1px solid var(--c-n),
   category-stack-margin: var(--s-s),
-  list-margin: 0 0 0 calc(-1 * var(--s-s)),
-  list-margin-rtl: calc(-1 * var(--s-s)) 0 0 0,
+  list-margin: 0,
+  list-margin-rtl: 0,
   item-padding: var(--s-xs) var(--s-s),
   code-color: var(--c-d),
   code-font-weight: map.get($font-weight, 'regular'),
@@ -25,7 +25,7 @@ $language-list: (
   item-active-shadow: none,
   item-width: 184px,
   column-spacing-before: var(--s-m),
-  column-spacing-after: calc(var(--s-m) + var(--s-s)),
+  column-spacing-after: var(--s-2xs),
 );
 $language-list-print: (
   container-padding: map.get($spacing-print, '3xl'),

src/themes/eu/variables/_language-list.scss

@@ -3,29 +3,29 @@
 
 $language-list: (
   color: var(--c-d-140),
-  container-padding: var(--s-2xl) var(--s-l) var(--s-l),
+  container-padding: var(--s-2xl) var(--s-l) var(--s-l) var(--s-s),
   header-font-mobile: var(--f-p-l),
   header-font-desktop: var(--f-p-xl),
   content-margin-mobile: var(--s-m),
   content-margin-desktop: var(--s-m),
   category-title-font: var(--f-p-m),
   category-title-font-weight: map.get($font-weight, 'bold'),
-  category-title-padding: var(--s-l) 0 var(--s-xs),
+  category-title-padding: var(--s-l) 0 var(--s-xs) var(--s-s),
   category-separator: 1px solid var(--c-p-20),
   category-stack-margin: var(--s-s),
-  list-margin: 0 0 0 calc(-1 * var(--s-s)),
-  list-margin-rtl: calc(-1 * var(--s-s)) 0 0 0,
+  list-margin: 0,
+  list-margin-rtl: 0,
   item-padding: var(--s-s),
   code-color: var(--c-d-140),
   code-font-weight: map.get($font-weight, 'bold'),
   code-active-font-weight: map.get($font-weight, 'bold'),
   code-width: 30px,
   item-active-background: var(--c-p-10),
   item-active-color: var(--c-d-140),
-  item-active-shadow: inset 4px 0 0 0 var(--c-p),
+  item-active-shadow: none,
   item-width: 188px,
   column-spacing-before: var(--s-m),
-  column-spacing-after: var(--s-xl),
+  column-spacing-after: var(--s-m),
 );
 $language-list-print: (
   container-padding: map.get($spacing-print, '3xl') map.get($spacing-print, 'l')

src/tools/builder/package.json

@@ -11,9 +11,9 @@
     "ecl-builder": "./bin/build.js"
   },
   "dependencies": {
-    "@babel/core": "7.25.7",
-    "@babel/eslint-parser": "7.25.7",
-    "@babel/preset-env": "7.25.7",
+    "@babel/core": "7.25.8",
+    "@babel/eslint-parser": "7.25.8",
+    "@babel/preset-env": "7.25.8",
     "@babel/runtime": "7.25.7",
     "@rollup/plugin-replace": "5.0.7",
     "autoprefixer": "10.4.20",
@@ -31,7 +31,7 @@
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-svg": "2.0.0",
     "rollup-plugin-uglify": "6.0.4",
-    "sass": "1.79.4"
+    "sass": "1.79.5"
   },
   "engines": {
     "node": ">=18.12.0"

src/website/package.json

@@ -45,10 +45,10 @@
     "slugify": "1.6.6"
   },
   "devDependencies": {
-    "@babel/core": "7.25.7",
-    "@babel/plugin-proposal-export-default-from": "7.25.7",
+    "@babel/core": "7.25.8",
+    "@babel/plugin-proposal-export-default-from": "7.25.8",
     "@babel/plugin-proposal-export-namespace-from": "7.18.9",
-    "@babel/preset-env": "7.25.7",
+    "@babel/preset-env": "7.25.8",
     "@babel/preset-react": "7.25.7",
     "@babel/runtime": "7.25.7",
     "@ecl/twig-ec-storybook": "4.7.0",
@@ -89,7 +89,7 @@
     "remark-gfm": "1.0.0",
     "remark-unwrap-images": "2.1.0",
     "rimraf": "6.0.1",
-    "sass": "1.79.4",
+    "sass": "1.79.5",
     "sass-loader": "16.0.2",
     "serve": "14.2.3",
     "style-loader": "4.0.0",