npm - q2-tecton-elements - Versions diffs - 1.38.2 → 1.39.0 - Mend

q2-tecton-elements 1.38.2 → 1.39.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (399) hide show

package/dist/collection/components/q2-card/styles.css CHANGED Viewed

@@ -177,6 +177,63 @@ p {
   background: var(--comp-bar-color);
   height: 100%;
 }
+.bar.color-primary {
+  --comp-bar-color: var(--tct-card-bar-color-primary, var(--t-primary, #5446a4));
+}
+.bar.color-secondary {
+  --comp-bar-color: var(--tct-card-bar-color-secondary, var(--t-secondary, #b6b3cc));
+}
+.bar.color-tertiary {
+  --comp-bar-color: var(--tct-card-bar-color-tertiary, var(--t-tertiary, #ebe8fc));
+}
+.bar.color-info {
+  --comp-bar-color: var(--tct-card-bar-color-info, var(--const-stoplight-info, #0079c1));
+}
+.bar.color-success {
+  --comp-bar-color: var(--tct-card-bar-color-success, var(--const-stoplight-success, #0e8a00));
+}
+.bar.color-warning {
+  --comp-bar-color: var(--tct-card-bar-color-warning, var(--const-stoplight-warning, #c35500));
+}
+.bar.color-alert {
+  --comp-bar-color: var(--tct-card-bar-color-alert, var(--const-stoplight-alert, #c35500));
+}
+.bar.color-accent-1 {
+  --comp-bar-color: var(--tct-card-bar-color-accent-1, var(--t-accent-1, #e05252));
+}
+.bar.color-accent-2 {
+  --comp-bar-color: var(--tct-card-bar-color-accent-2, var(--t-accent-2, #e09952));
+}
+.bar.color-accent-3 {
+  --comp-bar-color: var(--tct-card-bar-color-accent-3, var(--t-accent-3, #e0e052));
+}
+.bar.color-accent-4 {
+  --comp-bar-color: var(--tct-card-bar-color-accent-4, var(--t-accent-4, #99e052));
+}
+.bar.color-accent-5 {
+  --comp-bar-color: var(--tct-card-bar-color-accent-5, var(--t-accent-5, #52e052));
+}
+.bar.color-accent-6 {
+  --comp-bar-color: var(--tct-card-bar-color-accent-6, var(--t-accent-6, #52e099));
+}
+.bar.color-accent-7 {
+  --comp-bar-color: var(--tct-card-bar-color-accent-7, var(--t-accent-7, #52e0e0));
+}
+.bar.color-accent-8 {
+  --comp-bar-color: var(--tct-card-bar-color-accent-8, var(--t-accent-8, #5299e0));
+}
+.bar.color-accent-9 {
+  --comp-bar-color: var(--tct-card-bar-color-accent-9, var(--t-accent-9, #5252e0));
+}
+.bar.color-accent-10 {
+  --comp-bar-color: var(--tct-card-bar-color-accent-10, var(--t-accent-10, #9952e0));
+}
+.bar.color-accent-11 {
+  --comp-bar-color: var(--tct-card-bar-color-accent-11, var(--t-accent-11, #e052e0));
+}
+.bar.color-accent-12 {
+  --comp-bar-color: var(--tct-card-bar-color-accent-12, var(--t-accent-12, #e05299));
+}
 .touch-indicator {
   align-self: center;

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

@@ -8,6 +8,9 @@ export class Q2Carousel {
     // COMPUTED //
     this.guid = createGuid();
     // METHODS //
+    this.onMutationObserved = () => {
+      this.organizePanes();
+    };
     this.setCarouselWrapperWidth = () => {
       if (this.insufficientPanes)
         return;
@@ -24,6 +27,8 @@ export class Q2Carousel {
       this.autoPlayInProgress = this.autoPlay;
       this.swiper = new Swiper(carouselWrapper, carouselOptions);
       (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.slideTo(this.realIndex);
+      if (this.autoPlayInProgress)
+        this.swiper.autoplay.start();
     };
     this.tearDownCarousel = () => {
       this.swiper.destroy();
@@ -35,6 +40,7 @@ export class Q2Carousel {
         pane.siblingCount = this.paneCollection.length;
         pane.isActivePane = index === this.activePaneIndex;
       });
+      this.currentPaneCount = this.paneCollection.length;
     };
     this.handleAutoPlayPause = () => {
       const { swiper: { autoplay }, } = this;
@@ -170,8 +176,10 @@ export class Q2Carousel {
         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`);
+          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`);
+          const isFocused = isPaginationFocused || isCarouselFocused;
+          this.handleAriaLive(isFocused);
           if (isPaginationFocused) {
             this.paginationBtns[swiper.activeIndex].focus({ preventScroll: true });
           }
@@ -189,6 +197,8 @@ export class Q2Carousel {
     this.autoPlayInProgress = false;
     this.compactMode = false;
     this.carouselWrapperWidth = 0;
+    this.ariaLiveValue = 'polite';
+    this.currentPaneCount = this.paneCount;
   }
   ariaLabelObserver() {
     handleAriaLabel(this);
@@ -248,6 +258,14 @@ export class Q2Carousel {
       return;
     activePane.focus({ preventScroll: true });
   }
+  handleAriaLive(activeAndFocused) {
+    if (this.autoPlayInProgress && !activeAndFocused) {
+      this.ariaLiveValue = 'off';
+    }
+    else {
+      this.ariaLiveValue = 'polite';
+    }
+  }
   // LIFECYCLES //
   componentWillLoad() {
     handleAriaLabel(this);
@@ -259,9 +277,17 @@ export class Q2Carousel {
     if (this.carouselWrapper && !!this.paneArray.length) {
       this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);
     }
+    const observer = new MutationObserver(this.onMutationObserved);
+    observer.observe(this.hostElement, { childList: true });
+    this.mutationObserver = observer;
+    this.onMutationObserved();
     overrideFocus(this.hostElement);
   }
   disconnectedCallback() {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = null;
+    }
     if (!!this.swiper) {
       this.tearDownCarousel();
     }
@@ -278,7 +304,7 @@ 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.ariaLiveValue, onKeyDown: this.onWrapperKeyDown }, h("slot", null)))))));
   }
   static get is() { return "q2-carousel"; }
   static get originalStyleUrls() {
@@ -432,7 +458,9 @@ export class Q2Carousel {
       "applyPaginationFocus": {},
       "autoPlayInProgress": {},
       "compactMode": {},
-      "carouselWrapperWidth": {}
+      "carouselWrapperWidth": {},
+      "ariaLiveValue": {},
+      "currentPaneCount": {}
     };
   }
   static get events() {
@@ -444,7 +472,7 @@ export class Q2Carousel {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted when the carousel pane changes."
         },
         "complexType": {
           "original": "{ index: number }",

package/dist/collection/components/q2-carousel/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-carousel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EAET,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,CAAC,EACD,KAAK,EAEL,MAAM,GACT,MAAM,eAAe,CAAC;AACvB,OAAO,MAAM,EAAE,EAAiB,QAAQ,EAAE,MAAM,QAAQ,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,eAAe,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAEhG,MAAM,kBAAkB,GAAG,GAAG,CAAC,CAAC,4EAA4E;AAO5G,MAAM,OAAO,UAAU;;IACX,WAAM,GAAY,IAAI,CAAC;IA6E/B,cAAc;IACd,SAAI,GAAG,UAAU,EAAE,CAAC;IAsEpB,aAAa;IACb,4BAAuB,GAAG,GAAG,EAAE;MAC3B,IAAI,IAAI,CAAC,iBAAiB;QAAE,OAAO;MACnC,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC;IACjE,CAAC,CAAC;IAEF,sBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;MACrC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF,sBAAiB,GAAG,CAAC,eAAe,EAAE,eAAe,EAAE,EAAE;;MACrD,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;OAC3B;MACD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,QAAQ,CAAC;MAExC,IAAI,CAAC,MAAM,GAAG,IAAI,MAAM,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;MAC3D,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,qBAAgB,GAAG,GAAG,EAAE;MACpB,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;MACtB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACvB,CAAC,CAAC;IAEF,kBAAa,GAAG,GAAG,EAAE;MACjB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QACxC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;QAC/C,IAAI,CAAC,YAAY,GAAG,KAAK,KAAK,IAAI,CAAC,eAAe,CAAC;MACvD,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,wBAAmB,GAAG,GAAG,EAAE;MACvB,MAAM,EACF,MAAM,EAAE,EAAE,QAAQ,EAAE,GACvB,GAAG,IAAI,CAAC;MACT,IAAI,CAAC,QAAQ;QAAE,OAAO;MAEtB,IAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO;QAAE,QAAQ,CAAC,IAAI,EAAE,CAAC;;QAClC,QAAQ,CAAC,KAAK,EAAE,CAAC;MACtB,IAAI,CAAC,kBAAkB,GAAG,QAAQ,CAAC,OAAO,CAAC;IAC/C,CAAC,CAAC;IAEF,sCAAiC,GAAG,CAAC,QAAgB,EAAE,UAAmB,EAAE,EAAE;MAC1E,IAAI,UAAU,EAAE;QACZ,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;OAC1B;MAED,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,wBAAmB,GAAG,CAAC,KAAoB,EAAE,EAAE;;MAC3C,QAAQ,KAAK,CAAC,GAAG,EAAE;QACf,KAAK,YAAY;UACb,KAAK,CAAC,cAAc,EAAE,CAAC;UACvB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;UACxB,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;UACjC,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;UACxB,MAAM;QAEV,KAAK,WAAW;UACZ,KAAK,CAAC,cAAc,EAAE,CAAC;UACvB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;UACxB,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;UACjC,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;UACxB,MAAM;QAEV,KAAK,MAAM;UACP,KAAK,CAAC,cAAc,EAAE,CAAC;UACvB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;UACxB,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;UACjC,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,CAAC,CAAC,CAAC,CAAC;UACxB,MAAM;QAEV,KAAK,KAAK;UACN,KAAK,CAAC,cAAc,EAAE,CAAC;UACvB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;UACxB,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;UACjC,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;UACpD,MAAM;OACb;IACL,CAAC,CAAC;IAEF,qBAAgB,GAAG,CAAC,KAAoB,EAAE,EAAE;;MACxC,QAAQ,KAAK,CAAC,GAAG,EAAE;QACf,KAAK,YAAY;UACb,KAAK,CAAC,cAAc,EAAE,CAAC;UACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;UACvB,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;UACxB,MAAM;QAEV,KAAK,WAAW;UACZ,KAAK,CAAC,cAAc,EAAE,CAAC;UACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;UACvB,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;UACxB,MAAM;QAEV,KAAK,MAAM;UACP,KAAK,CAAC,cAAc,EAAE,CAAC;UACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;UACvB,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,CAAC,CAAC,CAAC,CAAC;UACxB,MAAM;QAEV,KAAK,KAAK;UACN,KAAK,CAAC,cAAc,EAAE,CAAC;UACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;UACvB,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;UACpD,MAAM;OACb;IACL,CAAC,CAAC;IAiFF,mBAAc,GAAG,GAAG,EAAE;MAClB,IAAI,0BAA0B,GAAG,CAAC,wBAAwB,CAAC,CAAC;MAC5D,IAAI,IAAI,CAAC,qBAAqB;QAAE,0BAA0B,GAAG,CAAC,GAAG,0BAA0B,EAAE,SAAS,CAAC,CAAC;MAExG,OAAO,CACH,WACI,KAAK,EAAE,0BAA0B,CAAC,IAAI,CAAC,GAAG,CAAC,EAC3C,IAAI,EAAC,SAAS,gBACF,GAAG,CAAC,yCAAyC,CAAC,IAEzD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QACvB,IAAI,UAAU,GAAG,CAAC,4BAA4B,EAAE,8BAA8B,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QAC5F,IAAI,IAAI,CAAC,YAAY;UAAE,UAAU,GAAG,CAAC,GAAG,UAAU,EAAE,aAAa,CAAC,CAAC;QACnE,IAAI,IAAI,CAAC,qBAAqB;UAAE,UAAU,GAAG,CAAC,GAAG,UAAU,EAAE,SAAS,CAAC,CAAC;QAExE,MAAM,iBAAiB,GACnB,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC;QACvF,IAAI,iBAAiB;UAAE,UAAU,GAAG,CAAC,GAAG,UAAU,EAAE,iBAAiB,CAAC,CAAC;QAEvE,MAAM,iBAAiB,GACnB,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC;QACvF,IAAI,iBAAiB;UAAE,UAAU,GAAG,CAAC,GAAG,UAAU,EAAE,0BAA0B,CAAC,CAAC;QAEhF,OAAO,CACH,cACI,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,mBAC7B,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EACnD,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iCAAiC,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,EACvE,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,gBACvC,GAAG,CAAC,yCAAyC,EAAE;YACvD,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE;YAC3B,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE;WAC5B,CAAC,GACI,CACb,CAAC;MACN,CAAC,CAAC,CACA,CACT,CAAC;IACN,CAAC,CAAC;IAEF,gBAAW,GAAG,GAAG,EAAE;MACf,OAAO,CACH,cACI,IAAI,EAAC,QAAQ,sBAEb,KAAK,EAAE,GAAG,CACN,IAAI,CAAC,kBAAkB;UACnB,CAAC,CAAC,wCAAwC;UAC1C,CAAC,CAAC,yCAAyC,CAClD,EACD,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,IAAI,CAAC,mBAAmB;QAEjC,eAAS,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,GAAI,CACxD,CACZ,CAAC;IACN,CAAC,CAAC;IAEF,eAAU,GAAG,GAAG,EAAE;MACd,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC;MAEnD,OAAO,CACH;QACI,cACI,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC9C,KAAK,EAAC,kEAAkE,sBAExE,KAAK,EAAE,GAAG,CAAC,2CAA2C,CAAC,EACvD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iCAAiC,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,EAAE,IAAI,CAAC;UAErF,eAAS,IAAI,EAAC,cAAc,GAAG,CAC1B,CACP,CACT,CAAC;IACN,CAAC,CAAC;IAEF,eAAU,GAAG,GAAG,EAAE;MACd,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;MAEpE,OAAO,CACH;QACI,cACI,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC9C,KAAK,EAAC,kEAAkE,sBAExE,KAAK,EAAE,GAAG,CAAC,uCAAuC,CAAC,EACnD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iCAAiC,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,EAAE,IAAI,CAAC;UAErF,eAAS,IAAI,EAAC,eAAe,GAAG,CAC3B,CACP,CACT,CAAC;IACN,CAAC,CAAC;IAEF,6BAAwB,GAAG,GAAG,EAAE;MAC5B,IAAI,iCAAiC,GAAG;QACpC,4BAA4B;QAC5B,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB;OACtE,CAAC;MACF,IAAI,IAAI,CAAC,WAAW;QAAE,iCAAiC,GAAG,CAAC,GAAG,iCAAiC,EAAE,SAAS,CAAC,CAAC;MAE5G,OAAO,CACH,WAAK,KAAK,EAAE,iCAAiC,CAAC,IAAI,CAAC,GAAG,CAAC;QACnD,WAAK,KAAK,EAAC,iCAAiC;UACxC,eAAS,IAAI,EAAC,SAAS,GAAG,CACxB;QACN,SAAG,KAAK,EAAC,2BAA2B;UAChC,kBAAS,GAAG,CAAC,wDAAwD,CAAC,CAAU,CAChF;QACJ,SAAG,KAAK,EAAC,yBAAyB,IAAE,GAAG,CAAC,sDAAsD,CAAC,CAAK,CAClG,CACT,CAAC;IACN,CAAC,CAAC;oBAtc2C,KAAK;0BACC,KAAK;0BACL,KAAK;gCACC,KAAK;iBACrB,mCAAmC;iBACpB,CAAC;;oCAKN;MAC/C,cAAc,EAAE,IAAI;MACpB,iBAAiB,EAAE,kEAAkE;MACrF,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,OAAO,EAAE,CAAC,QAAQ,CAAC;MACnB,EAAE,EAAE;QACA,WAAW,EAAE,GAAG,EAAE;;UACd,IAAI,CAAC,iBAAiB,CAAC,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,WAAW,mCAAI,CAAC,CAAC,CAAC,CAAC,2DAA2D;QACtH,CAAC;QACD,iBAAiB,EAAE,MAAM,CAAC,EAAE;UACxB,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,WAAW,CAAC;UAC1C,IAAI,CAAC,aAAa,EAAE,CAAC;UACrB,MAAM,mBAAmB,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CACtD,gBAAgB,IAAI,CAAC,IAAI,8BAA8B,CAC1D,CAAC;UACF,MAAM,iBAAiB,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,gBAAgB,IAAI,CAAC,IAAI,mBAAmB,CAAC,CAAC;UAEvG,IAAI,mBAAmB,EAAE;YACrB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;WAC1E;eAAM,IAAI,iBAAiB;YACvB,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,WAAW,CAAiB,CAAC,KAAK,CAAC;cACrD,aAAa,EAAE,IAAI;aACtB,CAAC,CAAC;QACX,CAAC;OACJ;KACJ;mDAGG,aAAa,EAAE,CAAC,EAChB,YAAY,EAAE,GAAG,IACd,IAAI,CAAC,wBAAwB;2BAED,IAAI,CAAC,SAAS;sBAClB,KAAK;gCACK,KAAK;8BACP,KAAK;uBACZ,KAAK;gCACG,CAAC;;EAOzC,iBAAiB;IACb,eAAe,CAAC,IAAI,CAAC,CAAC;EAC1B,CAAC;EAGD,2BAA2B;IACvB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,oBAAoB,GAAG,kBAAkB,CAAC;EACtE,CAAC;EAGD,YAAY;;IACR,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;EACzC,CAAC;EAKD,cAAc;IACV,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;EAC7E,CAAC;EAKD,IAAI,yBAAyB;IACzB,uBACI,aAAa,EAAE,CAAC,EAChB,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EACxC,wBAAwB,EAAE,KAAK,IAC5B,IAAI,CAAC,wBAAwB,EAClC;EACN,CAAC;EAED,IAAI,SAAS;IACT,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,OAAO,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;EAC3C,CAAC;EAED,IAAI,cAAc;IACd,OAAO,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,6BAA6B,CAAC,CAAC;EAC5E,CAAC;EAED,IAAI,qBAAqB;IACrB,OAAO,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,IAAI,CAAC,yBAAyB,CAAC;EAC/F,CAAC;EAED,IAAI,qBAAqB;IACrB,OAAO,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;EAChD,CAAC;EAED,IAAI,cAAc;IACd,OAAO,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;EACjE,CAAC;EAED,IAAI,SAAS;IACT,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;EAC3C,CAAC;EAED,IAAI,SAAS;IACT,OAAO,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;EACnF,CAAC;EAED,IAAI,iBAAiB;IACjB,OAAO,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;EAC9B,CAAC;EAED,yBAAyB;EAGzB,mBAAmB,CAAC,KAAkB;IAClC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;MACjE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KACnC;EACL,CAAC;EAGD,mBAAmB,CAAC,KAAK;;IACrB,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAC7C,CAAC,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAiB,CAAA,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;EAChG,CAAC;EAGD,aAAa,CAAC,KAAiB;IAC3B,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAC/D,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU;MAAE,OAAO;IACvE,UAA0B,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;EAC/D,CAAC;EAsHD,gBAAgB;EAEhB,iBAAiB;IACb,eAAe,CAAC,IAAI,CAAC,CAAC;IACtB,IAAI,CAAC,aAAa,EAAE,CAAC;IACrB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;EACpE,CAAC;EAED,gBAAgB;IACZ,IAAI,CAAC,uBAAuB,EAAE,CAAC;IAC/B,IAAI,IAAI,CAAC,eAAe,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;MACjD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;KAC5E;IACD,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EACpC,CAAC;EAED,oBAAoB;IAChB,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE;MACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC3B;IAED,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;EACvE,CAAC;EAED,MAAM;IACF,IAAI,wBAAwB,GAAG;MAC3B,8BAA8B;MAC9B,kBAAkB;MAClB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB;KACtE,CAAC;IACF,IAAI,IAAI,CAAC,WAAW;MAAE,wBAAwB,GAAG,CAAC,GAAG,wBAAwB,EAAE,SAAS,CAAC,CAAC;IAE1F,IAAI,wBAAwB,GAAG,CAAC,2CAA2C,CAAC,CAAC;IAC7E,IAAI,IAAI,CAAC,oBAAoB;MAAE,wBAAwB,GAAG,CAAC,GAAG,wBAAwB,EAAE,cAAc,CAAC,CAAC;IAExG,OAAO,CACH,EAAC,IAAI,IACD,EAAE,EAAE,eAAe,IAAI,CAAC,IAAI,EAAE,EAC9B,KAAK,EAAC,sBAAsB,IAE3B,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CACtB,IAAI,CAAC,wBAAwB,EAAE,CAClC,CAAC,CAAC,CAAC,CACA,EAAC,QAAQ;MACJ,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CACnB,WAAK,KAAK,EAAE,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC;QACzC,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,UAAU,EAAE;QAE/C,WAAK,KAAK,EAAC,iCAAiC;UACvC,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,EAAE;UAE7C,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE,CAClC;QAEL,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,UAAU,EAAE,CAC7C,CACT;MAED,eACI,KAAK,EAAE,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,EACzC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,0BACjB,UAAU,gBACnB,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;QAE3B,WACI,KAAK,EAAC,2CAA2C,EACjD,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,0BAA0B,GAAG,EAAE,CAAC,eACtC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EACrD,SAAS,EAAE,IAAI,CAAC,gBAAgB;UAEhC,eAAa,CACX,CACA,CACH,CACd,CACE,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwHJ","sourcesContent":["import {\n Component,\n ComponentInterface,\n Prop,\n Watch,\n State,\n Fragment,\n Element,\n Host,\n h,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport Swiper, { SwiperOptions, Autoplay } from 'swiper';\nimport { createGuid, loc, handleAriaLabel, overrideFocus, isEventFromElement } from 'src/utils';\n\nconst carouselBreakpoint = 500; /* width in px of this host element where the layout starts to get unruly /\n\n@Component({\n tag: 'q2-carousel',\n shadow: false,\n styleUrl: 'styles.scss',\n})\nexport class Q2Carousel implements ComponentInterface {\n private swiper?: Swiper = null;\n\n @Prop({ reflect: true }) autoPlay: boolean = false;\n @Prop({ reflect: true }) fullWidthPanes: boolean = false;\n @Prop({ reflect: true }) hidePagination: boolean = false;\n @Prop({ reflect: true }) showNavigationArrows: boolean = false;\n @Prop({ reflect: true }) label: string = 'tecton.element.carousel.ariaLabel';\n @Prop({ reflect: true, mutable: true }) index: number = 1;\n\n /* @deprecated */\n @Prop({ reflect: true }) ariaLabel: string;\n\n @State() universalCarouselOptions: SwiperOptions = {\n centeredSlides: true,\n focusableElements: 'q2-btn, a, input, select, textarea, button, video, label, option',\n autoplay: this.autoPlay,\n modules: [Autoplay],\n on: {\n slideChange: () => {\n this.handleSlideChange(this.swiper?.activeIndex ?? 0); // lazy-load causing this.swiper is null only on ios safari\n },\n activeIndexChange: swiper => {\n this.activePaneIndex = swiper.activeIndex;\n this.organizePanes();\n const isPaginationFocused = document.activeElement.closest(\n `#q2-carousel-${this.guid} .q2-carousel-page-indicator`\n );\n const isCarouselFocused = document.activeElement.closest(`#q2-carousel-${this.guid} q2-carousel-pane`);\n\n if (isPaginationFocused) {\n this.paginationBtns[swiper.activeIndex].focus({ preventScroll: true });\n } else if (isCarouselFocused)\n (swiper.slides[swiper.activeIndex] as HTMLElement).focus({\n preventScroll: true,\n });\n },\n },\n };\n\n @State() fullWidthDisplayOptions: SwiperOptions = {\n slidesPerView: 1,\n spaceBetween: 100,\n ...this.universalCarouselOptions,\n };\n @State() activePaneIndex: number = this.realIndex;\n @State() applyFocus: boolean = false;\n @State() applyPaginationFocus: boolean = false;\n @State() autoPlayInProgress: boolean = false;\n @State() compactMode: boolean = false;\n @State() carouselWrapperWidth: number = 0;\n @Element() hostElement: HTMLElement;\n\n carouselWrapper: HTMLElement;\n carouselPaneWrapperElement: HTMLElement;\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('carouselWrapperWidth')\n carouselWrapperWidthChanged() {\n this.compactMode = this.carouselWrapperWidth < carouselBreakpoint;\n }\n\n @Watch('index')\n indexChanged() {\n this.swiper?.slideTo(this.realIndex);\n }\n\n @Watch('fullWidthPanes')\n @Watch('compactMode')\n @Watch('autoPlay')\n revampCarousel() {\n this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);\n }\n\n // COMPUTED //\n guid = createGuid();\n\n get peekContentDisplayOptions(): SwiperOptions {\n return {\n slidesPerView: 2,\n spaceBetween: this.compactMode ? 0 : -10,\n centerInsufficientSlides: false,\n ...this.universalCarouselOptions,\n };\n }\n\n get realIndex(): number {\n const indexNum = Number(this.index);\n return indexNum > 0 ? indexNum - 1 : 0;\n }\n\n get paginationBtns(): NodeListOf<HTMLButtonElement> {\n return this.hostElement.querySelectorAll('.q2-carousel-page-indicator');\n }\n\n get activeCarouselOptions() {\n return this.fullWidthPanes ? this.fullWidthDisplayOptions : this.peekContentDisplayOptions;\n }\n\n get dynamicPaginationDots() {\n return this.paneCount && this.paneCount > 5;\n }\n\n get paneCollection() {\n return this.hostElement.querySelectorAll('q2-carousel-pane');\n }\n\n get paneArray() {\n return Array.from(this.paneCollection);\n }\n\n get paneCount() {\n return this.paneArray && this.paneArray.length > 0 ? this.paneArray.length : 0;\n }\n\n get insufficientPanes() {\n return this.paneCount < 1;\n }\n\n // HOST ELEMENT EVENTS //\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange) {\n this.index = event.detail.index;\n }\n }\n\n @Listen('clickCarouselPane')\n carouselPaneClicked(event) {\n this.swiper?.slideTo(event.detail.paneIndex);\n (this.swiper?.slides[event.detail.paneIndex] as HTMLElement).focus({ preventScroll: true });\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n const activePane = this.swiper.slides[this.swiper.activeIndex];\n if (!isEventFromElement(event, this.hostElement) \|\| !activePane) return;\n (activePane as HTMLElement).focus({ preventScroll: true });\n }\n\n // EVENTS //\n\n @Event() change: EventEmitter<{ index: number }>;\n\n // METHODS //\n setCarouselWrapperWidth = () => {\n if (this.insufficientPanes) return;\n this.carouselWrapperWidth = this.carouselWrapper.clientWidth;\n };\n\n handleSlideChange = (newIndex: number) => {\n this.change.emit({ index: newIndex + 1 });\n };\n\n configureCarousel = (carouselWrapper, carouselOptions) => {\n if (!!this.swiper) {\n this.tearDownCarousel();\n }\n this.autoPlayInProgress = this.autoPlay;\n\n this.swiper = new Swiper(carouselWrapper, carouselOptions);\n this.swiper?.slideTo(this.realIndex);\n };\n\n tearDownCarousel = () => {\n this.swiper.destroy();\n this.swiper = null;\n };\n\n organizePanes = () => {\n this.paneCollection.forEach((pane, index) => {\n pane.index = index;\n pane.siblingCount = this.paneCollection.length;\n pane.isActivePane = index === this.activePaneIndex;\n });\n };\n\n handleAutoPlayPause = () => {\n const {\n swiper: { autoplay },\n } = this;\n if (!autoplay) return;\n\n if (autoplay?.running) autoplay.stop();\n else autoplay.start();\n this.autoPlayInProgress = autoplay.running;\n };\n\n handleCarouselNavigationSelection = (newIndex: number, applyFocus: boolean) => {\n if (applyFocus) {\n this.applyFocus = true;\n }\n\n this.handleSlideChange(newIndex);\n };\n\n onPaginationKeyDown = (event: KeyboardEvent) => {\n switch (event.key) {\n case 'ArrowRight':\n event.preventDefault();\n this.applyFocus = false;\n this.applyPaginationFocus = true;\n this.swiper.slideNext();\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n this.applyFocus = false;\n this.applyPaginationFocus = true;\n this.swiper.slidePrev();\n break;\n\n case 'Home':\n event.preventDefault();\n this.applyFocus = false;\n this.applyPaginationFocus = true;\n this.swiper?.slideTo(0);\n break;\n\n case 'End':\n event.preventDefault();\n this.applyFocus = false;\n this.applyPaginationFocus = true;\n this.swiper?.slideTo(this.swiper.slides.length - 1);\n break;\n }\n };\n\n onWrapperKeyDown = (event: KeyboardEvent) => {\n switch (event.key) {\n case 'ArrowRight':\n event.preventDefault();\n this.applyFocus = true;\n this.swiper.slideNext();\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n this.applyFocus = true;\n this.swiper.slidePrev();\n break;\n\n case 'Home':\n event.preventDefault();\n this.applyFocus = true;\n this.swiper?.slideTo(0);\n break;\n\n case 'End':\n event.preventDefault();\n this.applyFocus = true;\n this.swiper?.slideTo(this.swiper.slides.length - 1);\n break;\n }\n };\n\n // LIFECYCLES //\n\n componentWillLoad() {\n handleAriaLabel(this);\n this.organizePanes();\n window.addEventListener('resize', this.setCarouselWrapperWidth);\n }\n\n componentDidLoad() {\n this.setCarouselWrapperWidth();\n if (this.carouselWrapper && !!this.paneArray.length) {\n this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);\n }\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n if (!!this.swiper) {\n this.tearDownCarousel();\n }\n\n window.removeEventListener('resize', this.setCarouselWrapperWidth);\n }\n\n render() {\n let carouselContainerClasses = [\n 'q2-carousel-swiper-container',\n 'swiper-container',\n this.fullWidthPanes ? 'full-width-display' : 'content-peek-display',\n ];\n if (this.compactMode) carouselContainerClasses = [...carouselContainerClasses, 'compact'];\n\n let paginationWrapperClasses = ['q2-carousel-pagination-navigation-wrapper'];\n if (this.showNavigationArrows) paginationWrapperClasses = [...paginationWrapperClasses, 'evenly-space'];\n\n return (\n <Host\n id={`q2-carousel-${this.guid}`}\n class=\"q2-carousel-instance\"\n >\n {this.insufficientPanes ? (\n this.insufficientPanesDisplay()\n ) : (\n <Fragment>\n {this.paneCount > 1 && (\n <div class={paginationWrapperClasses.join(' ')}>\n {this.showNavigationArrows && this.prevNavBtn()}\n\n <div class=\"q2-carousel-control-center-tray\">\n {!this.hidePagination && this.paginationArea()}\n\n {this.autoPlay && this.autoPlayBtn()}\n </div>\n\n {this.showNavigationArrows && this.nextNavBtn()}\n </div>\n )}\n\n <section\n class={carouselContainerClasses.join(' ')}\n ref={el => (this.carouselWrapper = el)}\n aria-roledescription=\"carousel\"\n aria-label={loc(this.label)}\n >\n <div\n class=\"q2-carousel-swiper-wrapper swiper-wrapper\"\n ref={el => (this.carouselPaneWrapperElement = el)}\n aria-live={this.autoPlayInProgress ? 'off' : 'polite'}\n onKeyDown={this.onWrapperKeyDown}\n >\n <slot></slot>\n </div>\n </section>\n </Fragment>\n )}\n </Host>\n );\n }\n\n paginationArea = () => {\n let paginationContainerClasses = ['q2-carousel-pagination'];\n if (this.dynamicPaginationDots) paginationContainerClasses = [...paginationContainerClasses, 'dynamic'];\n\n return (\n <div\n class={paginationContainerClasses.join(' ')}\n role=\"tablist\"\n aria-label={loc('tecton.element.carousel.tabWrapperLabel')}\n >\n {this.paneArray.map(pane => {\n let btnClasses = ['q2-carousel-page-indicator', `q2-carousel-page-indicator-${pane.index}`];\n if (pane.isActivePane) btnClasses = [...btnClasses, 'active-page'];\n if (this.dynamicPaginationDots) btnClasses = [...btnClasses, 'dynamic'];\n\n const withinOneOfActive =\n pane.index === this.activePaneIndex + 1 \|\| pane.index === this.activePaneIndex - 1;\n if (withinOneOfActive) btnClasses = [...btnClasses, 'active-adjacent'];\n\n const withinTwoOfActive =\n pane.index === this.activePaneIndex + 2 \|\| pane.index === this.activePaneIndex - 2;\n if (withinTwoOfActive) btnClasses = [...btnClasses, 'active-adjacent-adjacent'];\n\n return (\n <button\n type=\"button\"\n role=\"tab\"\n tabIndex={pane.isActivePane ? undefined : -1}\n aria-selected={pane.isActivePane ? 'true' : 'false'}\n class={btnClasses.join(' ')}\n onClick={() => this.handleCarouselNavigationSelection(pane.index, true)}\n onKeyDown={event => this.onPaginationKeyDown(event)}\n aria-label={loc('tecton.element.carousel.itemDescription', [\n (pane.index + 1).toString(),\n this.paneCount.toString(),\n ])}\n ></button>\n );\n })}\n </div>\n );\n };\n\n autoPlayBtn = () => {\n return (\n <q2-btn\n type=\"button\"\n hide-label\n label={loc(\n this.autoPlayInProgress\n ? 'tecton.element.carousel.pausePlayLabel'\n : 'tecton.element.carousel.resumePlayLabel'\n )}\n class=\"q2-carousel-autoplay-control\"\n onClick={this.handleAutoPlayPause}\n >\n <q2-icon type={this.autoPlayInProgress ? 'pause' : 'play'} />\n </q2-btn>\n );\n };\n\n prevNavBtn = () => {\n const prevPaneAvailable = this.activePaneIndex > 0;\n\n return (\n <div>\n <q2-btn\n type=\"button\"\n disabled={prevPaneAvailable ? undefined : true}\n class=\"q2-carousel-navigation-button q2-carousel-navigation-button-prev\"\n hide-label\n label={loc('tecton.element.carousel.previousItemLabel')}\n onClick={() => this.handleCarouselNavigationSelection(this.activePaneIndex - 1, true)}\n >\n <q2-icon type=\"chevron-left\" />\n </q2-btn>\n </div>\n );\n };\n\n nextNavBtn = () => {\n const nextPaneAvailable = this.activePaneIndex < this.paneCount - 1;\n\n return (\n <div>\n <q2-btn\n type=\"button\"\n disabled={nextPaneAvailable ? undefined : true}\n class=\"q2-carousel-navigation-button q2-carousel-navigation-button-next\"\n hide-label\n label={loc('tecton.element.carousel.nextItemLabel')}\n onClick={() => this.handleCarouselNavigationSelection(this.activePaneIndex + 1, true)}\n >\n <q2-icon type=\"chevron-right\" />\n </q2-btn>\n </div>\n );\n };\n\n insufficientPanesDisplay = () => {\n let insufficientPanesContainerClasses = [\n 'insufficient-pane-feedback',\n this.fullWidthPanes ? 'full-width-display' : 'content-peek-display',\n ];\n if (this.compactMode) insufficientPanesContainerClasses = [...insufficientPanesContainerClasses, 'compact'];\n\n return (\n <div class={insufficientPanesContainerClasses.join(' ')}>\n <div class=\"insufficient-panes-icon-wrapper\">\n <q2-icon type=\"warning\" />\n </div>\n <p class=\"insufficient-panes-header\">\n <strong>{loc('tecton.element.carousel.insufficientPanesMessageHeader')}</strong>\n </p>\n <p class=\"insufficient-panes-body\">{loc('tecton.element.carousel.insufficientPanesMessageBody')}</p>\n </div>\n );\n };\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-carousel/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Prop,\n Watch,\n State,\n Fragment,\n Element,\n Host,\n h,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport Swiper, { SwiperOptions, Autoplay } from 'swiper';\nimport { createGuid, loc, handleAriaLabel, overrideFocus, isEventFromElement } from 'src/utils';\n\nconst carouselBreakpoint = 500; /* width in px of this host element where the layout starts to get unruly /\n\n@Component({\n tag: 'q2-carousel',\n shadow: false,\n styleUrl: 'styles.scss',\n})\nexport class Q2Carousel implements ComponentInterface {\n private swiper?: Swiper = null;\n\n @Prop({ reflect: true }) autoPlay: boolean = false;\n @Prop({ reflect: true }) fullWidthPanes: boolean = false;\n @Prop({ reflect: true }) hidePagination: boolean = false;\n @Prop({ reflect: true }) showNavigationArrows: boolean = false;\n @Prop({ reflect: true }) label: string = 'tecton.element.carousel.ariaLabel';\n @Prop({ reflect: true, mutable: true }) index: number = 1;\n\n /* @deprecated /\n @Prop({ reflect: true }) ariaLabel: string;\n\n @State() universalCarouselOptions: SwiperOptions = {\n centeredSlides: true,\n focusableElements: 'q2-btn, a, input, select, textarea, button, video, label, option',\n autoplay: this.autoPlay,\n modules: [Autoplay],\n on: {\n slideChange: () => {\n this.handleSlideChange(this.swiper?.activeIndex ?? 0); // lazy-load causing this.swiper is null only on ios safari\n },\n activeIndexChange: swiper => {\n this.activePaneIndex = swiper.activeIndex;\n this.organizePanes();\n const isPaginationFocused = !!document.activeElement.closest(\n `#q2-carousel-${this.guid} .q2-carousel-page-indicator`\n );\n const isCarouselFocused = !!document.activeElement.closest(\n `#q2-carousel-${this.guid} q2-carousel-pane`\n );\n const isFocused = isPaginationFocused \|\| isCarouselFocused;\n this.handleAriaLive(isFocused);\n\n if (isPaginationFocused) {\n this.paginationBtns[swiper.activeIndex].focus({ preventScroll: true });\n } else if (isCarouselFocused)\n (swiper.slides[swiper.activeIndex] as HTMLElement).focus({\n preventScroll: true,\n });\n },\n },\n };\n\n @State() fullWidthDisplayOptions: SwiperOptions = {\n slidesPerView: 1,\n spaceBetween: 100,\n ...this.universalCarouselOptions,\n };\n @State() activePaneIndex: number = this.realIndex;\n @State() applyFocus: boolean = false;\n @State() applyPaginationFocus: boolean = false;\n @State() autoPlayInProgress: boolean = false;\n @State() compactMode: boolean = false;\n @State() carouselWrapperWidth: number = 0;\n @State() ariaLiveValue: 'polite' \| 'off' = 'polite';\n @State() currentPaneCount: number = this.paneCount;\n @Element() hostElement: HTMLElement;\n\n carouselWrapper: HTMLElement;\n carouselPaneWrapperElement: HTMLElement;\n mutationObserver: MutationObserver;\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('carouselWrapperWidth')\n carouselWrapperWidthChanged() {\n this.compactMode = this.carouselWrapperWidth < carouselBreakpoint;\n }\n\n @Watch('index')\n indexChanged() {\n this.swiper?.slideTo(this.realIndex);\n }\n\n @Watch('fullWidthPanes')\n @Watch('compactMode')\n @Watch('autoPlay')\n revampCarousel() {\n this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);\n }\n\n // COMPUTED //\n guid = createGuid();\n\n get peekContentDisplayOptions(): SwiperOptions {\n return {\n slidesPerView: 2,\n spaceBetween: this.compactMode ? 0 : -10,\n centerInsufficientSlides: false,\n ...this.universalCarouselOptions,\n };\n }\n\n get realIndex(): number {\n const indexNum = Number(this.index);\n return indexNum > 0 ? indexNum - 1 : 0;\n }\n\n get paginationBtns(): NodeListOf<HTMLButtonElement> {\n return this.hostElement.querySelectorAll('.q2-carousel-page-indicator');\n }\n\n get activeCarouselOptions() {\n return this.fullWidthPanes ? this.fullWidthDisplayOptions : this.peekContentDisplayOptions;\n }\n\n get dynamicPaginationDots() {\n return this.paneCount && this.paneCount > 5;\n }\n\n get paneCollection() {\n return this.hostElement.querySelectorAll('q2-carousel-pane');\n }\n\n get paneArray() {\n return Array.from(this.paneCollection);\n }\n\n get paneCount() {\n return this.paneArray && this.paneArray.length > 0 ? this.paneArray.length : 0;\n }\n\n get insufficientPanes() {\n return this.paneCount < 1;\n }\n\n // HOST ELEMENT EVENTS //\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange) {\n this.index = event.detail.index;\n }\n }\n\n @Listen('clickCarouselPane')\n carouselPaneClicked(event) {\n this.swiper?.slideTo(event.detail.paneIndex);\n (this.swiper?.slides[event.detail.paneIndex] as HTMLElement).focus({ preventScroll: true });\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n const activePane = this.swiper.slides[this.swiper.activeIndex];\n if (!isEventFromElement(event, this.hostElement) \|\| !activePane) return;\n (activePane as HTMLElement).focus({ preventScroll: true });\n }\n\n // EVENTS //\n\n /\n Emitted when the carousel pane changes.\n */\n @Event() change: EventEmitter<{ index: number }>;\n\n // METHODS //\n onMutationObserved = () => {\n this.organizePanes();\n };\n\n setCarouselWrapperWidth = () => {\n if (this.insufficientPanes) return;\n this.carouselWrapperWidth = this.carouselWrapper.clientWidth;\n };\n\n handleSlideChange = (newIndex: number) => {\n this.change.emit({ index: newIndex + 1 });\n };\n\n configureCarousel = (carouselWrapper, carouselOptions) => {\n if (!!this.swiper) {\n this.tearDownCarousel();\n }\n this.autoPlayInProgress = this.autoPlay;\n\n this.swiper = new Swiper(carouselWrapper, carouselOptions);\n this.swiper?.slideTo(this.realIndex);\n if (this.autoPlayInProgress) this.swiper.autoplay.start();\n };\n\n tearDownCarousel = () => {\n this.swiper.destroy();\n this.swiper = null;\n };\n\n organizePanes = () => {\n this.paneCollection.forEach((pane, index) => {\n pane.index = index;\n pane.siblingCount = this.paneCollection.length;\n pane.isActivePane = index === this.activePaneIndex;\n });\n this.currentPaneCount = this.paneCollection.length;\n };\n\n handleAutoPlayPause = () => {\n const {\n swiper: { autoplay },\n } = this;\n if (!autoplay) return;\n\n if (autoplay?.running) autoplay.stop();\n else autoplay.start();\n this.autoPlayInProgress = autoplay.running;\n };\n\n handleCarouselNavigationSelection = (newIndex: number, applyFocus: boolean) => {\n if (applyFocus) {\n this.applyFocus = true;\n }\n\n this.handleSlideChange(newIndex);\n };\n\n handleAriaLive(activeAndFocused: boolean) {\n if (this.autoPlayInProgress && !activeAndFocused) {\n this.ariaLiveValue = 'off';\n } else {\n this.ariaLiveValue = 'polite';\n }\n }\n\n onPaginationKeyDown = (event: KeyboardEvent) => {\n switch (event.key) {\n case 'ArrowRight':\n event.preventDefault();\n this.applyFocus = false;\n this.applyPaginationFocus = true;\n this.swiper.slideNext();\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n this.applyFocus = false;\n this.applyPaginationFocus = true;\n this.swiper.slidePrev();\n break;\n\n case 'Home':\n event.preventDefault();\n this.applyFocus = false;\n this.applyPaginationFocus = true;\n this.swiper?.slideTo(0);\n break;\n\n case 'End':\n event.preventDefault();\n this.applyFocus = false;\n this.applyPaginationFocus = true;\n this.swiper?.slideTo(this.swiper.slides.length - 1);\n break;\n }\n };\n\n onWrapperKeyDown = (event: KeyboardEvent) => {\n switch (event.key) {\n case 'ArrowRight':\n event.preventDefault();\n this.applyFocus = true;\n this.swiper.slideNext();\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n this.applyFocus = true;\n this.swiper.slidePrev();\n break;\n\n case 'Home':\n event.preventDefault();\n this.applyFocus = true;\n this.swiper?.slideTo(0);\n break;\n\n case 'End':\n event.preventDefault();\n this.applyFocus = true;\n this.swiper?.slideTo(this.swiper.slides.length - 1);\n break;\n }\n };\n\n // LIFECYCLES //\n\n componentWillLoad() {\n handleAriaLabel(this);\n this.organizePanes();\n window.addEventListener('resize', this.setCarouselWrapperWidth);\n }\n\n componentDidLoad() {\n this.setCarouselWrapperWidth();\n if (this.carouselWrapper && !!this.paneArray.length) {\n this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);\n }\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n if (!!this.swiper) {\n this.tearDownCarousel();\n }\n\n window.removeEventListener('resize', this.setCarouselWrapperWidth);\n }\n\n render() {\n let carouselContainerClasses = [\n 'q2-carousel-swiper-container',\n 'swiper-container',\n this.fullWidthPanes ? 'full-width-display' : 'content-peek-display',\n ];\n if (this.compactMode) carouselContainerClasses = [...carouselContainerClasses, 'compact'];\n\n let paginationWrapperClasses = ['q2-carousel-pagination-navigation-wrapper'];\n if (this.showNavigationArrows) paginationWrapperClasses = [...paginationWrapperClasses, 'evenly-space'];\n\n return (\n <Host\n id={`q2-carousel-${this.guid}`}\n class=\"q2-carousel-instance\"\n >\n {this.insufficientPanes ? (\n this.insufficientPanesDisplay()\n ) : (\n <Fragment>\n {this.paneCount > 1 && (\n <div class={paginationWrapperClasses.join(' ')}>\n {this.showNavigationArrows && this.prevNavBtn()}\n\n <div class=\"q2-carousel-control-center-tray\">\n {!this.hidePagination && this.paginationArea()}\n\n {this.autoPlay && this.autoPlayBtn()}\n </div>\n\n {this.showNavigationArrows && this.nextNavBtn()}\n </div>\n )}\n\n <section\n class={carouselContainerClasses.join(' ')}\n ref={el => (this.carouselWrapper = el)}\n aria-roledescription=\"carousel\"\n aria-label={loc(this.label)}\n >\n <div\n class=\"q2-carousel-swiper-wrapper swiper-wrapper\"\n ref={el => (this.carouselPaneWrapperElement = el)}\n aria-live={this.ariaLiveValue}\n onKeyDown={this.onWrapperKeyDown}\n >\n <slot></slot>\n </div>\n </section>\n </Fragment>\n )}\n </Host>\n );\n }\n\n paginationArea = () => {\n let paginationContainerClasses = ['q2-carousel-pagination'];\n if (this.dynamicPaginationDots) paginationContainerClasses = [...paginationContainerClasses, 'dynamic'];\n\n return (\n <div\n class={paginationContainerClasses.join(' ')}\n role=\"tablist\"\n aria-label={loc('tecton.element.carousel.tabWrapperLabel')}\n >\n {this.paneArray.map(pane => {\n let btnClasses = ['q2-carousel-page-indicator', `q2-carousel-page-indicator-${pane.index}`];\n if (pane.isActivePane) btnClasses = [...btnClasses, 'active-page'];\n if (this.dynamicPaginationDots) btnClasses = [...btnClasses, 'dynamic'];\n\n const withinOneOfActive =\n pane.index === this.activePaneIndex + 1 \|\| pane.index === this.activePaneIndex - 1;\n if (withinOneOfActive) btnClasses = [...btnClasses, 'active-adjacent'];\n\n const withinTwoOfActive =\n pane.index === this.activePaneIndex + 2 \|\| pane.index === this.activePaneIndex - 2;\n if (withinTwoOfActive) btnClasses = [...btnClasses, 'active-adjacent-adjacent'];\n\n return (\n <button\n type=\"button\"\n role=\"tab\"\n tabIndex={pane.isActivePane ? undefined : -1}\n aria-selected={pane.isActivePane ? 'true' : 'false'}\n class={btnClasses.join(' ')}\n onClick={() => this.handleCarouselNavigationSelection(pane.index, true)}\n onKeyDown={event => this.onPaginationKeyDown(event)}\n aria-label={loc('tecton.element.carousel.itemDescription', [\n (pane.index + 1).toString(),\n this.paneCount.toString(),\n ])}\n ></button>\n );\n })}\n </div>\n );\n };\n\n autoPlayBtn = () => {\n return (\n <q2-btn\n type=\"button\"\n hide-label\n label={loc(\n this.autoPlayInProgress\n ? 'tecton.element.carousel.pausePlayLabel'\n : 'tecton.element.carousel.resumePlayLabel'\n )}\n class=\"q2-carousel-autoplay-control\"\n onClick={this.handleAutoPlayPause}\n >\n <q2-icon type={this.autoPlayInProgress ? 'pause' : 'play'} />\n </q2-btn>\n );\n };\n\n prevNavBtn = () => {\n const prevPaneAvailable = this.activePaneIndex > 0;\n\n return (\n <div>\n <q2-btn\n type=\"button\"\n disabled={prevPaneAvailable ? undefined : true}\n class=\"q2-carousel-navigation-button q2-carousel-navigation-button-prev\"\n hide-label\n label={loc('tecton.element.carousel.previousItemLabel')}\n onClick={() => this.handleCarouselNavigationSelection(this.activePaneIndex - 1, true)}\n >\n <q2-icon type=\"chevron-left\" />\n </q2-btn>\n </div>\n );\n };\n\n nextNavBtn = () => {\n const nextPaneAvailable = this.activePaneIndex < this.paneCount - 1;\n\n return (\n <div>\n <q2-btn\n type=\"button\"\n disabled={nextPaneAvailable ? undefined : true}\n class=\"q2-carousel-navigation-button q2-carousel-navigation-button-next\"\n hide-label\n label={loc('tecton.element.carousel.nextItemLabel')}\n onClick={() => this.handleCarouselNavigationSelection(this.activePaneIndex + 1, true)}\n >\n <q2-icon type=\"chevron-right\" />\n </q2-btn>\n </div>\n );\n };\n\n insufficientPanesDisplay = () => {\n let insufficientPanesContainerClasses = [\n 'insufficient-pane-feedback',\n this.fullWidthPanes ? 'full-width-display' : 'content-peek-display',\n ];\n if (this.compactMode) insufficientPanesContainerClasses = [...insufficientPanesContainerClasses, 'compact'];\n\n return (\n <div class={insufficientPanesContainerClasses.join(' ')}>\n <div class=\"insufficient-panes-icon-wrapper\">\n <q2-icon type=\"warning\" />\n </div>\n <p class=\"insufficient-panes-header\">\n <strong>{loc('tecton.element.carousel.insufficientPanesMessageHeader')}</strong>\n </p>\n <p class=\"insufficient-panes-body\">{loc('tecton.element.carousel.insufficientPanesMessageBody')}</p>\n </div>\n );\n };\n}\n"]}

package/dist/collection/components/q2-carousel-pane/index.js CHANGED Viewed

@@ -160,12 +160,16 @@ export class Q2Carousel {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted when the pane is clicked."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "{ paneIndex: number; pane: HTMLElement }",
+          "resolved": "{ paneIndex: number; pane: HTMLElement; }",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
         }
       }];
   }

package/dist/collection/components/q2-carousel-pane/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-carousel-pane/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAgB,MAAM,eAAe,CAAC;AAClH,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAOhC,MAAM,OAAO,UAAU;;IA2BnB,sBAAiB,GAAG,CAAC,YAAoB,EAAE,EAAE;MACzC,OAAO,kDAAkD,YAAY,EAAE,CAAC;IAC5E,CAAC,CAAC;~~IAIF~~,gBAAW,GAAG,KAAK,CAAC,EAAE;MAClB,IAAI,IAAI,CAAC,YAAY;QAAE,OAAO;MAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QACxB,SAAS,EAAE,IAAI,CAAC,KAAK;QACrB,IAAI,EAAE,IAAI,CAAC,WAAW;OACzB,CAAC,CAAC;IACP,CAAC,CAAC;;;;;;~~EArBF~~,IAAI,gBAAgB;IAChB,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;EACnG,CAAC;EAED,gBAAgB;IACZ,IAAI,CAAC,wBAAwB,EAAE,CAAC;EACpC,CAAC;~~EAkBD~~,wBAAwB;IACpB,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC9B,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CACvD,0DAA0D,CAC7D,CAAC;IAEF,iBAAiB,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;MAChC,MAAM,gBAAgB,GAClB,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC;MAExF,IAAI,gBAAgB,EAAE;QAClB,OAAO,CAAC,OAAO,CAAC,UAAU,GAAG,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC;OACtD;MAED,IAAI,YAAY,EAAE;QACd,IAAI,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE;UAC1C,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC;UACtE,OAAO,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;SAC/C;aAAM,IAAI,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE;UAC1C,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC;SAChC;aAAM;UACH,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;SACvC;OACJ;WAAM;QACH,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;OACzB;IACL,CAAC,CAAC,CAAC;EACP,CAAC;EAED,MAAM;IACF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEvB,OAAO,CACH,EAAC,IAAI,IACD,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,EACpD,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACpC,IAAI,EAAC,OAAO,0BACS,OAAO,iBACf,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,gBAE/C,KAAK;QACD,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC;QACZ,CAAC,CAAC,GAAG,CAAC,yCAAyC,EAAE;UAC3C,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE;UACtC,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE;SACtC,CAAC,EAEZ,OAAO,EAAE,IAAI,CAAC,WAAW;MAEzB,eAAS,KAAK,EAAC,+BAA+B;QAC1C,eAAa,CACP,CACP,CACV,CAAC;EACN,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACJ","sourcesContent":["import { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({\n tag: 'q2-carousel-pane',\n shadow: false,\n styleUrl: 'styles.scss',\n})\nexport class Q2Carousel implements ComponentInterface {\n /*\n Used by q2-carousel to determine the pane's index\n * @private\n /\n @Prop({ reflect: false }) index: number;\n /\n Used by q2-carousel to indicate how many panes are in the carousel\n * @private\n /\n @Prop({ reflect: false }) siblingCount: number;\n /\n Used by q2-carousel to indicate which pane is currently active\n * @private\n */\n @Prop({ reflect: true }) isActivePane: boolean;\n @Prop({ reflect: true }) label: string;\n @Element() hostElement: HTMLElement;\n\n get currentPaneIndex() {\n return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n }\n\n componentDidLoad(): void {\n this.determineDisabledContent();\n }\n\n generatePaneClass = (currentIndex: number) => {\n return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n };\n\n @Event() clickCarouselPane: EventEmitter;\n\n paneClicked = event => {\n if (this.isActivePane) return;\n event.preventDefault();\n this.clickCarouselPane.emit({\n paneIndex: this.index,\n pane: this.hostElement,\n });\n };\n\n @Watch('isActivePane')\n determineDisabledContent() {\n const { isActivePane } = this;\n const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n 'q2-btn, a[href], button, [tabindex]:not([tabindex=\"-1\"])'\n );\n\n focusableElements.forEach(element => {\n const hasValidTabIndex =\n element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;\n\n if (hasValidTabIndex) {\n element.dataset.q2Tabindex = `${element.tabIndex}`;\n }\n\n if (isActivePane) {\n if (element.hasAttribute('data-q2-tabindex')) {\n element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));\n element.removeAttribute('data-q2-tabindex');\n } else if (element.tagName.startsWith('Q2-')) {\n element.tabIndex = undefined;\n } else {\n element.removeAttribute('tabindex');\n }\n } else {\n element.tabIndex = -1;\n }\n });\n }\n\n render() {\n const { label } = this;\n\n return (\n <Host\n class={this.generatePaneClass(this.currentPaneIndex)}\n tabIndex={this.isActivePane ? 0 : -1}\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-hidden={this.isActivePane ? undefined : 'true'}\n aria-label={\n label\n ? loc(label)\n : loc('tecton.element.carousel.itemDescription', [\n (this.currentPaneIndex + 1).toString(),\n (this.siblingCount \|\| 0).toString(),\n ])\n }\n onClick={this.paneClicked}\n >\n <article class=\"q2-carousel-pane-main-content\">\n <slot></slot>\n </article>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-carousel-pane/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAgB,MAAM,eAAe,CAAC;AAClH,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAOhC,MAAM,OAAO,UAAU;;IA2BnB,sBAAiB,GAAG,CAAC,YAAoB,EAAE,EAAE;MACzC,OAAO,kDAAkD,YAAY,EAAE,CAAC;IAC5E,CAAC,CAAC;IAOF,gBAAW,GAAG,KAAK,CAAC,EAAE;MAClB,IAAI,IAAI,CAAC,YAAY;QAAE,OAAO;MAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QACxB,SAAS,EAAE,IAAI,CAAC,KAAK;QACrB,IAAI,EAAE,IAAI,CAAC,WAAW;OACzB,CAAC,CAAC;IACP,CAAC,CAAC;;;;;;EAxBF,IAAI,gBAAgB;IAChB,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;EACnG,CAAC;EAED,gBAAgB;IACZ,IAAI,CAAC,wBAAwB,EAAE,CAAC;EACpC,CAAC;EAqBD,wBAAwB;IACpB,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC9B,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CACvD,0DAA0D,CAC7D,CAAC;IAEF,iBAAiB,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;MAChC,MAAM,gBAAgB,GAClB,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC;MAExF,IAAI,gBAAgB,EAAE;QAClB,OAAO,CAAC,OAAO,CAAC,UAAU,GAAG,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC;OACtD;MAED,IAAI,YAAY,EAAE;QACd,IAAI,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE;UAC1C,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC;UACtE,OAAO,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;SAC/C;aAAM,IAAI,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE;UAC1C,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC;SAChC;aAAM;UACH,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;SACvC;OACJ;WAAM;QACH,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;OACzB;IACL,CAAC,CAAC,CAAC;EACP,CAAC;EAED,MAAM;IACF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEvB,OAAO,CACH,EAAC,IAAI,IACD,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,EACpD,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACpC,IAAI,EAAC,OAAO,0BACS,OAAO,iBACf,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,gBAE/C,KAAK;QACD,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC;QACZ,CAAC,CAAC,GAAG,CAAC,yCAAyC,EAAE;UAC3C,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE;UACtC,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE;SACtC,CAAC,EAEZ,OAAO,EAAE,IAAI,CAAC,WAAW;MAEzB,eAAS,KAAK,EAAC,+BAA+B;QAC1C,eAAa,CACP,CACP,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({\n tag: 'q2-carousel-pane',\n shadow: false,\n styleUrl: 'styles.scss',\n})\nexport class Q2Carousel implements ComponentInterface {\n /*\n Used by q2-carousel to determine the pane's index\n * @private\n /\n @Prop({ reflect: false }) index: number;\n /\n Used by q2-carousel to indicate how many panes are in the carousel\n * @private\n /\n @Prop({ reflect: false }) siblingCount: number;\n /\n Used by q2-carousel to indicate which pane is currently active\n * @private\n /\n @Prop({ reflect: true }) isActivePane: boolean;\n @Prop({ reflect: true }) label: string;\n @Element() hostElement: HTMLElement;\n\n get currentPaneIndex() {\n return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n }\n\n componentDidLoad(): void {\n this.determineDisabledContent();\n }\n\n generatePaneClass = (currentIndex: number) => {\n return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n };\n\n /\n Emitted when the pane is clicked.\n */\n @Event() clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n paneClicked = event => {\n if (this.isActivePane) return;\n event.preventDefault();\n this.clickCarouselPane.emit({\n paneIndex: this.index,\n pane: this.hostElement,\n });\n };\n\n @Watch('isActivePane')\n determineDisabledContent() {\n const { isActivePane } = this;\n const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n 'q2-btn, a[href], button, [tabindex]:not([tabindex=\"-1\"])'\n );\n\n focusableElements.forEach(element => {\n const hasValidTabIndex =\n element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;\n\n if (hasValidTabIndex) {\n element.dataset.q2Tabindex = `${element.tabIndex}`;\n }\n\n if (isActivePane) {\n if (element.hasAttribute('data-q2-tabindex')) {\n element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));\n element.removeAttribute('data-q2-tabindex');\n } else if (element.tagName.startsWith('Q2-')) {\n element.tabIndex = undefined;\n } else {\n element.removeAttribute('tabindex');\n }\n } else {\n element.tabIndex = -1;\n }\n });\n }\n\n render() {\n const { label } = this;\n\n return (\n <Host\n class={this.generatePaneClass(this.currentPaneIndex)}\n tabIndex={this.isActivePane ? 0 : -1}\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-hidden={this.isActivePane ? undefined : 'true'}\n aria-label={\n label\n ? loc(label)\n : loc('tecton.element.carousel.itemDescription', [\n (this.currentPaneIndex + 1).toString(),\n (this.siblingCount \|\| 0).toString(),\n ])\n }\n onClick={this.paneClicked}\n >\n <article class=\"q2-carousel-pane-main-content\">\n <slot></slot>\n </article>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/q2-chart-area/index.js CHANGED Viewed

@@ -568,12 +568,17 @@ export class Q2ChartArea {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted when a data point is clicked."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "{\n        index: number;\n        data: IChartData;\n    }",
+          "resolved": "{ index: number; data: IChartData; }",
+          "references": {
+            "IChartData": {
+              "location": "import",
+              "path": "q2-tecton-common/lib/types/element-types"
+            }
+          }
         }
       }];
   }

package/dist/collection/components/q2-chart-area/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-chart-area/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Watch, EventEmitter, Event } from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport {\n TitleComponent,\n TitleComponentOption,\n AriaComponent,\n AriaComponentOption,\n GridComponent,\n} from 'echarts/components';\nimport { LineChart, LineSeriesOption } from 'echarts/charts';\nimport { UniversalTransition } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { loc, overrideFocus } from 'src/utils';\nimport { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\nimport { IChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([AriaComponent, LineChart, CanvasRenderer, UniversalTransition, GridComponent, TitleComponent]);\n\ntype EChartsOption = echarts.ComposeOption<AriaComponentOption \| LineSeriesOption \| TitleComponentOption>;\n\n@Component({\n tag: 'q2-chart-area',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2ChartArea implements ComponentInterface {\n @Prop() data: IChartData[] = [];\n @Prop({ reflect: true }) alignChartName: 'left' \| 'right' \| 'center';\n @Prop({ reflect: true }) chartName: string;\n @Prop({ reflect: true }) chartSubTitle: string;\n @Prop({ reflect: true }) lineColor: string;\n @Prop({ reflect: true }) pointerLineColor: string;\n @Prop({ reflect: true }) pointerLineStyle: 'solid' \| 'dashed';\n @Prop({ reflect: true }) areaColor: string;\n @Prop({ reflect: true }) dataNamesOverflow: 'break' \| 'truncate';\n @Prop({ reflect: true }) dataNamesWidth: number;\n @Prop({ reflect: true }) format: 'currency' \| 'default';\n @Prop({ reflect: true }) formatModifier: string;\n @Prop({ reflect: true }) hideNameAxisLabels: boolean = false;\n @Prop({ reflect: true }) hideValueAxisLabels: boolean = false;\n @Prop({ reflect: true }) offsetDataNames: boolean = false;\n @Prop({ reflect: true }) offsetDataValues: boolean = false;\n @Prop({ reflect: true }) showChartName: boolean = false;\n @Prop({ reflect: true }) showDatapointLabels: boolean = false;\n @Prop({ reflect: true }) showGradient: boolean = false;\n @Prop({ reflect: true }) gridLines: 'horizontal' \| 'vertical' \| 'off';\n\n @Element() hostElement: HTMLElement;\n\n @Event() change: EventEmitter;\n\n chartContainer: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n hostElementStyles: CSSStyleDeclaration;\n chart: echarts.ECharts;\n\n resizeEventListener: EventListener;\n\n componentDidLoad() {\n const chart = echarts.init(this.chartContainer);\n\n this.chart = chart;\n\n this.resizeEventListener = () => this.resizeChart();\n window.addEventListener('resize', this.resizeEventListener);\n\n this.cacheComputedStyles();\n this.updateChart(chart);\n\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.resizeEventListener);\n }\n\n cacheComputedStyles() {\n this.chartContainerStyles = getComputedStyle(this.chartContainer);\n this.hostElementStyles = getComputedStyle(this.hostElement);\n }\n\n getAreaFill() {\n if (this.showGradient) {\n return {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [\n {\n offset: 0,\n color: this.getColor(this.areaColor),\n },\n {\n offset: 1,\n color: 'white',\n },\n ],\n global: false,\n };\n }\n return this.getColor(this.areaColor);\n }\n\n getColor(color: string) {\n const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);\n const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);\n if (cssColorProp) return cssColorProp;\n if (isValidColor(color)) return color;\n return primaryColor;\n }\n\n updateChart(chart: echarts.ECharts) {\n const decimals = this.formatModifier?.includes('dec') ? this.formatModifier.replace('dec', '') : 0;\n\n const valueAxis = {\n type: 'value',\n axisLabel: {\n formatter: (value: number) =>\n formatValue(value, {\n type: this.format,\n decimals,\n }),\n rotate: this.offsetDataValues ? 45 : 0,\n margin: this.offsetDataValues ? 15 : 8,\n show: !this.hideValueAxisLabels,\n },\n splitLine: {\n show: this.gridLines === 'horizontal' \|\| !this.gridLines,\n },\n };\n\n const categoryAxis = {\n type: 'category',\n boundaryGap: false,\n data: this.data.map(datum => loc(datum.name) \|\| ''),\n axisLabel: {\n rotate: this.offsetDataNames ? 45 : 0,\n margin: this.offsetDataNames ? 15 : 8,\n width: this.dataNamesWidth \|\| 50,\n overflow: this.dataNamesOverflow \|\| 'none',\n truncate: 'ellipsis',\n show: !this.hideNameAxisLabels,\n },\n axisLine: {\n show: !this.hideNameAxisLabels,\n },\n axisTick: {\n show: !this.hideNameAxisLabels,\n },\n axisPointer: {\n show: true,\n type: 'line',\n label: {\n show: false,\n formatter: (params: any) => {\n const dataIndex = params.seriesData[0].dataIndex;\n this.change.emit({\n index: dataIndex,\n data: this.data[dataIndex],\n });\n },\n },\n lineStyle: {\n color: this.getColor(this.pointerLineColor \|\| 'var(--t-gray-10)'),\n type: this.pointerLineStyle \|\| 'solid',\n width: 1.5,\n },\n z: 1,\n },\n splitLine: {\n show: this.gridLines === 'vertical',\n },\n };\n\n return chart.setOption<EChartsOption>({\n aria: {\n enabled: true,\n },\n title: {\n text: loc(this.chartName),\n show: this.showChartName,\n left: this.alignChartName,\n subtext: this.chartSubTitle,\n },\n grid: {\n containLabel: true,\n },\n xAxis: categoryAxis,\n yAxis: valueAxis,\n series: [\n {\n data: this.data.map(datum => datum.value \|\| 0),\n id: 'area',\n type: 'line',\n lineStyle: {\n color: this.getColor(this.lineColor),\n },\n itemStyle: {\n color: this.getColor(this.lineColor),\n },\n areaStyle: {\n color: this.getAreaFill(),\n },\n symbolSize: 10,\n showSymbol: false,\n label: {\n show: this.showDatapointLabels,\n position: 'right',\n formatter: (params: any) => {\n return formatValue(params.value as number, {\n type: this.format,\n decimals,\n });\n },\n },\n },\n ],\n });\n }\n\n resizeChart() {\n this.chart.resize();\n }\n\n @Watch('data')\n @Watch('alignChartName')\n @Watch('chartName')\n @Watch('chartSubTitle')\n @Watch('lineColor')\n @Watch('pointerLineColor')\n @Watch('pointerLineStyle')\n @Watch('areaColor')\n @Watch('dataNamesOverflow')\n @Watch('dataNamesWidth')\n @Watch('format')\n @Watch('formatModifier')\n @Watch('hideNameAxisLabels')\n @Watch('hideValueAxisLabels')\n @Watch('offsetDataNames')\n @Watch('offsetDataValues')\n @Watch('showChartName')\n @Watch('showDatapointLabels')\n @Watch('showGradient')\n @Watch('gridLines')\n propsUpdates() {\n this.updateChart(this.chart);\n }\n\n render() {\n return (\n <div class=\"container\">\n <div\n ref={el => (this.chartContainer = el)}\n class=\"chart-container\"\n test-id=\"areaChartContainer\"\n ></div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-chart-area/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Watch, EventEmitter, Event } from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport {\n TitleComponent,\n TitleComponentOption,\n AriaComponent,\n AriaComponentOption,\n GridComponent,\n} from 'echarts/components';\nimport { LineChart, LineSeriesOption } from 'echarts/charts';\nimport { UniversalTransition } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { loc, overrideFocus } from 'src/utils';\nimport { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\nimport { IChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([AriaComponent, LineChart, CanvasRenderer, UniversalTransition, GridComponent, TitleComponent]);\n\ntype EChartsOption = echarts.ComposeOption<AriaComponentOption \| LineSeriesOption \| TitleComponentOption>;\n\n@Component({\n tag: 'q2-chart-area',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2ChartArea implements ComponentInterface {\n @Prop() data: IChartData[] = [];\n @Prop({ reflect: true }) alignChartName: 'left' \| 'right' \| 'center';\n @Prop({ reflect: true }) chartName: string;\n @Prop({ reflect: true }) chartSubTitle: string;\n @Prop({ reflect: true }) lineColor: string;\n @Prop({ reflect: true }) pointerLineColor: string;\n @Prop({ reflect: true }) pointerLineStyle: 'solid' \| 'dashed';\n @Prop({ reflect: true }) areaColor: string;\n @Prop({ reflect: true }) dataNamesOverflow: 'break' \| 'truncate';\n @Prop({ reflect: true }) dataNamesWidth: number;\n @Prop({ reflect: true }) format: 'currency' \| 'default';\n @Prop({ reflect: true }) formatModifier: string;\n @Prop({ reflect: true }) hideNameAxisLabels: boolean = false;\n @Prop({ reflect: true }) hideValueAxisLabels: boolean = false;\n @Prop({ reflect: true }) offsetDataNames: boolean = false;\n @Prop({ reflect: true }) offsetDataValues: boolean = false;\n @Prop({ reflect: true }) showChartName: boolean = false;\n @Prop({ reflect: true }) showDatapointLabels: boolean = false;\n @Prop({ reflect: true }) showGradient: boolean = false;\n @Prop({ reflect: true }) gridLines: 'horizontal' \| 'vertical' \| 'off';\n\n @Element() hostElement: HTMLElement;\n\n /*\n Emitted when a data point is clicked.\n */\n @Event() change: EventEmitter<{\n index: number;\n data: IChartData;\n }>;\n\n chartContainer: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n hostElementStyles: CSSStyleDeclaration;\n chart: echarts.ECharts;\n\n resizeEventListener: EventListener;\n\n componentDidLoad() {\n const chart = echarts.init(this.chartContainer);\n\n this.chart = chart;\n\n this.resizeEventListener = () => this.resizeChart();\n window.addEventListener('resize', this.resizeEventListener);\n\n this.cacheComputedStyles();\n this.updateChart(chart);\n\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.resizeEventListener);\n }\n\n cacheComputedStyles() {\n this.chartContainerStyles = getComputedStyle(this.chartContainer);\n this.hostElementStyles = getComputedStyle(this.hostElement);\n }\n\n getAreaFill() {\n if (this.showGradient) {\n return {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [\n {\n offset: 0,\n color: this.getColor(this.areaColor),\n },\n {\n offset: 1,\n color: 'white',\n },\n ],\n global: false,\n };\n }\n return this.getColor(this.areaColor);\n }\n\n getColor(color: string) {\n const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);\n const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);\n if (cssColorProp) return cssColorProp;\n if (isValidColor(color)) return color;\n return primaryColor;\n }\n\n updateChart(chart: echarts.ECharts) {\n const decimals = this.formatModifier?.includes('dec') ? this.formatModifier.replace('dec', '') : 0;\n\n const valueAxis = {\n type: 'value',\n axisLabel: {\n formatter: (value: number) =>\n formatValue(value, {\n type: this.format,\n decimals,\n }),\n rotate: this.offsetDataValues ? 45 : 0,\n margin: this.offsetDataValues ? 15 : 8,\n show: !this.hideValueAxisLabels,\n },\n splitLine: {\n show: this.gridLines === 'horizontal' \|\| !this.gridLines,\n },\n };\n\n const categoryAxis = {\n type: 'category',\n boundaryGap: false,\n data: this.data.map(datum => loc(datum.name) \|\| ''),\n axisLabel: {\n rotate: this.offsetDataNames ? 45 : 0,\n margin: this.offsetDataNames ? 15 : 8,\n width: this.dataNamesWidth \|\| 50,\n overflow: this.dataNamesOverflow \|\| 'none',\n truncate: 'ellipsis',\n show: !this.hideNameAxisLabels,\n },\n axisLine: {\n show: !this.hideNameAxisLabels,\n },\n axisTick: {\n show: !this.hideNameAxisLabels,\n },\n axisPointer: {\n show: true,\n type: 'line',\n label: {\n show: false,\n formatter: (params: any) => {\n const dataIndex = params.seriesData[0].dataIndex;\n this.change.emit({\n index: dataIndex,\n data: this.data[dataIndex],\n });\n },\n },\n lineStyle: {\n color: this.getColor(this.pointerLineColor \|\| 'var(--t-gray-10)'),\n type: this.pointerLineStyle \|\| 'solid',\n width: 1.5,\n },\n z: 1,\n },\n splitLine: {\n show: this.gridLines === 'vertical',\n },\n };\n\n return chart.setOption<EChartsOption>({\n aria: {\n enabled: true,\n },\n title: {\n text: loc(this.chartName),\n show: this.showChartName,\n left: this.alignChartName,\n subtext: this.chartSubTitle,\n },\n grid: {\n containLabel: true,\n },\n xAxis: categoryAxis,\n yAxis: valueAxis,\n series: [\n {\n data: this.data.map(datum => datum.value \|\| 0),\n id: 'area',\n type: 'line',\n lineStyle: {\n color: this.getColor(this.lineColor),\n },\n itemStyle: {\n color: this.getColor(this.lineColor),\n },\n areaStyle: {\n color: this.getAreaFill(),\n },\n symbolSize: 10,\n showSymbol: false,\n label: {\n show: this.showDatapointLabels,\n position: 'right',\n formatter: (params: any) => {\n return formatValue(params.value as number, {\n type: this.format,\n decimals,\n });\n },\n },\n },\n ],\n });\n }\n\n resizeChart() {\n this.chart.resize();\n }\n\n @Watch('data')\n @Watch('alignChartName')\n @Watch('chartName')\n @Watch('chartSubTitle')\n @Watch('lineColor')\n @Watch('pointerLineColor')\n @Watch('pointerLineStyle')\n @Watch('areaColor')\n @Watch('dataNamesOverflow')\n @Watch('dataNamesWidth')\n @Watch('format')\n @Watch('formatModifier')\n @Watch('hideNameAxisLabels')\n @Watch('hideValueAxisLabels')\n @Watch('offsetDataNames')\n @Watch('offsetDataValues')\n @Watch('showChartName')\n @Watch('showDatapointLabels')\n @Watch('showGradient')\n @Watch('gridLines')\n propsUpdates() {\n this.updateChart(this.chart);\n }\n\n render() {\n return (\n <div class=\"container\">\n <div\n ref={el => (this.chartContainer = el)}\n class=\"chart-container\"\n test-id=\"areaChartContainer\"\n ></div>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/q2-chart-donut/index.js CHANGED Viewed

@@ -178,6 +178,9 @@ export class Q2ChartDonut {
       return acc;
     }, []);
   }
+  getMinSliceSizeAsAngle() {
+    return (parseFloat(this.minSliceSize) / 100) * 360;
+  }
   setupChartEvents(chart) {
     chart.on('mouseover', (params) => {
       this.hoveredId = params.data.id;
@@ -201,18 +204,6 @@ export class Q2ChartDonut {
       }, 0);
     });
   }
-  cleanData(data) {
-    const { minSliceSize } = this;
-    const minSize = parseFloat(minSliceSize || '2.5%') / 100;
-    const total = data.reduce((acc, cur) => acc + cur.value, 0);
-    const minValue = total * minSize;
-    const newData = data.map(item => {
-      if (item.value < minValue)
-        return Object.assign(Object.assign({}, item), { value: minValue });
-      return item;
-    });
-    return newData;
-  }
   updateChart(chart) {
     return chart.setOption({
       tooltip: {
@@ -250,7 +241,8 @@ export class Q2ChartDonut {
               color: 'inherit',
             },
           },
-          data: this.cleanData(this.data),
+          minAngle: this.getMinSliceSizeAsAngle(),
+          data: this.data,
         },
       ],
     });
@@ -353,6 +345,14 @@ export class Q2ChartDonut {
       dataIndex: this.getIndexById(selectedId),
     });
   }
+  /**
+   * Returns the chart instance for e2e testing.
+   *
+   * @testOnly
+   */
+  async getChartOptions() {
+    return this.chart.getOption();
+  }
   /// DOM ///
   renderCenterBlock() {
     const { icon, name, value, color } = this.centerData;
@@ -589,7 +589,7 @@ export class Q2ChartDonut {
       },
       "selectedId": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -620,12 +620,17 @@ export class Q2ChartDonut {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted when a slice is selected."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "IDonutChartData",
+          "resolved": "IDonutChartData",
+          "references": {
+            "IDonutChartData": {
+              "location": "import",
+              "path": "q2-tecton-common/lib/types/element-types"
+            }
+          }
         }
       }, {
         "method": "click",
@@ -635,12 +640,17 @@ export class Q2ChartDonut {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted when the center button is clicked.\n\nRequires the `isClickable` prop to be set to `true`."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "IDonutChartData",
+          "resolved": "IDonutChartData",
+          "references": {
+            "IDonutChartData": {
+              "location": "import",
+              "path": "q2-tecton-common/lib/types/element-types"
+            }
+          }
         }
       }];
   }
@@ -699,6 +709,32 @@ export class Q2ChartDonut {
           "text": "Clears any selected slice.",
           "tags": []
         }
+      },
+      "getChartOptions": {
+        "complexType": {
+          "signature": "() => Promise<EChartsCoreOption>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "echarts": {
+              "location": "global"
+            },
+            "EChartsCoreOption": {
+              "location": "import",
+              "path": "echarts/types/dist/core"
+            }
+          },
+          "return": "Promise<ECBasicOption>"
+        },
+        "docs": {
+          "text": "Returns the chart instance for e2e testing.",
+          "tags": [{
+              "name": "testOnly",
+              "text": undefined
+            }]
+        }
       }
     };
   }