feat(slim-select): Removed patch for slim-select 2 and applied in js …

package.json

@@ -139,7 +139,7 @@
     "rimraf": "6.0.1",
     "size-limit": "11.2.0",
     "slim-select": "1.27.1",
-    "slim-select-2": "npm:slim-select@2.10.0",
+    "slim-select-2": "brianvoe/slim-select#e6239514875df954edd772fd146aed5657f0a498",
     "storybook": "^8.6.4",
     "stylelint": "^16.15.0",
     "stylelint-config-prettier": "9.0.5",

src/compositions/bcl-event/event.story.js

@@ -1,6 +1,7 @@
 import {
   initScrollspy,
   initBadges,
+  initMultiselects,
   correctPaths,
 } from "@openeuropa/bcl-story-utils";
 import {
@@ -112,7 +113,7 @@ export const Listing = (args) =>
   listingPage(applyArgs(correctPaths(demoListing), args));
 
 Listing.storyName = "Event listing";
-Listing.decorators = [initBadges];
+Listing.decorators = [initBadges, initMultiselects];
 Listing.args = getArgs();
 Listing.argTypes = getArgTypes();
 Listing.parameters = {

src/themes/default/package.json

@@ -15,7 +15,7 @@
     "clean": "rimraf css js templates logos icons",
     "prepublish": "npm run build",
     "update:styles": "npm run build:styles && npm run build:color-scheme && copyfiles -f css/*.min.css ../../../assets",
-    "update:scripts": "npm run build:scripts && copyfiles -f js/*.bundle.min.js ../../../assets",
+    "update:scripts": "npm run build:scripts && copyfiles -f js/* ../../../assets",
     "update:templates": "npm-run-all -s align-templates build:copy"
   },
   "devDependencies": {
@@ -31,7 +31,8 @@
     "flag-icons": "6.9.2",
     "glob": "11.0.1",
     "npm-run-all": "4.1.5",
-    "slim-select": "1.27.1"
+    "slim-select": "1.27.1",
+    "slim-select-2": "brianvoe/slim-select#e6239514875df954edd772fd146aed5657f0a498"
   },
   "publishConfig": {
     "access": "public"

src/themes/default/src/js/index.esm.js

@@ -21,6 +21,7 @@ import Tooltip from "@openeuropa/bcl-bootstrap/js/src/tooltip";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
+import SlimSelectWrapper from "@openeuropa/bcl-theme-default/src/js/slim-select-wrapper/slim-select-wrapper";
 
 export {
   Alert,
@@ -39,4 +40,5 @@ export {
   Gallery,
   AccessibleToggle,
   AccordionToggle,
+  SlimSelectWrapper,
 };

src/themes/default/src/js/index.umd.js

@@ -21,6 +21,7 @@ import Tooltip from "@openeuropa/bcl-bootstrap/js/src/tooltip";
 import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
+import SlimSelectWrapper from "@openeuropa/bcl-theme-default/src/js/slim-select-wrapper/slim-select-wrapper";
 
 export default {
   Alert,
@@ -39,4 +40,5 @@ export default {
   Gallery,
   AccessibleToggle,
   AccordionToggle,
+  SlimSelectWrapper,
 };

src/themes/default/src/js/slim-select-wrapper/slim-select-wrapper.js

@@ -0,0 +1,48 @@
+function wrapSlimSelect() {
+  const ActualSlimSelect = window.SlimSelect;
+
+  function SlimSelectWrapper(config) {
+    const selectEl =
+      typeof config.select === 'string'
+        ? document.querySelector(config.select)
+        : config.select;
+
+    const offcanvasContainer =
+      selectEl?.closest('.offcanvas-body') || selectEl?.closest('.offcanvas');
+
+    const enhancedConfig = {
+      ...config,
+      settings: {
+        ...(config.settings || {}),
+        ...(offcanvasContainer && { contentLocation: offcanvasContainer }),
+      },
+    };
+
+    const instance = new ActualSlimSelect(enhancedConfig);
+
+    instance.render.main.main.classList.add('ss-2');
+    instance.render.content.main.classList.add('ss-content-2');
+
+    return instance;
+  }
+
+  window.SlimSelect = SlimSelectWrapper;
+  return SlimSelectWrapper;
+}
+
+let SlimSelectWrapper = null;
+
+if (window.SlimSelect) {
+  SlimSelectWrapper = wrapSlimSelect();
+} else {
+  // Fallback if SlimSelect isn't loaded yet
+  document.addEventListener('DOMContentLoaded', () => {
+    if (window.SlimSelect) {
+      SlimSelectWrapper = wrapSlimSelect();
+    } else {
+      console.warn('SlimSelect is still not available.');
+    }
+  });
+}
+
+export default SlimSelectWrapper;

src/themes/joinup/src/js/index.esm.js

@@ -21,6 +21,7 @@ import ScrollSpy from "@openeuropa/bcl-bootstrap/js/src/scrollspy-legacy";
 import Tab from "@openeuropa/bcl-bootstrap/js/src/tab";
 import Toast from "@openeuropa/bcl-bootstrap/js/src/toast";
 import Tooltip from "@openeuropa/bcl-bootstrap/js/src/tooltip";
+import SlimSelectWrapper from "@openeuropa/bcl-theme-default/src/js/slim-select-wrapper/slim-select-wrapper";
 
 export {
   Alert,
@@ -39,4 +40,5 @@ export {
   Tab,
   Toast,
   Tooltip,
+  SlimSelectWrapper,
 };

src/themes/joinup/src/js/index.umd.js

@@ -21,6 +21,7 @@ import ScrollSpy from "@openeuropa/bcl-bootstrap/js/src/scrollspy-legacy";
 import Tab from "@openeuropa/bcl-bootstrap/js/src/tab";
 import Toast from "@openeuropa/bcl-bootstrap/js/src/toast";
 import Tooltip from "@openeuropa/bcl-bootstrap/js/src/tooltip";
+import SlimSelectWrapper from "@openeuropa/bcl-theme-default/src/js/slim-select-wrapper/slim-select-wrapper";
 
 export default {
   Alert,
@@ -39,4 +40,5 @@ export default {
   Tab,
   Toast,
   Tooltip,
+  SlimSelectWrapper,
 };

tools/story-utils/index.js

@@ -363,14 +363,13 @@ export const initMultiselects = (story) => {
   const demo = story();
   return `
     <script>
-      var multiselects = document.querySelectorAll(".multi-select");
+      var multiselects = document.querySelectorAll(".multiselect");
       if (multiselects) {
         multiselects.forEach((element) => {
           new SlimSelect({
             select: element,
             settings: {
-              placeholderText: 'Please select a value',
-              contentLocation: document.querySelectorAll(".offcanvas-body")[0]
+              placeholderText: 'Please select a value'
             }
           })
         });

yarn.lock

@@ -3892,6 +3892,7 @@ __metadata:
     glob: "npm:11.0.1"
     npm-run-all: "npm:4.1.5"
     slim-select: "npm:1.27.1"
+    slim-select-2: "brianvoe/slim-select#e6239514875df954edd772fd146aed5657f0a498"
   languageName: unknown
   linkType: soft
 
@@ -15254,7 +15255,7 @@ __metadata:
     rimraf: "npm:6.0.1"
     size-limit: "npm:11.2.0"
     slim-select: "npm:1.27.1"
-    slim-select-2: "npm:slim-select@2.10.0"
+    slim-select-2: "brianvoe/slim-select#e6239514875df954edd772fd146aed5657f0a498"
     storybook: "npm:^8.6.4"
     stylelint: "npm:^16.15.0"
     stylelint-config-prettier: "npm:9.0.5"
@@ -18119,10 +18120,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"slim-select-2@npm:slim-select@2.10.0":
-  version: 2.10.0
-  resolution: "slim-select@npm:2.10.0"
-  checksum: 10c0/0c9dd0f45d7241a79560fbae1672cf556d96e9eb47207420ef23941f87d1043bd985b947a032de2c88fdc6d6c5543eea57f5957f385a861df661f2f8272ca739
+"slim-select-2@brianvoe/slim-select#e6239514875df954edd772fd146aed5657f0a498":
+  version: 2.11.0
+  resolution: "slim-select-2@https://github.com/brianvoe/slim-select.git#commit=e6239514875df954edd772fd146aed5657f0a498"
+  checksum: 10c0/6e28c9a8b23d9455e7f05fb1dd86a2da644efc409e26ceecb6908e774abea3b80605a539bf6e1bb0e3eec2906b73472578c03ae89611e24440e9241d01c92860
   languageName: node
   linkType: hard