q2-tecton-elements 1.18.0 → 1.19.0

package/dist/esm/q2-carousel.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-6d5ed7cc.js';
-import { c as createGuid, l as loc, h as handleAriaLabel, i as isEventFromElement, o as overrideFocus } from './index-eac6b89e.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-bb1c8c7f.js';
+import { c as createGuid, l as loc, h as handleAriaLabel, i as isEventFromElement, o as overrideFocus } from './index-9c591682.js';
 
 /**
  * SSR Window 4.0.2
@@ -988,11 +988,7 @@ function deleteProps(obj) {
   });
 }
 
-function nextTick(callback, delay) {
-  if (delay === void 0) {
-    delay = 0;
-  }
-
+function nextTick(callback, delay = 0) {
   return setTimeout(callback, delay);
 }
 
@@ -1019,11 +1015,7 @@ function getComputedStyle$1(el) {
   return style;
 }
 
-function getTranslate(el, axis) {
-  if (axis === void 0) {
-    axis = 'x';
-  }
-
+function getTranslate(el, axis = 'x') {
   const window = getWindow();
   let matrix;
   let curTransform;
@@ -1075,12 +1067,12 @@ function isNode(node) {
   return node && (node.nodeType === 1 || node.nodeType === 11);
 }
 
-function extend() {
-  const to = Object(arguments.length <= 0 ? undefined : arguments[0]);
+function extend(...args) {
+  const to = Object(args[0]);
   const noExtend = ['__proto__', 'constructor', 'prototype'];
 
-  for (let i = 1; i < arguments.length; i += 1) {
-    const nextSource = i < 0 || arguments.length <= i ? undefined : arguments[i];
+  for (let i = 1; i < args.length; i += 1) {
+    const nextSource = args[i];
 
     if (nextSource !== undefined && nextSource !== null && !isNode(nextSource)) {
       const keysArray = Object.keys(Object(nextSource)).filter(key => noExtend.indexOf(key) < 0);
@@ -1119,12 +1111,11 @@ function setCSSProperty(el, varName, varValue) {
   el.style.setProperty(varName, varValue);
 }
 
-function animateCSSModeScroll(_ref) {
-  let {
-    swiper,
-    targetPosition,
-    side
-  } = _ref;
+function animateCSSModeScroll({
+  swiper,
+  targetPosition,
+  side
+}) {
   const window = getWindow();
   const startPosition = -swiper.translate;
   let startTime = null;
@@ -1217,10 +1208,9 @@ function getSupport() {
 
 let deviceCached;
 
-function calcDevice(_temp) {
-  let {
-    userAgent
-  } = _temp === void 0 ? {} : _temp;
+function calcDevice({
+  userAgent
+} = {}) {
   const support = getSupport();
   const window = getWindow();
   const platform = window.navigator.platform;
@@ -1262,11 +1252,7 @@ function calcDevice(_temp) {
   return device;
 }
 
-function getDevice(overrides) {
-  if (overrides === void 0) {
-    overrides = {};
-  }
-
+function getDevice(overrides = {}) {
   if (!deviceCached) {
     deviceCached = calcDevice(overrides);
   }
@@ -1298,12 +1284,11 @@ function getBrowser() {
   return browser;
 }
 
-function Resize(_ref) {
-  let {
-    swiper,
-    on,
-    emit
-  } = _ref;
+function Resize({
+  swiper,
+  on,
+  emit
+}) {
   const window = getWindow();
   let observer = null;
   let animationFrame = null;
@@ -1324,12 +1309,11 @@ function Resize(_ref) {
         } = swiper;
         let newWidth = width;
         let newHeight = height;
-        entries.forEach(_ref2 => {
-          let {
-            contentBoxSize,
-            contentRect,
-            target
-          } = _ref2;
+        entries.forEach(({
+          contentBoxSize,
+          contentRect,
+          target
+        }) => {
           if (target && target !== swiper.el) return;
           newWidth = contentRect ? contentRect.width : (contentBoxSize[0] || contentBoxSize).inlineSize;
           newHeight = contentRect ? contentRect.height : (contentBoxSize[0] || contentBoxSize).blockSize;
@@ -1375,21 +1359,16 @@ function Resize(_ref) {
   });
 }
 
-function Observer(_ref) {
-  let {
-    swiper,
-    extendParams,
-    on,
-    emit
-  } = _ref;
+function Observer({
+  swiper,
+  extendParams,
+  on,
+  emit
+}) {
   const observers = [];
   const window = getWindow();
 
-  const attach = function (target, options) {
-    if (options === void 0) {
-      options = {};
-    }
-
+  const attach = (target, options = {}) => {
     const ObserverFunc = window.MutationObserver || window.WebkitMutationObserver;
     const observer = new ObserverFunc(mutations => {
       // The observerUpdate event should only be triggered
@@ -1474,17 +1453,13 @@ const eventsEmitter = {
     if (!self.eventsListeners || self.destroyed) return self;
     if (typeof handler !== 'function') return self;
 
-    function onceHandler() {
+    function onceHandler(...args) {
       self.off(events, onceHandler);
 
       if (onceHandler.__emitterProxy) {
         delete onceHandler.__emitterProxy;
       }
 
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
       handler.apply(self, args);
     }
 
@@ -1536,7 +1511,7 @@ const eventsEmitter = {
     return self;
   },
 
-  emit() {
+  emit(...args) {
     const self = this;
     if (!self.eventsListeners || self.destroyed) return self;
     if (!self.eventsListeners) return self;
@@ -1544,10 +1519,6 @@ const eventsEmitter = {
     let data;
     let context;
 
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-
     if (typeof args[0] === 'string' || Array.isArray(args[0])) {
       events = args[0];
       data = args.slice(1, args.length);
@@ -1956,7 +1927,7 @@ function updateAutoHeight(speed) {
 
   if (swiper.params.slidesPerView !== 'auto' && swiper.params.slidesPerView > 1) {
     if (swiper.params.centeredSlides) {
-      swiper.visibleSlides.each(slide => {
+      (swiper.visibleSlides || $([])).each(slide => {
         activeSlides.push(slide);
       });
     } else {
@@ -1991,11 +1962,7 @@ function updateSlidesOffset() {
   }
 }
 
-function updateSlidesProgress(translate) {
-  if (translate === void 0) {
-    translate = this && this.translate || 0;
-  }
-
+function updateSlidesProgress(translate = this && this.translate || 0) {
   const swiper = this;
   const params = swiper.params;
   const {
@@ -2274,11 +2241,7 @@ const update = {
   updateClickedSlide
 };
 
-function getSwiperTranslate(axis) {
-  if (axis === void 0) {
-    axis = this.isHorizontal() ? 'x' : 'y';
-  }
-
+function getSwiperTranslate(axis = this.isHorizontal() ? 'x' : 'y') {
   const swiper = this;
   const {
     params,
@@ -2357,23 +2320,7 @@ function maxTranslate() {
   return -this.snapGrid[this.snapGrid.length - 1];
 }
 
-function translateTo(translate, speed, runCallbacks, translateBounds, internal) {
-  if (translate === void 0) {
-    translate = 0;
-  }
-
-  if (speed === void 0) {
-    speed = this.params.speed;
-  }
-
-  if (runCallbacks === void 0) {
-    runCallbacks = true;
-  }
-
-  if (translateBounds === void 0) {
-    translateBounds = true;
-  }
-
+function translateTo(translate = 0, speed = this.params.speed, runCallbacks = true, translateBounds = true, internal) {
   const swiper = this;
   const {
     params,
@@ -2476,13 +2423,12 @@ function setTransition(duration, byController) {
   swiper.emit('setTransition', duration, byController);
 }
 
-function transitionEmit(_ref) {
-  let {
-    swiper,
-    runCallbacks,
-    direction,
-    step
-  } = _ref;
+function transitionEmit({
+  swiper,
+  runCallbacks,
+  direction,
+  step
+}) {
   const {
     activeIndex,
     previousIndex
@@ -2511,11 +2457,7 @@ function transitionEmit(_ref) {
   }
 }
 
-function transitionStart(runCallbacks, direction) {
-  if (runCallbacks === void 0) {
-    runCallbacks = true;
-  }
-
+function transitionStart(runCallbacks = true, direction) {
   const swiper = this;
   const {
     params
@@ -2534,11 +2476,7 @@ function transitionStart(runCallbacks, direction) {
   });
 }
 
-function transitionEnd(runCallbacks, direction) {
-  if (runCallbacks === void 0) {
-    runCallbacks = true;
-  }
-
+function transitionEnd(runCallbacks = true, direction) {
   const swiper = this;
   const {
     params
@@ -2560,19 +2498,7 @@ const transition = {
   transitionEnd
 };
 
-function slideTo(index, speed, runCallbacks, internal, initial) {
-  if (index === void 0) {
-    index = 0;
-  }
-
-  if (speed === void 0) {
-    speed = this.params.speed;
-  }
-
-  if (runCallbacks === void 0) {
-    runCallbacks = true;
-  }
-
+function slideTo(index = 0, speed = this.params.speed, runCallbacks = true, internal, initial) {
   if (typeof index !== 'number' && typeof index !== 'string') {
     throw new Error(`The 'index' argument cannot have type other than 'number' or 'string'. [${typeof index}] given.`);
   }
@@ -2621,14 +2547,7 @@ function slideTo(index, speed, runCallbacks, internal, initial) {
   const skip = Math.min(swiper.params.slidesPerGroupSkip, slideIndex);
   let snapIndex = skip + Math.floor((slideIndex - skip) / swiper.params.slidesPerGroup);
   if (snapIndex >= snapGrid.length) snapIndex = snapGrid.length - 1;
-
-  if ((activeIndex || params.initialSlide || 0) === (previousIndex || 0) && runCallbacks) {
-    swiper.emit('beforeSlideChangeStart');
-  }
-
-  const translate = -snapGrid[snapIndex]; // Update progress
-
-  swiper.updateProgress(translate); // Normalize slideIndex
+  const translate = -snapGrid[snapIndex]; // Normalize slideIndex
 
   if (params.normalizeSlideIndex) {
     for (let i = 0; i < slidesGrid.length; i += 1) {
@@ -2659,6 +2578,12 @@ function slideTo(index, speed, runCallbacks, internal, initial) {
     }
   }
 
+  if (slideIndex !== (previousIndex || 0) && runCallbacks) {
+    swiper.emit('beforeSlideChangeStart');
+  } // Update progress
+
+
+  swiper.updateProgress(translate);
   let direction;
   if (slideIndex > activeIndex) direction = 'next';else if (slideIndex < activeIndex) direction = 'prev';else direction = 'reset'; // Update Index
 
@@ -2753,17 +2678,28 @@ function slideTo(index, speed, runCallbacks, internal, initial) {
   return true;
 }
 
-function slideToLoop(index, speed, runCallbacks, internal) {
-  if (index === void 0) {
-    index = 0;
-  }
+function slideToLoop(index = 0, speed = this.params.speed, runCallbacks = true, internal) {
+  if (typeof index === 'string') {
+    /**
+     * The `index` argument converted from `string` to `number`.
+     * @type {number}
+     */
+    const indexAsNumber = parseInt(index, 10);
+    /**
+     * Determines whether the `index` argument is a valid `number`
+     * after being converted from the `string` type.
+     * @type {boolean}
+     */
 
-  if (speed === void 0) {
-    speed = this.params.speed;
-  }
+    const isValidNumber = isFinite(indexAsNumber);
+
+    if (!isValidNumber) {
+      throw new Error(`The passed-in 'index' (string) couldn't be converted to 'number'. [${index}] given.`);
+    } // Knowing that the converted `index` is a valid number,
+    // we can update the original argument's value.
 
-  if (runCallbacks === void 0) {
-    runCallbacks = true;
+
+    index = indexAsNumber;
   }
 
   const swiper = this;
@@ -2777,15 +2713,7 @@ function slideToLoop(index, speed, runCallbacks, internal) {
 }
 
 /* eslint no-unused-vars: "off" */
-function slideNext(speed, runCallbacks, internal) {
-  if (speed === void 0) {
-    speed = this.params.speed;
-  }
-
-  if (runCallbacks === void 0) {
-    runCallbacks = true;
-  }
-
+function slideNext(speed = this.params.speed, runCallbacks = true, internal) {
   const swiper = this;
   const {
     animating,
@@ -2816,15 +2744,7 @@ function slideNext(speed, runCallbacks, internal) {
 }
 
 /* eslint no-unused-vars: "off" */
-function slidePrev(speed, runCallbacks, internal) {
-  if (speed === void 0) {
-    speed = this.params.speed;
-  }
-
-  if (runCallbacks === void 0) {
-    runCallbacks = true;
-  }
-
+function slidePrev(speed = this.params.speed, runCallbacks = true, internal) {
   const swiper = this;
   const {
     params,
@@ -2889,33 +2809,13 @@ function slidePrev(speed, runCallbacks, internal) {
 }
 
 /* eslint no-unused-vars: "off" */
-function slideReset(speed, runCallbacks, internal) {
-  if (speed === void 0) {
-    speed = this.params.speed;
-  }
-
-  if (runCallbacks === void 0) {
-    runCallbacks = true;
-  }
-
+function slideReset(speed = this.params.speed, runCallbacks = true, internal) {
   const swiper = this;
   return swiper.slideTo(swiper.activeIndex, speed, runCallbacks, internal);
 }
 
 /* eslint no-unused-vars: "off" */
-function slideToClosest(speed, runCallbacks, internal, threshold) {
-  if (speed === void 0) {
-    speed = this.params.speed;
-  }
-
-  if (runCallbacks === void 0) {
-    runCallbacks = true;
-  }
-
-  if (threshold === void 0) {
-    threshold = 0.5;
-  }
-
+function slideToClosest(speed = this.params.speed, runCallbacks = true, internal, threshold = 0.5) {
   const swiper = this;
   let index = swiper.activeIndex;
   const skip = Math.min(swiper.params.slidesPerGroupSkip, index);
@@ -3024,7 +2924,7 @@ function loopCreate() {
   swiper.loopedSlides = Math.ceil(parseFloat(params.loopedSlides || params.slidesPerView, 10));
   swiper.loopedSlides += params.loopAdditionalSlides;
 
-  if (swiper.loopedSlides > slides.length) {
+  if (swiper.loopedSlides > slides.length && swiper.params.loopedSlidesLimit) {
     swiper.loopedSlides = slides.length;
   }
 
@@ -3032,18 +2932,15 @@ function loopCreate() {
   const appendSlides = [];
   slides.each((el, index) => {
     const slide = $(el);
-
-    if (index < swiper.loopedSlides) {
-      appendSlides.push(el);
-    }
-
-    if (index < slides.length && index >= slides.length - swiper.loopedSlides) {
-      prependSlides.push(el);
-    }
-
     slide.attr('data-swiper-slide-index', index);
   });
 
+  for (let i = 0; i < swiper.loopedSlides; i += 1) {
+    const index = i - Math.floor(i / slides.length) * slides.length;
+    appendSlides.push(slides.eq(index)[0]);
+    prependSlides.unshift(slides.eq(slides.length - index - 1)[0]);
+  }
+
   for (let i = 0; i < appendSlides.length; i += 1) {
     $selector.append($(appendSlides[i].cloneNode(true)).addClass(params.slideDuplicateClass));
   }
@@ -3135,15 +3032,16 @@ const grabCursor = {
   unsetGrabCursor
 };
 
-function closestElement(selector, base) {
-  if (base === void 0) {
-    base = this;
-  }
-
+function closestElement(selector, base = this) {
   function __closestFrom(el) {
     if (!el || el === getDocument() || el === getWindow()) return null;
     if (el.assignedSlot) el = el.assignedSlot;
     const found = el.closest(selector);
+
+    if (!found && !el.getRootNode) {
+      return null;
+    }
+
     return found || __closestFrom(el.getRootNode().host);
   }
 
@@ -3183,16 +3081,18 @@ function onTouchStart(event) {
   if (!data.isTouchEvent && 'button' in e && e.button > 0) return;
   if (data.isTouched && data.isMoved) return; // change target el for shadow root component
 
-  const swipingClassHasValue = !!params.noSwipingClass && params.noSwipingClass !== '';
+  const swipingClassHasValue = !!params.noSwipingClass && params.noSwipingClass !== ''; // eslint-disable-next-line
 
-  if (swipingClassHasValue && e.target && e.target.shadowRoot && event.path && event.path[0]) {
-    $targetEl = $(event.path[0]);
+  const eventPath = event.composedPath ? event.composedPath() : event.path;
+
+  if (swipingClassHasValue && e.target && e.target.shadowRoot && eventPath) {
+    $targetEl = $(eventPath[0]);
   }
 
   const noSwipingSelector = params.noSwipingSelector ? params.noSwipingSelector : `.${params.noSwipingClass}`;
   const isTargetShadow = !!(e.target && e.target.shadowRoot); // use closestElement for shadow root element to get the actual closest for nested shadow root element
 
-  if (params.noSwiping && (isTargetShadow ? closestElement(noSwipingSelector, e.target) : $targetEl.closest(noSwipingSelector)[0])) {
+  if (params.noSwiping && (isTargetShadow ? closestElement(noSwipingSelector, $targetEl[0]) : $targetEl.closest(noSwipingSelector)[0])) {
     swiper.allowClick = true;
     return;
   }
@@ -3863,8 +3763,21 @@ function setBreakpoint() {
     }
 
     swiper.emitContainerClasses();
-  }
+  } // Toggle navigation, pagination, scrollbar
+
+
+  ['navigation', 'pagination', 'scrollbar'].forEach(prop => {
+    const wasModuleEnabled = params[prop] && params[prop].enabled;
+    const isModuleEnabled = breakpointParams[prop] && breakpointParams[prop].enabled;
+
+    if (wasModuleEnabled && !isModuleEnabled) {
+      swiper[prop].disable();
+    }
 
+    if (!wasModuleEnabled && isModuleEnabled) {
+      swiper[prop].enable();
+    }
+  });
   const directionChanged = breakpointParams.direction && breakpointParams.direction !== params.direction;
   const needsReLoop = params.loop && (breakpointParams.slidesPerView !== params.slidesPerView || directionChanged);
 
@@ -3899,11 +3812,7 @@ function setBreakpoint() {
   swiper.emit('breakpoint', breakpointParams);
 }
 
-function getBreakpoint(breakpoints, base, containerEl) {
-  if (base === void 0) {
-    base = 'window';
-  }
-
+function getBreakpoint(breakpoints, base = 'window', containerEl) {
   if (!breakpoints || base === 'container' && !containerEl) return undefined;
   let breakpoint = false;
   const window = getWindow();
@@ -4207,6 +4116,7 @@ const defaults = {
   loop: false,
   loopAdditionalSlides: 0,
   loopedSlides: null,
+  loopedSlidesLimit: true,
   loopFillGroupWithBlank: false,
   loopPreventsSlide: true,
   // rewind
@@ -4243,11 +4153,7 @@ const defaults = {
 };
 
 function moduleExtendParams(params, allModulesParams) {
-  return function extendParams(obj) {
-    if (obj === void 0) {
-      obj = {};
-    }
-
+  return function extendParams(obj = {}) {
     const moduleParamName = Object.keys(obj)[0];
     const moduleParams = obj[moduleParamName];
 
@@ -4302,14 +4208,10 @@ const prototypes = {
 const extendedDefaults = {};
 
 class Swiper {
-  constructor() {
+  constructor(...args) {
     let el;
     let params;
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
     if (args.length === 1 && args[0].constructor && Object.prototype.toString.call(args[0]).slice(8, -1) === 'Object') {
       params = args[0];
     } else {
@@ -4327,7 +4229,8 @@ class Swiper {
           el: containerEl
         });
         swipers.push(new Swiper(newParams));
-      });
+      }); // eslint-disable-next-line no-constructor-return
+
       return swipers;
     } // Swiper Instance
 
@@ -4470,6 +4373,7 @@ class Swiper {
     if (swiper.params.init) {
       swiper.init();
     } // Return app instance
+    // eslint-disable-next-line no-constructor-return
 
 
     return swiper;
@@ -4542,15 +4446,7 @@ class Swiper {
     swiper.emit('_slideClasses', updates);
   }
 
-  slidesPerViewDynamic(view, exact) {
-    if (view === void 0) {
-      view = 'current';
-    }
-
-    if (exact === void 0) {
-      exact = false;
-    }
-
+  slidesPerViewDynamic(view = 'current', exact = false) {
     const swiper = this;
     const {
       params,
@@ -4658,11 +4554,7 @@ class Swiper {
     swiper.emit('update');
   }
 
-  changeDirection(newDirection, needUpdate) {
-    if (needUpdate === void 0) {
-      needUpdate = true;
-    }
-
+  changeDirection(newDirection, needUpdate = true) {
     const swiper = this;
     const currentDirection = swiper.params.direction;
 
@@ -4690,6 +4582,23 @@ class Swiper {
     return swiper;
   }
 
+  changeLanguageDirection(direction) {
+    const swiper = this;
+    if (swiper.rtl && direction === 'rtl' || !swiper.rtl && direction === 'ltr') return;
+    swiper.rtl = direction === 'rtl';
+    swiper.rtlTranslate = swiper.params.direction === 'horizontal' && swiper.rtl;
+
+    if (swiper.rtl) {
+      swiper.$el.addClass(`${swiper.params.containerModifierClass}rtl`);
+      swiper.el.dir = 'rtl';
+    } else {
+      swiper.$el.removeClass(`${swiper.params.containerModifierClass}rtl`);
+      swiper.el.dir = 'ltr';
+    }
+
+    swiper.update();
+  }
+
   mount(el) {
     const swiper = this;
     if (swiper.mounted) return true; // Find el
@@ -4716,6 +4625,10 @@ class Swiper {
         return res;
       }
 
+      if (!$el.children) {
+        return $($el).children(getWrapperSelector());
+      }
+
       return $el.children(getWrapperSelector());
     }; // Find Wrapper
 
@@ -4800,15 +4713,7 @@ class Swiper {
     return swiper;
   }
 
-  destroy(deleteInstance, cleanStyles) {
-    if (deleteInstance === void 0) {
-      deleteInstance = true;
-    }
-
-    if (cleanStyles === void 0) {
-      cleanStyles = true;
-    }
-
+  destroy(deleteInstance = true, cleanStyles = true) {
     const swiper = this;
     const {
       params,
@@ -4898,13 +4803,12 @@ Object.keys(prototypes).forEach(prototypeGroup => {
 Swiper.use([Resize, Observer]);
 
 /* eslint no-underscore-dangle: "off" */
-function Autoplay(_ref) {
-  let {
-    swiper,
-    extendParams,
-    on,
-    emit
-  } = _ref;
+function Autoplay({
+  swiper,
+  extendParams,
+  on,
+  emit
+}) {
   let timeout;
   swiper.autoplay = {
     running: false,
@@ -4923,6 +4827,12 @@ function Autoplay(_ref) {
   });
 
   function run() {
+    if (!swiper.size) {
+      swiper.autoplay.running = false;
+      swiper.autoplay.paused = false;
+      return;
+    }
+
     const $activeSlideEl = swiper.slides.eq(swiper.activeIndex);
     let delay = swiper.params.autoplay.delay;
 
@@ -5119,7 +5029,7 @@ function Autoplay(_ref) {
   });
 }
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus, 0 0 0 2px #33b4ff)}: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}button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}button:hover{opacity:0.7}q2-carousel{display:flex;flex-direction:column-reverse}.swiper-container{--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 2px 8px 0px rgba(0, 0, 0, 0.25));background-color: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, 0.5rem 0.5rem 0.5rem 0.5rem))}.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{display:flex;justify-content:center;align-items:center;margin-top:var(--app-scale-2x, 10px);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(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));padding:0;border:0;transition:all 0.5s;opacity:0.7}.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))));opacity:1}.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-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{}.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.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)))}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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}button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}button:hover{opacity:0.7}q2-carousel{display:flex;flex-direction:column-reverse}.swiper-container{--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 2px 8px 0px rgba(0, 0, 0, 0.25));background-color: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, 0.5rem 0.5rem 0.5rem 0.5rem))}.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{display:flex;justify-content:center;align-items:center;margin-top:var(--app-scale-2x, 10px);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(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));padding:0;border:0;transition:all 0.5s;opacity:0.7}.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))));opacity:1}.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-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{}.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.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)))}";
 
 const carouselBreakpoint = 500; /* width in px of this host element where the layout starts to get unruly */
 const Q2Carousel = class {
@@ -5127,44 +5037,6 @@ const Q2Carousel = class {
     registerInstance(this, hostRef);
     this.change = createEvent(this, "change", 7);
     this.swiper = null;
-    this.autoPlay = false;
-    this.fullWidthPanes = false;
-    this.hidePagination = false;
-    this.showNavigationArrows = false;
-    this.label = 'tecton.element.carousel.ariaLabel';
-    this.index = 1;
-    this.universalCarouselOptions = {
-      centeredSlides: true,
-      focusableElements: 'q2-btn, a, input, select, textarea, button, video, label, option',
-      autoplay: this.autoPlay,
-      modules: [Autoplay],
-      on: {
-        slideChange: () => {
-          var _a, _b;
-          this.handleSlideChange((_b = (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.activeIndex) !== null && _b !== void 0 ? _b : 0); // lazy-load causing this.swiper is null only on ios safari
-        },
-        activeIndexChange: swiper => {
-          this.activePaneIndex = swiper.activeIndex;
-          this.organizePanes();
-          const isPaginationFocused = document.activeElement.closest(`#q2-carousel-${this.guid} .q2-carousel-page-indicator`);
-          const isCarouselFocused = document.activeElement.closest(`#q2-carousel-${this.guid} q2-carousel-pane`);
-          if (isPaginationFocused) {
-            this.paginationBtns[swiper.activeIndex].focus({ preventScroll: true });
-          }
-          else if (isCarouselFocused)
-            swiper.slides[swiper.activeIndex].focus({
-              preventScroll: true,
-            });
-        },
-      },
-    };
-    this.fullWidthDisplayOptions = Object.assign({ slidesPerView: 1, spaceBetween: 100 }, this.universalCarouselOptions);
-    this.activePaneIndex = this.realIndex;
-    this.applyFocus = false;
-    this.applyPaginationFocus = false;
-    this.autoPlayInProgress = false;
-    this.compactMode = false;
-    this.carouselWrapperWidth = 0;
     // COMPUTED //
     this.guid = createGuid();
     // METHODS //
@@ -5310,6 +5182,45 @@ const Q2Carousel = class {
         insufficientPanesContainerClasses = [...insufficientPanesContainerClasses, 'compact'];
       return (h("div", { class: insufficientPanesContainerClasses.join(' ') }, h("div", { class: "insufficient-panes-icon-wrapper" }, h("q2-icon", { type: "warning" })), h("p", { class: "insufficient-panes-header" }, h("strong", null, loc('tecton.element.carousel.insufficientPanesMessageHeader'))), h("p", { class: "insufficient-panes-body" }, loc('tecton.element.carousel.insufficientPanesMessageBody'))));
     };
+    this.autoPlay = false;
+    this.fullWidthPanes = false;
+    this.hidePagination = false;
+    this.showNavigationArrows = false;
+    this.ariaLabel = undefined;
+    this.label = 'tecton.element.carousel.ariaLabel';
+    this.index = 1;
+    this.universalCarouselOptions = {
+      centeredSlides: true,
+      focusableElements: 'q2-btn, a, input, select, textarea, button, video, label, option',
+      autoplay: this.autoPlay,
+      modules: [Autoplay],
+      on: {
+        slideChange: () => {
+          var _a, _b;
+          this.handleSlideChange((_b = (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.activeIndex) !== null && _b !== void 0 ? _b : 0); // lazy-load causing this.swiper is null only on ios safari
+        },
+        activeIndexChange: swiper => {
+          this.activePaneIndex = swiper.activeIndex;
+          this.organizePanes();
+          const isPaginationFocused = document.activeElement.closest(`#q2-carousel-${this.guid} .q2-carousel-page-indicator`);
+          const isCarouselFocused = document.activeElement.closest(`#q2-carousel-${this.guid} q2-carousel-pane`);
+          if (isPaginationFocused) {
+            this.paginationBtns[swiper.activeIndex].focus({ preventScroll: true });
+          }
+          else if (isCarouselFocused)
+            swiper.slides[swiper.activeIndex].focus({
+              preventScroll: true,
+            });
+        },
+      },
+    };
+    this.fullWidthDisplayOptions = Object.assign({ slidesPerView: 1, spaceBetween: 100 }, this.universalCarouselOptions);
+    this.activePaneIndex = this.realIndex;
+    this.applyFocus = false;
+    this.applyPaginationFocus = false;
+    this.autoPlayInProgress = false;
+    this.compactMode = false;
+    this.carouselWrapperWidth = 0;
   }
   ariaLabelObserver() {
     handleAriaLabel(this);