q2-tecton-elements 1.66.1 → 1.67.0

package/dist/q2-tecton-elements/q2-card-image.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as a, a as r, h as i, H as e, g as c } from "./index-CGkHOjh1.js";
 
-import { h as o, l as s } from "./index-B4WYBDS9.js";
+import { h as o, l as s } from "./index-C4PILj1_.js";
 
 const d = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:flex;flex-direction:column;max-width:100%;box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}:host{--tct-card-image-base-blur:0px;--tct-card-image-primary-color:var(--t-primary, #5446a4);--tct-card-image-secondary-color:var(--t-secondary, #2a7de1);--tct-card-image-tertiary-color:var(--t-tertiary, #6b7280);--tct-card-image-base-gradient-deg:110.95deg;--tct-card-image-base-gradient-left-color:var(--t-gray-2, #1a1a1a);--tct-card-image-base-gradient-left-stop:0.54%;--tct-card-image-base-gradient-middle-color:var(--t-gray-11, #cccccc);--tct-card-image-base-gradient-middle-stop:60.22%;--tct-card-image-base-gradient-right-color:var(--t-gray-2, #1a1a1a);--tct-card-image-base-gradient-right-stop:100%;--tct-card-image-overlay-opacity:1;--tct-card-image-overlay-mix-blend-mode:normal;--tct-card-image-dot-size:0.5px;--tct-card-image-dot-spacing:2px;--tct-card-image-dot-color:rgba(128, 128, 128, 0.5);--tct-card-image-font-color:var(--t-base, #fff);--tct-card-image-text-shadow:0px 0px 1px rgba(0, 0, 0, 0.85);--tct-card-image-status-box-shadow:var(\n      --app-shadow-3,\n      0px 0px 2px rgba(0, 0, 0, 0.12),\n      0px 8px 16px rgba(0, 0, 0, 0.14)\n  );--tct-card-image-status-background-digital:var(--tct-black, #000);--tct-card-image-status-color-digital:var(--tct-white, #fff);--tct-card-image-status-background-enabled:var(--tct-stoplight-info, #0079c1);--tct-card-image-status-color-enabled:var(--tct-white, #fff);--tct-card-image-status-background-disabled:var(--tct-stoplight-alert, #d20a0a);--tct-card-image-status-color-disabled:var(--tct-white, #fff);--tct-card-image-status-background-locked:var(--tct-stoplight-alert, #d20a0a);--tct-card-image-status-color-locked:var(--tct-white, #fff);--tct-card-image-status-background-damaged:var(--tct-stoplight-warning, #c35500);--tct-card-image-status-color-damaged:var(--tct-white, #fff);--tct-card-image-status-background-lost:var(--tct-stoplight-warning, #c35500);--tct-card-image-status-color-lost:var(--tct-white, #fff);--tct-card-image-status-background-stolen:var(--tct-stoplight-warning, #c35500);--tct-card-image-status-color-stolen:var(--tct-white, #fff);--tct-card-image-status-background-lost-or-stolen:var(--tct-stoplight-warning, #c35500);--tct-card-image-status-color-lost-or-stolen:var(--tct-white, #fff)}:host([inline]){display:inline-flex}:host(.horizontal){max-width:var(--tct-card-image-max-width, min(400px, 100%));min-width:var(--tct-card-image-min-width, 40px);width:var(--tct-card-image-width)}:host(.vertical){max-width:var(--tct-card-image-max-width, min(250px, 100%));min-width:var(--tct-card-image-min-width, 25px);width:var(--tct-card-image-width)}:host(.has-action){margin-top:22px;margin-right:22px}:host(.has-action.has-banner){margin-top:11px}:host(:hover) .card-image-container.clickable,:host(:focus-within) .card-image-container.clickable{transform:translateY(-8px) scale(1.03);box-shadow:var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14))}:host(:hover) .card-status-banner.clickable,:host(:focus-within) .card-status-banner.clickable{transform:translateY(-8px) scale(1.03)}:host([disabled]:not([disabled=false])) .card-image-container{opacity:var(--tct-card-image-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}:host([disabled]:not([disabled=false])) .card-status-banner{cursor:not-allowed}.card-wrapper>q2-btn{--const-double-focus-ring:none;width:100%;max-width:100%}.card-wrapper{position:relative;max-width:100%}.card-action{position:absolute;top:0;right:0;transform:translate(50%, -50%);z-index:5}.card-image-container{overflow:hidden;position:relative;border:1px solid transparent;background:linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, rgb(200, 200, 200) 33%, rgb(150, 150, 150)) border-box;background-origin:border-box;background-clip:padding-box, border-box;box-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14))}.card-image-container.inline{display:inline-block}.card-image-container.clickable{cursor:pointer;will-change:transform;transition:transform 0.3s ease, box-shadow 0.3s ease}.card-image-container.block{display:block}.card-image-container.horizontal{aspect-ratio:8/5;border-radius:3%/4.8%;width:var(--tct-card-image-width, 100%);max-width:var(--tct-card-image-max-width, 400px);min-width:var(--tct-card-image-min-width, 40px);flex-shrink:0}.card-image-container.vertical{aspect-ratio:5/8;border-radius:4.8%/3%;width:var(--tct-card-image-width, 100%);max-width:var(--tct-card-image-max-width, 250px);min-width:var(--tct-card-image-min-width, 25px);flex-shrink:0}.card-image,.card-image-overlay{position:absolute;inset:0;width:100%;height:100%}.card-image{z-index:1;filter:blur(var(--tct-card-image-base-blur))}.card-image-overlay{z-index:2;opacity:var(--tct-card-image-overlay-opacity)}.card-image.bg-primary{background-color:var(--tct-card-image-primary-color)}.card-image.bg-secondary{background-color:var(--tct-card-image-secondary-color)}.card-image.bg-tertiary{background-color:var(--tct-card-image-tertiary-color)}.card-image.bg-gradient{background:linear-gradient(var(--tct-card-image-base-gradient-deg), var(--tct-card-image-base-gradient-left-color) var(--tct-card-image-base-gradient-left-stop), var(--tct-card-image-base-gradient-middle-color) var(--tct-card-image-base-gradient-middle-stop), var(--tct-card-image-base-gradient-right-color) var(--tct-card-image-base-gradient-right-stop))}.card-image-overlay.bg-dot{background-image:radial-gradient(circle, var(--tct-card-image-dot-color) var(--tct-card-image-dot-size), transparent var(--tct-card-image-dot-size));background-size:var(--tct-card-image-dot-spacing) var(--tct-card-image-dot-spacing);mix-blend-mode:var(--tct-card-image-overlay-mix-blend-mode);opacity:var(--tct-card-image-overlay-opacity)}.card-image.bg-custom{background-image:var(--tct-card-image-base-url);background-size:cover;background-position:center}.card-image-overlay.bg-custom{background-image:var(--tct-card-image-overlay-url);background-size:cover;background-position:center}.card-status-banner{position:relative;z-index:4;width:fit-content;min-width:33.33%;max-width:72%;height:22px;margin:0 auto -11px;padding:0 12px;border:1px solid rgba(0, 0, 0, 0.2);border-radius:5px/5px;box-shadow:var(--tct-card-image-status-box-shadow);display:flex;align-items:center;justify-content:center}.card-status-banner.vertical{min-width:60%}.card-status-banner.clickable{cursor:pointer;transition:transform 0.3s ease}.card-status-text{font-size:14px;font-family:var(--uux-app-fontFamily, OpenSans, Helvetica Neue, Helvetica, Arial, sans-serif);text-transform:uppercase;white-space:nowrap}.card-status-banner.status-enabled{background-color:var(--tct-card-image-status-background-enabled);color:var(--tct-card-image-status-color-enabled)}.card-status-banner.status-disabled{background-color:var(--tct-card-image-status-background-disabled);color:var(--tct-card-image-status-color-disabled)}.card-status-banner.status-locked{background-color:var(--tct-card-image-status-background-locked);color:var(--tct-card-image-status-color-locked)}.card-status-banner.status-damaged{background-color:var(--tct-card-image-status-background-damaged);color:var(--tct-card-image-status-color-damaged)}.card-status-banner.status-lost{background-color:var(--tct-card-image-status-background-lost);color:var(--tct-card-image-status-color-lost)}.card-status-banner.status-stolen{background-color:var(--tct-card-image-status-background-stolen);color:var(--tct-card-image-status-color-stolen)}.card-status-banner.status-lost-or-stolen{background-color:var(--tct-card-image-status-background-lost-or-stolen);color:var(--tct-card-image-status-color-lost-or-stolen)}.card-status-banner.status-digital{background-color:var(--tct-card-image-status-background-digital);color:var(--tct-card-image-status-color-digital)}.card-details-wrapper{container-type:inline-size;position:relative;z-index:3;height:calc(100% + 2px);width:calc(100% + 2px);margin-left:-1px;margin-top:-1px}.card-text{color:var(--tct-card-image-font-color);font-family:"Open Sans", Arial, sans-serif;font-weight:600;line-height:1;letter-spacing:1.55px;text-shadow:var(--tct-card-image-text-shadow);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.card-details-horizontal{padding:2.5cqw;height:100%;width:100%;overflow:hidden}.horizontal-logo-wrapper{padding:0 1.25cqw;margin:1.25cqw 0 2.5cqw 0;width:70cqw;height:11.25cqw}.horizontal-logo{background-image:var(--tct-card-image-fi-logo, var(--uux-logoImageHighContrast, var(--uux-logoImage)));background-size:contain;background-repeat:no-repeat;background-position:left center;background-origin:content-box;padding:var(--tct-card-image-logo-padding, 2.5cqw 0);width:100%;height:100%}.horizontal-chip{width:15cqw;height:10cqw;margin-left:8.75cqw}.horizontal-chip img{display:block;width:100%;height:100%;object-fit:contain}.horizontal-card-number{padding-top:2.5cqw;text-align:left;font-size:5cqw;height:7.5cqw;width:85cqw;margin-left:5cqw}.horizontal-exp-date-card-type-row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:flex-end;width:100%;height:10cqw;margin:1.25cqw 0}.horizontal-exp-date-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:25cqw;height:100%;margin-left:1.25cqw}.horizontal-exp-date-label{font-size:2.5cqw;margin-bottom:1cqw}.horizontal-exp-date-value{font-size:3.5cqw}.horizontal-card-type{font-size:var(--tct-card-image-type-font-size, 4cqw);color:var(--tct-card-image-type-color, var(--tct-card-image-font-color));margin-right:var(--tct-card-image-type-margin-right, 4.15cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -10.1cqw)}.horizontal-card-type.vendor-mastercard{font-size:var(--tct-card-image-type-font-size, 3cqw);margin-right:var(--tct-card-image-type-margin-right, 1.25cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, 0cqw)}.horizontal-card-type.vendor-visa{font-size:var(--tct-card-image-type-font-size, 3cqw);margin-right:var(--tct-card-image-type-margin-right, 0.09cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -6.25cqw)}.horizontal-card-holder-vendor-row{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%}.horizontal-card-holder-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:73.75cqw;height:10cqw;padding:0 1.25cqw;margin-right:1.25cqw;min-width:0}.horizontal-card-holder-label{font-size:2.5cqw;margin-bottom:1cqw}.horizontal-card-holder-value{font-size:4.5cqw}.horizontal-vendor{width:20cqw;height:12.5cqw;flex-shrink:0}.horizontal-vendor img{display:block;width:100%;height:100%;object-fit:contain}.card-details-vertical{position:relative;z-index:3;padding:4cqw;height:100%;width:100%;overflow:hidden}.vertical-chip{width:16cqw;height:24cqw;margin:12cqw 0 30cqw 46cqw}.vertical-chip img{display:block;width:100%;height:100%;object-fit:contain}.vertical-logo-wrapper{padding:0 2cqw;margin-bottom:4cqw;width:100%;height:18cqw}.vertical-logo{background-image:var(--tct-card-image-fi-logo, var(--uux-logoImageHighContrast, var(--uux-logoImage)));background-size:contain;background-repeat:no-repeat;background-position:center center;background-origin:content-box;padding:var(--tct-card-image-logo-padding, 4cqw 0);width:100%;height:100%}.vertical-card-number{text-align:left;font-size:8cqw;height:12cqw;width:100%;padding:0 2cqw}.vertical-card-holder-wrapper{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;width:100%;height:16cqw;padding:0 2cqw;min-width:0}.vertical-card-holder-label{font-size:4cqw;margin-bottom:1.6cqw}.vertical-card-holder-value{font-size:7.2cqw}.vertical-exp-date-card-type-row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:flex-end;width:100%;height:16cqw}.vertical-exp-date-wrapper{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;width:40cqw;height:100%;margin-left:2cqw;padding-bottom:2cqw}.vertical-exp-date-label{font-size:4cqw;margin-bottom:1.6cqw}.vertical-exp-date-value{font-size:5.6cqw}.vertical-card-type{font-size:var(--tct-card-image-type-font-size, 6.4cqw);padding-bottom:2cqw;color:var(--tct-card-image-type-color, var(--tct-card-image-font-color));margin-right:var(--tct-card-image-type-margin-right, 3cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -19cqw)}.vertical-card-type.vendor-mastercard{font-size:var(--tct-card-image-type-font-size, 4.8cqw);margin-right:var(--tct-card-image-type-margin-right, 2cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, 0cqw)}.vertical-card-type.vendor-visa{font-size:var(--tct-card-image-type-font-size, 4.8cqw);margin-right:var(--tct-card-image-type-margin-right, 0.05625cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -10cqw)}.vertical-vendor-row{display:flex;justify-content:end}.vertical-vendor{width:32cqw;height:20cqw;flex-shrink:0}.vertical-vendor img{display:block;width:100%;height:100%;object-fit:contain}';
 
@@ -442,14 +442,14 @@ const n = class {
     }, this.renderCardContent()) : this.renderCardContent();
     const a = !!this.cardStatus && this.size === "large";
     return i(e, {
-      key: "19424c69e664876eec4045ca5c798f5372800d26",
+      key: "d1592e6d7239707ec8608f9458bc0066bca5d407",
       class: {
         [`${this.orientation}`]: true,
         "has-action": this.hasActionSlotContent,
         "has-banner": a
       }
     }, this.renderStatusBanner(), i("div", {
-      key: "e59ce44f131c51a8ea0f824b89fc5ae51e2ba200",
+      key: "e45f8f705256b70e527d5e95d3a13b7c9e1938e2",
       class: "card-wrapper"
     }, t, this.renderAction()));
   }

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

@@ -1,6 +1,6 @@
 import { r as a, c as r, h as t, F as c, g as o } from "./index-CGkHOjh1.js";
 
-import { o as e, i } from "./index-B4WYBDS9.js";
+import { o as e, i } from "./index-C4PILj1_.js";
 
 import { m as n } from "./mirror-emit-DUjY_ucm.js";
 

package/dist/q2-tecton-elements/q2-carousel-pane.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-carousel-pane.entry.esm.js","sources":["src/components/q2-carousel-pane/q2-carousel-pane.scss?tag=q2-carousel-pane","src/components/q2-carousel-pane/q2-carousel-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\nq2-carousel {\n    .swiper-slide {\n        flex-shrink: 0;\n        width: 100%;\n        height: 100%;\n        position: relative;\n        transition-property: transform;\n        transition: all 0.2s;\n    }\n\n    .q2-carousel-swiper-container {\n        &.full-width-display,\n        &.frameless-display {\n            q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content {\n                background: var-list(--tct-carousel-background, --app-base, #ffffff);\n            }\n        }\n        &.full-width-display {\n            q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content {\n                box-shadow: var-list(--tct-carousel-pane-box-shadow, --comp-carousel-shadow);\n            }\n        }\n    }\n}\n\nq2-carousel-pane.q2-carousel-pane {\n    --comp-carousel-pane-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-carousel-shadow: #{var-list(--app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"))};\n\n    cursor: grab;\n\n    &:not([is-active-pane]) {\n        * {\n            cursor: pointer;\n        }\n\n        .q2-carousel-pane-main-content {\n            background: var-list(--tct-carousel-pane-inactive-background,  --tct-carousel-background, --app-base, #ffffff);\n            box-shadow: var-list(--tct-carousel-pane-inactive-box-shadow,  --tct-carousel-pane-box-shadow,  --comp-carousel-shadow);\n        }\n    }\n\n    &:focus-visible {\n        box-shadow: none;\n        .q2-carousel-pane-main-content {\n            outline: none;\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n\n    button {\n        border: 0;\n        background: transparent;\n        transition: all 0.2s;\n        opacity: 0.3;\n        cursor: pointer;\n\n        &:hover {\n            opacity: 0.7;\n        }\n    }\n\n    .q2-carousel-pane-main-content {\n        box-shadow: var(--tct-carousel-pane-box-shadow, --comp-carousel-shadow);\n        transition: var(--comp-carousel-pane-tween);\n        background: var-list(\n            --tct-carousel-background,\n            var-prefixer(carousel-background-color),\n            --tct-white,\n            --app-white,\n            #ffffff\n        );\n        border: var-list(var-prefixer(carousel-pane-border-width), 0px) solid\n            var-list(\n                var-prefixer(carousel-pane-border-color),\n                var-prefixer(gray-11),\n                --tct-gray-l1,\n                --app-gray-l1,\n                #cccccc\n            );\n        border-radius: var-list(var-prefixer(carousel-pane-border-radius), 8px);\n        padding: var-list(var-prefixer(carousel-pane-padding), 7px);\n        height: var-list(var-prefixer(carousel-pane-height), 10em);\n\n\n    }\n\n    .q2-carousel-pane-main-content:hover {\n        box-shadow: var(--const-double-focus-ring), var(--comp-carousel-shadow);\n    }\n    &[slot-frameless]:not([slot-frameless='false']) {\n        .q2-carousel-pane-main-content {\n            box-shadow: none;\n            border: 0;\n            border-radius: 0;\n            padding: 0;\n        }\n    }\n}\n","import { hasValidParent } from '@/utils/component';\nimport { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Carousel Pane\n * @category Display\n * @summary Use as a single slide within a Carousel.\n */\n@Component({ tag: 'q2-carousel-pane', shadow: false, styleUrl: 'q2-carousel-pane.scss' })\nexport class Q2CarouselPane implements ComponentInterface {\n    // #region Own Properties\n\n    disabledElements?: HTMLElement[] = [];\n    mutationObserver?: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Used by `q2-carousel` to determine the pane's index.\n     * @private\n     */\n    @Prop({ reflect: false })\n    index: number;\n\n    /**\n     * Used by `q2-carousel` to indicate which pane is currently active.\n     * @private\n     */\n    @Prop({ reflect: true })\n    isActivePane: boolean;\n\n    /**\n     * Text used only as an `aria-label` for accessibility purposes.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Used by `q2-carousel` to indicate how many panes are in the carousel.\n     * @private\n     */\n    @Prop({ reflect: false })\n    siblingCount: number;\n\n    /**\n     * Used by `q2-carousel` to indicate the pane should be frameless.\n     * @private\n     */\n    @Prop({ reflect: true })\n    slotFrameless: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the pane is clicked.\n     * @deprecated Use 'tctClickCarouselPane' instead\n     */\n    @Event()\n    clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n    /**\n     * Emitted when the pane is clicked.\n     */\n    @Event()\n    tctClickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n        this.removePointerMoveListeners();\n    }\n\n    componentWillLoad() {\n        hasValidParent(this.hostElement, 'div.q2-carousel-swiper-wrapper');\n    }\n\n    componentDidLoad(): void {\n        this.determineDisabledContent();\n        this.addPointerMoveListeners();\n\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(this.onMutationObserved);\n            observer.observe(this.hostElement, { childList: true, subtree: true });\n            this.mutationObserver = observer;\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('isActivePane')\n    determineDisabledContent() {\n        const { isActivePane } = this;\n        const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n            'q2-btn, q2-dropdown, q2-item, q2-chart-donut, 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.setAttribute('data-q2-tabindex', `${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 {\n                    element.removeAttribute('tabindex');\n                }\n            } else {\n                element.tabIndex = -1;\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get currentPaneIndex() {\n        return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n    }\n\n    addPointerMoveListeners() {\n        const elementsToDisable = ['q2-dropdown', 'q2-dropdown-item'];\n        this.disabledElements = Array.from(this.hostElement.querySelectorAll<HTMLElement>(elementsToDisable.join(',')));\n        this.disabledElements.forEach(element => {\n            element.addEventListener('pointermove', this.pointerMoveHandler);\n        });\n    }\n\n    generatePaneClass = (currentIndex: number) => {\n        return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n    };\n\n    onMutationObserved = () => {\n        this.removePointerMoveListeners();\n        this.addPointerMoveListeners();\n    };\n\n    paneClicked = event => {\n        if (this.isActivePane) return;\n        event.preventDefault();\n        mirrorEmit(this, ['clickCarouselPane', 'tctClickCarouselPane'], {\n            paneIndex: this.index,\n            pane: this.hostElement,\n        });\n    };\n\n    pointerMoveHandler = (event: PointerEvent) => {\n        event.stopPropagation();\n    };\n\n    removePointerMoveListeners() {\n        this.disabledElements.forEach(element => {\n            element.removeEventListener('pointermove', this.pointerMoveHandler);\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\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    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-carousel-pane.entry.esm.js","sources":["src/components/q2-carousel-pane/q2-carousel-pane.scss?tag=q2-carousel-pane","src/components/q2-carousel-pane/q2-carousel-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\nq2-carousel {\n    .swiper-slide {\n        flex-shrink: 0;\n        width: 100%;\n        height: 100%;\n        position: relative;\n        transition-property: transform;\n        transition: all 0.2s;\n    }\n\n    .q2-carousel-swiper-container {\n        &.full-width-display,\n        &.frameless-display {\n            q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content {\n                background: var-list(--tct-carousel-background, --app-base, #ffffff);\n            }\n        }\n        &.full-width-display {\n            q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content {\n                box-shadow: var-list(--tct-carousel-pane-box-shadow, --comp-carousel-shadow);\n            }\n        }\n    }\n}\n\nq2-carousel-pane.q2-carousel-pane {\n    --comp-carousel-pane-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-carousel-shadow: #{var-list(--app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"))};\n\n    cursor: grab;\n\n    &:not([is-active-pane]) {\n        .q2-carousel-pane-main-content {\n            background: var-list(--tct-carousel-pane-inactive-background,  --tct-carousel-background, --app-base, #ffffff);\n            box-shadow: var-list(--tct-carousel-pane-inactive-box-shadow,  --tct-carousel-pane-box-shadow,  --comp-carousel-shadow);\n        }\n    }\n\n    &:focus-visible {\n        .q2-carousel-pane-main-content {\n            outline: none;\n            box-shadow: var(--tct-carousel-pane-focus-visible-box-shadow, --const-double-focus-ring);\n        }\n    }\n\n    button {\n        border: 0;\n        background: transparent;\n        transition: all 0.2s;\n        opacity: 0.3;\n        cursor: pointer;\n\n        &:hover {\n            opacity: 0.7;\n        }\n    }\n\n    .q2-carousel-pane-main-content {\n        box-shadow: var-list(--tct-carousel-pane-box-shadow, --comp-carousel-shadow);\n        transition: var(--comp-carousel-pane-tween);\n        background: var-list(\n            --tct-carousel-background,\n            var-prefixer(carousel-background-color),\n            --tct-white,\n            --app-white,\n            #ffffff\n        );\n        border: var-list(var-prefixer(carousel-pane-border-width), 0px) solid\n            var-list(\n                var-prefixer(carousel-pane-border-color),\n                var-prefixer(gray-11),\n                --tct-gray-l1,\n                --app-gray-l1,\n                #cccccc\n            );\n        border-radius: var-list(var-prefixer(carousel-pane-border-radius), 8px);\n        padding: var-list(var-prefixer(carousel-pane-padding), 7px);\n        height: var-list(var-prefixer(carousel-pane-height), 10em);\n    }\n\n    &[slot-frameless]:not([slot-frameless='false']) {\n        .q2-carousel-pane-main-content {\n            box-shadow: none;\n            border: 0;\n            border-radius: 0;\n            padding: 0;\n        }\n    }\n}\n","import { hasValidParent } from '@/utils/component';\nimport { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Carousel Pane\n * @category Display\n * @summary Use as a single slide within a Carousel.\n */\n@Component({ tag: 'q2-carousel-pane', shadow: false, styleUrl: 'q2-carousel-pane.scss' })\nexport class Q2CarouselPane implements ComponentInterface {\n    // #region Own Properties\n\n    disabledElements?: HTMLElement[] = [];\n    mutationObserver?: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Used by `q2-carousel` to determine the pane's index.\n     * @private\n     */\n    @Prop({ reflect: false })\n    index: number;\n\n    /**\n     * Used by `q2-carousel` to indicate which pane is currently active.\n     * @private\n     */\n    @Prop({ reflect: true })\n    isActivePane: boolean;\n\n    /**\n     * Text used only as an `aria-label` for accessibility purposes.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Used by `q2-carousel` to indicate how many panes are in the carousel.\n     * @private\n     */\n    @Prop({ reflect: false })\n    siblingCount: number;\n\n    /**\n     * Used by `q2-carousel` to indicate the pane should be frameless.\n     * @private\n     */\n    @Prop({ reflect: true })\n    slotFrameless: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the pane is clicked.\n     * @deprecated Use 'tctClickCarouselPane' instead\n     */\n    @Event()\n    clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n    /**\n     * Emitted when the pane is clicked.\n     */\n    @Event()\n    tctClickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n        this.removePointerMoveListeners();\n    }\n\n    componentWillLoad() {\n        hasValidParent(this.hostElement, 'div.q2-carousel-swiper-wrapper');\n    }\n\n    componentDidLoad(): void {\n        this.determineDisabledContent();\n        this.addPointerMoveListeners();\n\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(this.onMutationObserved);\n            observer.observe(this.hostElement, { childList: true, subtree: true });\n            this.mutationObserver = observer;\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('isActivePane')\n    determineDisabledContent() {\n        const { isActivePane } = this;\n        const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n            'q2-btn, q2-dropdown, q2-item, q2-chart-donut, 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.setAttribute('data-q2-tabindex', `${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 {\n                    element.removeAttribute('tabindex');\n                }\n            } else {\n                element.tabIndex = -1;\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get currentPaneIndex() {\n        return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n    }\n\n    addPointerMoveListeners() {\n        const elementsToDisable = ['q2-dropdown', 'q2-dropdown-item'];\n        this.disabledElements = Array.from(this.hostElement.querySelectorAll<HTMLElement>(elementsToDisable.join(',')));\n        this.disabledElements.forEach(element => {\n            element.addEventListener('pointermove', this.pointerMoveHandler);\n        });\n    }\n\n    generatePaneClass = (currentIndex: number) => {\n        return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n    };\n\n    onMutationObserved = () => {\n        this.removePointerMoveListeners();\n        this.addPointerMoveListeners();\n    };\n\n    paneClicked = event => {\n        if (this.isActivePane) return;\n        event.preventDefault();\n        mirrorEmit(this, ['clickCarouselPane', 'tctClickCarouselPane'], {\n            paneIndex: this.index,\n            pane: this.hostElement,\n        });\n    };\n\n    pointerMoveHandler = (event: PointerEvent) => {\n        event.stopPropagation();\n    };\n\n    removePointerMoveListeners() {\n        this.disabledElements.forEach(element => {\n            element.removeEventListener('pointermove', this.pointerMoveHandler);\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\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    // #endregion\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,16 +1,16 @@
-import { r as e, c as a, h as o, H as t, g as r } from "./index-CGkHOjh1.js";
+import { r as e, c as a, h as t, H as r, g as o } from "./index-CGkHOjh1.js";
 
-import { a as n } from "./component-DVxzK3WH.js";
+import { a as s } from "./component-DVxzK3WH.js";
 
-import { l as s } from "./index-B4WYBDS9.js";
+import { l as n } from "./index-C4PILj1_.js";
 
 import { m as i } from "./mirror-emit-DUjY_ucm.js";
 
-const c = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}q2-carousel .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel .q2-carousel-swiper-container.full-width-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content,q2-carousel .q2-carousel-swiper-container.frameless-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{background:var(--tct-carousel-background, var(--app-base, #ffffff))}q2-carousel .q2-carousel-swiper-container.full-width-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{box-shadow:var(--tct-carousel-pane-box-shadow, var(--comp-carousel-shadow))}q2-carousel-pane.q2-carousel-pane{--comp-carousel-pane-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-carousel-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) *{cursor:pointer}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{background:var(--tct-carousel-pane-inactive-background, var(--tct-carousel-background, var(--app-base, #ffffff)));box-shadow:var(--tct-carousel-pane-inactive-box-shadow, var(--tct-carousel-pane-box-shadow, var(--comp-carousel-shadow)))}q2-carousel-pane.q2-carousel-pane:focus-visible{box-shadow:none}q2-carousel-pane.q2-carousel-pane:focus-visible .q2-carousel-pane-main-content{outline:none;box-shadow:var(--const-double-focus-ring)}q2-carousel-pane.q2-carousel-pane button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}q2-carousel-pane.q2-carousel-pane button:hover{opacity:0.7}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:var(--tct-carousel-pane-box-shadow, --comp-carousel-shadow);transition:var(--comp-carousel-pane-tween);background:var(--tct-carousel-background, var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 0px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 7px));height:var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content:hover{box-shadow:var(--const-double-focus-ring), var(--comp-carousel-shadow)}q2-carousel-pane.q2-carousel-pane[slot-frameless]:not([slot-frameless=false]) .q2-carousel-pane-main-content{box-shadow:none;border:0;border-radius:0;padding:0}";
+const c = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}q2-carousel .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel .q2-carousel-swiper-container.full-width-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content,q2-carousel .q2-carousel-swiper-container.frameless-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{background:var(--tct-carousel-background, var(--app-base, #ffffff))}q2-carousel .q2-carousel-swiper-container.full-width-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{box-shadow:var(--tct-carousel-pane-box-shadow, var(--comp-carousel-shadow))}q2-carousel-pane.q2-carousel-pane{--comp-carousel-pane-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-carousel-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{background:var(--tct-carousel-pane-inactive-background, var(--tct-carousel-background, var(--app-base, #ffffff)));box-shadow:var(--tct-carousel-pane-inactive-box-shadow, var(--tct-carousel-pane-box-shadow, var(--comp-carousel-shadow)))}q2-carousel-pane.q2-carousel-pane:focus-visible .q2-carousel-pane-main-content{outline:none;box-shadow:var(--tct-carousel-pane-focus-visible-box-shadow, --const-double-focus-ring)}q2-carousel-pane.q2-carousel-pane button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}q2-carousel-pane.q2-carousel-pane button:hover{opacity:0.7}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:var(--tct-carousel-pane-box-shadow, var(--comp-carousel-shadow));transition:var(--comp-carousel-pane-tween);background:var(--tct-carousel-background, var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 0px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 7px));height:var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em))}q2-carousel-pane.q2-carousel-pane[slot-frameless]:not([slot-frameless=false]) .q2-carousel-pane-main-content{box-shadow:none;border:0;border-radius:0;padding:0}";
 
 const l = class {
-  constructor(o) {
-    e(this, o);
+  constructor(t) {
+    e(this, t);
     this.clickCarouselPane = a(this, "clickCarouselPane", 7);
     this.tctClickCarouselPane = a(this, "tctClickCarouselPane", 7);
     // #region Own Properties
@@ -42,7 +42,7 @@ const l = class {
     this.removePointerMoveListeners();
   }
   componentWillLoad() {
-    n(this.hostElement, "div.q2-carousel-swiper-wrapper");
+    s(this.hostElement, "div.q2-carousel-swiper-wrapper");
   }
   componentDidLoad() {
     this.determineDisabledContent();
@@ -62,8 +62,8 @@ const l = class {
     const {isActivePane: e} = this;
     const a = this.hostElement.querySelectorAll('q2-btn, q2-dropdown, q2-item, q2-chart-donut, a[href], button, [tabindex]:not([tabindex="-1"])');
     a.forEach((a => {
-      const o = a.hasAttribute("tabindex") && parseInt(a.getAttribute("tabindex")) >= 0;
-      if (o) {
+      const t = a.hasAttribute("tabindex") && parseInt(a.getAttribute("tabindex")) >= 0;
+      if (t) {
         a.setAttribute("data-q2-tabindex", `${a.tabIndex}`);
       }
       if (e) {
@@ -99,24 +99,24 @@ const l = class {
   // #region Render Methods
   render() {
     const {label: e} = this;
-    return o(t, {
-      key: "c321264b11e25ec101280695fd2f869b92a18e26",
+    return t(r, {
+      key: "156420cbdaf48d8d1e6e14c05e745ff0df308a2a",
       class: this.generatePaneClass(this.currentPaneIndex),
       tabIndex: this.isActivePane ? 0 : -1,
       role: "group",
       "aria-roledescription": "slide",
       "aria-hidden": this.isActivePane ? undefined : "true",
-      "aria-label": e ? s(e) : s("tecton.element.carousel.itemDescription", [ (this.currentPaneIndex + 1).toString(), (this.siblingCount || 0).toString() ]),
+      "aria-label": e ? n(e) : n("tecton.element.carousel.itemDescription", [ (this.currentPaneIndex + 1).toString(), (this.siblingCount || 0).toString() ]),
       onClick: this.paneClicked
-    }, o("article", {
-      key: "c506d1bdbbd434483a9447cce1a898b540cac6f2",
+    }, t("article", {
+      key: "2f61bdfa9d9e4413941d0ca2f1edc9fc2cd48e8e",
       class: "q2-carousel-pane-main-content"
-    }, o("slot", {
-      key: "406d356278c375ff44431c9df2cad1acac933be2"
+    }, t("slot", {
+      key: "d498b8a73ba1a668bb768891d37b2303db976012"
     })));
   }
   get hostElement() {
-    return r(this);
+    return o(this);
   }
   static get watchers() {
     return {

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

@@ -1 +1 @@
-{"version":3,"names":["q2CarouselPaneCss","Q2CarouselPane","constructor","hostRef","this","disabledElements","generatePaneClass","currentIndex","onMutationObserved","removePointerMoveListeners","addPointerMoveListeners","paneClicked","event","isActivePane","preventDefault","mirrorEmit","paneIndex","index","pane","hostElement","pointerMoveHandler","stopPropagation","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","hasValidParent","componentDidLoad","determineDisabledContent","MutationObserver","observer","observe","childList","subtree","focusableElements","querySelectorAll","forEach","element","hasValidTabIndex","hasAttribute","parseInt","getAttribute","setAttribute","tabIndex","removeAttribute","currentPaneIndex","Array","prototype","indexOf","call","parentElement","children","elementsToDisable","from","join","addEventListener","removeEventListener","render","label","h","Host","key","class","role","undefined","loc","toString","siblingCount","onClick"],"sources":["src/components/q2-carousel-pane/q2-carousel-pane.scss?tag=q2-carousel-pane","src/components/q2-carousel-pane/q2-carousel-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\nq2-carousel {\n    .swiper-slide {\n        flex-shrink: 0;\n        width: 100%;\n        height: 100%;\n        position: relative;\n        transition-property: transform;\n        transition: all 0.2s;\n    }\n\n    .q2-carousel-swiper-container {\n        &.full-width-display,\n        &.frameless-display {\n            q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content {\n                background: var-list(--tct-carousel-background, --app-base, #ffffff);\n            }\n        }\n        &.full-width-display {\n            q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content {\n                box-shadow: var-list(--tct-carousel-pane-box-shadow, --comp-carousel-shadow);\n            }\n        }\n    }\n}\n\nq2-carousel-pane.q2-carousel-pane {\n    --comp-carousel-pane-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-carousel-shadow: #{var-list(--app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"))};\n\n    cursor: grab;\n\n    &:not([is-active-pane]) {\n        * {\n            cursor: pointer;\n        }\n\n        .q2-carousel-pane-main-content {\n            background: var-list(--tct-carousel-pane-inactive-background,  --tct-carousel-background, --app-base, #ffffff);\n            box-shadow: var-list(--tct-carousel-pane-inactive-box-shadow,  --tct-carousel-pane-box-shadow,  --comp-carousel-shadow);\n        }\n    }\n\n    &:focus-visible {\n        box-shadow: none;\n        .q2-carousel-pane-main-content {\n            outline: none;\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n\n    button {\n        border: 0;\n        background: transparent;\n        transition: all 0.2s;\n        opacity: 0.3;\n        cursor: pointer;\n\n        &:hover {\n            opacity: 0.7;\n        }\n    }\n\n    .q2-carousel-pane-main-content {\n        box-shadow: var(--tct-carousel-pane-box-shadow, --comp-carousel-shadow);\n        transition: var(--comp-carousel-pane-tween);\n        background: var-list(\n            --tct-carousel-background,\n            var-prefixer(carousel-background-color),\n            --tct-white,\n            --app-white,\n            #ffffff\n        );\n        border: var-list(var-prefixer(carousel-pane-border-width), 0px) solid\n            var-list(\n                var-prefixer(carousel-pane-border-color),\n                var-prefixer(gray-11),\n                --tct-gray-l1,\n                --app-gray-l1,\n                #cccccc\n            );\n        border-radius: var-list(var-prefixer(carousel-pane-border-radius), 8px);\n        padding: var-list(var-prefixer(carousel-pane-padding), 7px);\n        height: var-list(var-prefixer(carousel-pane-height), 10em);\n\n\n    }\n\n    .q2-carousel-pane-main-content:hover {\n        box-shadow: var(--const-double-focus-ring), var(--comp-carousel-shadow);\n    }\n    &[slot-frameless]:not([slot-frameless='false']) {\n        .q2-carousel-pane-main-content {\n            box-shadow: none;\n            border: 0;\n            border-radius: 0;\n            padding: 0;\n        }\n    }\n}\n","import { hasValidParent } from '@/utils/component';\nimport { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Carousel Pane\n * @category Display\n * @summary Use as a single slide within a Carousel.\n */\n@Component({ tag: 'q2-carousel-pane', shadow: false, styleUrl: 'q2-carousel-pane.scss' })\nexport class Q2CarouselPane implements ComponentInterface {\n    // #region Own Properties\n\n    disabledElements?: HTMLElement[] = [];\n    mutationObserver?: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Used by `q2-carousel` to determine the pane's index.\n     * @private\n     */\n    @Prop({ reflect: false })\n    index: number;\n\n    /**\n     * Used by `q2-carousel` to indicate which pane is currently active.\n     * @private\n     */\n    @Prop({ reflect: true })\n    isActivePane: boolean;\n\n    /**\n     * Text used only as an `aria-label` for accessibility purposes.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Used by `q2-carousel` to indicate how many panes are in the carousel.\n     * @private\n     */\n    @Prop({ reflect: false })\n    siblingCount: number;\n\n    /**\n     * Used by `q2-carousel` to indicate the pane should be frameless.\n     * @private\n     */\n    @Prop({ reflect: true })\n    slotFrameless: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the pane is clicked.\n     * @deprecated Use 'tctClickCarouselPane' instead\n     */\n    @Event()\n    clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n    /**\n     * Emitted when the pane is clicked.\n     */\n    @Event()\n    tctClickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n        this.removePointerMoveListeners();\n    }\n\n    componentWillLoad() {\n        hasValidParent(this.hostElement, 'div.q2-carousel-swiper-wrapper');\n    }\n\n    componentDidLoad(): void {\n        this.determineDisabledContent();\n        this.addPointerMoveListeners();\n\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(this.onMutationObserved);\n            observer.observe(this.hostElement, { childList: true, subtree: true });\n            this.mutationObserver = observer;\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('isActivePane')\n    determineDisabledContent() {\n        const { isActivePane } = this;\n        const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n            'q2-btn, q2-dropdown, q2-item, q2-chart-donut, 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.setAttribute('data-q2-tabindex', `${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 {\n                    element.removeAttribute('tabindex');\n                }\n            } else {\n                element.tabIndex = -1;\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get currentPaneIndex() {\n        return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n    }\n\n    addPointerMoveListeners() {\n        const elementsToDisable = ['q2-dropdown', 'q2-dropdown-item'];\n        this.disabledElements = Array.from(this.hostElement.querySelectorAll<HTMLElement>(elementsToDisable.join(',')));\n        this.disabledElements.forEach(element => {\n            element.addEventListener('pointermove', this.pointerMoveHandler);\n        });\n    }\n\n    generatePaneClass = (currentIndex: number) => {\n        return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n    };\n\n    onMutationObserved = () => {\n        this.removePointerMoveListeners();\n        this.addPointerMoveListeners();\n    };\n\n    paneClicked = event => {\n        if (this.isActivePane) return;\n        event.preventDefault();\n        mirrorEmit(this, ['clickCarouselPane', 'tctClickCarouselPane'], {\n            paneIndex: this.index,\n            pane: this.hostElement,\n        });\n    };\n\n    pointerMoveHandler = (event: PointerEvent) => {\n        event.stopPropagation();\n    };\n\n    removePointerMoveListeners() {\n        this.disabledElements.forEach(element => {\n            element.removeEventListener('pointermove', this.pointerMoveHandler);\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\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    // #endregion\n}\n"],"mappings":";;;;;;;;AAAA,MAAMA,IAAoB;;MCWbC,IAAc;EAD3B,WAAAC,CAAAC;;;;;QAIIC,KAAgBC,mBAAmB;IAuInCD,KAAAE,oBAAqBC,KACV,kDAAkDA;IAG7DH,KAAkBI,qBAAG;MACjBJ,KAAKK;MACLL,KAAKM;AAAyB;IAGlCN,KAAWO,cAAGC;MACV,IAAIR,KAAKS,cAAc;MACvBD,EAAME;MACNC,EAAWX,MAAM,EAAC,qBAAqB,0BAAyB;QAC5DY,WAAWZ,KAAKa;QAChBC,MAAMd,KAAKe;;AACb;IAGNf,KAAAgB,qBAAsBR;MAClBA,EAAMS;AAAiB;AAwC9B;;;EAhIG,oBAAAC;IACI,IAAIlB,KAAKmB,kBAAkB;MACvBnB,KAAKmB,iBAAiBC;MACtBpB,KAAKmB,mBAAmB;;IAE5BnB,KAAKK;;EAGT,iBAAAgB;IACIC,EAAetB,KAAKe,aAAa;;EAGrC,gBAAAQ;IACIvB,KAAKwB;IACLxB,KAAKM;IAEL,WAAWmB,qBAAqB,aAAa;MACzC,MAAMC,IAAW,IAAID,iBAAiBzB,KAAKI;MAC3CsB,EAASC,QAAQ3B,KAAKe,aAAa;QAAEa,WAAW;QAAMC,SAAS;;MAC/D7B,KAAKmB,mBAAmBO;;;;;EAQhC,wBAAAF;IACI,OAAMf,cAAEA,KAAiBT;IACzB,MAAM8B,IAAoB9B,KAAKe,YAAYgB,iBACvC;IAGJD,EAAkBE,SAAQC;MACtB,MAAMC,IACFD,EAAQE,aAAa,eAAeC,SAASH,EAAQI,aAAa,gBAAgB;MAEtF,IAAIH,GAAkB;QAClBD,EAAQK,aAAa,oBAAoB,GAAGL,EAAQM;;MAGxD,IAAI9B,GAAc;QACd,IAAIwB,EAAQE,aAAa,qBAAqB;UAC1CF,EAAQM,WAAWH,SAASH,EAAQI,aAAa;UACjDJ,EAAQO,gBAAgB;eACrB;UACHP,EAAQO,gBAAgB;;aAEzB;QACHP,EAAQM,YAAW;;;;;;EAQ/B,oBAAIE;IACA,OAAOC,MAAMC,UAAUC,QAAQC,KAAK7C,KAAKe,YAAY+B,cAAcC,UAAU/C,KAAKe;;EAGtF,uBAAAT;IACI,MAAM0C,IAAoB,EAAC,eAAe;IAC1ChD,KAAKC,mBAAmByC,MAAMO,KAAKjD,KAAKe,YAAYgB,iBAA8BiB,EAAkBE,KAAK;IACzGlD,KAAKC,iBAAiB+B,SAAQC;MAC1BA,EAAQkB,iBAAiB,eAAenD,KAAKgB;AAAmB;;EA0BxE,0BAAAX;IACIL,KAAKC,iBAAiB+B,SAAQC;MAC1BA,EAAQmB,oBAAoB,eAAepD,KAAKgB;AAAmB;;;;EAO3E,MAAAqC;IACI,OAAMC,OAAEA,KAAUtD;IAElB,OACIuD,EAACC,GAAI;MAAAC,KAAA;MACDC,OAAO1D,KAAKE,kBAAkBF,KAAKyC;MACnCF,UAAUvC,KAAKS,eAAe,KAAI;MAClCkD,MAAK;MACgB;MACR,eAAA3D,KAAKS,eAAemD,YAAY;MAAM,cAE/CN,IACMO,EAAIP,KACJO,EAAI,2CAA2C,GAC1C7D,KAAKyC,mBAAmB,GAAGqB,aAC3B9D,KAAK+D,gBAAgB,GAAGD;MAGvCE,SAAShE,KAAKO;OAEdgD,EAAS;MAAAE,KAAA;MAAAC,OAAM;OACXH,EAAa;MAAAE,KAAA","ignoreList":[]}
+{"version":3,"names":["q2CarouselPaneCss","Q2CarouselPane","constructor","hostRef","this","disabledElements","generatePaneClass","currentIndex","onMutationObserved","removePointerMoveListeners","addPointerMoveListeners","paneClicked","event","isActivePane","preventDefault","mirrorEmit","paneIndex","index","pane","hostElement","pointerMoveHandler","stopPropagation","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","hasValidParent","componentDidLoad","determineDisabledContent","MutationObserver","observer","observe","childList","subtree","focusableElements","querySelectorAll","forEach","element","hasValidTabIndex","hasAttribute","parseInt","getAttribute","setAttribute","tabIndex","removeAttribute","currentPaneIndex","Array","prototype","indexOf","call","parentElement","children","elementsToDisable","from","join","addEventListener","removeEventListener","render","label","h","Host","key","class","role","undefined","loc","toString","siblingCount","onClick"],"sources":["src/components/q2-carousel-pane/q2-carousel-pane.scss?tag=q2-carousel-pane","src/components/q2-carousel-pane/q2-carousel-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\nq2-carousel {\n    .swiper-slide {\n        flex-shrink: 0;\n        width: 100%;\n        height: 100%;\n        position: relative;\n        transition-property: transform;\n        transition: all 0.2s;\n    }\n\n    .q2-carousel-swiper-container {\n        &.full-width-display,\n        &.frameless-display {\n            q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content {\n                background: var-list(--tct-carousel-background, --app-base, #ffffff);\n            }\n        }\n        &.full-width-display {\n            q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content {\n                box-shadow: var-list(--tct-carousel-pane-box-shadow, --comp-carousel-shadow);\n            }\n        }\n    }\n}\n\nq2-carousel-pane.q2-carousel-pane {\n    --comp-carousel-pane-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-carousel-shadow: #{var-list(--app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"))};\n\n    cursor: grab;\n\n    &:not([is-active-pane]) {\n        .q2-carousel-pane-main-content {\n            background: var-list(--tct-carousel-pane-inactive-background,  --tct-carousel-background, --app-base, #ffffff);\n            box-shadow: var-list(--tct-carousel-pane-inactive-box-shadow,  --tct-carousel-pane-box-shadow,  --comp-carousel-shadow);\n        }\n    }\n\n    &:focus-visible {\n        .q2-carousel-pane-main-content {\n            outline: none;\n            box-shadow: var(--tct-carousel-pane-focus-visible-box-shadow, --const-double-focus-ring);\n        }\n    }\n\n    button {\n        border: 0;\n        background: transparent;\n        transition: all 0.2s;\n        opacity: 0.3;\n        cursor: pointer;\n\n        &:hover {\n            opacity: 0.7;\n        }\n    }\n\n    .q2-carousel-pane-main-content {\n        box-shadow: var-list(--tct-carousel-pane-box-shadow, --comp-carousel-shadow);\n        transition: var(--comp-carousel-pane-tween);\n        background: var-list(\n            --tct-carousel-background,\n            var-prefixer(carousel-background-color),\n            --tct-white,\n            --app-white,\n            #ffffff\n        );\n        border: var-list(var-prefixer(carousel-pane-border-width), 0px) solid\n            var-list(\n                var-prefixer(carousel-pane-border-color),\n                var-prefixer(gray-11),\n                --tct-gray-l1,\n                --app-gray-l1,\n                #cccccc\n            );\n        border-radius: var-list(var-prefixer(carousel-pane-border-radius), 8px);\n        padding: var-list(var-prefixer(carousel-pane-padding), 7px);\n        height: var-list(var-prefixer(carousel-pane-height), 10em);\n    }\n\n    &[slot-frameless]:not([slot-frameless='false']) {\n        .q2-carousel-pane-main-content {\n            box-shadow: none;\n            border: 0;\n            border-radius: 0;\n            padding: 0;\n        }\n    }\n}\n","import { hasValidParent } from '@/utils/component';\nimport { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Carousel Pane\n * @category Display\n * @summary Use as a single slide within a Carousel.\n */\n@Component({ tag: 'q2-carousel-pane', shadow: false, styleUrl: 'q2-carousel-pane.scss' })\nexport class Q2CarouselPane implements ComponentInterface {\n    // #region Own Properties\n\n    disabledElements?: HTMLElement[] = [];\n    mutationObserver?: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Used by `q2-carousel` to determine the pane's index.\n     * @private\n     */\n    @Prop({ reflect: false })\n    index: number;\n\n    /**\n     * Used by `q2-carousel` to indicate which pane is currently active.\n     * @private\n     */\n    @Prop({ reflect: true })\n    isActivePane: boolean;\n\n    /**\n     * Text used only as an `aria-label` for accessibility purposes.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Used by `q2-carousel` to indicate how many panes are in the carousel.\n     * @private\n     */\n    @Prop({ reflect: false })\n    siblingCount: number;\n\n    /**\n     * Used by `q2-carousel` to indicate the pane should be frameless.\n     * @private\n     */\n    @Prop({ reflect: true })\n    slotFrameless: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the pane is clicked.\n     * @deprecated Use 'tctClickCarouselPane' instead\n     */\n    @Event()\n    clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n    /**\n     * Emitted when the pane is clicked.\n     */\n    @Event()\n    tctClickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n        this.removePointerMoveListeners();\n    }\n\n    componentWillLoad() {\n        hasValidParent(this.hostElement, 'div.q2-carousel-swiper-wrapper');\n    }\n\n    componentDidLoad(): void {\n        this.determineDisabledContent();\n        this.addPointerMoveListeners();\n\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(this.onMutationObserved);\n            observer.observe(this.hostElement, { childList: true, subtree: true });\n            this.mutationObserver = observer;\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('isActivePane')\n    determineDisabledContent() {\n        const { isActivePane } = this;\n        const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n            'q2-btn, q2-dropdown, q2-item, q2-chart-donut, 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.setAttribute('data-q2-tabindex', `${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 {\n                    element.removeAttribute('tabindex');\n                }\n            } else {\n                element.tabIndex = -1;\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get currentPaneIndex() {\n        return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n    }\n\n    addPointerMoveListeners() {\n        const elementsToDisable = ['q2-dropdown', 'q2-dropdown-item'];\n        this.disabledElements = Array.from(this.hostElement.querySelectorAll<HTMLElement>(elementsToDisable.join(',')));\n        this.disabledElements.forEach(element => {\n            element.addEventListener('pointermove', this.pointerMoveHandler);\n        });\n    }\n\n    generatePaneClass = (currentIndex: number) => {\n        return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n    };\n\n    onMutationObserved = () => {\n        this.removePointerMoveListeners();\n        this.addPointerMoveListeners();\n    };\n\n    paneClicked = event => {\n        if (this.isActivePane) return;\n        event.preventDefault();\n        mirrorEmit(this, ['clickCarouselPane', 'tctClickCarouselPane'], {\n            paneIndex: this.index,\n            pane: this.hostElement,\n        });\n    };\n\n    pointerMoveHandler = (event: PointerEvent) => {\n        event.stopPropagation();\n    };\n\n    removePointerMoveListeners() {\n        this.disabledElements.forEach(element => {\n            element.removeEventListener('pointermove', this.pointerMoveHandler);\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\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    // #endregion\n}\n"],"mappings":";;;;;;;;AAAA,MAAMA,IAAoB;;MCWbC,IAAc;EAD3B,WAAAC,CAAAC;;;;;QAIIC,KAAgBC,mBAAmB;IAuInCD,KAAAE,oBAAqBC,KACV,kDAAkDA;IAG7DH,KAAkBI,qBAAG;MACjBJ,KAAKK;MACLL,KAAKM;AAAyB;IAGlCN,KAAWO,cAAGC;MACV,IAAIR,KAAKS,cAAc;MACvBD,EAAME;MACNC,EAAWX,MAAM,EAAC,qBAAqB,0BAAyB;QAC5DY,WAAWZ,KAAKa;QAChBC,MAAMd,KAAKe;;AACb;IAGNf,KAAAgB,qBAAsBR;MAClBA,EAAMS;AAAiB;AAwC9B;;;EAhIG,oBAAAC;IACI,IAAIlB,KAAKmB,kBAAkB;MACvBnB,KAAKmB,iBAAiBC;MACtBpB,KAAKmB,mBAAmB;;IAE5BnB,KAAKK;;EAGT,iBAAAgB;IACIC,EAAetB,KAAKe,aAAa;;EAGrC,gBAAAQ;IACIvB,KAAKwB;IACLxB,KAAKM;IAEL,WAAWmB,qBAAqB,aAAa;MACzC,MAAMC,IAAW,IAAID,iBAAiBzB,KAAKI;MAC3CsB,EAASC,QAAQ3B,KAAKe,aAAa;QAAEa,WAAW;QAAMC,SAAS;;MAC/D7B,KAAKmB,mBAAmBO;;;;;EAQhC,wBAAAF;IACI,OAAMf,cAAEA,KAAiBT;IACzB,MAAM8B,IAAoB9B,KAAKe,YAAYgB,iBACvC;IAGJD,EAAkBE,SAAQC;MACtB,MAAMC,IACFD,EAAQE,aAAa,eAAeC,SAASH,EAAQI,aAAa,gBAAgB;MAEtF,IAAIH,GAAkB;QAClBD,EAAQK,aAAa,oBAAoB,GAAGL,EAAQM;;MAGxD,IAAI9B,GAAc;QACd,IAAIwB,EAAQE,aAAa,qBAAqB;UAC1CF,EAAQM,WAAWH,SAASH,EAAQI,aAAa;UACjDJ,EAAQO,gBAAgB;eACrB;UACHP,EAAQO,gBAAgB;;aAEzB;QACHP,EAAQM,YAAW;;;;;;EAQ/B,oBAAIE;IACA,OAAOC,MAAMC,UAAUC,QAAQC,KAAK7C,KAAKe,YAAY+B,cAAcC,UAAU/C,KAAKe;;EAGtF,uBAAAT;IACI,MAAM0C,IAAoB,EAAC,eAAe;IAC1ChD,KAAKC,mBAAmByC,MAAMO,KAAKjD,KAAKe,YAAYgB,iBAA8BiB,EAAkBE,KAAK;IACzGlD,KAAKC,iBAAiB+B,SAAQC;MAC1BA,EAAQkB,iBAAiB,eAAenD,KAAKgB;AAAmB;;EA0BxE,0BAAAX;IACIL,KAAKC,iBAAiB+B,SAAQC;MAC1BA,EAAQmB,oBAAoB,eAAepD,KAAKgB;AAAmB;;;;EAO3E,MAAAqC;IACI,OAAMC,OAAEA,KAAUtD;IAElB,OACIuD,EAACC,GAAI;MAAAC,KAAA;MACDC,OAAO1D,KAAKE,kBAAkBF,KAAKyC;MACnCF,UAAUvC,KAAKS,eAAe,KAAI;MAClCkD,MAAK;MACgB;MACR,eAAA3D,KAAKS,eAAemD,YAAY;MAAM,cAE/CN,IACMO,EAAIP,KACJO,EAAI,2CAA2C,GAC1C7D,KAAKyC,mBAAmB,GAAGqB,aAC3B9D,KAAK+D,gBAAgB,GAAGD;MAGvCE,SAAShE,KAAKO;OAEdgD,EAAS;MAAAE,KAAA;MAAAC,OAAM;OACXH,EAAa;MAAAE,KAAA","ignoreList":[]}