npm - q2-tecton-elements - Versions diffs - 1.65.0 → 1.66.1 - Mend

q2-tecton-elements 1.65.0 → 1.66.1

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

Files changed (687) hide show

package/dist/collection/components/q2-card-image/q2-card-image.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { hasSlotContent } from "../../utils/index";
+import { hasSlotContent, loc } from "../../utils/index";
 import { getAssetPath, Host, h, } from "@stencil/core";
 /**
  * @name Card Image
@@ -335,12 +335,12 @@ export class Q2CardImage {
         const chipPath = this.getChipPath('horizontal');
         const vendorPath = this.getVendorPath();
         const cardTypeColorStyle = this.getCardTypeColorStyle();
-        return (h("div", { class: "card-details-horizontal" }, h("div", { class: "horizontal-logo-wrapper" }, h("div", { class: "horizontal-logo", style: logoStyle })), h("div", { class: "horizontal-chip" }, chipPath && (h("img", { src: chipPath, alt: "", "aria-hidden": "true" }))), h("div", { class: "horizontal-card-number card-text" }, this.getFormattedCardNumber()), h("div", { class: "horizontal-exp-date-card-type-row" }, h("div", { class: "horizontal-exp-date-wrapper" }, this.showExpirationDateLabel() && (h("div", { class: "horizontal-exp-date-label card-text" }, "EXPIRES")), this.getFormattedExpirationDate() && (h("div", { class: "horizontal-exp-date-value card-text" }, this.getFormattedExpirationDate()))), h("div", { class: {
+        return (h("div", { class: "card-details-horizontal" }, h("div", { class: "horizontal-logo-wrapper" }, h("div", { class: "horizontal-logo", style: logoStyle })), h("div", { class: "horizontal-chip" }, chipPath && (h("img", { src: chipPath, alt: "", "aria-hidden": "true" }))), h("div", { class: "horizontal-card-number card-text" }, this.getFormattedCardNumber()), h("div", { class: "horizontal-exp-date-card-type-row" }, h("div", { class: "horizontal-exp-date-wrapper" }, this.showExpirationDateLabel() && (h("div", { class: "horizontal-exp-date-label card-text" }, loc('tecton.element.cardImage.expires'))), this.getFormattedExpirationDate() && (h("div", { class: "horizontal-exp-date-value card-text" }, this.getFormattedExpirationDate()))), h("div", { class: {
                 'horizontal-card-type': true,
                 'card-text': true,
                 'vendor-mastercard': this.vendor === 'mastercard',
                 'vendor-visa': this.vendor === 'visa',
-            }, style: cardTypeColorStyle }, this.getCardTypeText())), h("div", { class: "horizontal-card-holder-vendor-row" }, h("div", { class: "horizontal-card-holder-wrapper" }, this.showCardHolderLabel() && (h("div", { class: "horizontal-card-holder-label card-text" }, "CARD HOLDER")), this.getCardHolderName() && (h("div", { class: "horizontal-card-holder-value card-text" }, this.getCardHolderName()))), h("div", { class: "horizontal-vendor" }, vendorPath && (h("img", { src: vendorPath, alt: "", "aria-hidden": "true" }))))));
+            }, style: cardTypeColorStyle }, this.getCardTypeText())), h("div", { class: "horizontal-card-holder-vendor-row" }, h("div", { class: "horizontal-card-holder-wrapper" }, this.showCardHolderLabel() && (h("div", { class: "horizontal-card-holder-label card-text" }, loc('tecton.element.cardImage.cardHolder'))), this.getCardHolderName() && (h("div", { class: "horizontal-card-holder-value card-text" }, this.getCardHolderName()))), h("div", { class: "horizontal-vendor" }, vendorPath && (h("img", { src: vendorPath, alt: "", "aria-hidden": "true" }))))));
     }
     renderStatusBanner() {
         if (!this.cardStatus || this.size !== 'large')
@@ -357,7 +357,7 @@ export class Q2CardImage {
         const chipPath = this.getChipPath('vertical');
         const vendorPath = this.getVendorPath();
         const cardTypeColorStyle = this.getCardTypeColorStyle();
-        return (h("div", { class: "card-details-vertical" }, h("div", { class: "vertical-chip" }, chipPath && (h("img", { src: chipPath, alt: "", "aria-hidden": "true" }))), h("div", { class: "vertical-logo-wrapper" }, h("div", { class: "vertical-logo", style: logoStyle })), h("div", { class: "vertical-card-number card-text" }, this.getFormattedCardNumber()), h("div", { class: "vertical-card-holder-wrapper" }, this.showCardHolderLabel() && h("div", { class: "vertical-card-holder-label card-text" }, "CARD HOLDER"), this.getCardHolderName() && (h("div", { class: "vertical-card-holder-value card-text" }, this.getCardHolderName()))), h("div", { class: "vertical-exp-date-card-type-row" }, h("div", { class: "vertical-exp-date-wrapper" }, this.showExpirationDateLabel() && h("div", { class: "vertical-exp-date-label card-text" }, "EXPIRES"), this.getFormattedExpirationDate() && (h("div", { class: "vertical-exp-date-value card-text" }, this.getFormattedExpirationDate()))), h("div", { class: {
+        return (h("div", { class: "card-details-vertical" }, h("div", { class: "vertical-chip" }, chipPath && (h("img", { src: chipPath, alt: "", "aria-hidden": "true" }))), h("div", { class: "vertical-logo-wrapper" }, h("div", { class: "vertical-logo", style: logoStyle })), h("div", { class: "vertical-card-number card-text" }, this.getFormattedCardNumber()), h("div", { class: "vertical-card-holder-wrapper" }, this.showCardHolderLabel() && (h("div", { class: "vertical-card-holder-label card-text" }, loc('tecton.element.cardImage.cardHolder'))), this.getCardHolderName() && (h("div", { class: "vertical-card-holder-value card-text" }, this.getCardHolderName()))), h("div", { class: "vertical-exp-date-card-type-row" }, h("div", { class: "vertical-exp-date-wrapper" }, this.showExpirationDateLabel() && (h("div", { class: "vertical-exp-date-label card-text" }, loc('tecton.element.cardImage.expires'))), this.getFormattedExpirationDate() && (h("div", { class: "vertical-exp-date-value card-text" }, this.getFormattedExpirationDate()))), h("div", { class: {
                 'vertical-card-type': true,
                 'card-text': true,
                 'vendor-mastercard': this.vendor === 'mastercard',
@@ -367,11 +367,11 @@ export class Q2CardImage {
     render() {
         const cardContent = this.clickable ? (h("q2-btn", { disabled: this.disabled, label: this.accessibilityLabel, hideLabel: true, onClick: this.handleCardClick }, this.renderCardContent())) : (this.renderCardContent());
         const showBanner = !!this.cardStatus && this.size === 'large';
-        return (h(Host, { key: '4a47acfd068718c727a025a0bcfd199a4eece8dc', class: {
+        return (h(Host, { key: '19424c69e664876eec4045ca5c798f5372800d26', class: {
                 [`${this.orientation}`]: true,
                 'has-action': this.hasActionSlotContent,
                 'has-banner': showBanner,
-            } }, this.renderStatusBanner(), h("div", { key: 'ddf94a152055525bdad93176d92cddaeaf549033', class: "card-wrapper" }, cardContent, this.renderAction())));
+            } }, this.renderStatusBanner(), h("div", { key: 'e59ce44f131c51a8ea0f824b89fc5ae51e2ba200', class: "card-wrapper" }, cardContent, this.renderAction())));
     }
     static get is() { return "q2-card-image"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-card-image/q2-card-image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-card-image.js","sourceRoot":"","sources":["../../../../src/components/q2-card-image/q2-card-image.tsx"],"names":[],"mappings":"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","sourcesContent":["import { hasSlotContent } from '@/utils';\nimport {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n getAssetPath,\n Host,\n Prop,\n State,\n h,\n} from '@stencil/core';\n\n/*\n @name Card Image\n * @summary Displays a visual representation of a credit or debit card with customizable styling\n * and card details. Supports horizontal and vertical orientations with responsive sizing\n * that adapts content visibility based on container width.\n \n @slot action - An optional slot for interactive elements. Supported elements:\n * - [Dropdown](https://tecton.q2developer.com/design-system/q2-dropdown/) —\n * Renders in the top-right corner. Only visible at large and medium sizes.\n \n /\n@Component({ tag: 'q2-card-image', shadow: true, styleUrl: 'q2-card-image.scss', assetsDirs: ['assets'] })\nexport class Q2CardImage implements ComponentInterface {\n // #region Own Properties\n\n private predefinedBackgrounds = ['primary', 'secondary', 'tertiary', 'gradient'];\n private resizeObserver: ResizeObserver;\n private sizeBreakpoints = {\n vertical: { large: 176, medium: 113, small: 63 },\n horizontal: { large: 281, medium: 181, small: 100 },\n };\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n computedSize: 'large' \| 'medium' \| 'small' \| 'tiny' = 'medium';\n\n // #endregion\n // #region Public Property API\n\n /*\n Accessible label for the card image. When provided, this value is applied as `aria-label`\n * on either the card container (non-clickable) or the wrapping button (clickable).\n /\n @Prop({ reflect: false })\n accessibilityLabel?: string;\n\n /\n Background style for the base layer.\n * - `'primary'` \| `'secondary'` \| `'tertiary'`: Solid theme colors\n * - `'gradient'`: Grayscale gradient (themable via CSS variables)\n * - Custom string: URL/path to an image file (SVG, PNG, JPG)\n /\n @Prop({ reflect: true })\n background: 'primary' \| 'secondary' \| 'tertiary' \| 'gradient' \| string = 'primary';\n\n /\n The card holder name to display on the card. Only rendered at large and medium sizes.\n * When not provided, neither the label nor the name is displayed.\n /\n @Prop({ reflect: false })\n cardHolder?: string;\n\n /\n Controls whether the \"CARD HOLDER\" label is displayed above the card holder name.\n * The label is only supported at large size. At medium size, only the name is shown\n * regardless of this prop. When `false`, only the name is shown without the label.\n /\n @Prop({ reflect: false })\n cardHolderLabel: boolean = true;\n\n /\n The card number to display. Only the last 4 characters are used, prefixed with `** ** `.\n * The last 4 characters must all be digits; otherwise the card number is not displayed.\n * Not rendered at tiny size.\n /\n @Prop({ reflect: false })\n cardNumber?: string;\n\n /\n The status of the card. When set, renders a status banner at the top of the card for card sizes medium and up.\n /\n @Prop({ reflect: true })\n cardStatus?: 'digital' \| 'enabled' \| 'disabled' \| 'locked' \| 'damaged' \| 'lost' \| 'stolen' \| 'lost or stolen';\n\n /\n The card type label displayed alongside the expiration date. Not rendered at tiny size.\n /\n @Prop({ reflect: false })\n cardType?: 'atm' \| 'debit';\n\n /\n The color of the card type text. Only applies when `cardType` is set.\n /\n @Prop({ reflect: false })\n cardTypeColor?: 'black' \| 'white';\n\n /\n The chip style displayed on the card. Not rendered at tiny size.\n * - `'gold'`: Gold/brass colored EMV chip\n * - `'silver'`: Silver/platinum colored EMV chip\n /\n @Prop({ reflect: false })\n chip?: 'gold' \| 'silver';\n\n /\n If `true`, the card image is wrapped in a `q2-btn` to handle click interactions.\n /\n @Prop({ reflect: true })\n clickable: boolean = false;\n\n /\n If `true`, the card image is visually disabled and not clickable. Does not affect the dropdown.\n /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /\n The expiration date of the card in ISO 8601 extended format (`YYYY-MM`).\n * Displayed as `MM / YY` on the card. Only rendered at large and medium sizes.\n * When not provided, neither the label nor the date value is displayed.\n /\n @Prop({ reflect: false })\n expirationDate?: string;\n\n /\n Controls whether the \"EXPIRES\" label is displayed above the expiration date.\n * The label is only supported at large size. At medium size, only the date value is shown\n * regardless of this prop. When `false`, only the date value is shown without the label.\n /\n @Prop({ reflect: false })\n expirationDateLabel: boolean = true;\n\n /\n Path to the financial institution logo image (SVG, PNG, or JPG).\n * Max display dimensions: 280x45 for horizontal cards, 250x45 for vertical cards.\n * When not provided, an empty placeholder div is rendered to maintain consistent card structure.\n /\n @Prop({ reflect: false })\n fiLogo?: string;\n\n /\n If `true`, the component uses `display: inline-block`. If `false`, uses `display: block`.\n /\n @Prop({ reflect: true })\n inline: boolean = false;\n\n /\n The orientation of the card image.\n /\n @Prop({ reflect: false })\n orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n Background style for the overlay layer. When undefined, the overlay is not rendered.\n * - `'dot'`: CSS-generated dot pattern with mix-blend-mode overlay (themable via CSS variables)\n * - Custom string: URL/path to an image file (SVG, PNG, JPG)\n /\n @Prop({ reflect: true })\n overlay?: 'dot' \| string;\n\n /\n Overrides the default status banner text (which is the cardStatus value in uppercase).\n * Maximum 14 characters (including spaces) to ensure the text fits within the banner.\n /\n @Prop({ reflect: false })\n statusTextOverride?: string;\n\n /\n The card vendor. Renders the vendor logo in the bottom-right of the card.\n * Not rendered at tiny size.\n /\n @Prop({ reflect: true })\n vendor?: 'mastercard' \| 'visa';\n\n /\n The color variant of the vendor logo. Only applies when `vendor` is set.\n * Defaults to `'white'` for Visa and `'brand'` for Mastercard.\n /\n @Prop({ reflect: false })\n vendorColor?: 'black' \| 'brand' \| 'white';\n\n /\n Path to a custom vendor logo image (SVG, PNG, or JPG).\n * When set, this overrides the `vendor` prop and displays the custom logo.\n * Not rendered at tiny size.\n /\n @Prop({ reflect: false })\n vendorLogo?: string;\n\n // #endregion\n // #region Events\n\n /* Emitted when a clickable card is clicked. Contains card details. /\n @Event()\n tctClick: EventEmitter<{\n cardNumber: string \| undefined;\n cardStatus: string \| undefined;\n statusTextOverride: string \| undefined;\n cardHolder: string \| undefined;\n expirationDate: string \| undefined;\n cardType: string \| undefined;\n vendor: string \| undefined;\n }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n }\n\n componentWillLoad(): void {\n if (typeof window !== 'undefined' && 'ResizeObserver' in window) {\n this.resizeObserver = new ResizeObserver(this.handleResize);\n }\n }\n\n componentDidLoad(): void {\n this.resizeObserver?.observe(this.hostElement);\n const width = this.hostElement.getBoundingClientRect().width;\n if (width > 0) {\n this.computedSize = this.computeSizeFromWidth(width);\n }\n }\n\n componentDidRender(): void {\n this.handleDropdownElement();\n }\n\n // #endregion\n // #region Local Methods\n\n get hasActionSlotContent() {\n return hasSlotContent(this.hostElement, 'action');\n }\n\n private get isDecorative(): boolean {\n return this.size === 'tiny' && !this.clickable;\n }\n\n private get size(): 'large' \| 'medium' \| 'small' \| 'tiny' {\n return this.computedSize;\n }\n\n /\n Computes the display size from the container's current width.\n * Breakpoints represent the minimum widths at which certain card elements are applied to the layout.\n /\n private computeSizeFromWidth(width: number): 'large' \| 'medium' \| 'small' \| 'tiny' {\n if (this.orientation === 'vertical') {\n if (width >= this.sizeBreakpoints.vertical.large) return 'large';\n if (width >= this.sizeBreakpoints.vertical.medium) return 'medium';\n if (width >= this.sizeBreakpoints.vertical.small) return 'small';\n return 'tiny';\n }\n if (width >= this.sizeBreakpoints.horizontal.large) return 'large';\n if (width >= this.sizeBreakpoints.horizontal.medium) return 'medium';\n if (width >= this.sizeBreakpoints.horizontal.small) return 'small';\n return 'tiny';\n }\n\n /\n Generates inline styles for the base layer when using a custom image URL.\n /\n private getBaseStyles(): Record<string, string> {\n if (!this.isPredefinedBackground(this.background)) {\n return { '--tct-card-image-base-url': `url(${this.background})` };\n }\n return {};\n }\n\n /\n Returns the card holder name for display, or an empty string if not provided.\n * Only rendered at large and medium sizes.\n /\n private getCardHolderName(): string {\n if (!this.cardHolder \|\| this.size === 'small' \|\| this.size === 'tiny') return '';\n return this.cardHolder;\n }\n\n /\n Returns inline styles for the card type text color.\n /\n private getCardTypeColorStyle(): Record<string, string> {\n if (!this.cardType \|\| !this.cardTypeColor) return {};\n return { '--tct-card-image-type-color': this.cardTypeColor === 'black' ? '#2E2E2E' : '#fff' };\n }\n\n /\n Returns the card type text (ATM or DEBIT) for display, or null if not set.\n /\n private getCardTypeText(): string \| null {\n if (!this.cardType \|\| this.size === 'tiny') return null;\n return this.cardType.toUpperCase();\n }\n\n /\n Returns the resolved file path for the chip SVG, or null if no chip is set.\n /\n private getChipPath(orientation: 'horizontal' \| 'vertical'): string \| null {\n if (!this.chip \|\| this.size === 'tiny') return null;\n const suffix = orientation === 'vertical' ? '-vertical' : '';\n const chipFile = this.chip === 'gold' ? `chip-gold${suffix}.svg` : `chip-silver${suffix}.svg`;\n return getAssetPath(`assets/card-chip/${chipFile}`);\n }\n\n /\n Returns the formatted card number for display, or an empty string if invalid.\n * Extracts the last 4 characters and validates they are all digits.\n /\n private getFormattedCardNumber(): string {\n if (!this.cardNumber \|\| this.cardNumber.length < 4 \|\| this.size === 'tiny') return '';\n const lastFour = this.cardNumber.slice(-4);\n if (!/^\\d{4}$/.test(lastFour)) return '';\n if (this.size === 'large' \|\| this.size === 'medium') {\n return `* ${lastFour}`;\n } else {\n return ` ${lastFour}`;\n }\n }\n\n /\n * Returns the formatted expiration date for display as `MM / YY`, or an empty string if invalid.\n * Accepts ISO 8601 extended format `YYYY-MM`.\n * Only rendered at large and medium sizes.\n /\n private getFormattedExpirationDate(): string {\n if (!this.expirationDate \|\| this.size === 'small' \|\| this.size === 'tiny') return '';\n const match = this.expirationDate.match(/^(\\d{4})-(\\d{2})$/);\n if (!match) return '';\n const year = match[1].slice(-2);\n const month = match[2];\n return `${month} / ${year}`;\n }\n\n /\n Returns the last 4 digits of the card number, or undefined if not set or invalid.\n /\n private getLastFour(): string \| undefined {\n if (!this.cardNumber \|\| this.cardNumber.length < 4) return undefined;\n const lastFour = this.cardNumber.slice(-4);\n return /^\\d{4}$/.test(lastFour) ? lastFour : undefined;\n }\n\n /\n Generates inline styles for the overlay layer when using a custom image URL.\n /\n private getOverlayStyles(): Record<string, string> {\n if (this.overlay && !this.isDotOverlay(this.overlay)) {\n return { '--tct-card-image-overlay-url': `url(${this.overlay})` };\n }\n return {};\n }\n\n /\n Returns the display text for the status banner.\n /\n private getStatusText(): string {\n return this.statusTextOverride \|\| this.cardStatus.toUpperCase();\n }\n\n /\n Returns the resolved file path for the vendor logo SVG, or null if no vendor is set.\n * Custom vendorLogo takes precedence over the vendor prop.\n /\n private getVendorPath(): string \| null {\n if (this.size === 'tiny') return null;\n // Custom vendor logo takes precedence\n if (this.vendorLogo) return this.vendorLogo;\n if (!this.vendor) return null;\n const color = this.vendorColor ?? (this.vendor === 'visa' ? 'white' : 'brand');\n const vendorPrefix = this.vendor === 'mastercard' ? 'mc' : 'visa';\n return getAssetPath(`assets/card-vendor/${vendorPrefix}-${color}.svg`);\n }\n\n /\n Emits the tctClick event with card detail data.\n /\n private handleCardClick = () => {\n this.tctClick.emit({\n cardNumber: this.getLastFour(),\n cardStatus: this.cardStatus,\n statusTextOverride: this.statusTextOverride,\n cardHolder: this.cardHolder,\n expirationDate: this.expirationDate,\n cardType: this.cardType,\n vendor: this.vendor,\n });\n };\n\n /\n Validates and normalizes the action slot content.\n * Only allows a single q2-dropdown element with circular icon-only styling.\n /\n private handleDropdownElement() {\n if (!('HTMLSlotElement' in window)) return;\n const actionSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"action\"]');\n const actionElements = actionSlot?.assignedElements({ flatten: true }) \|\| [];\n actionElements.forEach((el: HTMLElement, index) => {\n if (el.tagName !== 'Q2-DROPDOWN' \|\| index > 0) {\n el.remove();\n console.warn('Q2-CARD-IMAGE: Only one Q2-DROPDOWN is allowed in the action slot.');\n return;\n }\n // Force circular styling with filled background and downward opening\n el.setAttribute('type', 'neutral');\n el.setAttribute('popover-alignment', 'right');\n el.setAttribute('popover-direction', 'down');\n el.style.setProperty('--tct-btn-border-radius', '50%');\n el.setAttribute('hide-label', 'true');\n });\n }\n\n /\n Handles ResizeObserver entries and updates the computed size.\n /\n private handleResize = (entries: ResizeObserverEntry[]) => {\n for (const entry of entries) {\n const newSize = this.computeSizeFromWidth(entry.contentRect.width);\n if (newSize !== this.computedSize) {\n this.computedSize = newSize;\n }\n }\n };\n\n /\n Determines if the overlay value is the 'dot' pattern or a custom URL.\n /\n private isDotOverlay(value: string \| undefined): value is 'dot' {\n return value === 'dot';\n }\n\n /\n Determines if the background value is a predefined type or a custom URL.\n /\n private isPredefinedBackground(\n value: string \| undefined\n ): value is 'primary' \| 'secondary' \| 'tertiary' \| 'gradient' {\n return !!value && this.predefinedBackgrounds.includes(value);\n }\n\n /\n Returns whether the card holder label should be shown.\n * Only displayed at large size and when cardHolderLabel is true.\n /\n private showCardHolderLabel(): boolean {\n return this.cardHolderLabel && this.size === 'large' && !!this.getCardHolderName();\n }\n\n /\n Returns whether the expiration date label should be shown.\n * Only displayed at large size and when expirationDateLabel is true.\n */\n private showExpirationDateLabel(): boolean {\n return this.expirationDateLabel && this.size === 'large' && !!this.getFormattedExpirationDate();\n }\n\n // #endregion\n // #region Render Methods\n\n private renderAction() {\n if (!this.hasActionSlotContent \|\| this.size === 'small' \|\| this.size === 'tiny') return null;\n return (\n <div class=\"card-action\">\n <slot name=\"action\" />\n </div>\n );\n }\n\n private renderCardContent() {\n const cardDetails =\n this.orientation === 'horizontal' ? this.renderHorizontalCardDetails() : this.renderVerticalCardDetails();\n return (\n <div\n role={!this.isDecorative && !this.clickable ? 'img' : undefined}\n aria-label={!this.isDecorative && !this.clickable ? this.accessibilityLabel : undefined}\n aria-hidden={this.isDecorative \|\| this.clickable ? 'true' : undefined}\n class={{\n 'card-image-container': true,\n block: !this.inline,\n clickable: this.clickable && !this.disabled,\n inline: this.inline,\n [`${this.orientation}`]: true,\n }}\n >\n <div\n class={{\n 'card-image': true,\n [`bg-${this.background}`]: this.isPredefinedBackground(this.background),\n 'bg-custom': !this.isPredefinedBackground(this.background),\n }}\n style={this.getBaseStyles()}\n ></div>\n {this.overlay && (\n <div\n class={{\n 'card-image-overlay': true,\n 'bg-dot': this.isDotOverlay(this.overlay),\n 'bg-custom': !this.isDotOverlay(this.overlay),\n }}\n style={this.getOverlayStyles()}\n ></div>\n )}\n <div class=\"card-details-wrapper\">{cardDetails}</div>\n </div>\n );\n }\n\n private renderHorizontalCardDetails() {\n const logoStyle = this.fiLogo ? { '--tct-card-image-fi-logo': `url(${this.fiLogo})` } : {};\n const chipPath = this.getChipPath('horizontal');\n const vendorPath = this.getVendorPath();\n const cardTypeColorStyle = this.getCardTypeColorStyle();\n return (\n <div class=\"card-details-horizontal\">\n <div class=\"horizontal-logo-wrapper\">\n <div\n class=\"horizontal-logo\"\n style={logoStyle}\n ></div>\n </div>\n <div class=\"horizontal-chip\">\n {chipPath && (\n <img\n src={chipPath}\n alt=\"\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div class=\"horizontal-card-number card-text\">{this.getFormattedCardNumber()}</div>\n <div class=\"horizontal-exp-date-card-type-row\">\n <div class=\"horizontal-exp-date-wrapper\">\n {this.showExpirationDateLabel() && (\n <div class=\"horizontal-exp-date-label card-text\">EXPIRES</div>\n )}\n {this.getFormattedExpirationDate() && (\n <div class=\"horizontal-exp-date-value card-text\">{this.getFormattedExpirationDate()}</div>\n )}\n </div>\n <div\n class={{\n 'horizontal-card-type': true,\n 'card-text': true,\n 'vendor-mastercard': this.vendor === 'mastercard',\n 'vendor-visa': this.vendor === 'visa',\n }}\n style={cardTypeColorStyle}\n >\n {this.getCardTypeText()}\n </div>\n </div>\n <div class=\"horizontal-card-holder-vendor-row\">\n <div class=\"horizontal-card-holder-wrapper\">\n {this.showCardHolderLabel() && (\n <div class=\"horizontal-card-holder-label card-text\">CARD HOLDER</div>\n )}\n {this.getCardHolderName() && (\n <div class=\"horizontal-card-holder-value card-text\">{this.getCardHolderName()}</div>\n )}\n </div>\n <div class=\"horizontal-vendor\">\n {vendorPath && (\n <img\n src={vendorPath}\n alt=\"\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n </div>\n </div>\n );\n }\n\n private renderStatusBanner() {\n if (!this.cardStatus \|\| this.size !== 'large') return null;\n return (\n <div\n class={{\n 'card-status-banner': true,\n [`status-${this.cardStatus.replace(/\\s+/g, '-')}`]: true,\n [this.orientation]: true,\n clickable: this.clickable && !this.disabled,\n }}\n onClick={this.clickable && !this.disabled ? this.handleCardClick : undefined}\n >\n <span class=\"card-status-text\">{this.getStatusText()}</span>\n </div>\n );\n }\n\n private renderVerticalCardDetails() {\n const logoStyle = this.fiLogo ? { '--tct-card-image-fi-logo': `url(${this.fiLogo})` } : {};\n const chipPath = this.getChipPath('vertical');\n const vendorPath = this.getVendorPath();\n const cardTypeColorStyle = this.getCardTypeColorStyle();\n return (\n <div class=\"card-details-vertical\">\n <div class=\"vertical-chip\">\n {chipPath && (\n <img\n src={chipPath}\n alt=\"\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div class=\"vertical-logo-wrapper\">\n <div\n class=\"vertical-logo\"\n style={logoStyle}\n ></div>\n </div>\n <div class=\"vertical-card-number card-text\">{this.getFormattedCardNumber()}</div>\n <div class=\"vertical-card-holder-wrapper\">\n {this.showCardHolderLabel() && <div class=\"vertical-card-holder-label card-text\">CARD HOLDER</div>}\n {this.getCardHolderName() && (\n <div class=\"vertical-card-holder-value card-text\">{this.getCardHolderName()}</div>\n )}\n </div>\n <div class=\"vertical-exp-date-card-type-row\">\n <div class=\"vertical-exp-date-wrapper\">\n {this.showExpirationDateLabel() && <div class=\"vertical-exp-date-label card-text\">EXPIRES</div>}\n {this.getFormattedExpirationDate() && (\n <div class=\"vertical-exp-date-value card-text\">{this.getFormattedExpirationDate()}</div>\n )}\n </div>\n <div\n class={{\n 'vertical-card-type': true,\n 'card-text': true,\n 'vendor-mastercard': this.vendor === 'mastercard',\n 'vendor-visa': this.vendor === 'visa',\n }}\n style={cardTypeColorStyle}\n >\n {this.getCardTypeText()}\n </div>\n </div>\n <div class=\"vertical-vendor-row\">\n <div class=\"vertical-vendor\">\n {vendorPath && (\n <img\n src={vendorPath}\n alt=\"\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n </div>\n </div>\n );\n }\n\n render() {\n const cardContent = this.clickable ? (\n <q2-btn\n disabled={this.disabled}\n label={this.accessibilityLabel}\n hideLabel={true}\n onClick={this.handleCardClick}\n >\n {this.renderCardContent()}\n </q2-btn>\n ) : (\n this.renderCardContent()\n );\n\n const showBanner = !!this.cardStatus && this.size === 'large';\n\n return (\n <Host\n class={{\n [`${this.orientation}`]: true,\n 'has-action': this.hasActionSlotContent,\n 'has-banner': showBanner,\n }}\n >\n {this.renderStatusBanner()}\n <div class=\"card-wrapper\">\n {cardContent}\n {this.renderAction()}\n </div>\n </Host>\n );\n }\n\n // #endregion\n}\n"]}
1	+ {"version":3,"file":"q2-card-image.js","sourceRoot":"","sources":["../../../../src/components/q2-card-image/q2-card-image.tsx"],"names":[],"mappings":"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","sourcesContent":["import { hasSlotContent, loc } from '@/utils';\nimport {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n getAssetPath,\n Host,\n Prop,\n State,\n h,\n} from '@stencil/core';\n\n/*\n @name Card Image\n * @summary Displays a visual representation of a credit or debit card with customizable styling\n * and card details. Supports horizontal and vertical orientations with responsive sizing\n * that adapts content visibility based on container width.\n \n @slot action - An optional slot for interactive elements. Supported elements:\n * - [Dropdown](https://tecton.q2developer.com/design-system/q2-dropdown/) —\n * Renders in the top-right corner. Only visible at large and medium sizes.\n \n /\n@Component({ tag: 'q2-card-image', shadow: true, styleUrl: 'q2-card-image.scss', assetsDirs: ['assets'] })\nexport class Q2CardImage implements ComponentInterface {\n // #region Own Properties\n\n private predefinedBackgrounds = ['primary', 'secondary', 'tertiary', 'gradient'];\n private resizeObserver: ResizeObserver;\n private sizeBreakpoints = {\n vertical: { large: 176, medium: 113, small: 63 },\n horizontal: { large: 281, medium: 181, small: 100 },\n };\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n computedSize: 'large' \| 'medium' \| 'small' \| 'tiny' = 'medium';\n\n // #endregion\n // #region Public Property API\n\n /*\n Accessible label for the card image. When provided, this value is applied as `aria-label`\n * on either the card container (non-clickable) or the wrapping button (clickable).\n /\n @Prop({ reflect: false })\n accessibilityLabel?: string;\n\n /\n Background style for the base layer.\n * - `'primary'` \| `'secondary'` \| `'tertiary'`: Solid theme colors\n * - `'gradient'`: Grayscale gradient (themable via CSS variables)\n * - Custom string: URL/path to an image file (SVG, PNG, JPG)\n /\n @Prop({ reflect: true })\n background: 'primary' \| 'secondary' \| 'tertiary' \| 'gradient' \| string = 'primary';\n\n /\n The card holder name to display on the card. Only rendered at large and medium sizes.\n * When not provided, neither the label nor the name is displayed.\n /\n @Prop({ reflect: false })\n cardHolder?: string;\n\n /\n Controls whether the \"CARD HOLDER\" label is displayed above the card holder name.\n * The label is only supported at large size. At medium size, only the name is shown\n * regardless of this prop. When `false`, only the name is shown without the label.\n /\n @Prop({ reflect: false })\n cardHolderLabel: boolean = true;\n\n /\n The card number to display. Only the last 4 characters are used, prefixed with `** ** `.\n * The last 4 characters must all be digits; otherwise the card number is not displayed.\n * Not rendered at tiny size.\n /\n @Prop({ reflect: false })\n cardNumber?: string;\n\n /\n The status of the card. When set, renders a status banner at the top of the card for card sizes medium and up.\n /\n @Prop({ reflect: true })\n cardStatus?: 'digital' \| 'enabled' \| 'disabled' \| 'locked' \| 'damaged' \| 'lost' \| 'stolen' \| 'lost or stolen';\n\n /\n The card type label displayed alongside the expiration date. Not rendered at tiny size.\n /\n @Prop({ reflect: false })\n cardType?: 'atm' \| 'debit';\n\n /\n The color of the card type text. Only applies when `cardType` is set.\n /\n @Prop({ reflect: false })\n cardTypeColor?: 'black' \| 'white';\n\n /\n The chip style displayed on the card. Not rendered at tiny size.\n * - `'gold'`: Gold/brass colored EMV chip\n * - `'silver'`: Silver/platinum colored EMV chip\n /\n @Prop({ reflect: false })\n chip?: 'gold' \| 'silver';\n\n /\n If `true`, the card image is wrapped in a `q2-btn` to handle click interactions.\n /\n @Prop({ reflect: true })\n clickable: boolean = false;\n\n /\n If `true`, the card image is visually disabled and not clickable. Does not affect the dropdown.\n /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /\n The expiration date of the card in ISO 8601 extended format (`YYYY-MM`).\n * Displayed as `MM / YY` on the card. Only rendered at large and medium sizes.\n * When not provided, neither the label nor the date value is displayed.\n /\n @Prop({ reflect: false })\n expirationDate?: string;\n\n /\n Controls whether the \"EXPIRES\" label is displayed above the expiration date.\n * The label is only supported at large size. At medium size, only the date value is shown\n * regardless of this prop. When `false`, only the date value is shown without the label.\n /\n @Prop({ reflect: false })\n expirationDateLabel: boolean = true;\n\n /\n Path to the financial institution logo image (SVG, PNG, or JPG).\n * Max display dimensions: 280x45 for horizontal cards, 250x45 for vertical cards.\n * When not provided, an empty placeholder div is rendered to maintain consistent card structure.\n /\n @Prop({ reflect: false })\n fiLogo?: string;\n\n /\n If `true`, the component uses `display: inline-block`. If `false`, uses `display: block`.\n /\n @Prop({ reflect: true })\n inline: boolean = false;\n\n /\n The orientation of the card image.\n /\n @Prop({ reflect: false })\n orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n Background style for the overlay layer. When undefined, the overlay is not rendered.\n * - `'dot'`: CSS-generated dot pattern with mix-blend-mode overlay (themable via CSS variables)\n * - Custom string: URL/path to an image file (SVG, PNG, JPG)\n /\n @Prop({ reflect: true })\n overlay?: 'dot' \| string;\n\n /\n Overrides the default status banner text (which is the cardStatus value in uppercase).\n * Maximum 14 characters (including spaces) to ensure the text fits within the banner.\n /\n @Prop({ reflect: false })\n statusTextOverride?: string;\n\n /\n The card vendor. Renders the vendor logo in the bottom-right of the card.\n * Not rendered at tiny size.\n /\n @Prop({ reflect: true })\n vendor?: 'mastercard' \| 'visa';\n\n /\n The color variant of the vendor logo. Only applies when `vendor` is set.\n * Defaults to `'white'` for Visa and `'brand'` for Mastercard.\n /\n @Prop({ reflect: false })\n vendorColor?: 'black' \| 'brand' \| 'white';\n\n /\n Path to a custom vendor logo image (SVG, PNG, or JPG).\n * When set, this overrides the `vendor` prop and displays the custom logo.\n * Not rendered at tiny size.\n /\n @Prop({ reflect: false })\n vendorLogo?: string;\n\n // #endregion\n // #region Events\n\n /* Emitted when a clickable card is clicked. Contains card details. /\n @Event()\n tctClick: EventEmitter<{\n cardNumber: string \| undefined;\n cardStatus: string \| undefined;\n statusTextOverride: string \| undefined;\n cardHolder: string \| undefined;\n expirationDate: string \| undefined;\n cardType: string \| undefined;\n vendor: string \| undefined;\n }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n }\n\n componentWillLoad(): void {\n if (typeof window !== 'undefined' && 'ResizeObserver' in window) {\n this.resizeObserver = new ResizeObserver(this.handleResize);\n }\n }\n\n componentDidLoad(): void {\n this.resizeObserver?.observe(this.hostElement);\n const width = this.hostElement.getBoundingClientRect().width;\n if (width > 0) {\n this.computedSize = this.computeSizeFromWidth(width);\n }\n }\n\n componentDidRender(): void {\n this.handleDropdownElement();\n }\n\n // #endregion\n // #region Local Methods\n\n get hasActionSlotContent() {\n return hasSlotContent(this.hostElement, 'action');\n }\n\n private get isDecorative(): boolean {\n return this.size === 'tiny' && !this.clickable;\n }\n\n private get size(): 'large' \| 'medium' \| 'small' \| 'tiny' {\n return this.computedSize;\n }\n\n /\n Computes the display size from the container's current width.\n * Breakpoints represent the minimum widths at which certain card elements are applied to the layout.\n /\n private computeSizeFromWidth(width: number): 'large' \| 'medium' \| 'small' \| 'tiny' {\n if (this.orientation === 'vertical') {\n if (width >= this.sizeBreakpoints.vertical.large) return 'large';\n if (width >= this.sizeBreakpoints.vertical.medium) return 'medium';\n if (width >= this.sizeBreakpoints.vertical.small) return 'small';\n return 'tiny';\n }\n if (width >= this.sizeBreakpoints.horizontal.large) return 'large';\n if (width >= this.sizeBreakpoints.horizontal.medium) return 'medium';\n if (width >= this.sizeBreakpoints.horizontal.small) return 'small';\n return 'tiny';\n }\n\n /\n Generates inline styles for the base layer when using a custom image URL.\n /\n private getBaseStyles(): Record<string, string> {\n if (!this.isPredefinedBackground(this.background)) {\n return { '--tct-card-image-base-url': `url(${this.background})` };\n }\n return {};\n }\n\n /\n Returns the card holder name for display, or an empty string if not provided.\n * Only rendered at large and medium sizes.\n /\n private getCardHolderName(): string {\n if (!this.cardHolder \|\| this.size === 'small' \|\| this.size === 'tiny') return '';\n return this.cardHolder;\n }\n\n /\n Returns inline styles for the card type text color.\n /\n private getCardTypeColorStyle(): Record<string, string> {\n if (!this.cardType \|\| !this.cardTypeColor) return {};\n return { '--tct-card-image-type-color': this.cardTypeColor === 'black' ? '#2E2E2E' : '#fff' };\n }\n\n /\n Returns the card type text (ATM or DEBIT) for display, or null if not set.\n /\n private getCardTypeText(): string \| null {\n if (!this.cardType \|\| this.size === 'tiny') return null;\n return this.cardType.toUpperCase();\n }\n\n /\n Returns the resolved file path for the chip SVG, or null if no chip is set.\n /\n private getChipPath(orientation: 'horizontal' \| 'vertical'): string \| null {\n if (!this.chip \|\| this.size === 'tiny') return null;\n const suffix = orientation === 'vertical' ? '-vertical' : '';\n const chipFile = this.chip === 'gold' ? `chip-gold${suffix}.svg` : `chip-silver${suffix}.svg`;\n return getAssetPath(`assets/card-chip/${chipFile}`);\n }\n\n /\n Returns the formatted card number for display, or an empty string if invalid.\n * Extracts the last 4 characters and validates they are all digits.\n /\n private getFormattedCardNumber(): string {\n if (!this.cardNumber \|\| this.cardNumber.length < 4 \|\| this.size === 'tiny') return '';\n const lastFour = this.cardNumber.slice(-4);\n if (!/^\\d{4}$/.test(lastFour)) return '';\n if (this.size === 'large' \|\| this.size === 'medium') {\n return `* ${lastFour}`;\n } else {\n return ` ${lastFour}`;\n }\n }\n\n /\n * Returns the formatted expiration date for display as `MM / YY`, or an empty string if invalid.\n * Accepts ISO 8601 extended format `YYYY-MM`.\n * Only rendered at large and medium sizes.\n /\n private getFormattedExpirationDate(): string {\n if (!this.expirationDate \|\| this.size === 'small' \|\| this.size === 'tiny') return '';\n const match = this.expirationDate.match(/^(\\d{4})-(\\d{2})$/);\n if (!match) return '';\n const year = match[1].slice(-2);\n const month = match[2];\n return `${month} / ${year}`;\n }\n\n /\n Returns the last 4 digits of the card number, or undefined if not set or invalid.\n /\n private getLastFour(): string \| undefined {\n if (!this.cardNumber \|\| this.cardNumber.length < 4) return undefined;\n const lastFour = this.cardNumber.slice(-4);\n return /^\\d{4}$/.test(lastFour) ? lastFour : undefined;\n }\n\n /\n Generates inline styles for the overlay layer when using a custom image URL.\n /\n private getOverlayStyles(): Record<string, string> {\n if (this.overlay && !this.isDotOverlay(this.overlay)) {\n return { '--tct-card-image-overlay-url': `url(${this.overlay})` };\n }\n return {};\n }\n\n /\n Returns the display text for the status banner.\n /\n private getStatusText(): string {\n return this.statusTextOverride \|\| this.cardStatus.toUpperCase();\n }\n\n /\n Returns the resolved file path for the vendor logo SVG, or null if no vendor is set.\n * Custom vendorLogo takes precedence over the vendor prop.\n /\n private getVendorPath(): string \| null {\n if (this.size === 'tiny') return null;\n // Custom vendor logo takes precedence\n if (this.vendorLogo) return this.vendorLogo;\n if (!this.vendor) return null;\n const color = this.vendorColor ?? (this.vendor === 'visa' ? 'white' : 'brand');\n const vendorPrefix = this.vendor === 'mastercard' ? 'mc' : 'visa';\n return getAssetPath(`assets/card-vendor/${vendorPrefix}-${color}.svg`);\n }\n\n /\n Emits the tctClick event with card detail data.\n /\n private handleCardClick = () => {\n this.tctClick.emit({\n cardNumber: this.getLastFour(),\n cardStatus: this.cardStatus,\n statusTextOverride: this.statusTextOverride,\n cardHolder: this.cardHolder,\n expirationDate: this.expirationDate,\n cardType: this.cardType,\n vendor: this.vendor,\n });\n };\n\n /\n Validates and normalizes the action slot content.\n * Only allows a single q2-dropdown element with circular icon-only styling.\n /\n private handleDropdownElement() {\n if (!('HTMLSlotElement' in window)) return;\n const actionSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"action\"]');\n const actionElements = actionSlot?.assignedElements({ flatten: true }) \|\| [];\n actionElements.forEach((el: HTMLElement, index) => {\n if (el.tagName !== 'Q2-DROPDOWN' \|\| index > 0) {\n el.remove();\n console.warn('Q2-CARD-IMAGE: Only one Q2-DROPDOWN is allowed in the action slot.');\n return;\n }\n // Force circular styling with filled background and downward opening\n el.setAttribute('type', 'neutral');\n el.setAttribute('popover-alignment', 'right');\n el.setAttribute('popover-direction', 'down');\n el.style.setProperty('--tct-btn-border-radius', '50%');\n el.setAttribute('hide-label', 'true');\n });\n }\n\n /\n Handles ResizeObserver entries and updates the computed size.\n /\n private handleResize = (entries: ResizeObserverEntry[]) => {\n for (const entry of entries) {\n const newSize = this.computeSizeFromWidth(entry.contentRect.width);\n if (newSize !== this.computedSize) {\n this.computedSize = newSize;\n }\n }\n };\n\n /\n Determines if the overlay value is the 'dot' pattern or a custom URL.\n /\n private isDotOverlay(value: string \| undefined): value is 'dot' {\n return value === 'dot';\n }\n\n /\n Determines if the background value is a predefined type or a custom URL.\n /\n private isPredefinedBackground(\n value: string \| undefined\n ): value is 'primary' \| 'secondary' \| 'tertiary' \| 'gradient' {\n return !!value && this.predefinedBackgrounds.includes(value);\n }\n\n /\n Returns whether the card holder label should be shown.\n * Only displayed at large size and when cardHolderLabel is true.\n /\n private showCardHolderLabel(): boolean {\n return this.cardHolderLabel && this.size === 'large' && !!this.getCardHolderName();\n }\n\n /\n Returns whether the expiration date label should be shown.\n * Only displayed at large size and when expirationDateLabel is true.\n */\n private showExpirationDateLabel(): boolean {\n return this.expirationDateLabel && this.size === 'large' && !!this.getFormattedExpirationDate();\n }\n\n // #endregion\n // #region Render Methods\n\n private renderAction() {\n if (!this.hasActionSlotContent \|\| this.size === 'small' \|\| this.size === 'tiny') return null;\n return (\n <div class=\"card-action\">\n <slot name=\"action\" />\n </div>\n );\n }\n\n private renderCardContent() {\n const cardDetails =\n this.orientation === 'horizontal' ? this.renderHorizontalCardDetails() : this.renderVerticalCardDetails();\n return (\n <div\n role={!this.isDecorative && !this.clickable ? 'img' : undefined}\n aria-label={!this.isDecorative && !this.clickable ? this.accessibilityLabel : undefined}\n aria-hidden={this.isDecorative \|\| this.clickable ? 'true' : undefined}\n class={{\n 'card-image-container': true,\n block: !this.inline,\n clickable: this.clickable && !this.disabled,\n inline: this.inline,\n [`${this.orientation}`]: true,\n }}\n >\n <div\n class={{\n 'card-image': true,\n [`bg-${this.background}`]: this.isPredefinedBackground(this.background),\n 'bg-custom': !this.isPredefinedBackground(this.background),\n }}\n style={this.getBaseStyles()}\n ></div>\n {this.overlay && (\n <div\n class={{\n 'card-image-overlay': true,\n 'bg-dot': this.isDotOverlay(this.overlay),\n 'bg-custom': !this.isDotOverlay(this.overlay),\n }}\n style={this.getOverlayStyles()}\n ></div>\n )}\n <div class=\"card-details-wrapper\">{cardDetails}</div>\n </div>\n );\n }\n\n private renderHorizontalCardDetails() {\n const logoStyle = this.fiLogo ? { '--tct-card-image-fi-logo': `url(${this.fiLogo})` } : {};\n const chipPath = this.getChipPath('horizontal');\n const vendorPath = this.getVendorPath();\n const cardTypeColorStyle = this.getCardTypeColorStyle();\n return (\n <div class=\"card-details-horizontal\">\n <div class=\"horizontal-logo-wrapper\">\n <div\n class=\"horizontal-logo\"\n style={logoStyle}\n ></div>\n </div>\n <div class=\"horizontal-chip\">\n {chipPath && (\n <img\n src={chipPath}\n alt=\"\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div class=\"horizontal-card-number card-text\">{this.getFormattedCardNumber()}</div>\n <div class=\"horizontal-exp-date-card-type-row\">\n <div class=\"horizontal-exp-date-wrapper\">\n {this.showExpirationDateLabel() && (\n <div class=\"horizontal-exp-date-label card-text\">\n {loc('tecton.element.cardImage.expires')}\n </div>\n )}\n {this.getFormattedExpirationDate() && (\n <div class=\"horizontal-exp-date-value card-text\">{this.getFormattedExpirationDate()}</div>\n )}\n </div>\n <div\n class={{\n 'horizontal-card-type': true,\n 'card-text': true,\n 'vendor-mastercard': this.vendor === 'mastercard',\n 'vendor-visa': this.vendor === 'visa',\n }}\n style={cardTypeColorStyle}\n >\n {this.getCardTypeText()}\n </div>\n </div>\n <div class=\"horizontal-card-holder-vendor-row\">\n <div class=\"horizontal-card-holder-wrapper\">\n {this.showCardHolderLabel() && (\n <div class=\"horizontal-card-holder-label card-text\">\n {loc('tecton.element.cardImage.cardHolder')}\n </div>\n )}\n {this.getCardHolderName() && (\n <div class=\"horizontal-card-holder-value card-text\">{this.getCardHolderName()}</div>\n )}\n </div>\n <div class=\"horizontal-vendor\">\n {vendorPath && (\n <img\n src={vendorPath}\n alt=\"\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n </div>\n </div>\n );\n }\n\n private renderStatusBanner() {\n if (!this.cardStatus \|\| this.size !== 'large') return null;\n return (\n <div\n class={{\n 'card-status-banner': true,\n [`status-${this.cardStatus.replace(/\\s+/g, '-')}`]: true,\n [this.orientation]: true,\n clickable: this.clickable && !this.disabled,\n }}\n onClick={this.clickable && !this.disabled ? this.handleCardClick : undefined}\n >\n <span class=\"card-status-text\">{this.getStatusText()}</span>\n </div>\n );\n }\n\n private renderVerticalCardDetails() {\n const logoStyle = this.fiLogo ? { '--tct-card-image-fi-logo': `url(${this.fiLogo})` } : {};\n const chipPath = this.getChipPath('vertical');\n const vendorPath = this.getVendorPath();\n const cardTypeColorStyle = this.getCardTypeColorStyle();\n return (\n <div class=\"card-details-vertical\">\n <div class=\"vertical-chip\">\n {chipPath && (\n <img\n src={chipPath}\n alt=\"\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div class=\"vertical-logo-wrapper\">\n <div\n class=\"vertical-logo\"\n style={logoStyle}\n ></div>\n </div>\n <div class=\"vertical-card-number card-text\">{this.getFormattedCardNumber()}</div>\n <div class=\"vertical-card-holder-wrapper\">\n {this.showCardHolderLabel() && (\n <div class=\"vertical-card-holder-label card-text\">\n {loc('tecton.element.cardImage.cardHolder')}\n </div>\n )}\n {this.getCardHolderName() && (\n <div class=\"vertical-card-holder-value card-text\">{this.getCardHolderName()}</div>\n )}\n </div>\n <div class=\"vertical-exp-date-card-type-row\">\n <div class=\"vertical-exp-date-wrapper\">\n {this.showExpirationDateLabel() && (\n <div class=\"vertical-exp-date-label card-text\">\n {loc('tecton.element.cardImage.expires')}\n </div>\n )}\n {this.getFormattedExpirationDate() && (\n <div class=\"vertical-exp-date-value card-text\">{this.getFormattedExpirationDate()}</div>\n )}\n </div>\n <div\n class={{\n 'vertical-card-type': true,\n 'card-text': true,\n 'vendor-mastercard': this.vendor === 'mastercard',\n 'vendor-visa': this.vendor === 'visa',\n }}\n style={cardTypeColorStyle}\n >\n {this.getCardTypeText()}\n </div>\n </div>\n <div class=\"vertical-vendor-row\">\n <div class=\"vertical-vendor\">\n {vendorPath && (\n <img\n src={vendorPath}\n alt=\"\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n </div>\n </div>\n );\n }\n\n render() {\n const cardContent = this.clickable ? (\n <q2-btn\n disabled={this.disabled}\n label={this.accessibilityLabel}\n hideLabel={true}\n onClick={this.handleCardClick}\n >\n {this.renderCardContent()}\n </q2-btn>\n ) : (\n this.renderCardContent()\n );\n\n const showBanner = !!this.cardStatus && this.size === 'large';\n\n return (\n <Host\n class={{\n [`${this.orientation}`]: true,\n 'has-action': this.hasActionSlotContent,\n 'has-banner': showBanner,\n }}\n >\n {this.renderStatusBanner()}\n <div class=\"card-wrapper\">\n {cardContent}\n {this.renderAction()}\n </div>\n </Host>\n );\n }\n\n // #endregion\n}\n"]}

package/dist/collection/components/q2-carousel/q2-carousel.css CHANGED Viewed

@@ -68,7 +68,7 @@ button {
 q2-carousel {
   display: grid;
   grid-template-rows: repeat(2, auto);
-  gap: var(--app-scale-2x, 10px);
+  gap: var(--tct-carousel-gap, var(--app-scale-2x, 10px));
 }
 .swiper {

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

@@ -3,7 +3,9 @@ import Swiper from "swiper";
 import { Autoplay } from "swiper/modules";
 import { createGuid, loc, handleAriaLabel, overrideFocus, isEventFromElement } from "../../utils/index";
 import mirrorEmit from "../../utils/mirror-emit";
+import { filterChildren, hasValidChildren } from "../../utils/component";
 const carouselBreakpoint = 500; /* width in px of this host element where the layout starts to get unruly */
+const carouselDesktopBreakpoint = 1024; /* viewport width where we show 3 full panes */
 /**
  * @name Carousel
  * @category Display
@@ -191,6 +193,9 @@ export class Q2Carousel {
         handleAriaLabel(this);
         this.updateCarouselPaneProps();
         window.addEventListener('resize', this.setCarouselWrapperWidth);
+        if (!hasValidChildren(this.hostElement, 'q2-carousel-pane')) {
+            filterChildren(this.hostElement, 'q2-carousel-pane');
+        }
         this.universalCarouselOptions = {
             centeredSlides: true,
             focusableElements: 'q2-btn, q2-dropdown, q2-item, q2-list, a, input, select, textarea, button, video, label, option',
@@ -338,6 +343,11 @@ export class Q2Carousel {
             slidesPerView: 2,
             spaceBetween: this.compactMode ? 0 : -10,
             centerInsufficientSlides: false,
+            breakpoints: {
+                [carouselDesktopBreakpoint]: {
+                    slidesPerView: 3,
+                },
+            },
             ...this.universalCarouselOptions,
         };
     }
@@ -370,7 +380,7 @@ export class Q2Carousel {
         let paginationWrapperClasses = ['q2-carousel-pagination-navigation-wrapper'];
         if (showNavigationArrows)
             paginationWrapperClasses = [...paginationWrapperClasses, 'evenly-space'];
-        return (h(Host, { key: 'b5c43ad4379878be721bc9119753ef6fe75aa491', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (h(Fragment, null, paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows && this.renderPrevNavBtn(), h("div", { class: "q2-carousel-control-center-tray" }, !hidePagination && this.renderPaginationArea(), autoPlay && this.renderAutoPlayBtn()), showNavigationArrows && this.renderNextNavBtn())), h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": loc(label) }, h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": ariaLiveValue, onKeyDown: this.keydownHandler }, h("slot", null)))))));
+        return (h(Host, { key: '5f48c7aab4485b79ffc625f050e2ce386ccadbf4', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (h(Fragment, null, paneCount > 1 && (h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows && this.renderPrevNavBtn(), h("div", { class: "q2-carousel-control-center-tray" }, !hidePagination && this.renderPaginationArea(), autoPlay && this.renderAutoPlayBtn()), showNavigationArrows && this.renderNextNavBtn())), h("section", { class: carouselContainerClasses.join(' '), ref: el => (this.carouselWrapper = el), "aria-roledescription": "carousel", "aria-label": loc(label) }, h("div", { class: "q2-carousel-swiper-wrapper swiper-wrapper", ref: el => (this.carouselPaneWrapperElement = el), "aria-live": ariaLiveValue, onKeyDown: this.keydownHandler }, h("slot", null)))))));
     }
     static get is() { return "q2-carousel"; }
     static get originalStyleUrls() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-carousel.js","sourceRoot":"","sources":["../../../../src/components/q2-carousel/q2-carousel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Prop,\n Watch,\n State,\n Fragment,\n Element,\n Host,\n h,\n Event,\n EventEmitter,\n Listen,\n Method,\n} from '@stencil/core';\nimport Swiper from 'swiper';\nimport { Autoplay } from 'swiper/modules';\nimport type { SwiperOptions } from 'swiper/types';\nimport { createGuid, loc, handleAriaLabel, overrideFocus, isEventFromElement } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\nconst carouselBreakpoint = 500; /* width in px of this host element where the layout starts to get unruly /\n\n/\n @name Carousel\n * @category Display\n * @summary Use for cycling through a series of content slides with swipe or button navigation.\n /\n@Component({ tag: 'q2-carousel', shadow: false, styleUrl: 'q2-carousel.scss' })\nexport class Q2Carousel implements ComponentInterface {\n // #region Own Properties\n\n carouselPaneWrapperElement: HTMLElement;\n carouselWrapper: HTMLElement;\n fullWidthDisplayOptions: SwiperOptions;\n guid = createGuid();\n mutationObserver: MutationObserver;\n swiper?: Swiper = null;\n universalCarouselOptions: SwiperOptions;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n /* Manages re-rendering the component when the `ariaLive` value changes. /\n @State()\n ariaLiveValue: 'polite' \| 'off' = 'polite';\n\n /* Manages re-rendering the autoPlay button when clicked. /\n @State()\n autoPlayInProgress: boolean = false;\n\n /* Manages re-rendering the component when resize event is consumed. /\n @State()\n carouselWrapperWidth: number = 0;\n\n /* Manages sizing the component based on changes in `carouselWrapperWidth`. /\n @State()\n compactMode: boolean = false;\n\n /* Manages re-rendering the component when panes are added or removed. /\n @State()\n currentPaneCount: number = this.paneCount;\n\n // #endregion\n // #region Public Property API\n\n /* @deprecated /\n @Prop({ reflect: true })\n ariaLabel: string;\n\n /* Enables the auto-play feature and starts the carousel without user input. /\n @Prop({ reflect: true })\n autoPlay: boolean = false;\n\n /* Display the carousel panes as frameless with no container or shadow. /\n @Prop({ reflect: true })\n framelessPanes: boolean = false;\n\n /* Display the carousel panes full-width rather than with peeking content. /\n @Prop({ reflect: true })\n fullWidthPanes: boolean = false;\n\n /* Hide the dots below the carousel that provide navigation control and indicate which page is currently active. /\n @Prop({ reflect: true })\n hidePagination: boolean = false;\n\n /* The currently displayed carousel pane. /\n @Prop({ reflect: true, mutable: true })\n index: number = 1;\n\n /\n The label that is associated with the carousel. This is not displayed visually, but is presented by screen readers.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string = 'tecton.element.carousel.ariaLabel';\n\n /* Display navigation arrow buttons as another way to navigate the carousel. /\n @Prop({ reflect: true })\n showNavigationArrows: boolean = false;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the displayed carousel pane changes.\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{ index: number }>;\n\n /\n Emitted when the displayed carousel pane changes.\n /\n @Event()\n tctChange: EventEmitter<{ index: number }>;\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 if (!!this.swiper) {\n this.tearDownCarousel();\n }\n\n window.removeEventListener('resize', this.setCarouselWrapperWidth);\n }\n\n componentWillLoad() {\n handleAriaLabel(this);\n this.updateCarouselPaneProps();\n window.addEventListener('resize', this.setCarouselWrapperWidth);\n\n this.universalCarouselOptions = {\n centeredSlides: true,\n focusableElements:\n 'q2-btn, q2-dropdown, q2-item, q2-list, a, input, select, textarea, button, video, label, option',\n autoplay: this.autoPlay,\n modules: [Autoplay],\n on: {\n realIndexChange: swiper => {\n this.index = swiper.realIndex + 1;\n this.updateCarouselPaneProps();\n const isPaginationFocused = !!document.activeElement.closest(\n `#q2-carousel-${this.guid} .q2-carousel-page-indicator`\n );\n const isCarouselFocused = !!document.activeElement.closest(\n `#q2-carousel-${this.guid} q2-carousel-pane`\n );\n const isFocused = isPaginationFocused \|\| isCarouselFocused;\n this.handleAriaLive(isFocused);\n mirrorEmit(this, ['change', 'tctChange'], { index: swiper.realIndex + 1 });\n\n if (isPaginationFocused) {\n this.paginationBtns[swiper.realIndex].focus({ preventScroll: true });\n } else if (isCarouselFocused)\n (swiper.slides[swiper.realIndex] as HTMLElement).focus({\n preventScroll: true,\n });\n },\n afterInit: swiper => {\n this.swiper = swiper;\n this.activePane?.addEventListener('popoverStateChanged', this.handlePopovers);\n },\n slideChangeTransitionEnd: () => {\n this.activePane?.addEventListener('popoverStateChanged', this.handlePopovers);\n },\n slideChangeTransitionStart: () => {\n this.activePane?.removeEventListener('popoverStateChanged', this.handlePopovers);\n },\n },\n };\n\n this.fullWidthDisplayOptions = {\n slidesPerView: 1,\n spaceBetween: 100,\n ...this.universalCarouselOptions,\n };\n }\n\n componentDidLoad() {\n this.setCarouselWrapperWidth();\n if (this.carouselWrapper && !!this.paneArray.length) {\n this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);\n }\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('clickCarouselPane')\n carouselPaneClicked(event) {\n this.swiper?.slideTo(event.detail.paneIndex);\n (this.swiper?.slides[event.detail.paneIndex] as HTMLElement).focus({ preventScroll: true });\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n const activePane = this.swiper?.slides[this.swiper?.realIndex];\n if (!isEventFromElement(event, this.hostElement) \|\| !activePane) return;\n (activePane as HTMLElement).focus({ preventScroll: true });\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Clicks and Focuses the `q2-carousel-pane` matching the specified index.\n * @testOnly\n /\n @Method()\n async selectCarouselPane(index: number) {\n if (index > this.paneCount) return;\n const actualIndex = index > 0 ? index - 1 : 0;\n const pane = this.paneArray[actualIndex];\n pane?.click();\n pane?.focus({ preventScroll: true });\n }\n\n /\n Clicks and Focuses the `<button>` that controls playing or pausing the auto-play feature of the carousel.\n \n @warning\n * If the `autoPlay` property is not enabled, this method does nothing.\n \n @testOnly\n */\n @Method()\n async togglePlayPause() {\n if (!this.autoPlay) return;\n const playPauseBtn = this.hostElement.querySelector('.q2-carousel-autoplay-control') as HTMLQ2BtnElement;\n playPauseBtn?.click();\n playPauseBtn?.focus();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('carouselWrapperWidth')\n carouselWrapperWidthChanged() {\n this.compactMode = this.carouselWrapperWidth < carouselBreakpoint;\n }\n\n @Watch('framelessPanes')\n framelessPanesChanged() {\n this.updateCarouselPaneProps();\n this.revampCarousel();\n }\n\n @Watch('fullWidthPanes')\n @Watch('framelessPanes')\n @Watch('compactMode')\n @Watch('autoPlay')\n revampCarousel() {\n this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);\n }\n\n @Watch('index')\n indexChanged(newIndex) {\n // this allows the carousel to be swiped programmatically via the index prop\n if (newIndex !== this.swiper?.realIndex + 1) {\n this.swiper?.slideTo(this.realIndex);\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get activeCarouselOptions() {\n return this.fullWidthPanes \|\| this.framelessPanes\n ? this.fullWidthDisplayOptions\n : this.peekContentDisplayOptions;\n }\n\n get activePane(): HTMLElement {\n const activeSlide = this.swiper?.slides[this.swiper?.realIndex] ?? 0;\n return activeSlide instanceof HTMLElement ? activeSlide : null;\n }\n\n get insufficientPanes() {\n return this.paneCount < 1;\n }\n\n get paginationBtns(): NodeListOf<HTMLButtonElement> {\n return this.hostElement.querySelectorAll('.q2-carousel-page-indicator');\n }\n\n get paneArray(): HTMLQ2CarouselPaneElement[] {\n return Array.from(this.hostElement.querySelectorAll('q2-carousel-pane'));\n }\n\n get paneCount() {\n return this.paneArray.length;\n }\n\n get peekContentDisplayOptions(): SwiperOptions {\n return {\n slidesPerView: 2,\n spaceBetween: this.compactMode ? 0 : -10,\n centerInsufficientSlides: false,\n ...this.universalCarouselOptions,\n };\n }\n\n get realIndex(): number {\n const indexNum = Number(this.index);\n return indexNum > 0 ? indexNum - 1 : 0;\n }\n\n get useDynamicPaginationDots() {\n return this.paneCount && this.paneCount > 5;\n }\n\n configureCarousel = (carouselWrapper, carouselOptions) => {\n if (!!this.swiper) {\n this.tearDownCarousel();\n }\n this.autoPlayInProgress = this.autoPlay;\n\n new Swiper(carouselWrapper, carouselOptions);\n this.swiper?.slideTo(this.realIndex);\n if (this.autoPlayInProgress) this.swiper?.autoplay.start();\n };\n\n handleAriaLive(activeAndFocused: boolean) {\n if (this.autoPlayInProgress && !activeAndFocused) {\n this.ariaLiveValue = 'off';\n } else {\n this.ariaLiveValue = 'polite';\n }\n }\n\n handleAutoPlayPause = (action: 'play' \| 'pause') => {\n if (!this.autoPlay) return;\n const autoplay = this.swiper?.autoplay;\n switch (action) {\n case 'play':\n autoplay.start();\n this.autoPlayInProgress = true;\n break;\n case 'pause':\n autoplay.stop();\n this.autoPlayInProgress = false;\n break;\n }\n };\n\n handlePopovers = (event: CustomEvent) => {\n const { swiper, carouselPaneWrapperElement } = this;\n if (event.detail.open) {\n carouselPaneWrapperElement.style.left = `${swiper?.translate}px`;\n carouselPaneWrapperElement.style.transform = null;\n swiper?.disable();\n } else {\n carouselPaneWrapperElement.style.left = null;\n carouselPaneWrapperElement.style.transform = `translate3d(${swiper?.translate}px, 0, 0)`;\n swiper?.enable();\n }\n };\n\n keydownHandler = (event: KeyboardEvent) => {\n switch (event.key) {\n case 'ArrowRight':\n event.preventDefault();\n this.swiper?.slideNext();\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n this.swiper?.slidePrev();\n break;\n\n case 'Home':\n event.preventDefault();\n this.swiper?.slideTo(0);\n break;\n\n case 'End':\n event.preventDefault();\n this.swiper?.slideTo(this.paneCount - 1);\n break;\n }\n };\n\n onMutationObserved = () => {\n this.updateCarouselPaneProps();\n this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);\n };\n\n setCarouselWrapperWidth = () => {\n if (this.insufficientPanes) return;\n this.carouselWrapperWidth = this.carouselWrapper.clientWidth;\n };\n\n tearDownCarousel = () => {\n this.swiper.destroy();\n this.swiper = null;\n };\n\n updateCarouselPaneProps = () => {\n const { framelessPanes, paneCount, paneArray } = this;\n\n paneArray.forEach((pane, index) => {\n pane.index = index;\n pane.siblingCount = paneCount;\n pane.isActivePane = index === this.realIndex;\n pane.slotFrameless = framelessPanes \|\| undefined;\n });\n this.currentPaneCount = paneCount;\n };\n\n // #endregion\n // #region Render Methods\n\n renderAutoPlayBtn = () => {\n const { autoPlayInProgress } = this;\n return (\n <q2-btn\n type=\"button\"\n hide-label\n label={loc(\n autoPlayInProgress\n ? 'tecton.element.carousel.pausePlayLabel'\n : 'tecton.element.carousel.resumePlayLabel'\n )}\n class=\"q2-carousel-autoplay-control\"\n onClick={() => this.handleAutoPlayPause(autoPlayInProgress ? 'pause' : 'play')}\n >\n <q2-icon type={autoPlayInProgress ? 'pause' : 'play'} />\n </q2-btn>\n );\n };\n\n renderInsufficientPanesDisplay = () => {\n let insufficientPanesContainerClasses = [\n 'insufficient-pane-feedback',\n this.fullWidthPanes ? 'full-width-display' : 'content-peek-display',\n ];\n if (this.compactMode) insufficientPanesContainerClasses = [...insufficientPanesContainerClasses, 'compact'];\n\n return (\n <div class={insufficientPanesContainerClasses.join(' ')}>\n <div class=\"insufficient-panes-icon-wrapper\">\n <q2-icon type=\"warning\" />\n </div>\n <p class=\"insufficient-panes-header\">\n <strong>{loc('tecton.element.carousel.insufficientPanesMessageHeader')}</strong>\n </p>\n <p class=\"insufficient-panes-body\">{loc('tecton.element.carousel.insufficientPanesMessageBody')}</p>\n </div>\n );\n };\n\n renderNextNavBtn = () => {\n const nextPaneAvailable = this.realIndex < this.paneCount - 1;\n\n return (\n <div>\n <q2-btn\n type=\"button\"\n disabled={nextPaneAvailable ? undefined : true}\n class=\"q2-carousel-navigation-button q2-carousel-navigation-button-next\"\n hide-label\n label={loc('tecton.element.carousel.nextItemLabel')}\n onClick={() => this.swiper?.slideNext()}\n >\n <q2-icon type=\"chevron-right\" />\n </q2-btn>\n </div>\n );\n };\n\n renderPaginationArea = () => {\n const { useDynamicPaginationDots, realIndex, paneCount, paneArray } = this;\n let paginationContainerClasses = ['q2-carousel-pagination'];\n if (useDynamicPaginationDots) paginationContainerClasses = [...paginationContainerClasses, 'dynamic'];\n\n return (\n <div\n class={paginationContainerClasses.join(' ')}\n role=\"tablist\"\n aria-label={loc('tecton.element.carousel.tabWrapperLabel')}\n >\n {paneArray.map(pane => {\n let btnClasses = ['q2-carousel-page-indicator', `q2-carousel-page-indicator-${pane.index}`];\n if (pane.isActivePane) btnClasses = [...btnClasses, 'active-page'];\n if (useDynamicPaginationDots) btnClasses = [...btnClasses, 'dynamic'];\n\n const withinOneOfActive = pane.index === realIndex + 1 \|\| pane.index === realIndex - 1;\n if (withinOneOfActive) btnClasses = [...btnClasses, 'active-adjacent'];\n\n const withinTwoOfActive = pane.index === realIndex + 2 \|\| pane.index === realIndex - 2;\n if (withinTwoOfActive) btnClasses = [...btnClasses, 'active-adjacent-adjacent'];\n\n return (\n <button\n type=\"button\"\n role=\"tab\"\n tabIndex={pane.isActivePane ? undefined : -1}\n aria-selected={`${pane.isActivePane}`}\n class={btnClasses.join(' ')}\n onClick={() => this.swiper?.slideTo(pane.index)}\n onKeyDown={this.keydownHandler}\n aria-label={loc('tecton.element.carousel.itemDescription', [\n (pane.index + 1).toString(),\n paneCount.toString(),\n ])}\n ></button>\n );\n })}\n </div>\n );\n };\n\n renderPrevNavBtn = () => {\n const prevPaneAvailable = this.realIndex > 0;\n\n return (\n <div>\n <q2-btn\n type=\"button\"\n disabled={prevPaneAvailable ? undefined : true}\n class=\"q2-carousel-navigation-button q2-carousel-navigation-button-prev\"\n hide-label\n label={loc('tecton.element.carousel.previousItemLabel')}\n onClick={() => this.swiper?.slidePrev()}\n >\n <q2-icon type=\"chevron-left\" />\n </q2-btn>\n </div>\n );\n };\n\n render() {\n const {\n paneCount,\n fullWidthPanes,\n framelessPanes,\n compactMode,\n showNavigationArrows,\n insufficientPanes,\n autoPlay,\n hidePagination,\n ariaLiveValue,\n label,\n } = this;\n let carouselContainerClasses = ['q2-carousel-swiper-container', 'swiper'];\n if (fullWidthPanes) carouselContainerClasses = [...carouselContainerClasses, 'full-width-display'];\n if (framelessPanes) carouselContainerClasses = [...carouselContainerClasses, 'frameless-display'];\n if (!fullWidthPanes && !framelessPanes)\n carouselContainerClasses = [...carouselContainerClasses, 'content-peek-display'];\n if (compactMode) carouselContainerClasses = [...carouselContainerClasses, 'compact'];\n\n let paginationWrapperClasses = ['q2-carousel-pagination-navigation-wrapper'];\n if (showNavigationArrows) paginationWrapperClasses = [...paginationWrapperClasses, 'evenly-space'];\n\n return (\n <Host\n id={`q2-carousel-${this.guid}`}\n class=\"q2-carousel-instance\"\n >\n {insufficientPanes ? (\n this.renderInsufficientPanesDisplay()\n ) : (\n <Fragment>\n {paneCount > 1 && (\n <div class={paginationWrapperClasses.join(' ')}>\n {showNavigationArrows && this.renderPrevNavBtn()}\n\n <div class=\"q2-carousel-control-center-tray\">\n {!hidePagination && this.renderPaginationArea()}\n\n {autoPlay && this.renderAutoPlayBtn()}\n </div>\n\n {showNavigationArrows && this.renderNextNavBtn()}\n </div>\n )}\n\n <section\n class={carouselContainerClasses.join(' ')}\n ref={el => (this.carouselWrapper = el)}\n aria-roledescription=\"carousel\"\n aria-label={loc(label)}\n >\n <div\n class=\"q2-carousel-swiper-wrapper swiper-wrapper\"\n ref={el => (this.carouselPaneWrapperElement = el)}\n aria-live={ariaLiveValue}\n onKeyDown={this.keydownHandler}\n >\n <slot></slot>\n </div>\n </section>\n </Fragment>\n )}\n </Host>\n );\n }\n\n // #endregion\n}\n"]}
1	+ {"version":3,"file":"q2-carousel.js","sourceRoot":"","sources":["../../../../src/components/q2-carousel/q2-carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EAET,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,CAAC,EACD,KAAK,EAEL,MAAM,EACN,MAAM,GACT,MAAM,eAAe,CAAC;AACvB,OAAO,MAAM,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,eAAe,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAChG,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErE,MAAM,kBAAkB,GAAG,GAAG,CAAC,CAAC,4EAA4E;AAC5G,MAAM,yBAAyB,GAAG,IAAI,CAAC,CAAC,+CAA+C;AAEvF;;;;GAIG;AAEH,MAAM,OAAO,UAAU;IADvB;QAOI,SAAI,GAAG,UAAU,EAAE,CAAC;QAEpB,WAAM,GAAY,IAAI,CAAC;QASvB,aAAa;QACb,2BAA2B;QAE3B,4EAA4E;QAE5E,kBAAa,GAAqB,QAAQ,CAAC;QAE3C,8DAA8D;QAE9D,uBAAkB,GAAY,KAAK,CAAC;QAEpC,wEAAwE;QAExE,yBAAoB,GAAW,CAAC,CAAC;QAEjC,+EAA+E;QAE/E,gBAAW,GAAY,KAAK,CAAC;QAE7B,0EAA0E;QAE1E,qBAAgB,GAAW,IAAI,CAAC,SAAS,CAAC;QAS1C,gFAAgF;QAEhF,aAAQ,GAAY,KAAK,CAAC;QAE1B,2EAA2E;QAE3E,mBAAc,GAAY,KAAK,CAAC;QAEhC,8EAA8E;QAE9E,mBAAc,GAAY,KAAK,CAAC;QAEhC,oHAAoH;QAEpH,mBAAc,GAAY,KAAK,CAAC;QAEhC,6CAA6C;QAE7C,UAAK,GAAW,CAAC,CAAC;QAElB;;;WAGG;QAEH,UAAK,GAAW,mCAAmC,CAAC;QAEpD,gFAAgF;QAEhF,yBAAoB,GAAY,KAAK,CAAC;QA4OtC,sBAAiB,GAAG,CAAC,eAAe,EAAE,eAAe,EAAE,EAAE;;YACrD,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC5B,CAAC;YACD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,QAAQ,CAAC;YAExC,IAAI,MAAM,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;YAC7C,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACrC,IAAI,IAAI,CAAC,kBAAkB;gBAAE,MAAA,IAAI,CAAC,MAAM,0CAAE,QAAQ,CAAC,KAAK,EAAE,CAAC;QAC/D,CAAC,CAAC;QAUF,wBAAmB,GAAG,CAAC,MAAwB,EAAE,EAAE;;YAC/C,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC3B,MAAM,QAAQ,GAAG,MAAA,IAAI,CAAC,MAAM,0CAAE,QAAQ,CAAC;YACvC,QAAQ,MAAM,EAAE,CAAC;gBACb,KAAK,MAAM;oBACP,QAAQ,CAAC,KAAK,EAAE,CAAC;oBACjB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;oBAC/B,MAAM;gBACV,KAAK,OAAO;oBACR,QAAQ,CAAC,IAAI,EAAE,CAAC;oBAChB,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;oBAChC,MAAM;YACd,CAAC;QACL,CAAC,CAAC;QAEF,mBAAc,GAAG,CAAC,KAAkB,EAAE,EAAE;YACpC,MAAM,EAAE,MAAM,EAAE,0BAA0B,EAAE,GAAG,IAAI,CAAC;YACpD,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;gBACpB,0BAA0B,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,SAAS,IAAI,CAAC;gBACjE,0BAA0B,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;gBAClD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,EAAE,CAAC;YACtB,CAAC;iBAAM,CAAC;gBACJ,0BAA0B,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;gBAC7C,0BAA0B,CAAC,KAAK,CAAC,SAAS,GAAG,eAAe,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,SAAS,WAAW,CAAC;gBACzF,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,EAAE,CAAC;YACrB,CAAC;QACL,CAAC,CAAC;QAEF,mBAAc,GAAG,CAAC,KAAoB,EAAE,EAAE;;YACtC,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;gBAChB,KAAK,YAAY;oBACb,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAA,IAAI,CAAC,MAAM,0CAAE,SAAS,EAAE,CAAC;oBACzB,MAAM;gBAEV,KAAK,WAAW;oBACZ,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAA,IAAI,CAAC,MAAM,0CAAE,SAAS,EAAE,CAAC;oBACzB,MAAM;gBAEV,KAAK,MAAM;oBACP,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,CAAC,CAAC,CAAC,CAAC;oBACxB,MAAM;gBAEV,KAAK,KAAK;oBACN,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;oBACzC,MAAM;YACd,CAAC;QACL,CAAC,CAAC;QAEF,uBAAkB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,uBAAuB,EAAE,CAAC;YAC/B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;QAC7E,CAAC,CAAC;QAEF,4BAAuB,GAAG,GAAG,EAAE;YAC3B,IAAI,IAAI,CAAC,iBAAiB;gBAAE,OAAO;YACnC,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC;QACjE,CAAC,CAAC;QAEF,qBAAgB,GAAG,GAAG,EAAE;YACpB,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;YACtB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACvB,CAAC,CAAC;QAEF,4BAAuB,GAAG,GAAG,EAAE;YAC3B,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;YAEtD,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAC9B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;gBACnB,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;gBAC9B,IAAI,CAAC,YAAY,GAAG,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC;gBAC7C,IAAI,CAAC,aAAa,GAAG,cAAc,IAAI,SAAS,CAAC;YACrD,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,gBAAgB,GAAG,SAAS,CAAC;QACtC,CAAC,CAAC;QAEF,aAAa;QACb,yBAAyB;QAEzB,sBAAiB,GAAG,GAAG,EAAE;YACrB,MAAM,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC;YACpC,OAAO,CACH,cACI,IAAI,EAAC,QAAQ,sBAEb,KAAK,EAAE,GAAG,CACN,kBAAkB;oBACd,CAAC,CAAC,wCAAwC;oBAC1C,CAAC,CAAC,yCAAyC,CAClD,EACD,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;gBAE9E,eAAS,IAAI,EAAE,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,GAAI,CACnD,CACZ,CAAC;QACN,CAAC,CAAC;QAEF,mCAA8B,GAAG,GAAG,EAAE;YAClC,IAAI,iCAAiC,GAAG;gBACpC,4BAA4B;gBAC5B,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB;aACtE,CAAC;YACF,IAAI,IAAI,CAAC,WAAW;gBAAE,iCAAiC,GAAG,CAAC,GAAG,iCAAiC,EAAE,SAAS,CAAC,CAAC;YAE5G,OAAO,CACH,WAAK,KAAK,EAAE,iCAAiC,CAAC,IAAI,CAAC,GAAG,CAAC;gBACnD,WAAK,KAAK,EAAC,iCAAiC;oBACxC,eAAS,IAAI,EAAC,SAAS,GAAG,CACxB;gBACN,SAAG,KAAK,EAAC,2BAA2B;oBAChC,kBAAS,GAAG,CAAC,wDAAwD,CAAC,CAAU,CAChF;gBACJ,SAAG,KAAK,EAAC,yBAAyB,IAAE,GAAG,CAAC,sDAAsD,CAAC,CAAK,CAClG,CACT,CAAC;QACN,CAAC,CAAC;QAEF,qBAAgB,GAAG,GAAG,EAAE;YACpB,MAAM,iBAAiB,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;YAE9D,OAAO,CACH;gBACI,cACI,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC9C,KAAK,EAAC,kEAAkE,sBAExE,KAAK,EAAE,GAAG,CAAC,uCAAuC,CAAC,EACnD,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,SAAS,EAAE,CAAA,EAAA;oBAEvC,eAAS,IAAI,EAAC,eAAe,GAAG,CAC3B,CACP,CACT,CAAC;QACN,CAAC,CAAC;QAEF,yBAAoB,GAAG,GAAG,EAAE;YACxB,MAAM,EAAE,wBAAwB,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;YAC3E,IAAI,0BAA0B,GAAG,CAAC,wBAAwB,CAAC,CAAC;YAC5D,IAAI,wBAAwB;gBAAE,0BAA0B,GAAG,CAAC,GAAG,0BAA0B,EAAE,SAAS,CAAC,CAAC;YAEtG,OAAO,CACH,WACI,KAAK,EAAE,0BAA0B,CAAC,IAAI,CAAC,GAAG,CAAC,EAC3C,IAAI,EAAC,SAAS,gBACF,GAAG,CAAC,yCAAyC,CAAC,IAEzD,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBAClB,IAAI,UAAU,GAAG,CAAC,4BAA4B,EAAE,8BAA8B,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;gBAC5F,IAAI,IAAI,CAAC,YAAY;oBAAE,UAAU,GAAG,CAAC,GAAG,UAAU,EAAE,aAAa,CAAC,CAAC;gBACnE,IAAI,wBAAwB;oBAAE,UAAU,GAAG,CAAC,GAAG,UAAU,EAAE,SAAS,CAAC,CAAC;gBAEtE,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,CAAC,CAAC;gBACvF,IAAI,iBAAiB;oBAAE,UAAU,GAAG,CAAC,GAAG,UAAU,EAAE,iBAAiB,CAAC,CAAC;gBAEvE,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,CAAC,CAAC;gBACvF,IAAI,iBAAiB;oBAAE,UAAU,GAAG,CAAC,GAAG,UAAU,EAAE,0BAA0B,CAAC,CAAC;gBAEhF,OAAO,CACH,cACI,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,mBAC7B,GAAG,IAAI,CAAC,YAAY,EAAE,EACrC,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,EAC3B,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA,EAAA,EAC/C,SAAS,EAAE,IAAI,CAAC,cAAc,gBAClB,GAAG,CAAC,yCAAyC,EAAE;wBACvD,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE;wBAC3B,SAAS,CAAC,QAAQ,EAAE;qBACvB,CAAC,GACI,CACb,CAAC;YACN,CAAC,CAAC,CACA,CACT,CAAC;QACN,CAAC,CAAC;QAEF,qBAAgB,GAAG,GAAG,EAAE;YACpB,MAAM,iBAAiB,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;YAE7C,OAAO,CACH;gBACI,cACI,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC9C,KAAK,EAAC,kEAAkE,sBAExE,KAAK,EAAE,GAAG,CAAC,2CAA2C,CAAC,EACvD,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,SAAS,EAAE,CAAA,EAAA;oBAEvC,eAAS,IAAI,EAAC,cAAc,GAAG,CAC1B,CACP,CACT,CAAC;QACN,CAAC,CAAC;KAsEL;IA1fG,aAAa;IACb,qCAAqC;IAErC,oBAAoB;QAChB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;YACnC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QACjC,CAAC;QACD,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC5B,CAAC;QAED,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;IACvE,CAAC;IAED,iBAAiB;QACb,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAEhE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,EAAE,kBAAkB,CAAC,EAAE,CAAC;YAC1D,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QACzD,CAAC;QAED,IAAI,CAAC,wBAAwB,GAAG;YAC5B,cAAc,EAAE,IAAI;YACpB,iBAAiB,EACb,iGAAiG;YACrG,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,OAAO,EAAE,CAAC,QAAQ,CAAC;YACnB,EAAE,EAAE;gBACA,eAAe,EAAE,MAAM,CAAC,EAAE;oBACtB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC;oBAClC,IAAI,CAAC,uBAAuB,EAAE,CAAC;oBAC/B,MAAM,mBAAmB,GAAG,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CACxD,gBAAgB,IAAI,CAAC,IAAI,8BAA8B,CAC1D,CAAC;oBACF,MAAM,iBAAiB,GAAG,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CACtD,gBAAgB,IAAI,CAAC,IAAI,mBAAmB,CAC/C,CAAC;oBACF,MAAM,SAAS,GAAG,mBAAmB,IAAI,iBAAiB,CAAC;oBAC3D,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;oBAC/B,UAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,SAAS,GAAG,CAAC,EAAE,CAAC,CAAC;oBAE3E,IAAI,mBAAmB,EAAE,CAAC;wBACtB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;oBACzE,CAAC;yBAAM,IAAI,iBAAiB;wBACvB,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAiB,CAAC,KAAK,CAAC;4BACnD,aAAa,EAAE,IAAI;yBACtB,CAAC,CAAC;gBACX,CAAC;gBACD,SAAS,EAAE,MAAM,CAAC,EAAE;;oBAChB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;oBACrB,MAAA,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,qBAAqB,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;gBAClF,CAAC;gBACD,wBAAwB,EAAE,GAAG,EAAE;;oBAC3B,MAAA,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,qBAAqB,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;gBAClF,CAAC;gBACD,0BAA0B,EAAE,GAAG,EAAE;;oBAC7B,MAAA,IAAI,CAAC,UAAU,0CAAE,mBAAmB,CAAC,qBAAqB,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;gBACrF,CAAC;aACJ;SACJ,CAAC;QAEF,IAAI,CAAC,uBAAuB,GAAG;YAC3B,aAAa,EAAE,CAAC;YAChB,YAAY,EAAE,GAAG;YACjB,GAAG,IAAI,CAAC,wBAAwB;SACnC,CAAC;IACN,CAAC;IAED,gBAAgB;QACZ,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,IAAI,CAAC,eAAe,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;YAClD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;QAC7E,CAAC;QACD,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC/D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QACjC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACpC,CAAC;IAED,aAAa;IACb,oBAAoB;IAGpB,mBAAmB,CAAC,KAAK;;QACrB,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QAC7C,CAAC,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAiB,CAAA,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;IAChG,CAAC;IAGD,aAAa,CAAC,KAAiB;;QAC3B,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,CAAC,MAAA,IAAI,CAAC,MAAM,0CAAE,SAAS,CAAC,CAAC;QAC/D,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QACvE,UAA0B,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;IAC/D,CAAC;IAED,aAAa;IACb,6BAA6B;IAE7B;;;OAGG;IAEH,KAAK,CAAC,kBAAkB,CAAC,KAAa;QAClC,IAAI,KAAK,GAAG,IAAI,CAAC,SAAS;YAAE,OAAO;QACnC,MAAM,WAAW,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9C,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;QACzC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,EAAE,CAAC;QACd,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;IACzC,CAAC;IAED;;;;;;;OAOG;IAEH,KAAK,CAAC,eAAe;QACjB,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC3B,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,+BAA+B,CAAqB,CAAC;QACzG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK,EAAE,CAAC;QACtB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK,EAAE,CAAC;IAC1B,CAAC;IAED,aAAa;IACb,mBAAmB;IAGnB,iBAAiB;QACb,eAAe,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAGD,2BAA2B;QACvB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,oBAAoB,GAAG,kBAAkB,CAAC;IACtE,CAAC;IAGD,qBAAqB;QACjB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAMD,cAAc;QACV,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAC7E,CAAC;IAGD,YAAY,CAAC,QAAQ;;QACjB,4EAA4E;QAC5E,IAAI,QAAQ,KAAK,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,SAAS,IAAG,CAAC,EAAE,CAAC;YAC1C,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACzC,CAAC;IACL,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,qBAAqB;QACrB,OAAO,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc;YAC7C,CAAC,CAAC,IAAI,CAAC,uBAAuB;YAC9B,CAAC,CAAC,IAAI,CAAC,yBAAyB,CAAC;IACzC,CAAC;IAED,IAAI,UAAU;;QACV,MAAM,WAAW,GAAG,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,CAAC,MAAA,IAAI,CAAC,MAAM,0CAAE,SAAS,CAAC,mCAAI,CAAC,CAAC;QACrE,OAAO,WAAW,YAAY,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;IACnE,CAAC;IAED,IAAI,iBAAiB;QACjB,OAAO,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,IAAI,cAAc;QACd,OAAO,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,6BAA6B,CAAC,CAAC;IAC5E,CAAC;IAED,IAAI,SAAS;QACT,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC7E,CAAC;IAED,IAAI,SAAS;QACT,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IACjC,CAAC;IAED,IAAI,yBAAyB;QACzB,OAAO;YACH,aAAa,EAAE,CAAC;YAChB,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;YACxC,wBAAwB,EAAE,KAAK;YAC/B,WAAW,EAAE;gBACT,CAAC,yBAAyB,CAAC,EAAE;oBACzB,aAAa,EAAE,CAAC;iBACnB;aACJ;YACD,GAAG,IAAI,CAAC,wBAAwB;SACnC,CAAC;IACN,CAAC;IAED,IAAI,SAAS;QACT,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,OAAO,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3C,CAAC;IAED,IAAI,wBAAwB;QACxB,OAAO,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;IAChD,CAAC;IAaD,cAAc,CAAC,gBAAyB;QACpC,IAAI,IAAI,CAAC,kBAAkB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC/C,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC/B,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;QAClC,CAAC;IACL,CAAC;IA2MD,MAAM;QACF,MAAM,EACF,SAAS,EACT,cAAc,EACd,cAAc,EACd,WAAW,EACX,oBAAoB,EACpB,iBAAiB,EACjB,QAAQ,EACR,cAAc,EACd,aAAa,EACb,KAAK,GACR,GAAG,IAAI,CAAC;QACT,IAAI,wBAAwB,GAAG,CAAC,8BAA8B,EAAE,QAAQ,CAAC,CAAC;QAC1E,IAAI,cAAc;YAAE,wBAAwB,GAAG,CAAC,GAAG,wBAAwB,EAAE,oBAAoB,CAAC,CAAC;QACnG,IAAI,cAAc;YAAE,wBAAwB,GAAG,CAAC,GAAG,wBAAwB,EAAE,mBAAmB,CAAC,CAAC;QAClG,IAAI,CAAC,cAAc,IAAI,CAAC,cAAc;YAClC,wBAAwB,GAAG,CAAC,GAAG,wBAAwB,EAAE,sBAAsB,CAAC,CAAC;QACrF,IAAI,WAAW;YAAE,wBAAwB,GAAG,CAAC,GAAG,wBAAwB,EAAE,SAAS,CAAC,CAAC;QAErF,IAAI,wBAAwB,GAAG,CAAC,2CAA2C,CAAC,CAAC;QAC7E,IAAI,oBAAoB;YAAE,wBAAwB,GAAG,CAAC,GAAG,wBAAwB,EAAE,cAAc,CAAC,CAAC;QAEnG,OAAO,CACH,EAAC,IAAI,qDACD,EAAE,EAAE,eAAe,IAAI,CAAC,IAAI,EAAE,EAC9B,KAAK,EAAC,sBAAsB,IAE3B,iBAAiB,CAAC,CAAC,CAAC,CACjB,IAAI,CAAC,8BAA8B,EAAE,CACxC,CAAC,CAAC,CAAC,CACA,EAAC,QAAQ;YACJ,SAAS,GAAG,CAAC,IAAI,CACd,WAAK,KAAK,EAAE,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC;gBACzC,oBAAoB,IAAI,IAAI,CAAC,gBAAgB,EAAE;gBAEhD,WAAK,KAAK,EAAC,iCAAiC;oBACvC,CAAC,cAAc,IAAI,IAAI,CAAC,oBAAoB,EAAE;oBAE9C,QAAQ,IAAI,IAAI,CAAC,iBAAiB,EAAE,CACnC;gBAEL,oBAAoB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAC9C,CACT;YAED,eACI,KAAK,EAAE,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,EACzC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,0BACjB,UAAU,gBACnB,GAAG,CAAC,KAAK,CAAC;gBAEtB,WACI,KAAK,EAAC,2CAA2C,EACjD,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,0BAA0B,GAAG,EAAE,CAAC,eACtC,aAAa,EACxB,SAAS,EAAE,IAAI,CAAC,cAAc;oBAE9B,eAAa,CACX,CACA,CACH,CACd,CACE,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import {\n Component,\n ComponentInterface,\n Prop,\n Watch,\n State,\n Fragment,\n Element,\n Host,\n h,\n Event,\n EventEmitter,\n Listen,\n Method,\n} from '@stencil/core';\nimport Swiper from 'swiper';\nimport { Autoplay } from 'swiper/modules';\nimport type { SwiperOptions } from 'swiper/types';\nimport { createGuid, loc, handleAriaLabel, overrideFocus, isEventFromElement } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { filterChildren, hasValidChildren } from '@/utils/component';\n\nconst carouselBreakpoint = 500; /* width in px of this host element where the layout starts to get unruly /\nconst carouselDesktopBreakpoint = 1024; / viewport width where we show 3 full panes /\n\n/\n @name Carousel\n * @category Display\n * @summary Use for cycling through a series of content slides with swipe or button navigation.\n /\n@Component({ tag: 'q2-carousel', shadow: false, styleUrl: 'q2-carousel.scss' })\nexport class Q2Carousel implements ComponentInterface {\n // #region Own Properties\n\n carouselPaneWrapperElement: HTMLElement;\n carouselWrapper: HTMLElement;\n fullWidthDisplayOptions: SwiperOptions;\n guid = createGuid();\n mutationObserver: MutationObserver;\n swiper?: Swiper = null;\n universalCarouselOptions: SwiperOptions;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n /* Manages re-rendering the component when the `ariaLive` value changes. /\n @State()\n ariaLiveValue: 'polite' \| 'off' = 'polite';\n\n /* Manages re-rendering the autoPlay button when clicked. /\n @State()\n autoPlayInProgress: boolean = false;\n\n /* Manages re-rendering the component when resize event is consumed. /\n @State()\n carouselWrapperWidth: number = 0;\n\n /* Manages sizing the component based on changes in `carouselWrapperWidth`. /\n @State()\n compactMode: boolean = false;\n\n /* Manages re-rendering the component when panes are added or removed. /\n @State()\n currentPaneCount: number = this.paneCount;\n\n // #endregion\n // #region Public Property API\n\n /* @deprecated /\n @Prop({ reflect: true })\n ariaLabel: string;\n\n /* Enables the auto-play feature and starts the carousel without user input. /\n @Prop({ reflect: true })\n autoPlay: boolean = false;\n\n /* Display the carousel panes as frameless with no container or shadow. /\n @Prop({ reflect: true })\n framelessPanes: boolean = false;\n\n /* Display the carousel panes full-width rather than with peeking content. /\n @Prop({ reflect: true })\n fullWidthPanes: boolean = false;\n\n /* Hide the dots below the carousel that provide navigation control and indicate which page is currently active. /\n @Prop({ reflect: true })\n hidePagination: boolean = false;\n\n /* The currently displayed carousel pane. /\n @Prop({ reflect: true, mutable: true })\n index: number = 1;\n\n /\n The label that is associated with the carousel. This is not displayed visually, but is presented by screen readers.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string = 'tecton.element.carousel.ariaLabel';\n\n /* Display navigation arrow buttons as another way to navigate the carousel. /\n @Prop({ reflect: true })\n showNavigationArrows: boolean = false;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the displayed carousel pane changes.\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{ index: number }>;\n\n /\n Emitted when the displayed carousel pane changes.\n /\n @Event()\n tctChange: EventEmitter<{ index: number }>;\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 if (!!this.swiper) {\n this.tearDownCarousel();\n }\n\n window.removeEventListener('resize', this.setCarouselWrapperWidth);\n }\n\n componentWillLoad() {\n handleAriaLabel(this);\n this.updateCarouselPaneProps();\n window.addEventListener('resize', this.setCarouselWrapperWidth);\n\n if (!hasValidChildren(this.hostElement, 'q2-carousel-pane')) {\n filterChildren(this.hostElement, 'q2-carousel-pane');\n }\n\n this.universalCarouselOptions = {\n centeredSlides: true,\n focusableElements:\n 'q2-btn, q2-dropdown, q2-item, q2-list, a, input, select, textarea, button, video, label, option',\n autoplay: this.autoPlay,\n modules: [Autoplay],\n on: {\n realIndexChange: swiper => {\n this.index = swiper.realIndex + 1;\n this.updateCarouselPaneProps();\n const isPaginationFocused = !!document.activeElement.closest(\n `#q2-carousel-${this.guid} .q2-carousel-page-indicator`\n );\n const isCarouselFocused = !!document.activeElement.closest(\n `#q2-carousel-${this.guid} q2-carousel-pane`\n );\n const isFocused = isPaginationFocused \|\| isCarouselFocused;\n this.handleAriaLive(isFocused);\n mirrorEmit(this, ['change', 'tctChange'], { index: swiper.realIndex + 1 });\n\n if (isPaginationFocused) {\n this.paginationBtns[swiper.realIndex].focus({ preventScroll: true });\n } else if (isCarouselFocused)\n (swiper.slides[swiper.realIndex] as HTMLElement).focus({\n preventScroll: true,\n });\n },\n afterInit: swiper => {\n this.swiper = swiper;\n this.activePane?.addEventListener('popoverStateChanged', this.handlePopovers);\n },\n slideChangeTransitionEnd: () => {\n this.activePane?.addEventListener('popoverStateChanged', this.handlePopovers);\n },\n slideChangeTransitionStart: () => {\n this.activePane?.removeEventListener('popoverStateChanged', this.handlePopovers);\n },\n },\n };\n\n this.fullWidthDisplayOptions = {\n slidesPerView: 1,\n spaceBetween: 100,\n ...this.universalCarouselOptions,\n };\n }\n\n componentDidLoad() {\n this.setCarouselWrapperWidth();\n if (this.carouselWrapper && !!this.paneArray.length) {\n this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);\n }\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('clickCarouselPane')\n carouselPaneClicked(event) {\n this.swiper?.slideTo(event.detail.paneIndex);\n (this.swiper?.slides[event.detail.paneIndex] as HTMLElement).focus({ preventScroll: true });\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n const activePane = this.swiper?.slides[this.swiper?.realIndex];\n if (!isEventFromElement(event, this.hostElement) \|\| !activePane) return;\n (activePane as HTMLElement).focus({ preventScroll: true });\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Clicks and Focuses the `q2-carousel-pane` matching the specified index.\n * @testOnly\n /\n @Method()\n async selectCarouselPane(index: number) {\n if (index > this.paneCount) return;\n const actualIndex = index > 0 ? index - 1 : 0;\n const pane = this.paneArray[actualIndex];\n pane?.click();\n pane?.focus({ preventScroll: true });\n }\n\n /\n Clicks and Focuses the `<button>` that controls playing or pausing the auto-play feature of the carousel.\n \n @warning\n * If the `autoPlay` property is not enabled, this method does nothing.\n \n @testOnly\n */\n @Method()\n async togglePlayPause() {\n if (!this.autoPlay) return;\n const playPauseBtn = this.hostElement.querySelector('.q2-carousel-autoplay-control') as HTMLQ2BtnElement;\n playPauseBtn?.click();\n playPauseBtn?.focus();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('carouselWrapperWidth')\n carouselWrapperWidthChanged() {\n this.compactMode = this.carouselWrapperWidth < carouselBreakpoint;\n }\n\n @Watch('framelessPanes')\n framelessPanesChanged() {\n this.updateCarouselPaneProps();\n this.revampCarousel();\n }\n\n @Watch('fullWidthPanes')\n @Watch('framelessPanes')\n @Watch('compactMode')\n @Watch('autoPlay')\n revampCarousel() {\n this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);\n }\n\n @Watch('index')\n indexChanged(newIndex) {\n // this allows the carousel to be swiped programmatically via the index prop\n if (newIndex !== this.swiper?.realIndex + 1) {\n this.swiper?.slideTo(this.realIndex);\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get activeCarouselOptions() {\n return this.fullWidthPanes \|\| this.framelessPanes\n ? this.fullWidthDisplayOptions\n : this.peekContentDisplayOptions;\n }\n\n get activePane(): HTMLElement {\n const activeSlide = this.swiper?.slides[this.swiper?.realIndex] ?? 0;\n return activeSlide instanceof HTMLElement ? activeSlide : null;\n }\n\n get insufficientPanes() {\n return this.paneCount < 1;\n }\n\n get paginationBtns(): NodeListOf<HTMLButtonElement> {\n return this.hostElement.querySelectorAll('.q2-carousel-page-indicator');\n }\n\n get paneArray(): HTMLQ2CarouselPaneElement[] {\n return Array.from(this.hostElement.querySelectorAll('q2-carousel-pane'));\n }\n\n get paneCount() {\n return this.paneArray.length;\n }\n\n get peekContentDisplayOptions(): SwiperOptions {\n return {\n slidesPerView: 2,\n spaceBetween: this.compactMode ? 0 : -10,\n centerInsufficientSlides: false,\n breakpoints: {\n [carouselDesktopBreakpoint]: {\n slidesPerView: 3,\n },\n },\n ...this.universalCarouselOptions,\n };\n }\n\n get realIndex(): number {\n const indexNum = Number(this.index);\n return indexNum > 0 ? indexNum - 1 : 0;\n }\n\n get useDynamicPaginationDots() {\n return this.paneCount && this.paneCount > 5;\n }\n\n configureCarousel = (carouselWrapper, carouselOptions) => {\n if (!!this.swiper) {\n this.tearDownCarousel();\n }\n this.autoPlayInProgress = this.autoPlay;\n\n new Swiper(carouselWrapper, carouselOptions);\n this.swiper?.slideTo(this.realIndex);\n if (this.autoPlayInProgress) this.swiper?.autoplay.start();\n };\n\n handleAriaLive(activeAndFocused: boolean) {\n if (this.autoPlayInProgress && !activeAndFocused) {\n this.ariaLiveValue = 'off';\n } else {\n this.ariaLiveValue = 'polite';\n }\n }\n\n handleAutoPlayPause = (action: 'play' \| 'pause') => {\n if (!this.autoPlay) return;\n const autoplay = this.swiper?.autoplay;\n switch (action) {\n case 'play':\n autoplay.start();\n this.autoPlayInProgress = true;\n break;\n case 'pause':\n autoplay.stop();\n this.autoPlayInProgress = false;\n break;\n }\n };\n\n handlePopovers = (event: CustomEvent) => {\n const { swiper, carouselPaneWrapperElement } = this;\n if (event.detail.open) {\n carouselPaneWrapperElement.style.left = `${swiper?.translate}px`;\n carouselPaneWrapperElement.style.transform = null;\n swiper?.disable();\n } else {\n carouselPaneWrapperElement.style.left = null;\n carouselPaneWrapperElement.style.transform = `translate3d(${swiper?.translate}px, 0, 0)`;\n swiper?.enable();\n }\n };\n\n keydownHandler = (event: KeyboardEvent) => {\n switch (event.key) {\n case 'ArrowRight':\n event.preventDefault();\n this.swiper?.slideNext();\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n this.swiper?.slidePrev();\n break;\n\n case 'Home':\n event.preventDefault();\n this.swiper?.slideTo(0);\n break;\n\n case 'End':\n event.preventDefault();\n this.swiper?.slideTo(this.paneCount - 1);\n break;\n }\n };\n\n onMutationObserved = () => {\n this.updateCarouselPaneProps();\n this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);\n };\n\n setCarouselWrapperWidth = () => {\n if (this.insufficientPanes) return;\n this.carouselWrapperWidth = this.carouselWrapper.clientWidth;\n };\n\n tearDownCarousel = () => {\n this.swiper.destroy();\n this.swiper = null;\n };\n\n updateCarouselPaneProps = () => {\n const { framelessPanes, paneCount, paneArray } = this;\n\n paneArray.forEach((pane, index) => {\n pane.index = index;\n pane.siblingCount = paneCount;\n pane.isActivePane = index === this.realIndex;\n pane.slotFrameless = framelessPanes \|\| undefined;\n });\n this.currentPaneCount = paneCount;\n };\n\n // #endregion\n // #region Render Methods\n\n renderAutoPlayBtn = () => {\n const { autoPlayInProgress } = this;\n return (\n <q2-btn\n type=\"button\"\n hide-label\n label={loc(\n autoPlayInProgress\n ? 'tecton.element.carousel.pausePlayLabel'\n : 'tecton.element.carousel.resumePlayLabel'\n )}\n class=\"q2-carousel-autoplay-control\"\n onClick={() => this.handleAutoPlayPause(autoPlayInProgress ? 'pause' : 'play')}\n >\n <q2-icon type={autoPlayInProgress ? 'pause' : 'play'} />\n </q2-btn>\n );\n };\n\n renderInsufficientPanesDisplay = () => {\n let insufficientPanesContainerClasses = [\n 'insufficient-pane-feedback',\n this.fullWidthPanes ? 'full-width-display' : 'content-peek-display',\n ];\n if (this.compactMode) insufficientPanesContainerClasses = [...insufficientPanesContainerClasses, 'compact'];\n\n return (\n <div class={insufficientPanesContainerClasses.join(' ')}>\n <div class=\"insufficient-panes-icon-wrapper\">\n <q2-icon type=\"warning\" />\n </div>\n <p class=\"insufficient-panes-header\">\n <strong>{loc('tecton.element.carousel.insufficientPanesMessageHeader')}</strong>\n </p>\n <p class=\"insufficient-panes-body\">{loc('tecton.element.carousel.insufficientPanesMessageBody')}</p>\n </div>\n );\n };\n\n renderNextNavBtn = () => {\n const nextPaneAvailable = this.realIndex < this.paneCount - 1;\n\n return (\n <div>\n <q2-btn\n type=\"button\"\n disabled={nextPaneAvailable ? undefined : true}\n class=\"q2-carousel-navigation-button q2-carousel-navigation-button-next\"\n hide-label\n label={loc('tecton.element.carousel.nextItemLabel')}\n onClick={() => this.swiper?.slideNext()}\n >\n <q2-icon type=\"chevron-right\" />\n </q2-btn>\n </div>\n );\n };\n\n renderPaginationArea = () => {\n const { useDynamicPaginationDots, realIndex, paneCount, paneArray } = this;\n let paginationContainerClasses = ['q2-carousel-pagination'];\n if (useDynamicPaginationDots) paginationContainerClasses = [...paginationContainerClasses, 'dynamic'];\n\n return (\n <div\n class={paginationContainerClasses.join(' ')}\n role=\"tablist\"\n aria-label={loc('tecton.element.carousel.tabWrapperLabel')}\n >\n {paneArray.map(pane => {\n let btnClasses = ['q2-carousel-page-indicator', `q2-carousel-page-indicator-${pane.index}`];\n if (pane.isActivePane) btnClasses = [...btnClasses, 'active-page'];\n if (useDynamicPaginationDots) btnClasses = [...btnClasses, 'dynamic'];\n\n const withinOneOfActive = pane.index === realIndex + 1 \|\| pane.index === realIndex - 1;\n if (withinOneOfActive) btnClasses = [...btnClasses, 'active-adjacent'];\n\n const withinTwoOfActive = pane.index === realIndex + 2 \|\| pane.index === realIndex - 2;\n if (withinTwoOfActive) btnClasses = [...btnClasses, 'active-adjacent-adjacent'];\n\n return (\n <button\n type=\"button\"\n role=\"tab\"\n tabIndex={pane.isActivePane ? undefined : -1}\n aria-selected={`${pane.isActivePane}`}\n class={btnClasses.join(' ')}\n onClick={() => this.swiper?.slideTo(pane.index)}\n onKeyDown={this.keydownHandler}\n aria-label={loc('tecton.element.carousel.itemDescription', [\n (pane.index + 1).toString(),\n paneCount.toString(),\n ])}\n ></button>\n );\n })}\n </div>\n );\n };\n\n renderPrevNavBtn = () => {\n const prevPaneAvailable = this.realIndex > 0;\n\n return (\n <div>\n <q2-btn\n type=\"button\"\n disabled={prevPaneAvailable ? undefined : true}\n class=\"q2-carousel-navigation-button q2-carousel-navigation-button-prev\"\n hide-label\n label={loc('tecton.element.carousel.previousItemLabel')}\n onClick={() => this.swiper?.slidePrev()}\n >\n <q2-icon type=\"chevron-left\" />\n </q2-btn>\n </div>\n );\n };\n\n render() {\n const {\n paneCount,\n fullWidthPanes,\n framelessPanes,\n compactMode,\n showNavigationArrows,\n insufficientPanes,\n autoPlay,\n hidePagination,\n ariaLiveValue,\n label,\n } = this;\n let carouselContainerClasses = ['q2-carousel-swiper-container', 'swiper'];\n if (fullWidthPanes) carouselContainerClasses = [...carouselContainerClasses, 'full-width-display'];\n if (framelessPanes) carouselContainerClasses = [...carouselContainerClasses, 'frameless-display'];\n if (!fullWidthPanes && !framelessPanes)\n carouselContainerClasses = [...carouselContainerClasses, 'content-peek-display'];\n if (compactMode) carouselContainerClasses = [...carouselContainerClasses, 'compact'];\n\n let paginationWrapperClasses = ['q2-carousel-pagination-navigation-wrapper'];\n if (showNavigationArrows) paginationWrapperClasses = [...paginationWrapperClasses, 'evenly-space'];\n\n return (\n <Host\n id={`q2-carousel-${this.guid}`}\n class=\"q2-carousel-instance\"\n >\n {insufficientPanes ? (\n this.renderInsufficientPanesDisplay()\n ) : (\n <Fragment>\n {paneCount > 1 && (\n <div class={paginationWrapperClasses.join(' ')}>\n {showNavigationArrows && this.renderPrevNavBtn()}\n\n <div class=\"q2-carousel-control-center-tray\">\n {!hidePagination && this.renderPaginationArea()}\n\n {autoPlay && this.renderAutoPlayBtn()}\n </div>\n\n {showNavigationArrows && this.renderNextNavBtn()}\n </div>\n )}\n\n <section\n class={carouselContainerClasses.join(' ')}\n ref={el => (this.carouselWrapper = el)}\n aria-roledescription=\"carousel\"\n aria-label={loc(label)}\n >\n <div\n class=\"q2-carousel-swiper-wrapper swiper-wrapper\"\n ref={el => (this.carouselPaneWrapperElement = el)}\n aria-live={ariaLiveValue}\n onKeyDown={this.keydownHandler}\n >\n <slot></slot>\n </div>\n </section>\n </Fragment>\n )}\n </Host>\n );\n }\n\n // #endregion\n}\n"]}

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

@@ -73,6 +73,12 @@ q2-carousel .swiper-slide {
   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));
@@ -82,6 +88,10 @@ q2-carousel-pane.q2-carousel-pane {
 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;
 }
@@ -100,7 +110,7 @@ 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);
+  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))))));

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

@@ -1,3 +1,4 @@
+import { hasValidParent } from "../../utils/component";
 import { Host, h } from "@stencil/core";
 import { loc } from "../../utils/index";
 import mirrorEmit from "../../utils/mirror-emit";
@@ -39,6 +40,9 @@ export class Q2CarouselPane {
         }
         this.removePointerMoveListeners();
     }
+    componentWillLoad() {
+        hasValidParent(this.hostElement, 'div.q2-carousel-swiper-wrapper');
+    }
     componentDidLoad() {
         this.determineDisabledContent();
         this.addPointerMoveListeners();
@@ -93,12 +97,12 @@ export class Q2CarouselPane {
     // #region Render Methods
     render() {
         const { label } = this;
-        return (h(Host, { key: '206bc8e172f7ded830f49cac340c27ecb96e2e87', 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 (h(Host, { key: 'c321264b11e25ec101280695fd2f869b92a18e26', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
                 ? loc(label)
                 : loc('tecton.element.carousel.itemDescription', [
                     (this.currentPaneIndex + 1).toString(),
                     (this.siblingCount || 0).toString(),
-                ]), onClick: this.paneClicked }, h("article", { key: 'd98467abd35b1a54fc49caefbbffb6d824d54471', class: "q2-carousel-pane-main-content" }, h("slot", { key: '55d3059eaf742f8f8ce76b463c4a6e79e532285a' }))));
+                ]), onClick: this.paneClicked }, h("article", { key: 'c506d1bdbbd434483a9447cce1a898b540cac6f2', class: "q2-carousel-pane-main-content" }, h("slot", { key: '406d356278c375ff44431c9df2cad1acac933be2' }))));
     }
     static get is() { return "q2-carousel-pane"; }
     static get originalStyleUrls() {