#4852 Update outdated JS packages: flatpickr, flickity

package-lock.json

@@ -17,7 +17,9 @@
         "filepond-plugin-image-preview": "^4.6.12",
         "filepond-plugin-image-resize": "^2.0.10",
         "filepond-plugin-image-transform": "^3.8.7",
-        "flag-icons": "^7.2.3"
+        "flag-icons": "^7.2.3",
+        "flatpickr": "^4.6.13",
+        "flickity": "^3.0.0"
       },
       "devDependencies": {
         "bower": "^1.8.14",
@@ -484,6 +486,12 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/ev-emitter": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-2.1.2.tgz",
+      "integrity": "sha512-jQ5Ql18hdCQ4qS+RCrbLfz1n+Pags27q5TwMKvZyhp5hh2UULUYZUy1keqj6k6SYsdqIYjnmz7xyyEY0V67B8Q==",
+      "license": "MIT"
+    },
     "node_modules/fancybox": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/fancybox/-/fancybox-3.0.1.tgz",
@@ -550,12 +558,37 @@
         "filepond": ">=3.6.0 <5.x"
       }
     },
+    "node_modules/fizzy-ui-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/fizzy-ui-utils/-/fizzy-ui-utils-3.0.0.tgz",
+      "integrity": "sha512-uJj38QFQiJ/KCio5tiZhwAjIbTXSIgzBCKdKVbaYfLS053F6z23Nb0o1ZoO9gnxOQWN7BCc35jsvrCtAq3gY9g==",
+      "license": "MIT"
+    },
     "node_modules/flag-icons": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/flag-icons/-/flag-icons-7.2.3.tgz",
       "integrity": "sha512-X2gUdteNuqdNqob2KKTJTS+ZCvyWeLCtDz9Ty8uJP17Y4o82Y+U/Vd4JNrdwTAjagYsRznOn9DZ+E/Q52qbmqg==",
       "license": "MIT"
     },
+    "node_modules/flatpickr": {
+      "version": "4.6.13",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz",
+      "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==",
+      "license": "MIT"
+    },
+    "node_modules/flickity": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/flickity/-/flickity-3.0.0.tgz",
+      "integrity": "sha512-Xw4znhglA2LVSmka0yKmzb4+fLwXm13TuKmdG1HbUoZZL95J1ZMr4hAA3w69s+Z6q/c6CyBDM25JVwMqgF3rOg==",
+      "license": "GPL-3.0",
+      "dependencies": {
+        "ev-emitter": "^2.1.2",
+        "fizzy-ui-utils": "^3.0.0",
+        "get-size": "^3.0.0",
+        "imagesloaded": "^5.0.0",
+        "unidragger": "^3.0.0"
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -646,6 +679,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/get-size": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/get-size/-/get-size-3.0.0.tgz",
+      "integrity": "sha512-Y8aiXLq4leR7807UY0yuKEwif5s3kbVp1nTv+i4jBeoUzByTLKkLWu/HorS6/pB+7gsB0o7OTogC8AoOOeT0Hw==",
+      "license": "MIT"
+    },
     "node_modules/get-symbol-description": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
@@ -795,6 +834,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/imagesloaded": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/imagesloaded/-/imagesloaded-5.0.0.tgz",
+      "integrity": "sha512-/0JGSubc1MTCoDKVmonLHgbifBWHdyLkun+R/151E1c5n79hiSxcd7cB7mPXFgojYu8xnRZv7GYxzKoxW8BetQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ev-emitter": "^2.1.2"
+      }
+    },
     "node_modules/internal-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -2083,6 +2131,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/unidragger": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/unidragger/-/unidragger-3.0.1.tgz",
+      "integrity": "sha512-RngbGSwBFmqGBWjkaH+yB677uzR95blSQyxq6hYbrQCejH3Mx1nm8DVOuh3M9k2fQyTstWUG5qlgCnNqV/9jVw==",
+      "license": "MIT",
+      "dependencies": {
+        "ev-emitter": "^2.0.0"
+      }
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",

package.json

@@ -13,7 +13,9 @@
     "filepond-plugin-image-preview": "^4.6.12",
     "filepond-plugin-image-resize": "^2.0.10",
     "filepond-plugin-image-transform": "^3.8.7",
-    "flag-icons": "^7.2.3"
+    "flag-icons": "^7.2.3",
+    "flatpickr": "^4.6.13",
+    "flickity": "^3.0.0"
   },
   "scripts": {
     "install-bower-components": "bower install",
@@ -24,6 +26,8 @@
     "build:fancybox": "mkdir -p plugins_public/fancybox; cd node_modules/fancybox/dist; cp -r css/* ../../../plugins_public/fancybox; cp -r helpers ../../../plugins_public/fancybox; cp -r img/* ../../../plugins_public/fancybox; cp -r js/* ../../../plugins_public/fancybox",
     "build:filepond": "mkdir -p plugins_public/filepond; cd node_modules/filepond; cp -r dist/filepond.min.* ../../plugins_public/filepond; cp -r locale ../../plugins_public/filepond; cd ../../plugins_public/filepond; cp ../../node_modules/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.min.js .; cp ../../node_modules/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.min.js .; cp ../../node_modules/filepond-plugin-image-crop/dist/filepond-plugin-image-crop.min.js .; cp ../../node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.* .; cp ../../node_modules/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.min.js .; cp ../../node_modules/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.min.js .",
     "build:flag-icons": "mkdir -p plugins_public/flag-icons; cd node_modules/flag-icons; cp -r css ../../plugins_public/flag-icons; cp -r flags ../../plugins_public/flag-icons",
+    "build:flatpickr": "mkdir -p plugins_public/flatpickr; cd node_modules/flatpickr; cp -r dist ../../plugins_public/flatpickr",
+    "build:flickity": "mkdir -p plugins_public/flickity; cd node_modules/flickity; cp -r dist/flickity.css ../../plugins_public/flickity; cp -r dist/flickity.pkgd.min.js ../../plugins_public/flickity",
     "build": "npm run install-bower-components; npm-run-all --parallel build:*"
   },
   "devDependencies": {

plugins_public/flickity/flickity.css

@@ -1,4 +1,4 @@
-/*! Flickity v2.2.1
+/*! Flickity v3.0.0
 https://flickity.metafizzy.co
 ---------------------------------------------- */
 
@@ -12,40 +12,54 @@ https://flickity.metafizzy.co
   overflow: hidden;
   position: relative;
   height: 100%;
+  touch-action: pan-y;
 }
 
 .flickity-slider {
   position: absolute;
   width: 100%;
   height: 100%;
+  left: 0;
+}
+
+.flickity-rtl .flickity-slider {
+  left: unset;
+  right: 0;
 }
 
 /* draggable */
 
 .flickity-enabled.is-draggable {
   -webkit-tap-highlight-color: transparent;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
+  user-select: none;
 }
 
 .flickity-enabled.is-draggable .flickity-viewport {
   cursor: move;
-  cursor: -webkit-grab;
   cursor: grab;
 }
 
 .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
-  cursor: -webkit-grabbing;
   cursor: grabbing;
 }
 
+/* ---- flickity-cell ---- */
+
+.flickity-cell {
+  position: absolute;
+  left: 0;
+}
+
+.flickity-rtl .flickity-cell {
+  left: unset;
+  right: 0;
+}
+
 /* ---- flickity-button ---- */
 
 .flickity-button {
   position: absolute;
-  background: hsla(0, 0%, 100%, 0.75);
+  background: hsl(0 0% 100% / 75%);
   border: none;
   color: #333;
 }
@@ -93,6 +107,7 @@ https://flickity.metafizzy.co
   left: auto;
   right: 10px;
 }
+
 .flickity-rtl .flickity-prev-next-button.next {
   right: auto;
   left: 10px;
@@ -112,26 +127,38 @@ https://flickity.metafizzy.co
   position: absolute;
   width: 100%;
   bottom: -25px;
-  padding: 0;
-  margin: 0;
-  list-style: none;
   text-align: center;
-  line-height: 1;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
 }
 
 .flickity-rtl .flickity-page-dots { direction: rtl; }
 
-.flickity-page-dots .dot {
-  display: inline-block;
+.flickity-page-dot {
+  display: block;
   width: 10px;
   height: 10px;
+  padding: 0;
   margin: 0 8px;
-  background: #333;
+  background: hsl(0 0% 20% / 25%);
   border-radius: 50%;
-  opacity: 0.25;
   cursor: pointer;
+  appearance: none;
+  border: none;
+  text-indent: -9999px;
+  overflow: hidden;
+}
+
+.flickity-rtl .flickity-page-dot {
+  text-indent: 9999px;
+}
+
+.flickity-page-dot:focus {
+  outline: none;
+  box-shadow: 0 0 0 5px #19F;
 }
 
-.flickity-page-dots .dot.is-selected {
-  opacity: 1;
+.flickity-page-dot.is-selected {
+  background: hsl(0 0% 20% / 100%);
 }