q2-tecton-elements 1.18.0 → 1.19.0

package/dist/collection/components/q2-carousel/index.js

@@ -1,48 +1,10 @@
-import { Component, Prop, Watch, State, Fragment, Element, Host, h, Event, Listen, } from '@stencil/core';
+import { Fragment, Host, h, } from '@stencil/core';
 import Swiper, { Autoplay } from 'swiper';
 import { createGuid, loc, handleAriaLabel, overrideFocus, isEventFromElement } from 'src/utils';
 const carouselBreakpoint = 500; /* width in px of this host element where the layout starts to get unruly */
 export class Q2Carousel {
   constructor() {
     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 //
@@ -169,20 +131,15 @@ export class Q2Carousel {
     this.autoPlayBtn = () => {
       return (h("q2-btn", { type: "button", "hide-label": true, label: loc(this.autoPlayInProgress
           ? 'tecton.element.carousel.pausePlayLabel'
-          : 'tecton.element.carousel.resumePlayLabel'), class: "q2-carousel-autoplay-control", onClick: this.handleAutoPlayPause },
-        h("q2-icon", { type: this.autoPlayInProgress ? 'pause' : 'play' })));
+          : 'tecton.element.carousel.resumePlayLabel'), class: "q2-carousel-autoplay-control", onClick: this.handleAutoPlayPause }, h("q2-icon", { type: this.autoPlayInProgress ? 'pause' : 'play' })));
     };
     this.prevNavBtn = () => {
       const prevPaneAvailable = this.activePaneIndex > 0;
-      return (h("div", null,
-        h("q2-btn", { type: "button", disabled: prevPaneAvailable ? undefined : true, class: "q2-carousel-navigation-button q2-carousel-navigation-button-prev", "hide-label": true, label: loc('tecton.element.carousel.previousItemLabel'), onClick: () => this.handleCarouselNavigationSelection(this.activePaneIndex - 1, true) },
-          h("q2-icon", { type: "chevron-left" }))));
+      return (h("div", null, h("q2-btn", { type: "button", disabled: prevPaneAvailable ? undefined : true, class: "q2-carousel-navigation-button q2-carousel-navigation-button-prev", "hide-label": true, label: loc('tecton.element.carousel.previousItemLabel'), onClick: () => this.handleCarouselNavigationSelection(this.activePaneIndex - 1, true) }, h("q2-icon", { type: "chevron-left" }))));
     };
     this.nextNavBtn = () => {
       const nextPaneAvailable = this.activePaneIndex < this.paneCount - 1;
-      return (h("div", null,
-        h("q2-btn", { type: "button", disabled: nextPaneAvailable ? undefined : true, class: "q2-carousel-navigation-button q2-carousel-navigation-button-next", "hide-label": true, label: loc('tecton.element.carousel.nextItemLabel'), onClick: () => this.handleCarouselNavigationSelection(this.activePaneIndex + 1, true) },
-          h("q2-icon", { type: "chevron-right" }))));
+      return (h("div", null, h("q2-btn", { type: "button", disabled: nextPaneAvailable ? undefined : true, class: "q2-carousel-navigation-button q2-carousel-navigation-button-next", "hide-label": true, label: loc('tecton.element.carousel.nextItemLabel'), onClick: () => this.handleCarouselNavigationSelection(this.activePaneIndex + 1, true) }, h("q2-icon", { type: "chevron-right" }))));
     };
     this.insufficientPanesDisplay = () => {
       let insufficientPanesContainerClasses = [
@@ -191,13 +148,47 @@ export class Q2Carousel {
       ];
       if (this.compactMode)
         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'))));
+      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);
@@ -287,214 +278,219 @@ export class Q2Carousel {
     let paginationWrapperClasses = ['q2-carousel-pagination-navigation-wrapper'];
     if (this.showNavigationArrows)
       paginationWrapperClasses = [...paginationWrapperClasses, 'evenly-space'];
-    return (h(Host, { id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, this.insufficientPanes ? (this.insufficientPanesDisplay()) : (h(Fragment, null,
-      this.paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') },
-        this.showNavigationArrows && this.prevNavBtn(),
-        h("div", { class: "q2-carousel-control-center-tray" },
-          !this.hidePagination && this.paginationArea(),
-          this.autoPlay && this.autoPlayBtn()),
-        this.showNavigationArrows && this.nextNavBtn())),
-      h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": loc(this.label) },
-        h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": this.autoPlayInProgress ? 'off' : 'polite', onKeyDown: this.onWrapperKeyDown },
-          h("slot", null)))))));
+    return (h(Host, { id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, this.insufficientPanes ? (this.insufficientPanesDisplay()) : (h(Fragment, null, this.paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, this.showNavigationArrows && this.prevNavBtn(), h("div", { class: "q2-carousel-control-center-tray" }, !this.hidePagination && this.paginationArea(), this.autoPlay && this.autoPlayBtn()), this.showNavigationArrows && this.nextNavBtn())), h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": loc(this.label) }, h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": this.autoPlayInProgress ? 'off' : 'polite', onKeyDown: this.onWrapperKeyDown }, h("slot", null)))))));
   }
   static get is() { return "q2-carousel"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "autoPlay": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "auto-play",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "fullWidthPanes": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "full-width-panes",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "hidePagination": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "hide-pagination",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "showNavigationArrows": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "show-navigation-arrows",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "ariaLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "autoPlay": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auto-play",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "aria-label",
-      "reflect": true
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "fullWidthPanes": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "full-width-panes",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "hidePagination": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-pagination",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "label",
-      "reflect": true,
-      "defaultValue": "'tecton.element.carousel.ariaLabel'"
-    },
-    "index": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "showNavigationArrows": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-navigation-arrows",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "ariaLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "aria-label",
+        "reflect": true
       },
-      "attribute": "index",
-      "reflect": true,
-      "defaultValue": "1"
-    }
-  }; }
-  static get states() { return {
-    "universalCarouselOptions": {},
-    "fullWidthDisplayOptions": {},
-    "activePaneIndex": {},
-    "applyFocus": {},
-    "applyPaginationFocus": {},
-    "autoPlayInProgress": {},
-    "compactMode": {},
-    "carouselWrapperWidth": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": true,
+        "defaultValue": "'tecton.element.carousel.ariaLabel'"
       },
-      "complexType": {
-        "original": "{ index: number }",
-        "resolved": "{ index: number; }",
-        "references": {}
+      "index": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "index",
+        "reflect": true,
+        "defaultValue": "1"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "universalCarouselOptions": {},
+      "fullWidthDisplayOptions": {},
+      "activePaneIndex": {},
+      "applyFocus": {},
+      "applyPaginationFocus": {},
+      "autoPlayInProgress": {},
+      "compactMode": {},
+      "carouselWrapperWidth": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ index: number }",
+          "resolved": "{ index: number; }",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "hostElement"; }
-  static get watchers() { return [{
-      "propName": "ariaLabel",
-      "methodName": "ariaLabelObserver"
-    }, {
-      "propName": "carouselWrapperWidth",
-      "methodName": "carouselWrapperWidthChanged"
-    }, {
-      "propName": "index",
-      "methodName": "indexChanged"
-    }, {
-      "propName": "fullWidthPanes",
-      "methodName": "revampCarousel"
-    }, {
-      "propName": "compactMode",
-      "methodName": "revampCarousel"
-    }, {
-      "propName": "autoPlay",
-      "methodName": "revampCarousel"
-    }]; }
-  static get listeners() { return [{
-      "name": "change",
-      "method": "onHostElementChange",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "clickCarouselPane",
-      "method": "carouselPaneClicked",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "focus",
-      "method": "delegateFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "ariaLabel",
+        "methodName": "ariaLabelObserver"
+      }, {
+        "propName": "carouselWrapperWidth",
+        "methodName": "carouselWrapperWidthChanged"
+      }, {
+        "propName": "index",
+        "methodName": "indexChanged"
+      }, {
+        "propName": "fullWidthPanes",
+        "methodName": "revampCarousel"
+      }, {
+        "propName": "compactMode",
+        "methodName": "revampCarousel"
+      }, {
+        "propName": "autoPlay",
+        "methodName": "revampCarousel"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "change",
+        "method": "onHostElementChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "clickCarouselPane",
+        "method": "carouselPaneClicked",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "focus",
+        "method": "delegateFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/q2-carousel/styles.css

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
 }
 
 :host {