q2-tecton-elements 1.44.0 → 1.45.0

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-14c3693c.js');
-const index$1 = require('./index-1deac3ee.js');
+const index$1 = require('./index-0e15dc8d.js');
 
-const q2CarouselPaneCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #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-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 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25)));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(--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(--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)}";
+const q2CarouselPaneCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #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-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 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25)));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(--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(--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 Q2CarouselPaneStyle0 = q2CarouselPaneCss;
 
 const Q2CarouselPane = class {
@@ -28,6 +28,7 @@ const Q2CarouselPane = class {
         this.siblingCount = undefined;
         this.isActivePane = undefined;
         this.label = undefined;
+        this.slotFrameless = undefined;
     }
     get currentPaneIndex() {
         return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);
@@ -37,11 +38,11 @@ const Q2CarouselPane = class {
     }
     determineDisabledContent() {
         const { isActivePane } = this;
-        const focusableElements = this.hostElement.querySelectorAll('q2-btn, a[href], button, [tabindex]:not([tabindex="-1"])');
+        const focusableElements = this.hostElement.querySelectorAll('q2-btn, q2-dropdown, 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}`;
+                element.setAttribute('data-q2-tabindex', `${element.tabIndex}`);
             }
             if (isActivePane) {
                 if (element.hasAttribute('data-q2-tabindex')) {
@@ -62,12 +63,12 @@ const Q2CarouselPane = class {
     }
     render() {
         const { label } = this;
-        return (index.h(index.Host, { key: 'fd5d9d03af8d68ff9edfd8ed39fdf4186d7b36a2', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
+        return (index.h(index.Host, { key: '3408598713aeea60c644c3ea0750f0dce2d40ca9', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
                 ? index$1.loc(label)
                 : index$1.loc('tecton.element.carousel.itemDescription', [
                     (this.currentPaneIndex + 1).toString(),
                     (this.siblingCount || 0).toString(),
-                ]), onClick: this.paneClicked }, index.h("article", { key: 'f947a07e8fae57beabcd93e7fc599701cedfacc6', class: "q2-carousel-pane-main-content" }, index.h("slot", { key: 'e35fc5d6f4bab2909902938ba205a9ceaaf0e1be' }))));
+                ]), onClick: this.paneClicked }, index.h("article", { key: 'a03a7125b958195b21d731f9cbeebdb1c8f9a0b3', class: "q2-carousel-pane-main-content" }, index.h("slot", { key: 'c07f1d5fc75a902a6f9741e746279bad8c094a13' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-carousel-pane.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"q2-carousel-pane.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,q2EAAq2E,CAAC;AACh4E,6BAAe,iBAAiB;;MCGnB,cAAc;;;;QAiCvB,sBAAiB,GAAG,CAAC,YAAoB;YACrC,OAAO,kDAAkD,YAAY,EAAE,CAAC;SAC3E,CAAC;QAOF,gBAAW,GAAG,KAAK;YACf,IAAI,IAAI,CAAC,YAAY;gBAAE,OAAO;YAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;gBACxB,SAAS,EAAE,IAAI,CAAC,KAAK;gBACrB,IAAI,EAAE,IAAI,CAAC,WAAW;aACzB,CAAC,CAAC;SACN,CAAC;;;;;;IAxBF,IAAI,gBAAgB;QAChB,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;KAClG;IAED,gBAAgB;QACZ,IAAI,CAAC,wBAAwB,EAAE,CAAC;KACnC;IAqBD,wBAAwB;QACpB,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;QAC9B,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CACvD,0DAA0D,CAC7D,CAAC;QAEF,iBAAiB,CAAC,OAAO,CAAC,OAAO;YAC7B,MAAM,gBAAgB,GAClB,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC;YAExF,IAAI,gBAAgB,EAAE;gBAClB,OAAO,CAAC,OAAO,CAAC,UAAU,GAAG,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC;aACtD;YAED,IAAI,YAAY,EAAE;gBACd,IAAI,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE;oBAC1C,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC;oBACtE,OAAO,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;iBAC/C;qBAAM,IAAI,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE;oBAC1C,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC;iBAChC;qBAAM;oBACH,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;iBACvC;aACJ;iBAAM;gBACH,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;aACzB;SACJ,CAAC,CAAC;KACN;IAED,MAAM;QACF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEvB,QACIA,QAACC,UAAI,qDACD,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,EACpD,QAAQ,EAAE,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,EACpC,IAAI,EAAC,OAAO,0BACS,OAAO,iBACf,IAAI,CAAC,YAAY,GAAG,SAAS,GAAG,MAAM,gBAE/C,KAAK;kBACCC,WAAG,CAAC,KAAK,CAAC;kBACVA,WAAG,CAAC,yCAAyC,EAAE;oBAC3C,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE;oBACtC,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,EAAE,QAAQ,EAAE;iBACtC,CAAC,EAEZ,OAAO,EAAE,IAAI,CAAC,WAAW,IAEzBF,sEAAS,KAAK,EAAC,+BAA+B,IAC1CA,oEAAa,CACP,CACP,EACT;KACL;;;;;;;;;;","names":["h","Host","loc"],"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 .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\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 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25))'))};\n\n    cursor: grab;\n\n    &:not([is-active-pane]) * {\n        cursor: pointer;\n    }\n\n    &:focus {\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(--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    .q2-carousel-pane-main-content:hover {\n        box-shadow: var(--const-double-focus-ring), var(--comp-carousel-shadow);\n    }\n}\n","import { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({ tag: 'q2-carousel-pane', shadow: false, styleUrl: 'q2-carousel-pane.scss' })\nexport class Q2CarouselPane 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\n    /**\n     * Text used only as an `aria-label` for accessibility purposes.\n     * @localizable\n     */\n    @Prop({ reflect: true }) label: string;\n\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"],"version":3}
+{"file":"q2-carousel-pane.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,qgFAAqgF,CAAC;AAChiF,6BAAe,iBAAiB;;MCGnB,cAAc;;;;QAyCvB,sBAAiB,GAAG,CAAC,YAAoB;YACrC,OAAO,kDAAkD,YAAY,EAAE,CAAC;SAC3E,CAAC;QAOF,gBAAW,GAAG,KAAK;YACf,IAAI,IAAI,CAAC,YAAY;gBAAE,OAAO;YAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;gBACxB,SAAS,EAAE,IAAI,CAAC,KAAK;gBACrB,IAAI,EAAE,IAAI,CAAC,WAAW;aACzB,CAAC,CAAC;SACN,CAAC;;;;;;;IAxBF,IAAI,gBAAgB;QAChB,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;KAClG;IAED,gBAAgB;QACZ,IAAI,CAAC,wBAAwB,EAAE,CAAC;KACnC;IAqBD,wBAAwB;QACpB,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;QAC9B,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CACvD,uEAAuE,CAC1E,CAAC;QAEF,iBAAiB,CAAC,OAAO,CAAC,OAAO;YAC7B,MAAM,gBAAgB,GAClB,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC;YAExF,IAAI,gBAAgB,EAAE;gBAClB,OAAO,CAAC,YAAY,CAAC,kBAAkB,EAAE,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;aACnE;YAED,IAAI,YAAY,EAAE;gBACd,IAAI,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE;oBAC1C,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC;oBACtE,OAAO,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;iBAC/C;qBAAM,IAAI,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE;oBAC1C,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC;iBAChC;qBAAM;oBACH,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;iBACvC;aACJ;iBAAM;gBACH,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;aACzB;SACJ,CAAC,CAAC;KACN;IAED,MAAM;QACF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEvB,QACIA,QAACC,UAAI,qDACD,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,EACpD,QAAQ,EAAE,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,EACpC,IAAI,EAAC,OAAO,0BACS,OAAO,iBACf,IAAI,CAAC,YAAY,GAAG,SAAS,GAAG,MAAM,gBAE/C,KAAK;kBACCC,WAAG,CAAC,KAAK,CAAC;kBACVA,WAAG,CAAC,yCAAyC,EAAE;oBAC3C,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE;oBACtC,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,EAAE,QAAQ,EAAE;iBACtC,CAAC,EAEZ,OAAO,EAAE,IAAI,CAAC,WAAW,IAEzBF,sEAAS,KAAK,EAAC,+BAA+B,IAC1CA,oEAAa,CACP,CACP,EACT;KACL;;;;;;;;;;","names":["h","Host","loc"],"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 .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\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 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25))'))};\n\n    cursor: grab;\n\n    &:not([is-active-pane]) * {\n        cursor: pointer;\n    }\n\n    &:focus {\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(--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    .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 { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({ tag: 'q2-carousel-pane', shadow: false, styleUrl: 'q2-carousel-pane.scss' })\nexport class Q2CarouselPane 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    /**\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    /**\n     * Used by `q2-carousel` to indicate which pane is currently active.\n     * @private\n     */\n    @Prop({ reflect: true }) isActivePane: boolean;\n\n    /**\n     * Text used only as an `aria-label` for accessibility purposes.\n     * @localizable\n     */\n    @Prop({ reflect: true }) label: string;\n\n    /**\n     * Used by `q2-carousel` to indicate the pane should be frameless\n     * @private\n     */\n    @Prop({ reflect: true }) slotFrameless: boolean;\n\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, q2-dropdown, 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 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"],"version":3}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-14c3693c.js');
-const index$2 = require('./index-1deac3ee.js');
+const index$2 = require('./index-0e15dc8d.js');
 
 /**
  * SSR Window 4.0.2
@@ -5033,7 +5033,7 @@ function Autoplay({
   });
 }
 
-const q2CarouselCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #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{display:grid;grid-template-rows:repeat(2, auto);gap:var(--app-scale-2x, 10px)}.swiper-container{--comp-container-padding:var(--app-scale-1x, 5px) 0 var(--app-scale-2x, 10px);display:block;width:100%;margin-left:auto;margin-right:auto;position:relative;overflow:hidden;padding:var(--tct-carousel-container-padding, var(--t-carousel-container-padding, var(--comp-container-padding, 5px 0 10px)))}.insufficient-pane-feedback{text-align:center;box-shadow:var(--app-shadow-2, 0px 2px 8px 0px rgba(0, 0, 0, 0.25));background: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, 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, 7px))}.insufficient-pane-feedback.content-peek-display{max-width:395px;margin:0 auto}.insufficient-pane-feedback .insufficient-panes-header,.insufficient-pane-feedback .insufficient-panes-body{text-align:center}.insufficient-pane-feedback .insufficient-panes-header strong{font-weight:600}.insufficient-pane-feedback .insufficient-panes-body{margin:0 auto 2rem auto;max-width:75%}.insufficient-pane-feedback .insufficient-panes-icon-wrapper{display:flex;justify-content:center;margin:1rem 0 2rem 0}.insufficient-pane-feedback .insufficient-panes-icon-wrapper q2-icon{width:38px}.q2-carousel-pagination-navigation-wrapper{grid-row:2;display:flex;justify-content:center;align-items:center;min-height:44px}.q2-carousel-pagination-navigation-wrapper.evenly-space{justify-content:space-between}.q2-carousel-control-center-tray{display:flex;align-items:center}.q2-carousel-swiper-wrapper.compact{overflow:visible}.q2-carousel-swiper-wrapper.compact q2-btn{margin-top:4px}.q2-carousel-pagination{height:12px;display:flex;align-content:center;justify-content:center;gap:0.5rem}.q2-carousel-pagination .q2-carousel-page-indicator{display:inline-block;height:12px;width:12px;border-radius:50%;background-color:var(--tct-carousel-pagination-inactive-color, var(--t-carousel-pagination-inactive-color, var(--t-a11y--gray-color-AA, #949494)));padding:0;border:0;transition:all 0.5s}.q2-carousel-pagination .q2-carousel-page-indicator:hover{background-color:var(--tct-carousel-pagination-active-color, var(--t-carousel-pagination-active-color, var(--tct-primary, var(--t-primary, #006eb2))))}.q2-carousel-pagination .q2-carousel-page-indicator.active-page{display:inline-block;background-color:var(--tct-carousel-pagination-active-color, var(--t-carousel-pagination-active-color, var(--tct-primary, var(--t-primary, #006eb2))))}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator{display:none}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-adjacent{display:inline-block;height:10px;width:10px}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-adjacent-adjacent{display:inline-block;height:8px;width:8px}.q2-carousel-swiper-container{grid-row:1;}.q2-carousel-swiper-container .swiper-wrapper{position:relative;width:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.q2-carousel-swiper-container.content-peek-display .q2-carousel-pane:not(.swiper-slide-active){transform:scale(0.9)}.q2-carousel-swiper-container.full-width-display{--comp-container-padding:var(--app-scale-1x, 5px) var(--app-scale-2x, 10px) var(--app-scale-2x, 10px);padding:var(--tct-carousel-full-width-container-padding, var(--t-carousel-full-width-container-padding, var(--comp-container-padding, 5px 10px 10px)))}";
+const q2CarouselCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #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{display:grid;grid-template-rows:repeat(2, auto);gap:var(--app-scale-2x, 10px)}.swiper-container{--comp-container-padding:var(--app-scale-1x, 5px) 0 var(--app-scale-2x, 10px);display:block;width:100%;margin-left:auto;margin-right:auto;position:relative;overflow:hidden;padding:var(--tct-carousel-container-padding, var(--t-carousel-container-padding, var(--comp-container-padding, 5px 0 10px)))}.insufficient-pane-feedback{text-align:center;box-shadow:var(--app-shadow-2, 0px 2px 8px 0px rgba(0, 0, 0, 0.25));background: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, 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, 7px))}.insufficient-pane-feedback.content-peek-display{max-width:395px;margin:0 auto}.insufficient-pane-feedback .insufficient-panes-header,.insufficient-pane-feedback .insufficient-panes-body{text-align:center}.insufficient-pane-feedback .insufficient-panes-header strong{font-weight:600}.insufficient-pane-feedback .insufficient-panes-body{margin:0 auto 2rem auto;max-width:75%}.insufficient-pane-feedback .insufficient-panes-icon-wrapper{display:flex;justify-content:center;margin:1rem 0 2rem 0}.insufficient-pane-feedback .insufficient-panes-icon-wrapper q2-icon{width:38px}.q2-carousel-pagination-navigation-wrapper{grid-row:2;display:flex;justify-content:center;align-items:center;min-height:44px}.q2-carousel-pagination-navigation-wrapper.evenly-space{justify-content:space-between}.q2-carousel-control-center-tray{display:flex;align-items:center}.q2-carousel-swiper-wrapper.compact{overflow:visible}.q2-carousel-swiper-wrapper.compact q2-btn{margin-top:4px}.q2-carousel-pagination{height:12px;display:flex;align-content:center;justify-content:center;gap:0.5rem}.q2-carousel-pagination .q2-carousel-page-indicator{display:inline-block;height:12px;width:12px;border-radius:50%;background-color:var(--tct-carousel-pagination-inactive-color, var(--t-carousel-pagination-inactive-color, var(--t-a11y--gray-color-AA, #949494)));padding:0;border:0;transition:all 0.5s}.q2-carousel-pagination .q2-carousel-page-indicator:hover{background-color:var(--tct-carousel-pagination-active-color, var(--t-carousel-pagination-active-color, var(--tct-primary, var(--t-primary, #006eb2))))}.q2-carousel-pagination .q2-carousel-page-indicator.active-page{display:inline-block;background-color:var(--tct-carousel-pagination-active-color, var(--t-carousel-pagination-active-color, var(--tct-primary, var(--t-primary, #006eb2))))}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator{display:none}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-adjacent{display:inline-block;height:10px;width:10px}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-adjacent-adjacent{display:inline-block;height:8px;width:8px}.q2-carousel-swiper-container{grid-row:1;}.q2-carousel-swiper-container .swiper-wrapper{position:relative;width:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.q2-carousel-swiper-container.content-peek-display .q2-carousel-pane:not(.swiper-slide-active){transform:scale(0.9)}.q2-carousel-swiper-container.frameless-display{padding:var(--tct-carousel-frameless-container-padding, var(--t-carousel-frameless-container-padding, 0))}.q2-carousel-swiper-container.full-width-display{--comp-container-padding:var(--app-scale-1x, 5px) var(--app-scale-2x, 10px) var(--app-scale-2x, 10px);padding:var(--tct-carousel-full-width-container-padding, var(--t-carousel-full-width-container-padding, var(--comp-container-padding, 5px 10px 10px)))}";
 const Q2CarouselStyle0 = q2CarouselCss;
 
 const carouselBreakpoint = 500; /* width in px of this host element where the layout starts to get unruly */
@@ -5074,10 +5074,13 @@ const Q2Carousel = class {
             this.swiper = null;
         };
         this.organizePanes = () => {
+            const { framelessPanes, paneCollection } = this;
+            const siblingCount = paneCollection.length;
             this.paneCollection.forEach((pane, index) => {
                 pane.index = index;
-                pane.siblingCount = this.paneCollection.length;
+                pane.siblingCount = siblingCount;
                 pane.isActivePane = index === this.activePaneIndex;
+                pane.slotFrameless = framelessPanes || undefined;
             });
             this.currentPaneCount = this.paneCollection.length;
         };
@@ -5197,6 +5200,7 @@ const Q2Carousel = class {
         };
         this.autoPlay = false;
         this.fullWidthPanes = false;
+        this.framelessPanes = false;
         this.hidePagination = false;
         this.label = 'tecton.element.carousel.ariaLabel';
         this.showNavigationArrows = false;
@@ -5204,7 +5208,7 @@ const Q2Carousel = class {
         this.ariaLabel = undefined;
         this.universalCarouselOptions = {
             centeredSlides: true,
-            focusableElements: 'q2-btn, a, input, select, textarea, button, video, label, option',
+            focusableElements: 'q2-btn, q2-dropdown, a, input, select, textarea, button, video, label, option',
             autoplay: this.autoPlay,
             modules: [Autoplay],
             on: {
@@ -5252,6 +5256,10 @@ const Q2Carousel = class {
     revampCarousel() {
         this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);
     }
+    framelessPanesChanged() {
+        this.organizePanes();
+        this.revampCarousel();
+    }
     get peekContentDisplayOptions() {
         return Object.assign({ slidesPerView: 2, spaceBetween: this.compactMode ? 0 : -10, centerInsufficientSlides: false }, this.universalCarouselOptions);
     }
@@ -5263,7 +5271,9 @@ const Q2Carousel = class {
         return this.hostElement.querySelectorAll('.q2-carousel-page-indicator');
     }
     get activeCarouselOptions() {
-        return this.fullWidthPanes ? this.fullWidthDisplayOptions : this.peekContentDisplayOptions;
+        return this.fullWidthPanes || this.framelessPanes
+            ? this.fullWidthDisplayOptions
+            : this.peekContentDisplayOptions;
     }
     get dynamicPaginationDots() {
         return this.paneCount && this.paneCount > 5;
@@ -5332,17 +5342,20 @@ const Q2Carousel = class {
         window.removeEventListener('resize', this.setCarouselWrapperWidth);
     }
     render() {
-        let carouselContainerClasses = [
-            'q2-carousel-swiper-container',
-            'swiper-container',
-            this.fullWidthPanes ? 'full-width-display' : 'content-peek-display',
-        ];
+        const { fullWidthPanes, framelessPanes } = this;
+        let carouselContainerClasses = ['q2-carousel-swiper-container', 'swiper-container'];
+        if (fullWidthPanes)
+            carouselContainerClasses = [...carouselContainerClasses, 'full-width-display'];
+        if (framelessPanes)
+            carouselContainerClasses = [...carouselContainerClasses, 'frameless-display'];
+        if (!fullWidthPanes && !framelessPanes)
+            carouselContainerClasses = [...carouselContainerClasses, 'content-peek-display'];
         if (this.compactMode)
             carouselContainerClasses = [...carouselContainerClasses, 'compact'];
         let paginationWrapperClasses = ['q2-carousel-pagination-navigation-wrapper'];
         if (this.showNavigationArrows)
             paginationWrapperClasses = [...paginationWrapperClasses, 'evenly-space'];
-        return (index$1.h(index$1.Host, { key: '2b03fbc3b2bc76ff68c88205a16d7b2b8d1a3edb', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, this.insufficientPanes ? (this.insufficientPanesDisplay()) : (index$1.h(index$1.Fragment, null, this.paneCount > 1 && (index$1.h("div", { class: paginationWrapperClasses.join(' ') }, this.showNavigationArrows && this.prevNavBtn(), index$1.h("div", { class: "q2-carousel-control-center-tray" }, !this.hidePagination && this.paginationArea(), this.autoPlay && this.autoPlayBtn()), this.showNavigationArrows && this.nextNavBtn())), index$1.h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": index$2.loc(this.label) }, index$1.h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": this.ariaLiveValue, onKeyDown: this.onWrapperKeyDown }, index$1.h("slot", null)))))));
+        return (index$1.h(index$1.Host, { key: '0c3b0f78014d3b4e345436df243b6bcfd208d892', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, this.insufficientPanes ? (this.insufficientPanesDisplay()) : (index$1.h(index$1.Fragment, null, this.paneCount > 1 && (index$1.h("div", { class: paginationWrapperClasses.join(' ') }, this.showNavigationArrows && this.prevNavBtn(), index$1.h("div", { class: "q2-carousel-control-center-tray" }, !this.hidePagination && this.paginationArea(), this.autoPlay && this.autoPlayBtn()), this.showNavigationArrows && this.nextNavBtn())), index$1.h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": index$2.loc(this.label) }, index$1.h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": this.ariaLiveValue, onKeyDown: this.onWrapperKeyDown }, index$1.h("slot", null)))))));
     }
     get hostElement() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -5350,6 +5363,7 @@ const Q2Carousel = class {
         "carouselWrapperWidth": ["carouselWrapperWidthChanged"],
         "index": ["indexChanged"],
         "fullWidthPanes": ["revampCarousel"],
+        "framelessPanes": ["revampCarousel", "framelessPanesChanged"],
         "compactMode": ["revampCarousel"],
         "autoPlay": ["revampCarousel"]
     }; }