q2-tecton-elements 1.10.6 → 1.10.9

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

@@ -1,26 +1,69 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-be8376c0.js';
-import { l as loc } from './index-476b86cc.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-be8376c0.js';
+import { l as loc } from './index-ec6660af.js';
 
-const stylesCss = "q2-carousel .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all .2s}.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25));background-color:var(---tct-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)));border:var(--tct-carousel-pane-border-width, 1px) solid var(--tct-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1,#cccccc)))));border-radius:var(--tct-carousel-pane-border-radius, 8px);padding:var(--tct-carousel-pane-padding, .5rem .5rem .5rem .5rem);min-height:10em}q2-carousel-pane.q2-carousel-pane:focus{box-shadow:none}.q2-carousel-pane:focus .q2-carousel-pane-main-content{outline:none;box-shadow:0 0 0 2px #33B4FF;}.q2-carousel-pane .q2-carousel-pane-main-content:hover{cursor:grab}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}q2-carousel .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel-pane.q2-carousel-pane{cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) *{cursor:pointer}q2-carousel-pane.q2-carousel-pane:focus{box-shadow:none}q2-carousel-pane.q2-carousel-pane:focus .q2-carousel-pane-main-content{outline:none;box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25));background-color:var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 1px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 0.5rem 0.5rem 0.5rem 0.5rem));min-height:10em}";
 
 const Q2Carousel = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.clickCarouselPane = createEvent(this, "clickCarouselPane", 7);
     this.generatePaneClass = (currentIndex) => {
       return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;
     };
+    this.paneClicked = event => {
+      if (this.isActivePane)
+        return;
+      event.preventDefault();
+      this.clickCarouselPane.emit({
+        paneIndex: this.index,
+        pane: this.hostElement
+      });
+    };
   }
   get currentPaneIndex() {
     return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);
   }
+  componentDidLoad() {
+    this.determineDisabledContent();
+  }
+  determineDisabledContent() {
+    const { isActivePane } = this;
+    const focusableElements = this.hostElement.querySelectorAll('q2-btn, a[href], button, [tabindex]:not([tabindex="-1"])');
+    focusableElements.forEach(element => {
+      const hasValidTabIndex = element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;
+      if (hasValidTabIndex) {
+        element.dataset.q2Tabindex = `${element.tabIndex}`;
+      }
+      if (isActivePane) {
+        if (element.hasAttribute('data-q2-tabindex')) {
+          element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));
+          element.removeAttribute('data-q2-tabindex');
+        }
+        else if (element.tagName.startsWith('Q2-')) {
+          element.tabIndex = undefined;
+        }
+        else {
+          element.removeAttribute('tabindex');
+        }
+      }
+      else {
+        element.tabIndex = -1;
+      }
+    });
+  }
   render() {
-    return (h(Host, { class: this.generatePaneClass(this.currentPaneIndex), tabIndex: "0", "aria-hidden": this.hideFromScreenReader, "aria-label": this.label }, h("article", { class: "q2-carousel-pane-main-content" }, h("slot", null), h("span", { class: "sr-only item-count" }, loc('tecton.element.carousel.itemDescription', [
-      (this.currentPaneIndex + 1).toString()
-    ]), loc('tecton.element.carousel.collectionDescription', [
-      (this.siblingCount || 0).toString()
-    ])))));
+    const { label } = this;
+    return (h(Host, { class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
+        ? loc(label)
+        : loc('tecton.element.carousel.itemDescription', [
+          (this.currentPaneIndex + 1).toString(),
+          (this.siblingCount || 0).toString()
+        ]), onClick: this.paneClicked }, h("article", { class: "q2-carousel-pane-main-content" }, h("slot", null))));
   }
   get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "isActivePane": ["determineDisabledContent"]
+  }; }
 };
 Q2Carousel.style = stylesCss;