q2-tecton-elements 1.65.0 → 1.66.0

package/dist/q2-tecton-elements/q2-carousel.entry.js

@@ -4,6 +4,8 @@ import { c as o, l as a, d as l, o as c, i as f } from "./index-B4WYBDS9.js";
 
 import { m as u } from "./mirror-emit-DUjY_ucm.js";
 
+import { h as d, f as p } from "./component-DVxzK3WH.js";
+
 /**
  * SSR Window 5.0.1
  * Better handling for window object in SSR environment
@@ -28,7 +30,7 @@ function extend$1(e = {}, t = {}) {
   }));
 }
 
-const d = {
+const h = {
   body: {},
   addEventListener() {},
   removeEventListener() {},
@@ -81,12 +83,12 @@ const d = {
 
 function getDocument() {
   const e = typeof document !== "undefined" ? document : {};
-  extend$1(e, d);
+  extend$1(e, h);
   return e;
 }
 
-const p = {
-  document: d,
+const m = {
+  document: h,
   navigator: {
     userAgent: ""
   },
@@ -143,7 +145,7 @@ const p = {
 
 function getWindow() {
   const e = typeof window !== "undefined" ? window : {};
-  extend$1(e, p);
+  extend$1(e, m);
   return e;
 }
 
@@ -435,7 +437,7 @@ function elementOuterSize(e, t, i) {
   }
 }
 
-let h;
+let g;
 
 function calcSupport() {
   const e = getWindow();
@@ -447,13 +449,13 @@ function calcSupport() {
 }
 
 function getSupport() {
-  if (!h) {
-    h = calcSupport();
+  if (!g) {
+    g = calcSupport();
   }
-  return h;
+  return g;
 }
 
-let m;
+let v;
 
 function calcDevice({userAgent: e} = {}) {
   const t = getSupport();
@@ -494,13 +496,13 @@ function calcDevice({userAgent: e} = {}) {
 }
 
 function getDevice(e = {}) {
-  if (!m) {
-    m = calcDevice(e);
+  if (!v) {
+    v = calcDevice(e);
   }
-  return m;
+  return v;
 }
 
-let g;
+let w;
 
 function calcBrowser() {
   const e = getWindow();
@@ -529,10 +531,10 @@ function calcBrowser() {
 }
 
 function getBrowser() {
-  if (!g) {
-    g = calcBrowser();
+  if (!w) {
+    w = calcBrowser();
   }
-  return g;
+  return w;
 }
 
 function Resize({swiper: e, on: t, emit: i}) {
@@ -653,7 +655,7 @@ function Observer({swiper: e, extendParams: t, on: i, emit: n}) {
   i("destroy", destroy);
 }
 
-/* eslint-disable no-underscore-dangle */ var v = {
+/* eslint-disable no-underscore-dangle */ var b = {
   on(e, t, i) {
     const n = this;
     if (!n.eventsListeners || n.destroyed) return n;
@@ -1513,7 +1515,7 @@ function updateClickedSlide(e, t) {
   }
 }
 
-var w = {
+var y = {
   updateSize,
   updateSlides,
   updateAutoHeight,
@@ -1656,7 +1658,7 @@ function translateTo(e = 0, t = this.params.speed, i = true, n = true, s) {
   return true;
 }
 
-var b = {
+var x = {
   getTranslate: getSwiperTranslate,
   setTranslate,
   minTranslate,
@@ -1721,7 +1723,7 @@ function transitionEnd(e = true, t) {
   });
 }
 
-var y = {
+var S = {
   setTransition,
   transitionStart,
   transitionEnd
@@ -2094,7 +2096,7 @@ function slideToClickedSlide() {
   }
 }
 
-var x = {
+var C = {
   slideTo,
   slideToLoop,
   slideNext,
@@ -2389,7 +2391,7 @@ function loopDestroy() {
   e.slideTo(e.realIndex, 0);
 }
 
-var S = {
+var T = {
   loopCreate,
   loopFix,
   loopDestroy
@@ -2427,7 +2429,7 @@ function unsetGrabCursor() {
   }
 }
 
-var C = {
+var M = {
   setGrabCursor,
   unsetGrabCursor
 };
@@ -3146,7 +3148,7 @@ function detachEvents() {
   events(e, "off");
 }
 
-var T = {
+var k = {
   attachEvents,
   detachEvents
 };
@@ -3267,7 +3269,7 @@ function getBreakpoint(e, t = "window", i) {
   return n || "max";
 }
 
-var M = {
+var P = {
   setBreakpoint,
   getBreakpoint
 };
@@ -3326,7 +3328,7 @@ function removeClasses() {
   e.emitContainerClasses();
 }
 
-var k = {
+var E = {
   addClasses,
   removeClasses
 };
@@ -3356,11 +3358,11 @@ function checkOverflow() {
   }
 }
 
-var P = {
+var O = {
   checkOverflow
 };
 
-var E = {
+var I = {
   init: true,
   direction: "horizontal",
   oneWayMovement: false,
@@ -3515,23 +3517,23 @@ function moduleExtendParams(e, t) {
   };
 }
 
-/* eslint no-param-reassign: "off" */ const O = {
-  eventsEmitter: v,
-  update: w,
-  translate: b,
-  transition: y,
-  slide: x,
-  loop: S,
-  grabCursor: C,
-  events: T,
-  breakpoints: M,
-  checkOverflow: P,
-  classes: k
+/* eslint no-param-reassign: "off" */ const q = {
+  eventsEmitter: b,
+  update: y,
+  translate: x,
+  transition: S,
+  slide: C,
+  loop: T,
+  grabCursor: M,
+  events: k,
+  breakpoints: P,
+  checkOverflow: O,
+  classes: E
 };
 
-const I = {};
+const $ = {};
 
-class q {
+class A {
   constructor(...e) {
     let t;
     let i;
@@ -3550,7 +3552,7 @@ class q {
         const n = extend({}, i, {
           el: t
         });
-        e.push(new q(n));
+        e.push(new A(n));
       }));
       // eslint-disable-next-line no-constructor-return
             return e;
@@ -3586,9 +3588,9 @@ class q {
       });
     }));
     // Extend defaults with modules params
-        const o = extend({}, E, r);
+        const o = extend({}, I, r);
     // Extend defaults with passed params
-        s.params = extend({}, o, I, i);
+        s.params = extend({}, o, $, i);
     s.originalParams = extend({}, s.params);
     s.passedParams = extend({}, i);
     // add event listeners
@@ -4054,38 +4056,38 @@ class q {
     return null;
   }
   static extendDefaults(e) {
-    extend(I, e);
+    extend($, e);
   }
   static get extendedDefaults() {
-    return I;
+    return $;
   }
   static get defaults() {
-    return E;
+    return I;
   }
   static installModule(e) {
-    if (!q.prototype.__modules__) q.prototype.__modules__ = [];
-    const t = q.prototype.__modules__;
+    if (!A.prototype.__modules__) A.prototype.__modules__ = [];
+    const t = A.prototype.__modules__;
     if (typeof e === "function" && t.indexOf(e) < 0) {
       t.push(e);
     }
   }
   static use(e) {
     if (Array.isArray(e)) {
-      e.forEach((e => q.installModule(e)));
-      return q;
+      e.forEach((e => A.installModule(e)));
+      return A;
     }
-    q.installModule(e);
-    return q;
+    A.installModule(e);
+    return A;
   }
 }
 
-Object.keys(O).forEach((e => {
-  Object.keys(O[e]).forEach((t => {
-    q.prototype[t] = O[e][t];
+Object.keys(q).forEach((e => {
+  Object.keys(q[e]).forEach((t => {
+    A.prototype[t] = q[e][t];
   }));
 }));
 
-q.use([ Resize, Observer ]);
+A.use([ Resize, Observer ]);
 
 /* eslint no-underscore-dangle: "off" */
 /* eslint no-use-before-define: "off" */ function Autoplay({swiper: e, extendParams: t, on: i, emit: n, params: s}) {
@@ -4382,11 +4384,13 @@ q.use([ Resize, Observer ]);
   });
 }
 
-const $ = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}q2-carousel{display:grid;grid-template-rows:repeat(2, auto);gap:var(--app-scale-2x, 10px)}.swiper{--comp-container-padding:var(--app-scale-1x, 5px) 0 var(--app-scale-2x, 10px);display:block;width:100%;margin-left:auto;margin-right:auto;position:relative;overflow:hidden;padding:var(--tct-carousel-container-padding, var(--t-carousel-container-padding, var(--comp-container-padding, 5px 0 10px)))}.insufficient-pane-feedback{text-align:center;box-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));background:var(--tct-carousel-background, var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 1px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 7px))}.insufficient-pane-feedback.content-peek-display{max-width:395px;margin:0 auto}.insufficient-pane-feedback .insufficient-panes-header,.insufficient-pane-feedback .insufficient-panes-body{text-align:center}.insufficient-pane-feedback .insufficient-panes-header strong{font-weight:600}.insufficient-pane-feedback .insufficient-panes-body{margin:0 auto 2rem auto;max-width:75%}.insufficient-pane-feedback .insufficient-panes-icon-wrapper{display:flex;justify-content:center;margin:1rem 0 2rem 0}.insufficient-pane-feedback .insufficient-panes-icon-wrapper q2-icon{width:38px}.q2-carousel-pagination-navigation-wrapper{grid-row:2;display:flex;justify-content:center;align-items:center;min-height:44px}.q2-carousel-pagination-navigation-wrapper.evenly-space{justify-content:space-between}.q2-carousel-control-center-tray{display:flex;align-items:center}.q2-carousel-swiper-wrapper.compact{overflow:visible}.q2-carousel-swiper-wrapper.compact q2-btn{margin-top:4px}.q2-carousel-pagination{height:12px;display:flex;align-content:center;justify-content:center;gap:0.5rem}.q2-carousel-pagination .q2-carousel-page-indicator{display:inline-block;height:12px;width:12px;border-radius:50%;background-color:var(--tct-carousel-pagination-inactive-color, var(--t-carousel-pagination-inactive-color, var(--t-a11y--gray-color-AA, #949494)));padding:0;border:0;transition:all 0.5s}.q2-carousel-pagination .q2-carousel-page-indicator:hover{background-color:var(--tct-carousel-pagination-active-color, var(--t-carousel-pagination-active-color, var(--tct-primary, var(--t-primary, #006eb2))))}.q2-carousel-pagination .q2-carousel-page-indicator.active-page{display:inline-block;background-color:var(--tct-carousel-pagination-active-color, var(--t-carousel-pagination-active-color, var(--tct-primary, var(--t-primary, #006eb2))))}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator{display:none}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-page,.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-adjacent{display:inline-block;height:10px;width:10px}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-adjacent-adjacent{display:inline-block;height:8px;width:8px}.q2-carousel-swiper-container{grid-row:1;}.q2-carousel-swiper-container .swiper-wrapper{position:relative;width:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.q2-carousel-swiper-container.content-peek-display .q2-carousel-pane:not(.swiper-slide-active){transform:scale(0.9)}.q2-carousel-swiper-container.frameless-display{padding:var(--tct-carousel-frameless-container-padding, var(--t-carousel-frameless-container-padding, 0))}.q2-carousel-swiper-container.full-width-display{--comp-container-padding:var(--app-scale-1x, 5px) var(--app-scale-2x, 10px) var(--app-scale-2x, 10px);padding:var(--tct-carousel-full-width-container-padding, var(--t-carousel-full-width-container-padding, var(--comp-container-padding, 5px 10px 10px)))}.q2-carousel-navigation-button{--tct-btn-icon-hover-background:var(--tct-carousel-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-icon-stroke-primary:var(--tct-carousel-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-icon-stroke-secondary:var(--tct-carousel-btn-icon-stroke-secondary, var(--app-gray, #747474))}";
+const D = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}q2-carousel{display:grid;grid-template-rows:repeat(2, auto);gap:var(--tct-carousel-gap, var(--app-scale-2x, 10px))}.swiper{--comp-container-padding:var(--app-scale-1x, 5px) 0 var(--app-scale-2x, 10px);display:block;width:100%;margin-left:auto;margin-right:auto;position:relative;overflow:hidden;padding:var(--tct-carousel-container-padding, var(--t-carousel-container-padding, var(--comp-container-padding, 5px 0 10px)))}.insufficient-pane-feedback{text-align:center;box-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));background:var(--tct-carousel-background, var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 1px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 7px))}.insufficient-pane-feedback.content-peek-display{max-width:395px;margin:0 auto}.insufficient-pane-feedback .insufficient-panes-header,.insufficient-pane-feedback .insufficient-panes-body{text-align:center}.insufficient-pane-feedback .insufficient-panes-header strong{font-weight:600}.insufficient-pane-feedback .insufficient-panes-body{margin:0 auto 2rem auto;max-width:75%}.insufficient-pane-feedback .insufficient-panes-icon-wrapper{display:flex;justify-content:center;margin:1rem 0 2rem 0}.insufficient-pane-feedback .insufficient-panes-icon-wrapper q2-icon{width:38px}.q2-carousel-pagination-navigation-wrapper{grid-row:2;display:flex;justify-content:center;align-items:center;min-height:44px}.q2-carousel-pagination-navigation-wrapper.evenly-space{justify-content:space-between}.q2-carousel-control-center-tray{display:flex;align-items:center}.q2-carousel-swiper-wrapper.compact{overflow:visible}.q2-carousel-swiper-wrapper.compact q2-btn{margin-top:4px}.q2-carousel-pagination{height:12px;display:flex;align-content:center;justify-content:center;gap:0.5rem}.q2-carousel-pagination .q2-carousel-page-indicator{display:inline-block;height:12px;width:12px;border-radius:50%;background-color:var(--tct-carousel-pagination-inactive-color, var(--t-carousel-pagination-inactive-color, var(--t-a11y--gray-color-AA, #949494)));padding:0;border:0;transition:all 0.5s}.q2-carousel-pagination .q2-carousel-page-indicator:hover{background-color:var(--tct-carousel-pagination-active-color, var(--t-carousel-pagination-active-color, var(--tct-primary, var(--t-primary, #006eb2))))}.q2-carousel-pagination .q2-carousel-page-indicator.active-page{display:inline-block;background-color:var(--tct-carousel-pagination-active-color, var(--t-carousel-pagination-active-color, var(--tct-primary, var(--t-primary, #006eb2))))}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator{display:none}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-page,.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-adjacent{display:inline-block;height:10px;width:10px}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-adjacent-adjacent{display:inline-block;height:8px;width:8px}.q2-carousel-swiper-container{grid-row:1;}.q2-carousel-swiper-container .swiper-wrapper{position:relative;width:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.q2-carousel-swiper-container.content-peek-display .q2-carousel-pane:not(.swiper-slide-active){transform:scale(0.9)}.q2-carousel-swiper-container.frameless-display{padding:var(--tct-carousel-frameless-container-padding, var(--t-carousel-frameless-container-padding, 0))}.q2-carousel-swiper-container.full-width-display{--comp-container-padding:var(--app-scale-1x, 5px) var(--app-scale-2x, 10px) var(--app-scale-2x, 10px);padding:var(--tct-carousel-full-width-container-padding, var(--t-carousel-full-width-container-padding, var(--comp-container-padding, 5px 10px 10px)))}.q2-carousel-navigation-button{--tct-btn-icon-hover-background:var(--tct-carousel-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-icon-stroke-primary:var(--tct-carousel-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-icon-stroke-secondary:var(--tct-carousel-btn-icon-stroke-secondary, var(--app-gray, #747474))}";
+
+const j = 500;
 
-const A = 500;
+ /* width in px of this host element where the layout starts to get unruly */ const z = 1024;
 
- /* width in px of this host element where the layout starts to get unruly */ const D = class {
+ /* viewport width where we show 3 full panes */ const L = class {
   constructor(n) {
     e(this, n);
     this.change = t(this, "change", 7);
@@ -4416,7 +4420,7 @@ const A = 500;
         this.tearDownCarousel();
       }
       this.autoPlayInProgress = this.autoPlay;
-      new q(e, t);
+      new A(e, t);
       (i = this.swiper) === null || i === void 0 ? void 0 : i.slideTo(this.realIndex);
       if (this.autoPlayInProgress) (n = this.swiper) === null || n === void 0 ? void 0 : n.autoplay.start();
     };
@@ -4603,6 +4607,9 @@ const A = 500;
     l(this);
     this.updateCarouselPaneProps();
     window.addEventListener("resize", this.setCarouselWrapperWidth);
+    if (!d(this.hostElement, "q2-carousel-pane")) {
+      p(this.hostElement, "q2-carousel-pane");
+    }
     this.universalCarouselOptions = {
       centeredSlides: true,
       focusableElements: "q2-btn, q2-dropdown, q2-item, q2-list, a, input, select, textarea, button, video, label, option",
@@ -4712,7 +4719,7 @@ const A = 500;
     l(this);
   }
   carouselWrapperWidthChanged() {
-    this.compactMode = this.carouselWrapperWidth < A;
+    this.compactMode = this.carouselWrapperWidth < j;
   }
   framelessPanesChanged() {
     this.updateCarouselPaneProps();
@@ -4755,6 +4762,11 @@ const A = 500;
       slidesPerView: 2,
       spaceBetween: this.compactMode ? 0 : -10,
       centerInsufficientSlides: false,
+      breakpoints: {
+        [z]: {
+          slidesPerView: 3
+        }
+      },
       ...this.universalCarouselOptions
     };
   }
@@ -4782,7 +4794,7 @@ const A = 500;
     let m = [ "q2-carousel-pagination-navigation-wrapper" ];
     if (l) m = [ ...m, "evenly-space" ];
     return i(s, {
-      key: "b5c43ad4379878be721bc9119753ef6fe75aa491",
+      key: "5f48c7aab4485b79ffc625f050e2ce386ccadbf4",
       id: `q2-carousel-${this.guid}`,
       class: "q2-carousel-instance"
     }, c ? this.renderInsufficientPanesDisplay() : i(n, null, e > 1 && i("div", {
@@ -4817,8 +4829,8 @@ const A = 500;
   }
 };
 
-D.style = $;
+L.style = D;
 
-export { D as q2_carousel };
+export { L as q2_carousel };
 //# sourceMappingURL=q2-carousel.entry.esm.js.map
 //# sourceMappingURL=q2-carousel.entry.js.map