q2-tecton-elements 1.66.2 → 1.67.1

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

@@ -1 +1 @@
-{"version":3,"file":"q2-modal.entry.esm.js","sources":["src/components/q2-modal/q2-modal.scss?tag=q2-modal&encapsulation=shadow","src/components/q2-modal/q2-modal.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n@keyframes showBackdrop {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes hideBackdrop {\n    to {\n        opacity: 0;\n    }\n}\n\n// CSS variables don't inherit into the ::backdrop pseudo-element\n$animation-tween: #{var-list(--tct-modal-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n    --comp-border-radius-default: var(--app-scale-3x, 15px);\n    --comp-border-radius: #{var-list(--tct-modal-border-radius, --comp-border-radius-default)};\n    --comp-desktop-border-radius: #{var-list(--tct-modal-border-radius, --app-scale-3x, 15px)};\n    --comp-close-button-size: #{var-list(--tct-modal-close-button-size, --t-a11y-min-size, 44px)};\n    --comp-header-height: #{var-list(--tct-modal-header-height, --t-a11y-min-size, 44px)};\n    --comp-dialog-background: #{var-list(--tct-modal-background, --t-base, #ffffff)};\n    --comp-dialog-color: #{var-list(--tct-modal-color, --t-text, #4d4d4d)};\n    --comp-dialog-padding: #{var-list(--tct-modal-padding, --app-scale-3x, 15px)};\n    --comp-content-gradient-height: #{var-list(--tct-modal-content-gradient-height, --app-scale-2x, 10px)};\n    --comp-dialog-gap: #{var-list(--tct-modal-gap, --app-scale-2x, 10px)};\n    --comp-dialog-max-width: #{var-list(--tct-modal-max-width, 600px)};\n    --comp-dialog-max-height: #{var-list(--tct-modal-max-height, 100vh)}; // should not use vh in the extension\n    --comp-dialog-min-height: #{var-list(--tct-modal-min-height, 40vh)};\n    --comp-dialog-box-shadow: #{var-list(\n            --tct-modal-box-shadow,\n            --app-shadow-2,\n            unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\")\n        )};\n\n    position: fixed;\n    top: 100%;\n    bottom: unset;\n    color: var(--comp-dialog-color);\n    background: var(--comp-dialog-background);\n    transition: transform $animation-tween, opacity $animation-tween;\n    width: 100%;\n    max-width: var(--comp-dialog-max-width);\n    border: 0;\n    border-radius: var(--comp-border-radius);\n    box-shadow: var(--comp-dialog-box-shadow);\n    padding: 0;\n    height: auto;\n    overflow: hidden;\n    &::backdrop {\n        opacity: 0;\n        background: var-list(--tct-modal-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n    }\n\n    &[open] {\n        border-radius: var(--comp-desktop-border-radius);\n        top: 0px;\n        bottom: 0px;\n        height: fit-content;\n        transform: translateY(10%);\n        opacity: 1;\n\n        &.is-opening,\n        &.is-open {\n            opacity: 1;\n            transform: translateY(0);\n            &::backdrop {\n                opacity: 1;\n                animation: showBackdrop $animation-tween;\n            }\n        }\n\n        &.is-closing {\n            transform: translateY(10%);\n\n            &::backdrop {\n                animation: hideBackdrop $animation-tween;\n            }\n        }\n    }\n}\n\n.content {\n    overflow-y: auto;\n    @include tiny-scrollbar();\n\n    .icon {\n        height: var-list(--tct-modal-icon-size --app-scale-9x, 45px);\n        margin: var-list(--tct-modal-icon-margin, --app-scale-2x, 10px);\n        display: flex;\n        justify-content: center;\n        q2-icon {\n            width: var-list(--tct-modal-icon-size --app-scale-9x, 45px);\n        }\n    }\n    .image {\n        display: flex;\n        justify-content: center;\n        img {\n            width: 100%;\n            border-radius: var-list(--tct-modal-image-border-radius, --app-border-radius-2, 8px);\n        }\n    }\n    .message {\n        font-size: 1rem;\n    }\n    &.more-gradient {\n        -webkit-mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n        mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n    }\n}\n\n.interior {\n    display: grid;\n    min-height: var(--comp-dialog-min-height);\n    grid-template-rows: auto 1fr auto;\n    gap: var(--comp-dialog-gap);\n    max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));\n    padding: var(--comp-dialog-padding);\n\n    &.is-list {\n        header,\n        footer {\n            position: relative;\n\n            &:before {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                height: var(--comp-content-gradient-height);\n                width: 100%;\n                z-index: 1;\n            }\n        }\n    }\n}\n\nheader {\n    display: flex;\n    justify-content: space-between;\n    .title {\n        @include line-clamp(3);\n        text-align: left;\n        font-weight: var-list(--tct-modal-title-font-weight, 400);\n        margin: 0;\n        padding-top: 0.5rem;\n    }\n\n    .btn-close {\n        grid-area: close;\n        width: var(--comp-close-button-size);\n        height: var(--comp-close-button-size);\n    }\n}\n","import { Component, ComponentInterface, Prop, Method, h, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { debounce, hasSlotContent, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString from '@/utils/sanitize-html-string';\n\nimport type { ModalOption, ModalResponse } from 'q2-tecton-common/lib/types/modal';\n\n/**\n * @name Modal\n * @category Display\n * @summary Use for focused interactions that require user attention before continuing.\n * @slot content - A slot to display custom content in the modal body above the description.\n * @slot action - A slot to display up to four elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group) in the modal's footer.\n */\n@Component({ tag: 'q2-modal', shadow: true, styleUrl: 'q2-modal.scss' })\nexport class Q2Modal implements ComponentInterface {\n    // #region Own Properties\n\n    // to prevent background scroll when modal scrolls\n    bodyOverflow: string = '';\n    contentElement: HTMLDivElement;\n    debouncedScroll: () => void;\n    dialogElement: HTMLDialogElement;\n    scheduledAfterRender: (() => void)[] = [];\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    maxActionButtons: number = 4;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls visibility of the close button in the top right corner.\n     */\n    @Prop({ reflect: true })\n    closable: boolean = true;\n\n    /**\n     * Allows HTML markup as modal content, but it will be sanitized for security purposes.\n     */\n    @Prop()\n    customMarkup: string;\n\n    /**\n     * A plain text description of the modal. Use this to provide context or information to the user.\n     */\n    @Prop()\n    description: string;\n\n    /**\n     * The icon to display at the top of the modal. [See Icon documentation](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    icon: string;\n\n    /**\n     * The icon fill color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconFillColor: string;\n\n    /**\n     * The icon primary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokePrimary: string;\n\n    /**\n     * The icon secondary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokeSecondary: string;\n\n    /**\n     * The icon secondary stroke width, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokeWidth: string;\n\n    /**\n     * An image URL to be displayed beneath the title. It renders with 100% width.\n     */\n    @Prop({ reflect: true })\n    imageSrc: string;\n\n    /**\n     * A plain text title of the modal displayed at the top.\n     */\n    @Prop({ mutable: true, reflect: true })\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when one of action buttons is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter;\n\n    /**\n     * Emitted when the modal is closed.\n     */\n    @Event()\n    tctClose: EventEmitter;\n\n    /**\n     * Emitted when the modal is opened.\n     */\n    @Event()\n    tctOpen: EventEmitter;\n\n    /**\n     * Emitted when the modal has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    tctReady: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n        this.contentElement?.removeEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.tctReady.emit();\n        this.bodyOverflow = document.body.style.overflow;\n        this.debouncedScroll = debounce(this.onContentScroll, 100);\n        this.contentElement.addEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidRender(): void {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async closeModal(data?: ModalResponse) {\n        this.tctClose.emit(data);\n        this.renderStatus = 'is-closing';\n        document.body.style.overflow = this.bodyOverflow;\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async openModal(option?: ModalOption) {\n        if (this.dialogElement?.open) return;\n        this.tctOpen.emit(option);\n        await waitForNextPaint();\n        // overwrite the properties if option provided\n        if (option) {\n            this.title = option?.title || this.title;\n            this.description = option?.description || this.description;\n            this.imageSrc = option?.imageSrc || this.imageSrc;\n            this.icon = option?.icon || this.icon;\n            this.iconStrokePrimary = option?.iconStrokePrimary || this.iconStrokePrimary;\n            this.iconStrokeSecondary = option?.imageSrc || this.imageSrc;\n            this.iconFillColor = option?.iconFillColor || this.iconFillColor;\n            this.iconStrokeWidth = option?.iconStrokeWidth || this.iconStrokeWidth;\n            this.description = option?.description || this.description;\n        }\n        this.dialogElement.showModal();\n        this.dialogElement.open = true;\n        document.body.style.overflow = 'hidden';\n        this.initializeModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n            },\n            { once: true }\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    // to be removed\n\n    iconStyle = () => {\n        const styleObject = {};\n        if (this.iconStrokePrimary) styleObject['--tct-icon-stroke-primary'] = this.iconStrokePrimary;\n        if (this.iconStrokeSecondary) styleObject['--tct-icon-stroke-secondary'] = this.iconStrokeSecondary;\n        if (this.iconFillColor) styleObject['--tct-icon-fill'] = this.iconFillColor;\n        if (this.iconStrokeWidth) styleObject['--tct-icon-stroke-width'] = this.iconStrokeWidth;\n        return styleObject;\n    };\n\n    initializeModal = () => {\n        // limits 4 buttons in action slot\n        this.hostElement.querySelectorAll<HTMLElement>('[slot=\"action\"]').forEach((el, i) => {\n            if (i >= this.maxActionButtons) {\n                console.warn(\n                    `q2-modal allows up to ${this.maxActionButtons} action buttons, [${el.getAttribute('label') || el.textContent}] button is now hidden.`\n                );\n                el.hidden = true;\n            }\n        });\n        this.contentElement.scrollTo({ top: 0 });\n        this.debouncedScroll();\n    };\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        this.closeModal();\n    };\n\n    onClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n        const slot = eventTarget.getAttribute('slot');\n        if (slot === 'action') {\n            this.tctClick.emit({ value: eventTarget.dataset.value });\n            this.onCancel(event);\n        } else {\n            const isInContent = !!eventTarget.closest('.interior , q2-modal');\n            if (isInContent) return;\n            this.onCancel(event);\n        }\n    };\n\n    onContentScroll = () => {\n        const scrollHeight = this.contentElement.scrollHeight;\n        const scrollTop = Math.ceil(this.contentElement.scrollTop);\n        const contentHeight = Math.ceil(this.contentElement.getBoundingClientRect()?.height || 0);\n        // to show bottom gradient when more contents available\n        if (scrollHeight > contentHeight) {\n            scrollHeight <= contentHeight + scrollTop\n                ? this.contentElement.classList.remove('more-gradient')\n                : this.contentElement.classList.add('more-gradient');\n        } else {\n            this.contentElement.classList.remove('more-gradient');\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const interiorClasses = `interior`;\n        const renderStatus = `${this.renderStatus || ''}`;\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {this.title && (\n                        <header>\n                            {this.title && <h2 class=\"title\">{this.title}</h2>}\n                            {!!this.closable && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.modal.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    <div\n                        class=\"content\"\n                        ref={el => (this.contentElement = el)}\n                    >\n                        {this.icon && (\n                            <div class=\"icon\">\n                                <q2-icon\n                                    type={this.icon}\n                                    style={this.iconStyle()}\n                                ></q2-icon>\n                            </div>\n                        )}\n                        {this.imageSrc && (\n                            <div class=\"image\">\n                                <img src={this.imageSrc}></img>\n                            </div>\n                        )}\n                        {hasSlotContent(this.hostElement, 'content') && <slot name=\"content\"></slot>}\n                        {this.description && <p class=\"description\">{this.description}</p>}\n                        {this.customMarkup && (\n                            <p\n                                class=\"customMarkup\"\n                                innerHTML={sanitizeHTMLString(this.customMarkup)}\n                            ></p>\n                        )}\n                    </div>\n                    <footer>\n                        <q2-action-group full-width>\n                            <slot name=\"action\"></slot>\n                        </q2-action-group>\n                    </footer>\n                </div>\n            </dialog>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-modal.entry.esm.js","sources":["src/components/q2-modal/q2-modal.scss?tag=q2-modal&encapsulation=shadow","src/components/q2-modal/q2-modal.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n@keyframes showBackdrop {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes hideBackdrop {\n    to {\n        opacity: 0;\n    }\n}\n\n// CSS variables don't inherit into the ::backdrop pseudo-element\n$animation-tween: #{var-list(--tct-modal-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n    --comp-border-radius-default: var(--app-scale-3x, 15px);\n    --comp-border-radius: #{var-list(--tct-modal-border-radius, --comp-border-radius-default)};\n    --comp-desktop-border-radius: #{var-list(--tct-modal-border-radius, --app-scale-3x, 15px)};\n    --comp-close-button-size: #{var-list(--tct-modal-close-button-size, --t-a11y-min-size, 44px)};\n    --comp-header-height: #{var-list(--tct-modal-header-height, --t-a11y-min-size, 44px)};\n    --comp-dialog-background: #{var-list(--tct-modal-background, --t-base, #ffffff)};\n    --comp-dialog-color: #{var-list(--tct-modal-color, --t-text, #4d4d4d)};\n    --comp-dialog-padding: #{var-list(--tct-modal-padding, --app-scale-3x, 15px)};\n    --comp-content-gradient-height: #{var-list(--tct-modal-content-gradient-height, --app-scale-2x, 10px)};\n    --comp-dialog-gap: #{var-list(--tct-modal-gap, --app-scale-2x, 10px)};\n    --comp-dialog-max-width: #{var-list(--tct-modal-max-width, 600px)};\n    --comp-dialog-max-height: #{var-list(--tct-modal-max-height, 100vh)}; // should not use vh in the extension\n    --comp-dialog-min-height: #{var-list(--tct-modal-min-height, 40vh)};\n    --comp-dialog-box-shadow: #{var-list(\n            --tct-modal-box-shadow,\n            --app-shadow-2,\n            unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\")\n        )};\n\n    position: fixed;\n    top: 100%;\n    bottom: unset;\n    color: var(--comp-dialog-color);\n    background: var(--comp-dialog-background);\n    transition: transform $animation-tween, opacity $animation-tween;\n    width: 100%;\n    max-width: var(--comp-dialog-max-width);\n    border: 0;\n    border-radius: var(--comp-border-radius);\n    box-shadow: var(--comp-dialog-box-shadow);\n    padding: 0;\n    height: auto;\n    overflow: hidden;\n    &::backdrop {\n        opacity: 0;\n        background: var-list(--tct-modal-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n    }\n\n    &[open] {\n        border-radius: var(--comp-desktop-border-radius);\n        top: 0px;\n        bottom: 0px;\n        height: fit-content;\n        transform: translateY(10%);\n        opacity: 1;\n\n        &.is-opening,\n        &.is-open {\n            opacity: 1;\n            transform: translateY(0);\n            &::backdrop {\n                opacity: 1;\n                animation: showBackdrop $animation-tween;\n            }\n        }\n\n        &.is-closing {\n            transform: translateY(10%);\n\n            &::backdrop {\n                animation: hideBackdrop $animation-tween;\n            }\n        }\n    }\n}\n\n.content {\n    overflow-y: auto;\n    @include tiny-scrollbar();\n\n    .icon {\n        height: var-list(--tct-modal-icon-size --app-scale-9x, 45px);\n        margin: var-list(--tct-modal-icon-margin, --app-scale-2x, 10px);\n        display: flex;\n        justify-content: center;\n        q2-icon {\n            width: var-list(--tct-modal-icon-size --app-scale-9x, 45px);\n        }\n    }\n    .image {\n        display: flex;\n        justify-content: center;\n        img {\n            width: 100%;\n            border-radius: var-list(--tct-modal-image-border-radius, --app-border-radius-2, 8px);\n        }\n    }\n    .description {\n        font-size: var-list(--tct-modal-description-font-size, 14px);\n    }\n    &.more-gradient {\n        -webkit-mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n        mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n    }\n}\n\n.interior {\n    display: grid;\n    min-height: var(--comp-dialog-min-height);\n    grid-template-rows: auto 1fr auto;\n    gap: var(--comp-dialog-gap);\n    max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));\n    padding: var(--comp-dialog-padding);\n\n    &.is-list {\n        header,\n        footer {\n            position: relative;\n\n            &:before {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                height: var(--comp-content-gradient-height);\n                width: 100%;\n                z-index: 1;\n            }\n        }\n    }\n}\n\nheader {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    .title {\n        @include line-clamp(3);\n        text-align: left;\n        font-weight: var-list(--tct-modal-title-font-weight, 400);\n        margin: 0;\n    }\n\n    .btn-close {\n        grid-area: close;\n        width: var(--comp-close-button-size);\n        height: var(--comp-close-button-size);\n    }\n}\n","import { Component, ComponentInterface, Prop, Method, h, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { debounce, hasSlotContent, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString from '@/utils/sanitize-html-string';\n\nimport type { ModalOption, ModalResponse } from 'q2-tecton-common/lib/types/modal';\n\n/**\n * @name Modal\n * @category Display\n * @summary Use for focused interactions that require user attention before continuing.\n * @slot content - A slot to display custom content in the modal body above the description.\n * @slot action - A slot to display up to four elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group) in the modal's footer.\n */\n@Component({ tag: 'q2-modal', shadow: true, styleUrl: 'q2-modal.scss' })\nexport class Q2Modal implements ComponentInterface {\n    // #region Own Properties\n\n    // to prevent background scroll when modal scrolls\n    bodyOverflow: string = '';\n    contentElement: HTMLDivElement;\n    debouncedScroll: () => void;\n    dialogElement: HTMLDialogElement;\n    scheduledAfterRender: (() => void)[] = [];\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    maxActionButtons: number = 4;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls visibility of the close button in the top right corner.\n     */\n    @Prop({ reflect: true })\n    closable: boolean = true;\n\n    /**\n     * Allows HTML markup as modal content, but it will be sanitized for security purposes.\n     */\n    @Prop()\n    customMarkup: string;\n\n    /**\n     * A plain text description of the modal. Use this to provide context or information to the user.\n     */\n    @Prop()\n    description: string;\n\n    /**\n     * The icon to display at the top of the modal. [See Icon documentation](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    icon: string;\n\n    /**\n     * An image URL to be displayed beneath the title. It renders with 100% width.\n     */\n    @Prop({ reflect: true })\n    imageSrc: string;\n\n    /**\n     * A plain text title of the modal displayed at the top.\n     */\n    @Prop({ mutable: true, reflect: true })\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when one of action buttons is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter;\n\n    /**\n     * Emitted when the modal is closed.\n     */\n    @Event()\n    tctClose: EventEmitter;\n\n    /**\n     * Emitted when the modal is opened.\n     */\n    @Event()\n    tctOpen: EventEmitter;\n\n    /**\n     * Emitted when the modal has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    tctReady: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n        this.contentElement?.removeEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.tctReady.emit();\n        this.bodyOverflow = document.body.style.overflow;\n        this.debouncedScroll = debounce(this.onContentScroll, 100);\n        this.contentElement.addEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidRender(): void {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async closeModal(data?: ModalResponse) {\n        this.tctClose.emit(data);\n        this.renderStatus = 'is-closing';\n        document.body.style.overflow = this.bodyOverflow;\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async openModal(option?: ModalOption) {\n        if (this.dialogElement?.open) return;\n        this.tctOpen.emit(option);\n        await waitForNextPaint();\n        // overwrite the properties if option provided\n        if (option) {\n            this.title = option?.title || this.title;\n            this.description = option?.description || this.description;\n            this.imageSrc = option?.imageSrc || this.imageSrc;\n            this.icon = option?.icon || this.icon;\n            this.description = option?.description || this.description;\n        }\n        this.dialogElement.showModal();\n        this.dialogElement.open = true;\n        document.body.style.overflow = 'hidden';\n        this.initializeModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n            },\n            { once: true }\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    initializeModal = () => {\n        // limits 4 buttons in action slot\n        this.hostElement.querySelectorAll<HTMLElement>('[slot=\"action\"]').forEach((el, i) => {\n            if (i >= this.maxActionButtons) {\n                console.warn(\n                    `q2-modal allows up to ${this.maxActionButtons} action buttons, [${el.getAttribute('label') || el.textContent}] button is now hidden.`\n                );\n                el.hidden = true;\n            }\n        });\n        this.contentElement.scrollTo({ top: 0 });\n        this.debouncedScroll();\n    };\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        this.closeModal();\n    };\n\n    onClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n        const slot = eventTarget.getAttribute('slot');\n        if (slot === 'action') {\n            this.tctClick.emit({ value: eventTarget.dataset.value });\n            this.onCancel(event);\n        } else {\n            const isInContent = !!eventTarget.closest('.interior , q2-modal');\n            if (isInContent) return;\n            this.onCancel(event);\n        }\n    };\n\n    onContentScroll = () => {\n        const scrollHeight = this.contentElement.scrollHeight;\n        const scrollTop = Math.ceil(this.contentElement.scrollTop);\n        const contentHeight = Math.ceil(this.contentElement.getBoundingClientRect()?.height || 0);\n        // to show bottom gradient when more contents available\n        if (scrollHeight > contentHeight) {\n            scrollHeight <= contentHeight + scrollTop\n                ? this.contentElement.classList.remove('more-gradient')\n                : this.contentElement.classList.add('more-gradient');\n        } else {\n            this.contentElement.classList.remove('more-gradient');\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const interiorClasses = `interior`;\n        const renderStatus = `${this.renderStatus || ''}`;\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {this.title && (\n                        <header>\n                            {this.title && <h2 class=\"title\">{this.title}</h2>}\n                            {!!this.closable && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.modal.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    <div\n                        class=\"content\"\n                        ref={el => (this.contentElement = el)}\n                    >\n                        {this.icon && (\n                            <div class=\"icon\">\n                                <q2-icon type={this.icon}></q2-icon>\n                            </div>\n                        )}\n                        {this.imageSrc && (\n                            <div class=\"image\">\n                                <img src={this.imageSrc}></img>\n                            </div>\n                        )}\n                        {hasSlotContent(this.hostElement, 'content') && <slot name=\"content\"></slot>}\n                        {this.description && <p class=\"description\">{this.description}</p>}\n                        {this.customMarkup && (\n                            <p\n                                class=\"customMarkup\"\n                                innerHTML={sanitizeHTMLString(this.customMarkup)}\n                            ></p>\n                        )}\n                    </div>\n                    <footer>\n                        <q2-action-group full-width>\n                            <slot name=\"action\"></slot>\n                        </q2-action-group>\n                    </footer>\n                </div>\n            </dialog>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,18 +1,18 @@
-import { r as t, c as i, h as o, g as a } from "./index-CGkHOjh1.js";
+import { r as t, c as o, h as i, g as a } from "./index-CGkHOjh1.js";
 
-import { e, w as r, h as s } from "./index-B4WYBDS9.js";
+import { e, w as r, h as s } from "./index-C4PILj1_.js";
 
-import { s as c } from "./sanitize-html-string-BPwFpYg-.js";
+import { s as d } from "./sanitize-html-string-B35VmRc9.js";
 
-const d = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px);--comp-border-radius:var(--tct-modal-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-modal-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-modal-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-modal-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-modal-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-modal-color, var(--t-text, #4d4d4d));--comp-dialog-padding:var(--tct-modal-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-modal-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-modal-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-modal-max-width, 600px);--comp-dialog-max-height:var(--tct-modal-max-height, 100vh);--comp-dialog-min-height:var(--tct-modal-min-height, 40vh);--comp-dialog-box-shadow:var(--tct-modal-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-modal-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-modal-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden}dialog::backdrop{opacity:0;background:var(--tct-modal-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open]{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:1}dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}.content{overflow-y:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.content .icon{height:var(--tct-modal-icon-size, var(--app-scale-9x, 45px));margin:var(--tct-modal-icon-margin, var(--app-scale-2x, 10px));display:flex;justify-content:center}.content .icon q2-icon{width:var(--tct-modal-icon-size, var(--app-scale-9x, 45px))}.content .image{display:flex;justify-content:center}.content .image img{width:100%;border-radius:var(--tct-modal-image-border-radius, var(--app-border-radius-2, 8px))}.content .message{font-size:1rem}.content.more-gradient{-webkit-mask-image:linear-gradient(to bottom, red 85%, transparent 100%);mask-image:linear-gradient(to bottom, red 85%, transparent 100%)}.interior{display:grid;min-height:var(--comp-dialog-min-height);grid-template-rows:auto 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:"";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}header{display:flex;justify-content:space-between}header .title{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-align:left;font-weight:var(--tct-modal-title-font-weight, 400);margin:0;padding-top:0.5rem}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}';
+const c = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px);--comp-border-radius:var(--tct-modal-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-modal-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-modal-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-modal-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-modal-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-modal-color, var(--t-text, #4d4d4d));--comp-dialog-padding:var(--tct-modal-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-modal-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-modal-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-modal-max-width, 600px);--comp-dialog-max-height:var(--tct-modal-max-height, 100vh);--comp-dialog-min-height:var(--tct-modal-min-height, 40vh);--comp-dialog-box-shadow:var(--tct-modal-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-modal-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-modal-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden}dialog::backdrop{opacity:0;background:var(--tct-modal-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open]{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:1}dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}.content{overflow-y:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.content .icon{height:var(--tct-modal-icon-size, var(--app-scale-9x, 45px));margin:var(--tct-modal-icon-margin, var(--app-scale-2x, 10px));display:flex;justify-content:center}.content .icon q2-icon{width:var(--tct-modal-icon-size, var(--app-scale-9x, 45px))}.content .image{display:flex;justify-content:center}.content .image img{width:100%;border-radius:var(--tct-modal-image-border-radius, var(--app-border-radius-2, 8px))}.content .description{font-size:var(--tct-modal-description-font-size, 14px)}.content.more-gradient{-webkit-mask-image:linear-gradient(to bottom, red 85%, transparent 100%);mask-image:linear-gradient(to bottom, red 85%, transparent 100%)}.interior{display:grid;min-height:var(--comp-dialog-min-height);grid-template-rows:auto 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:"";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}header{display:flex;justify-content:space-between;align-items:center}header .title{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-align:left;font-weight:var(--tct-modal-title-font-weight, 400);margin:0}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}';
 
 const n = class {
-  constructor(o) {
-    t(this, o);
-    this.tctClick = i(this, "tctClick", 7);
-    this.tctClose = i(this, "tctClose", 7);
-    this.tctOpen = i(this, "tctOpen", 7);
-    this.tctReady = i(this, "tctReady", 3);
+  constructor(i) {
+    t(this, i);
+    this.tctClick = o(this, "tctClick", 7);
+    this.tctClose = o(this, "tctClose", 7);
+    this.tctOpen = o(this, "tctOpen", 7);
+    this.tctReady = o(this, "tctReady", 3);
     // #region Own Properties
     // to prevent background scroll when modal scrolls
         this.bodyOverflow = "";
@@ -28,19 +28,10 @@ const n = class {
          */    this.closable = true;
     // #endregion
     // #region Local Methods
-    // to be removed
-        this.iconStyle = () => {
-      const t = {};
-      if (this.iconStrokePrimary) t["--tct-icon-stroke-primary"] = this.iconStrokePrimary;
-      if (this.iconStrokeSecondary) t["--tct-icon-stroke-secondary"] = this.iconStrokeSecondary;
-      if (this.iconFillColor) t["--tct-icon-fill"] = this.iconFillColor;
-      if (this.iconStrokeWidth) t["--tct-icon-stroke-width"] = this.iconStrokeWidth;
-      return t;
-    };
-    this.initializeModal = () => {
+        this.initializeModal = () => {
       // limits 4 buttons in action slot
-      this.hostElement.querySelectorAll('[slot="action"]').forEach(((t, i) => {
-        if (i >= this.maxActionButtons) {
+      this.hostElement.querySelectorAll('[slot="action"]').forEach(((t, o) => {
+        if (o >= this.maxActionButtons) {
           console.warn(`q2-modal allows up to ${this.maxActionButtons} action buttons, [${t.getAttribute("label") || t.textContent}] button is now hidden.`);
           t.hidden = true;
         }
@@ -56,28 +47,28 @@ const n = class {
     };
     this.onClick = t => {
       t.stopPropagation();
-      const i = t.target;
-      if (!(i instanceof HTMLElement)) return;
-      const o = i.getAttribute("slot");
-      if (o === "action") {
+      const o = t.target;
+      if (!(o instanceof HTMLElement)) return;
+      const i = o.getAttribute("slot");
+      if (i === "action") {
         this.tctClick.emit({
-          value: i.dataset.value
+          value: o.dataset.value
         });
         this.onCancel(t);
       } else {
-        const o = !!i.closest(".interior , q2-modal");
-        if (o) return;
+        const i = !!o.closest(".interior , q2-modal");
+        if (i) return;
         this.onCancel(t);
       }
     };
     this.onContentScroll = () => {
       var t;
-      const i = this.contentElement.scrollHeight;
-      const o = Math.ceil(this.contentElement.scrollTop);
+      const o = this.contentElement.scrollHeight;
+      const i = Math.ceil(this.contentElement.scrollTop);
       const a = Math.ceil(((t = this.contentElement.getBoundingClientRect()) === null || t === void 0 ? void 0 : t.height) || 0);
       // to show bottom gradient when more contents available
-            if (i > a) {
-        i <= a + o ? this.contentElement.classList.remove("more-gradient") : this.contentElement.classList.add("more-gradient");
+            if (o > a) {
+        o <= a + i ? this.contentElement.classList.remove("more-gradient") : this.contentElement.classList.add("more-gradient");
       } else {
         this.contentElement.classList.remove("more-gradient");
       }
@@ -117,8 +108,8 @@ const n = class {
     });
   }
   async openModal(t) {
-    var i;
-    if ((i = this.dialogElement) === null || i === void 0 ? void 0 : i.open) return;
+    var o;
+    if ((o = this.dialogElement) === null || o === void 0 ? void 0 : o.open) return;
     this.tctOpen.emit(t);
     await r();
     // overwrite the properties if option provided
@@ -127,10 +118,6 @@ const n = class {
       this.description = (t === null || t === void 0 ? void 0 : t.description) || this.description;
       this.imageSrc = (t === null || t === void 0 ? void 0 : t.imageSrc) || this.imageSrc;
       this.icon = (t === null || t === void 0 ? void 0 : t.icon) || this.icon;
-      this.iconStrokePrimary = (t === null || t === void 0 ? void 0 : t.iconStrokePrimary) || this.iconStrokePrimary;
-      this.iconStrokeSecondary = (t === null || t === void 0 ? void 0 : t.imageSrc) || this.imageSrc;
-      this.iconFillColor = (t === null || t === void 0 ? void 0 : t.iconFillColor) || this.iconFillColor;
-      this.iconStrokeWidth = (t === null || t === void 0 ? void 0 : t.iconStrokeWidth) || this.iconStrokeWidth;
       this.description = (t === null || t === void 0 ? void 0 : t.description) || this.description;
     }
     this.dialogElement.showModal();
@@ -149,64 +136,63 @@ const n = class {
   // #region Render Methods
   render() {
     const t = `interior`;
-    const i = `${this.renderStatus || ""}`;
-    return o("dialog", {
-      key: "a74bc5ae1614b0dd8eaa8ce70f73560788e9a662",
+    const o = `${this.renderStatus || ""}`;
+    return i("dialog", {
+      key: "1bccb63a37166885ac3fe684141f8c8751569554",
       ref: t => this.dialogElement = t,
-      class: i,
+      class: o,
       onClick: this.onClick
-    }, o("div", {
-      key: "bb709e1b379144393b67a9718fcdb61d7c344d00",
+    }, i("div", {
+      key: "2e9005f0bd4f93aa0e4e4b5868fddc8e9b2ce267",
       class: t
-    }, this.title && o("header", {
-      key: "7d6eaa8ea125c352bc65a40cbfcc03879f8f181b"
-    }, this.title && o("h2", {
-      key: "13c8e1a45253ab74c2e23485d6898ab213fc8d39",
+    }, this.title && i("header", {
+      key: "4dc2c5b20e6e766084a300a6b747ccd9bf482d74"
+    }, this.title && i("h2", {
+      key: "c93f7a66309307761bc2a0b41b94cf17363dc877",
       class: "title"
-    }, this.title), !!this.closable && o("q2-btn", {
-      key: "3fc9bb4214af2a43f74b42625a69501c8dcc3e03",
+    }, this.title), !!this.closable && i("q2-btn", {
+      key: "aa3e5f3fa4f63055f36a8bfbc048f8262c29648b",
       class: "btn-close",
       "test-id": "btnClose",
       onClick: this.onCancel,
       label: "tecton.element.modal.close",
       "hide-label": true
-    }, o("q2-icon", {
-      key: "b72871beef595c1ed77cc2a7f84d72599b976efa",
+    }, i("q2-icon", {
+      key: "ab8c726d5d6522f2fc41ef8272bd704b27a31739",
       type: "close"
-    }))), o("div", {
-      key: "4b0e60c0f90eec52882575675bc8c2d84e5d1480",
+    }))), i("div", {
+      key: "f259da2c00afb066a3aa30bc04641ee760591e37",
       class: "content",
       ref: t => this.contentElement = t
-    }, this.icon && o("div", {
-      key: "f53452867c3f53c20750dec0b094e0cbc9e78f2c",
+    }, this.icon && i("div", {
+      key: "ecdf6189b3fa6021e6749f92e03fd89327859bb2",
       class: "icon"
-    }, o("q2-icon", {
-      key: "5246ccd47a15fed2ec243a3c882dda3b2793c715",
-      type: this.icon,
-      style: this.iconStyle()
-    })), this.imageSrc && o("div", {
-      key: "c030bc4c0dcdf79f2a9688af54540ebc63df6fa8",
+    }, i("q2-icon", {
+      key: "36b7977b295ceef5471e6b25ff42583bceed87d1",
+      type: this.icon
+    })), this.imageSrc && i("div", {
+      key: "ea9d269d8ced711dc47b8c358e324058a2b00f48",
       class: "image"
-    }, o("img", {
-      key: "54269ee03ab7373699b4a0bad69fbbb75b1587e6",
+    }, i("img", {
+      key: "ecce6985f6f7de5f92f9c2d5f2773c5371735e40",
       src: this.imageSrc
-    })), s(this.hostElement, "content") && o("slot", {
-      key: "eeffc528102cbf7d7dfd7b79eba16985ee870fe4",
+    })), s(this.hostElement, "content") && i("slot", {
+      key: "6d7f025c0f001d8b2b790bfadb7da9f8afc4b414",
       name: "content"
-    }), this.description && o("p", {
-      key: "01e020a52753b22e2b78239ac78b7dc6767c7e8a",
+    }), this.description && i("p", {
+      key: "1483ddcbdd4bc12c8d16649ee828335e9fc47c20",
       class: "description"
-    }, this.description), this.customMarkup && o("p", {
-      key: "4cf054ce65628789760fd782bb38c3d72d80e8e0",
+    }, this.description), this.customMarkup && i("p", {
+      key: "dd6c85ec7f0496221e0dccde4da15ff0d237908d",
       class: "customMarkup",
-      innerHTML: c(this.customMarkup)
-    })), o("footer", {
-      key: "be4e4c941edd52e44dcd1485506f9930724572f8"
-    }, o("q2-action-group", {
-      key: "9570a97936e654789b58d680573b54b6735e6290",
+      innerHTML: d(this.customMarkup)
+    })), i("footer", {
+      key: "0a263f6a30c3210f02ea8f54717049d17b30e7d7"
+    }, i("q2-action-group", {
+      key: "d040e253ed0fd0f38f06719131f006730d588858",
       "full-width": true
-    }, o("slot", {
-      key: "e727e732a3ebf3edf9d16389fb3d2da640b36bff",
+    }, i("slot", {
+      key: "2b7326223c8dd79de652f8661af2253f19f74a27",
       name: "action"
     })))));
   }
@@ -215,7 +201,7 @@ const n = class {
   }
 };
 
-n.style = d;
+n.style = c;
 
 export { n as q2_modal };
 //# sourceMappingURL=q2-modal.entry.esm.js.map

package/dist/q2-tecton-elements/q2-modal.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2ModalCss","Q2Modal","constructor","hostRef","this","bodyOverflow","scheduledAfterRender","maxActionButtons","renderStatus","closable","iconStyle","styleObject","iconStrokePrimary","iconStrokeSecondary","iconFillColor","iconStrokeWidth","initializeModal","hostElement","querySelectorAll","forEach","el","i","console","warn","getAttribute","textContent","hidden","contentElement","scrollTo","top","debouncedScroll","onCancel","event","preventDefault","closeModal","onClick","stopPropagation","eventTarget","target","HTMLElement","slot","tctClick","emit","value","dataset","isInContent","closest","onContentScroll","scrollHeight","scrollTop","Math","ceil","contentHeight","_a","getBoundingClientRect","height","classList","remove","add","disconnectedCallback","dialogElement","removeEventListener","componentDidLoad","addEventListener","tctReady","document","body","style","overflow","debounce","componentDidRender","fn","data","tctClose","close","once","openModal","option","open","tctOpen","waitForNextPaint","title","description","imageSrc","icon","showModal","render","interiorClasses","h","key","ref","class","label","type","src","hasSlotContent","name","customMarkup","innerHTML","sanitizeHTMLString"],"sources":["src/components/q2-modal/q2-modal.scss?tag=q2-modal&encapsulation=shadow","src/components/q2-modal/q2-modal.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n@keyframes showBackdrop {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes hideBackdrop {\n    to {\n        opacity: 0;\n    }\n}\n\n// CSS variables don't inherit into the ::backdrop pseudo-element\n$animation-tween: #{var-list(--tct-modal-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n    --comp-border-radius-default: var(--app-scale-3x, 15px);\n    --comp-border-radius: #{var-list(--tct-modal-border-radius, --comp-border-radius-default)};\n    --comp-desktop-border-radius: #{var-list(--tct-modal-border-radius, --app-scale-3x, 15px)};\n    --comp-close-button-size: #{var-list(--tct-modal-close-button-size, --t-a11y-min-size, 44px)};\n    --comp-header-height: #{var-list(--tct-modal-header-height, --t-a11y-min-size, 44px)};\n    --comp-dialog-background: #{var-list(--tct-modal-background, --t-base, #ffffff)};\n    --comp-dialog-color: #{var-list(--tct-modal-color, --t-text, #4d4d4d)};\n    --comp-dialog-padding: #{var-list(--tct-modal-padding, --app-scale-3x, 15px)};\n    --comp-content-gradient-height: #{var-list(--tct-modal-content-gradient-height, --app-scale-2x, 10px)};\n    --comp-dialog-gap: #{var-list(--tct-modal-gap, --app-scale-2x, 10px)};\n    --comp-dialog-max-width: #{var-list(--tct-modal-max-width, 600px)};\n    --comp-dialog-max-height: #{var-list(--tct-modal-max-height, 100vh)}; // should not use vh in the extension\n    --comp-dialog-min-height: #{var-list(--tct-modal-min-height, 40vh)};\n    --comp-dialog-box-shadow: #{var-list(\n            --tct-modal-box-shadow,\n            --app-shadow-2,\n            unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\")\n        )};\n\n    position: fixed;\n    top: 100%;\n    bottom: unset;\n    color: var(--comp-dialog-color);\n    background: var(--comp-dialog-background);\n    transition: transform $animation-tween, opacity $animation-tween;\n    width: 100%;\n    max-width: var(--comp-dialog-max-width);\n    border: 0;\n    border-radius: var(--comp-border-radius);\n    box-shadow: var(--comp-dialog-box-shadow);\n    padding: 0;\n    height: auto;\n    overflow: hidden;\n    &::backdrop {\n        opacity: 0;\n        background: var-list(--tct-modal-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n    }\n\n    &[open] {\n        border-radius: var(--comp-desktop-border-radius);\n        top: 0px;\n        bottom: 0px;\n        height: fit-content;\n        transform: translateY(10%);\n        opacity: 1;\n\n        &.is-opening,\n        &.is-open {\n            opacity: 1;\n            transform: translateY(0);\n            &::backdrop {\n                opacity: 1;\n                animation: showBackdrop $animation-tween;\n            }\n        }\n\n        &.is-closing {\n            transform: translateY(10%);\n\n            &::backdrop {\n                animation: hideBackdrop $animation-tween;\n            }\n        }\n    }\n}\n\n.content {\n    overflow-y: auto;\n    @include tiny-scrollbar();\n\n    .icon {\n        height: var-list(--tct-modal-icon-size --app-scale-9x, 45px);\n        margin: var-list(--tct-modal-icon-margin, --app-scale-2x, 10px);\n        display: flex;\n        justify-content: center;\n        q2-icon {\n            width: var-list(--tct-modal-icon-size --app-scale-9x, 45px);\n        }\n    }\n    .image {\n        display: flex;\n        justify-content: center;\n        img {\n            width: 100%;\n            border-radius: var-list(--tct-modal-image-border-radius, --app-border-radius-2, 8px);\n        }\n    }\n    .message {\n        font-size: 1rem;\n    }\n    &.more-gradient {\n        -webkit-mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n        mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n    }\n}\n\n.interior {\n    display: grid;\n    min-height: var(--comp-dialog-min-height);\n    grid-template-rows: auto 1fr auto;\n    gap: var(--comp-dialog-gap);\n    max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));\n    padding: var(--comp-dialog-padding);\n\n    &.is-list {\n        header,\n        footer {\n            position: relative;\n\n            &:before {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                height: var(--comp-content-gradient-height);\n                width: 100%;\n                z-index: 1;\n            }\n        }\n    }\n}\n\nheader {\n    display: flex;\n    justify-content: space-between;\n    .title {\n        @include line-clamp(3);\n        text-align: left;\n        font-weight: var-list(--tct-modal-title-font-weight, 400);\n        margin: 0;\n        padding-top: 0.5rem;\n    }\n\n    .btn-close {\n        grid-area: close;\n        width: var(--comp-close-button-size);\n        height: var(--comp-close-button-size);\n    }\n}\n","import { Component, ComponentInterface, Prop, Method, h, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { debounce, hasSlotContent, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString from '@/utils/sanitize-html-string';\n\nimport type { ModalOption, ModalResponse } from 'q2-tecton-common/lib/types/modal';\n\n/**\n * @name Modal\n * @category Display\n * @summary Use for focused interactions that require user attention before continuing.\n * @slot content - A slot to display custom content in the modal body above the description.\n * @slot action - A slot to display up to four elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group) in the modal's footer.\n */\n@Component({ tag: 'q2-modal', shadow: true, styleUrl: 'q2-modal.scss' })\nexport class Q2Modal implements ComponentInterface {\n    // #region Own Properties\n\n    // to prevent background scroll when modal scrolls\n    bodyOverflow: string = '';\n    contentElement: HTMLDivElement;\n    debouncedScroll: () => void;\n    dialogElement: HTMLDialogElement;\n    scheduledAfterRender: (() => void)[] = [];\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    maxActionButtons: number = 4;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls visibility of the close button in the top right corner.\n     */\n    @Prop({ reflect: true })\n    closable: boolean = true;\n\n    /**\n     * Allows HTML markup as modal content, but it will be sanitized for security purposes.\n     */\n    @Prop()\n    customMarkup: string;\n\n    /**\n     * A plain text description of the modal. Use this to provide context or information to the user.\n     */\n    @Prop()\n    description: string;\n\n    /**\n     * The icon to display at the top of the modal. [See Icon documentation](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    icon: string;\n\n    /**\n     * The icon fill color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconFillColor: string;\n\n    /**\n     * The icon primary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokePrimary: string;\n\n    /**\n     * The icon secondary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokeSecondary: string;\n\n    /**\n     * The icon secondary stroke width, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokeWidth: string;\n\n    /**\n     * An image URL to be displayed beneath the title. It renders with 100% width.\n     */\n    @Prop({ reflect: true })\n    imageSrc: string;\n\n    /**\n     * A plain text title of the modal displayed at the top.\n     */\n    @Prop({ mutable: true, reflect: true })\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when one of action buttons is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter;\n\n    /**\n     * Emitted when the modal is closed.\n     */\n    @Event()\n    tctClose: EventEmitter;\n\n    /**\n     * Emitted when the modal is opened.\n     */\n    @Event()\n    tctOpen: EventEmitter;\n\n    /**\n     * Emitted when the modal has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    tctReady: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n        this.contentElement?.removeEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.tctReady.emit();\n        this.bodyOverflow = document.body.style.overflow;\n        this.debouncedScroll = debounce(this.onContentScroll, 100);\n        this.contentElement.addEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidRender(): void {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async closeModal(data?: ModalResponse) {\n        this.tctClose.emit(data);\n        this.renderStatus = 'is-closing';\n        document.body.style.overflow = this.bodyOverflow;\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async openModal(option?: ModalOption) {\n        if (this.dialogElement?.open) return;\n        this.tctOpen.emit(option);\n        await waitForNextPaint();\n        // overwrite the properties if option provided\n        if (option) {\n            this.title = option?.title || this.title;\n            this.description = option?.description || this.description;\n            this.imageSrc = option?.imageSrc || this.imageSrc;\n            this.icon = option?.icon || this.icon;\n            this.iconStrokePrimary = option?.iconStrokePrimary || this.iconStrokePrimary;\n            this.iconStrokeSecondary = option?.imageSrc || this.imageSrc;\n            this.iconFillColor = option?.iconFillColor || this.iconFillColor;\n            this.iconStrokeWidth = option?.iconStrokeWidth || this.iconStrokeWidth;\n            this.description = option?.description || this.description;\n        }\n        this.dialogElement.showModal();\n        this.dialogElement.open = true;\n        document.body.style.overflow = 'hidden';\n        this.initializeModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n            },\n            { once: true }\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    // to be removed\n\n    iconStyle = () => {\n        const styleObject = {};\n        if (this.iconStrokePrimary) styleObject['--tct-icon-stroke-primary'] = this.iconStrokePrimary;\n        if (this.iconStrokeSecondary) styleObject['--tct-icon-stroke-secondary'] = this.iconStrokeSecondary;\n        if (this.iconFillColor) styleObject['--tct-icon-fill'] = this.iconFillColor;\n        if (this.iconStrokeWidth) styleObject['--tct-icon-stroke-width'] = this.iconStrokeWidth;\n        return styleObject;\n    };\n\n    initializeModal = () => {\n        // limits 4 buttons in action slot\n        this.hostElement.querySelectorAll<HTMLElement>('[slot=\"action\"]').forEach((el, i) => {\n            if (i >= this.maxActionButtons) {\n                console.warn(\n                    `q2-modal allows up to ${this.maxActionButtons} action buttons, [${el.getAttribute('label') || el.textContent}] button is now hidden.`\n                );\n                el.hidden = true;\n            }\n        });\n        this.contentElement.scrollTo({ top: 0 });\n        this.debouncedScroll();\n    };\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        this.closeModal();\n    };\n\n    onClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n        const slot = eventTarget.getAttribute('slot');\n        if (slot === 'action') {\n            this.tctClick.emit({ value: eventTarget.dataset.value });\n            this.onCancel(event);\n        } else {\n            const isInContent = !!eventTarget.closest('.interior , q2-modal');\n            if (isInContent) return;\n            this.onCancel(event);\n        }\n    };\n\n    onContentScroll = () => {\n        const scrollHeight = this.contentElement.scrollHeight;\n        const scrollTop = Math.ceil(this.contentElement.scrollTop);\n        const contentHeight = Math.ceil(this.contentElement.getBoundingClientRect()?.height || 0);\n        // to show bottom gradient when more contents available\n        if (scrollHeight > contentHeight) {\n            scrollHeight <= contentHeight + scrollTop\n                ? this.contentElement.classList.remove('more-gradient')\n                : this.contentElement.classList.add('more-gradient');\n        } else {\n            this.contentElement.classList.remove('more-gradient');\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const interiorClasses = `interior`;\n        const renderStatus = `${this.renderStatus || ''}`;\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {this.title && (\n                        <header>\n                            {this.title && <h2 class=\"title\">{this.title}</h2>}\n                            {!!this.closable && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.modal.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    <div\n                        class=\"content\"\n                        ref={el => (this.contentElement = el)}\n                    >\n                        {this.icon && (\n                            <div class=\"icon\">\n                                <q2-icon\n                                    type={this.icon}\n                                    style={this.iconStyle()}\n                                ></q2-icon>\n                            </div>\n                        )}\n                        {this.imageSrc && (\n                            <div class=\"image\">\n                                <img src={this.imageSrc}></img>\n                            </div>\n                        )}\n                        {hasSlotContent(this.hostElement, 'content') && <slot name=\"content\"></slot>}\n                        {this.description && <p class=\"description\">{this.description}</p>}\n                        {this.customMarkup && (\n                            <p\n                                class=\"customMarkup\"\n                                innerHTML={sanitizeHTMLString(this.customMarkup)}\n                            ></p>\n                        )}\n                    </div>\n                    <footer>\n                        <q2-action-group full-width>\n                            <slot name=\"action\"></slot>\n                        </q2-action-group>\n                    </footer>\n                </div>\n            </dialog>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;;;AAAA,MAAMA,IAAa;;MCcNC,IAAO;EADpB,WAAAC,CAAAC;;;;;;;;QAKIC,KAAYC,eAAW;IAIvBD,KAAoBE,uBAAmB;;;QAYvCF,KAAgBG,mBAAW;IAG3BH,KAAYI,eAA4C;;;;;eASxDJ,KAAQK,WAAY;;;;QAiKpBL,KAASM,YAAG;MACR,MAAMC,IAAc;MACpB,IAAIP,KAAKQ,mBAAmBD,EAAY,+BAA+BP,KAAKQ;MAC5E,IAAIR,KAAKS,qBAAqBF,EAAY,iCAAiCP,KAAKS;MAChF,IAAIT,KAAKU,eAAeH,EAAY,qBAAqBP,KAAKU;MAC9D,IAAIV,KAAKW,iBAAiBJ,EAAY,6BAA6BP,KAAKW;MACxE,OAAOJ;AAAW;IAGtBP,KAAeY,kBAAG;;MAEdZ,KAAKa,YAAYC,iBAA8B,mBAAmBC,SAAQ,CAACC,GAAIC;QAC3E,IAAIA,KAAKjB,KAAKG,kBAAkB;UAC5Be,QAAQC,KACJ,yBAAyBnB,KAAKG,qCAAqCa,EAAGI,aAAa,YAAYJ,EAAGK;UAEtGL,EAAGM,SAAS;;;MAGpBtB,KAAKuB,eAAeC,SAAS;QAAEC,KAAK;;MACpCzB,KAAK0B;AAAiB;IAG1B1B,KAAA2B,WAAYC;MACRA,EAAMC;MACN7B,KAAK8B;AAAY;IAGrB9B,KAAA+B,UAAWH;MACPA,EAAMI;MACN,MAAMC,IAAcL,EAAMM;MAC1B,MAAMD,aAAuBE,cAAc;MAC3C,MAAMC,IAAOH,EAAYb,aAAa;MACtC,IAAIgB,MAAS,UAAU;QACnBpC,KAAKqC,SAASC,KAAK;UAAEC,OAAON,EAAYO,QAAQD;;QAChDvC,KAAK2B,SAASC;aACX;QACH,MAAMa,MAAgBR,EAAYS,QAAQ;QAC1C,IAAID,GAAa;QACjBzC,KAAK2B,SAASC;;;IAItB5B,KAAe2C,kBAAG;;MACd,MAAMC,IAAe5C,KAAKuB,eAAeqB;MACzC,MAAMC,IAAYC,KAAKC,KAAK/C,KAAKuB,eAAesB;MAChD,MAAMG,IAAgBF,KAAKC,OAAKE,IAAAjD,KAAKuB,eAAe2B,6BAAuB,QAAAD,WAAA,aAAAA,EAAEE,WAAU;;YAEvF,IAAIP,IAAeI,GAAe;QAC9BJ,KAAgBI,IAAgBH,IAC1B7C,KAAKuB,eAAe6B,UAAUC,OAAO,mBACrCrD,KAAKuB,eAAe6B,UAAUE,IAAI;aACrC;QACHtD,KAAKuB,eAAe6B,UAAUC,OAAO;;;AAsEhD;;;EArMG,oBAAAE;;IACIvD,KAAKwD,cAAcC,oBAAoB,UAAUzD,KAAK2B;KACtDsB,IAAAjD,KAAKuB,oBAAc,QAAA0B,WAAA,aAAAA,EAAEQ,oBAAoB,UAAUzD,KAAK0B;;EAG5D,gBAAAgC;IACI1D,KAAKwD,cAAcG,iBAAiB,UAAU3D,KAAK2B;IACnD3B,KAAK4D,SAAStB;IACdtC,KAAKC,eAAe4D,SAASC,KAAKC,MAAMC;IACxChE,KAAK0B,kBAAkBuC,EAASjE,KAAK2C,iBAAiB;IACtD3C,KAAKuB,eAAeoC,iBAAiB,UAAU3D,KAAK0B;;EAGxD,kBAAAwC;;KACIjB,IAAAjD,KAAKE,0BAAoB,QAAA+C,WAAA,aAAAA,EAAElC,SAAQoD,KAAMA;IACzCnE,KAAKE,uBAAuB;;;;EAOhC,gBAAM4B,CAAWsC;IACbpE,KAAKqE,SAAS/B,KAAK8B;IACnBpE,KAAKI,eAAe;IACpByD,SAASC,KAAKC,MAAMC,WAAWhE,KAAKC;IACpCD,KAAKwD,cAAcG,iBACf,kBACA;MACI,IAAI3D,KAAKI,iBAAiB,cAAc;MACxCJ,KAAKwD,cAAcc;MACnBtE,KAAKI,eAAe;AAAI,QAE5B;MAAEmE,MAAM;;;EAKhB,eAAMC,CAAUC;;IACZ,KAAIxB,IAAAjD,KAAKwD,mBAAa,QAAAP,WAAA,aAAAA,EAAEyB,MAAM;IAC9B1E,KAAK2E,QAAQrC,KAAKmC;UACZG;;QAEN,IAAIH,GAAQ;MACRzE,KAAK6E,SAAQJ,MAAA,QAAAA,WAAA,aAAAA,EAAQI,UAAS7E,KAAK6E;MACnC7E,KAAK8E,eAAcL,MAAA,QAAAA,WAAA,aAAAA,EAAQK,gBAAe9E,KAAK8E;MAC/C9E,KAAK+E,YAAWN,MAAA,QAAAA,WAAA,aAAAA,EAAQM,aAAY/E,KAAK+E;MACzC/E,KAAKgF,QAAOP,MAAA,QAAAA,WAAA,aAAAA,EAAQO,SAAQhF,KAAKgF;MACjChF,KAAKQ,qBAAoBiE,MAAA,QAAAA,WAAA,aAAAA,EAAQjE,sBAAqBR,KAAKQ;MAC3DR,KAAKS,uBAAsBgE,MAAA,QAAAA,WAAA,aAAAA,EAAQM,aAAY/E,KAAK+E;MACpD/E,KAAKU,iBAAgB+D,MAAA,QAAAA,WAAA,aAAAA,EAAQ/D,kBAAiBV,KAAKU;MACnDV,KAAKW,mBAAkB8D,MAAA,QAAAA,WAAA,aAAAA,EAAQ9D,oBAAmBX,KAAKW;MACvDX,KAAK8E,eAAcL,MAAA,QAAAA,WAAA,aAAAA,EAAQK,gBAAe9E,KAAK8E;;IAEnD9E,KAAKwD,cAAcyB;IACnBjF,KAAKwD,cAAckB,OAAO;IAC1Bb,SAASC,KAAKC,MAAMC,WAAW;IAC/BhE,KAAKY;IACLZ,KAAKI,eAAe;IACpBJ,KAAKwD,cAAcG,iBACf,kBACA;MACI,IAAI3D,KAAKI,iBAAiB,cAAc;MACxCJ,KAAKI,eAAe;AAAS,QAEjC;MAAEmE,MAAM;;;;;EAqEhB,MAAAW;IACI,MAAMC,IAAkB;IACxB,MAAM/E,IAAe,GAAGJ,KAAKI,gBAAgB;IAC7C,OACIgF,EACI;MAAAC,KAAA;MAAAC,KAAKtE,KAAOhB,KAAKwD,gBAAgBxC;MACjCuE,OAAOnF;MACP2B,SAAS/B,KAAK+B;OAEdqD,EAAK;MAAAC,KAAA;MAAAE,OAAOJ;OACPnF,KAAK6E,SACFO,EAAA;MAAAC,KAAA;OACKrF,KAAK6E,SAASO,EAAI;MAAAC,KAAA;MAAAE,OAAM;OAASvF,KAAK6E,UACpC7E,KAAKK,YACJ+E,EAAA;MAAAC,KAAA;MACIE,OAAM;MAAW,WACT;MACRxD,SAAS/B,KAAK2B;MACd6D,OAAM;MAA4B;OAGlCJ,EAAA;MAAAC,KAAA;MAASI,MAAK;UAK9BL,EAAA;MAAAC,KAAA;MACIE,OAAM;MACND,KAAKtE,KAAOhB,KAAKuB,iBAAiBP;OAEjChB,KAAKgF,QACFI,EAAK;MAAAC,KAAA;MAAAE,OAAM;OACPH,EAAA;MAAAC,KAAA;MACII,MAAMzF,KAAKgF;MACXjB,OAAO/D,KAAKM;SAIvBN,KAAK+E,YACFK,EAAK;MAAAC,KAAA;MAAAE,OAAM;OACPH,EAAA;MAAAC,KAAA;MAAKK,KAAK1F,KAAK+E;SAGtBY,EAAe3F,KAAKa,aAAa,cAAcuE,EAAM;MAAAC,KAAA;MAAAO,MAAK;QAC1D5F,KAAK8E,eAAeM,EAAG;MAAAC,KAAA;MAAAE,OAAM;OAAevF,KAAK8E,cACjD9E,KAAK6F,gBACFT,EACI;MAAAC,KAAA;MAAAE,OAAM;MACNO,WAAWC,EAAmB/F,KAAK6F;SAI/CT,EAAA;MAAAC,KAAA;OACID,EAAA;MAAAC,KAAA;MAAA;OACID,EAAM;MAAAC,KAAA;MAAAO,MAAK","ignoreList":[]}
+{"version":3,"names":["q2ModalCss","Q2Modal","constructor","hostRef","this","bodyOverflow","scheduledAfterRender","maxActionButtons","renderStatus","closable","initializeModal","hostElement","querySelectorAll","forEach","el","i","console","warn","getAttribute","textContent","hidden","contentElement","scrollTo","top","debouncedScroll","onCancel","event","preventDefault","closeModal","onClick","stopPropagation","eventTarget","target","HTMLElement","slot","tctClick","emit","value","dataset","isInContent","closest","onContentScroll","scrollHeight","scrollTop","Math","ceil","contentHeight","_a","getBoundingClientRect","height","classList","remove","add","disconnectedCallback","dialogElement","removeEventListener","componentDidLoad","addEventListener","tctReady","document","body","style","overflow","debounce","componentDidRender","fn","data","tctClose","close","once","openModal","option","open","tctOpen","waitForNextPaint","title","description","imageSrc","icon","showModal","render","interiorClasses","h","key","ref","class","label","type","src","hasSlotContent","name","customMarkup","innerHTML","sanitizeHTMLString"],"sources":["src/components/q2-modal/q2-modal.scss?tag=q2-modal&encapsulation=shadow","src/components/q2-modal/q2-modal.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n@keyframes showBackdrop {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes hideBackdrop {\n    to {\n        opacity: 0;\n    }\n}\n\n// CSS variables don't inherit into the ::backdrop pseudo-element\n$animation-tween: #{var-list(--tct-modal-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n    --comp-border-radius-default: var(--app-scale-3x, 15px);\n    --comp-border-radius: #{var-list(--tct-modal-border-radius, --comp-border-radius-default)};\n    --comp-desktop-border-radius: #{var-list(--tct-modal-border-radius, --app-scale-3x, 15px)};\n    --comp-close-button-size: #{var-list(--tct-modal-close-button-size, --t-a11y-min-size, 44px)};\n    --comp-header-height: #{var-list(--tct-modal-header-height, --t-a11y-min-size, 44px)};\n    --comp-dialog-background: #{var-list(--tct-modal-background, --t-base, #ffffff)};\n    --comp-dialog-color: #{var-list(--tct-modal-color, --t-text, #4d4d4d)};\n    --comp-dialog-padding: #{var-list(--tct-modal-padding, --app-scale-3x, 15px)};\n    --comp-content-gradient-height: #{var-list(--tct-modal-content-gradient-height, --app-scale-2x, 10px)};\n    --comp-dialog-gap: #{var-list(--tct-modal-gap, --app-scale-2x, 10px)};\n    --comp-dialog-max-width: #{var-list(--tct-modal-max-width, 600px)};\n    --comp-dialog-max-height: #{var-list(--tct-modal-max-height, 100vh)}; // should not use vh in the extension\n    --comp-dialog-min-height: #{var-list(--tct-modal-min-height, 40vh)};\n    --comp-dialog-box-shadow: #{var-list(\n            --tct-modal-box-shadow,\n            --app-shadow-2,\n            unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\")\n        )};\n\n    position: fixed;\n    top: 100%;\n    bottom: unset;\n    color: var(--comp-dialog-color);\n    background: var(--comp-dialog-background);\n    transition: transform $animation-tween, opacity $animation-tween;\n    width: 100%;\n    max-width: var(--comp-dialog-max-width);\n    border: 0;\n    border-radius: var(--comp-border-radius);\n    box-shadow: var(--comp-dialog-box-shadow);\n    padding: 0;\n    height: auto;\n    overflow: hidden;\n    &::backdrop {\n        opacity: 0;\n        background: var-list(--tct-modal-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n    }\n\n    &[open] {\n        border-radius: var(--comp-desktop-border-radius);\n        top: 0px;\n        bottom: 0px;\n        height: fit-content;\n        transform: translateY(10%);\n        opacity: 1;\n\n        &.is-opening,\n        &.is-open {\n            opacity: 1;\n            transform: translateY(0);\n            &::backdrop {\n                opacity: 1;\n                animation: showBackdrop $animation-tween;\n            }\n        }\n\n        &.is-closing {\n            transform: translateY(10%);\n\n            &::backdrop {\n                animation: hideBackdrop $animation-tween;\n            }\n        }\n    }\n}\n\n.content {\n    overflow-y: auto;\n    @include tiny-scrollbar();\n\n    .icon {\n        height: var-list(--tct-modal-icon-size --app-scale-9x, 45px);\n        margin: var-list(--tct-modal-icon-margin, --app-scale-2x, 10px);\n        display: flex;\n        justify-content: center;\n        q2-icon {\n            width: var-list(--tct-modal-icon-size --app-scale-9x, 45px);\n        }\n    }\n    .image {\n        display: flex;\n        justify-content: center;\n        img {\n            width: 100%;\n            border-radius: var-list(--tct-modal-image-border-radius, --app-border-radius-2, 8px);\n        }\n    }\n    .description {\n        font-size: var-list(--tct-modal-description-font-size, 14px);\n    }\n    &.more-gradient {\n        -webkit-mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n        mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n    }\n}\n\n.interior {\n    display: grid;\n    min-height: var(--comp-dialog-min-height);\n    grid-template-rows: auto 1fr auto;\n    gap: var(--comp-dialog-gap);\n    max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));\n    padding: var(--comp-dialog-padding);\n\n    &.is-list {\n        header,\n        footer {\n            position: relative;\n\n            &:before {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                height: var(--comp-content-gradient-height);\n                width: 100%;\n                z-index: 1;\n            }\n        }\n    }\n}\n\nheader {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    .title {\n        @include line-clamp(3);\n        text-align: left;\n        font-weight: var-list(--tct-modal-title-font-weight, 400);\n        margin: 0;\n    }\n\n    .btn-close {\n        grid-area: close;\n        width: var(--comp-close-button-size);\n        height: var(--comp-close-button-size);\n    }\n}\n","import { Component, ComponentInterface, Prop, Method, h, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { debounce, hasSlotContent, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString from '@/utils/sanitize-html-string';\n\nimport type { ModalOption, ModalResponse } from 'q2-tecton-common/lib/types/modal';\n\n/**\n * @name Modal\n * @category Display\n * @summary Use for focused interactions that require user attention before continuing.\n * @slot content - A slot to display custom content in the modal body above the description.\n * @slot action - A slot to display up to four elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group) in the modal's footer.\n */\n@Component({ tag: 'q2-modal', shadow: true, styleUrl: 'q2-modal.scss' })\nexport class Q2Modal implements ComponentInterface {\n    // #region Own Properties\n\n    // to prevent background scroll when modal scrolls\n    bodyOverflow: string = '';\n    contentElement: HTMLDivElement;\n    debouncedScroll: () => void;\n    dialogElement: HTMLDialogElement;\n    scheduledAfterRender: (() => void)[] = [];\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    maxActionButtons: number = 4;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls visibility of the close button in the top right corner.\n     */\n    @Prop({ reflect: true })\n    closable: boolean = true;\n\n    /**\n     * Allows HTML markup as modal content, but it will be sanitized for security purposes.\n     */\n    @Prop()\n    customMarkup: string;\n\n    /**\n     * A plain text description of the modal. Use this to provide context or information to the user.\n     */\n    @Prop()\n    description: string;\n\n    /**\n     * The icon to display at the top of the modal. [See Icon documentation](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    icon: string;\n\n    /**\n     * An image URL to be displayed beneath the title. It renders with 100% width.\n     */\n    @Prop({ reflect: true })\n    imageSrc: string;\n\n    /**\n     * A plain text title of the modal displayed at the top.\n     */\n    @Prop({ mutable: true, reflect: true })\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when one of action buttons is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter;\n\n    /**\n     * Emitted when the modal is closed.\n     */\n    @Event()\n    tctClose: EventEmitter;\n\n    /**\n     * Emitted when the modal is opened.\n     */\n    @Event()\n    tctOpen: EventEmitter;\n\n    /**\n     * Emitted when the modal has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    tctReady: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n        this.contentElement?.removeEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.tctReady.emit();\n        this.bodyOverflow = document.body.style.overflow;\n        this.debouncedScroll = debounce(this.onContentScroll, 100);\n        this.contentElement.addEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidRender(): void {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async closeModal(data?: ModalResponse) {\n        this.tctClose.emit(data);\n        this.renderStatus = 'is-closing';\n        document.body.style.overflow = this.bodyOverflow;\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async openModal(option?: ModalOption) {\n        if (this.dialogElement?.open) return;\n        this.tctOpen.emit(option);\n        await waitForNextPaint();\n        // overwrite the properties if option provided\n        if (option) {\n            this.title = option?.title || this.title;\n            this.description = option?.description || this.description;\n            this.imageSrc = option?.imageSrc || this.imageSrc;\n            this.icon = option?.icon || this.icon;\n            this.description = option?.description || this.description;\n        }\n        this.dialogElement.showModal();\n        this.dialogElement.open = true;\n        document.body.style.overflow = 'hidden';\n        this.initializeModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n            },\n            { once: true }\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    initializeModal = () => {\n        // limits 4 buttons in action slot\n        this.hostElement.querySelectorAll<HTMLElement>('[slot=\"action\"]').forEach((el, i) => {\n            if (i >= this.maxActionButtons) {\n                console.warn(\n                    `q2-modal allows up to ${this.maxActionButtons} action buttons, [${el.getAttribute('label') || el.textContent}] button is now hidden.`\n                );\n                el.hidden = true;\n            }\n        });\n        this.contentElement.scrollTo({ top: 0 });\n        this.debouncedScroll();\n    };\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        this.closeModal();\n    };\n\n    onClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n        const slot = eventTarget.getAttribute('slot');\n        if (slot === 'action') {\n            this.tctClick.emit({ value: eventTarget.dataset.value });\n            this.onCancel(event);\n        } else {\n            const isInContent = !!eventTarget.closest('.interior , q2-modal');\n            if (isInContent) return;\n            this.onCancel(event);\n        }\n    };\n\n    onContentScroll = () => {\n        const scrollHeight = this.contentElement.scrollHeight;\n        const scrollTop = Math.ceil(this.contentElement.scrollTop);\n        const contentHeight = Math.ceil(this.contentElement.getBoundingClientRect()?.height || 0);\n        // to show bottom gradient when more contents available\n        if (scrollHeight > contentHeight) {\n            scrollHeight <= contentHeight + scrollTop\n                ? this.contentElement.classList.remove('more-gradient')\n                : this.contentElement.classList.add('more-gradient');\n        } else {\n            this.contentElement.classList.remove('more-gradient');\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const interiorClasses = `interior`;\n        const renderStatus = `${this.renderStatus || ''}`;\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {this.title && (\n                        <header>\n                            {this.title && <h2 class=\"title\">{this.title}</h2>}\n                            {!!this.closable && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.modal.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    <div\n                        class=\"content\"\n                        ref={el => (this.contentElement = el)}\n                    >\n                        {this.icon && (\n                            <div class=\"icon\">\n                                <q2-icon type={this.icon}></q2-icon>\n                            </div>\n                        )}\n                        {this.imageSrc && (\n                            <div class=\"image\">\n                                <img src={this.imageSrc}></img>\n                            </div>\n                        )}\n                        {hasSlotContent(this.hostElement, 'content') && <slot name=\"content\"></slot>}\n                        {this.description && <p class=\"description\">{this.description}</p>}\n                        {this.customMarkup && (\n                            <p\n                                class=\"customMarkup\"\n                                innerHTML={sanitizeHTMLString(this.customMarkup)}\n                            ></p>\n                        )}\n                    </div>\n                    <footer>\n                        <q2-action-group full-width>\n                            <slot name=\"action\"></slot>\n                        </q2-action-group>\n                    </footer>\n                </div>\n            </dialog>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;;;AAAA,MAAMA,IAAa;;MCcNC,IAAO;EADpB,WAAAC,CAAAC;;;;;;;;QAKIC,KAAYC,eAAW;IAIvBD,KAAoBE,uBAAmB;;;QAYvCF,KAAgBG,mBAAW;IAG3BH,KAAYI,eAA4C;;;;;eASxDJ,KAAQK,WAAY;;;QAmIpBL,KAAeM,kBAAG;;MAEdN,KAAKO,YAAYC,iBAA8B,mBAAmBC,SAAQ,CAACC,GAAIC;QAC3E,IAAIA,KAAKX,KAAKG,kBAAkB;UAC5BS,QAAQC,KACJ,yBAAyBb,KAAKG,qCAAqCO,EAAGI,aAAa,YAAYJ,EAAGK;UAEtGL,EAAGM,SAAS;;;MAGpBhB,KAAKiB,eAAeC,SAAS;QAAEC,KAAK;;MACpCnB,KAAKoB;AAAiB;IAG1BpB,KAAAqB,WAAYC;MACRA,EAAMC;MACNvB,KAAKwB;AAAY;IAGrBxB,KAAAyB,UAAWH;MACPA,EAAMI;MACN,MAAMC,IAAcL,EAAMM;MAC1B,MAAMD,aAAuBE,cAAc;MAC3C,MAAMC,IAAOH,EAAYb,aAAa;MACtC,IAAIgB,MAAS,UAAU;QACnB9B,KAAK+B,SAASC,KAAK;UAAEC,OAAON,EAAYO,QAAQD;;QAChDjC,KAAKqB,SAASC;aACX;QACH,MAAMa,MAAgBR,EAAYS,QAAQ;QAC1C,IAAID,GAAa;QACjBnC,KAAKqB,SAASC;;;IAItBtB,KAAeqC,kBAAG;;MACd,MAAMC,IAAetC,KAAKiB,eAAeqB;MACzC,MAAMC,IAAYC,KAAKC,KAAKzC,KAAKiB,eAAesB;MAChD,MAAMG,IAAgBF,KAAKC,OAAKE,IAAA3C,KAAKiB,eAAe2B,6BAAuB,QAAAD,WAAA,aAAAA,EAAEE,WAAU;;YAEvF,IAAIP,IAAeI,GAAe;QAC9BJ,KAAgBI,IAAgBH,IAC1BvC,KAAKiB,eAAe6B,UAAUC,OAAO,mBACrC/C,KAAKiB,eAAe6B,UAAUE,IAAI;aACrC;QACHhD,KAAKiB,eAAe6B,UAAUC,OAAO;;;AAmEhD;;;EAnLG,oBAAAE;;IACIjD,KAAKkD,cAAcC,oBAAoB,UAAUnD,KAAKqB;KACtDsB,IAAA3C,KAAKiB,oBAAc,QAAA0B,WAAA,aAAAA,EAAEQ,oBAAoB,UAAUnD,KAAKoB;;EAG5D,gBAAAgC;IACIpD,KAAKkD,cAAcG,iBAAiB,UAAUrD,KAAKqB;IACnDrB,KAAKsD,SAAStB;IACdhC,KAAKC,eAAesD,SAASC,KAAKC,MAAMC;IACxC1D,KAAKoB,kBAAkBuC,EAAS3D,KAAKqC,iBAAiB;IACtDrC,KAAKiB,eAAeoC,iBAAiB,UAAUrD,KAAKoB;;EAGxD,kBAAAwC;;KACIjB,IAAA3C,KAAKE,0BAAoB,QAAAyC,WAAA,aAAAA,EAAElC,SAAQoD,KAAMA;IACzC7D,KAAKE,uBAAuB;;;;EAOhC,gBAAMsB,CAAWsC;IACb9D,KAAK+D,SAAS/B,KAAK8B;IACnB9D,KAAKI,eAAe;IACpBmD,SAASC,KAAKC,MAAMC,WAAW1D,KAAKC;IACpCD,KAAKkD,cAAcG,iBACf,kBACA;MACI,IAAIrD,KAAKI,iBAAiB,cAAc;MACxCJ,KAAKkD,cAAcc;MACnBhE,KAAKI,eAAe;AAAI,QAE5B;MAAE6D,MAAM;;;EAKhB,eAAMC,CAAUC;;IACZ,KAAIxB,IAAA3C,KAAKkD,mBAAa,QAAAP,WAAA,aAAAA,EAAEyB,MAAM;IAC9BpE,KAAKqE,QAAQrC,KAAKmC;UACZG;;QAEN,IAAIH,GAAQ;MACRnE,KAAKuE,SAAQJ,MAAA,QAAAA,WAAA,aAAAA,EAAQI,UAASvE,KAAKuE;MACnCvE,KAAKwE,eAAcL,MAAA,QAAAA,WAAA,aAAAA,EAAQK,gBAAexE,KAAKwE;MAC/CxE,KAAKyE,YAAWN,MAAA,QAAAA,WAAA,aAAAA,EAAQM,aAAYzE,KAAKyE;MACzCzE,KAAK0E,QAAOP,MAAA,QAAAA,WAAA,aAAAA,EAAQO,SAAQ1E,KAAK0E;MACjC1E,KAAKwE,eAAcL,MAAA,QAAAA,WAAA,aAAAA,EAAQK,gBAAexE,KAAKwE;;IAEnDxE,KAAKkD,cAAcyB;IACnB3E,KAAKkD,cAAckB,OAAO;IAC1Bb,SAASC,KAAKC,MAAMC,WAAW;IAC/B1D,KAAKM;IACLN,KAAKI,eAAe;IACpBJ,KAAKkD,cAAcG,iBACf,kBACA;MACI,IAAIrD,KAAKI,iBAAiB,cAAc;MACxCJ,KAAKI,eAAe;AAAS,QAEjC;MAAE6D,MAAM;;;;;EA0DhB,MAAAW;IACI,MAAMC,IAAkB;IACxB,MAAMzE,IAAe,GAAGJ,KAAKI,gBAAgB;IAC7C,OACI0E,EACI;MAAAC,KAAA;MAAAC,KAAKtE,KAAOV,KAAKkD,gBAAgBxC;MACjCuE,OAAO7E;MACPqB,SAASzB,KAAKyB;OAEdqD,EAAK;MAAAC,KAAA;MAAAE,OAAOJ;OACP7E,KAAKuE,SACFO,EAAA;MAAAC,KAAA;OACK/E,KAAKuE,SAASO,EAAI;MAAAC,KAAA;MAAAE,OAAM;OAASjF,KAAKuE,UACpCvE,KAAKK,YACJyE,EAAA;MAAAC,KAAA;MACIE,OAAM;MAAW,WACT;MACRxD,SAASzB,KAAKqB;MACd6D,OAAM;MAA4B;OAGlCJ,EAAA;MAAAC,KAAA;MAASI,MAAK;UAK9BL,EAAA;MAAAC,KAAA;MACIE,OAAM;MACND,KAAKtE,KAAOV,KAAKiB,iBAAiBP;OAEjCV,KAAK0E,QACFI,EAAK;MAAAC,KAAA;MAAAE,OAAM;OACPH,EAAA;MAAAC,KAAA;MAASI,MAAMnF,KAAK0E;SAG3B1E,KAAKyE,YACFK,EAAK;MAAAC,KAAA;MAAAE,OAAM;OACPH,EAAA;MAAAC,KAAA;MAAKK,KAAKpF,KAAKyE;SAGtBY,EAAerF,KAAKO,aAAa,cAAcuE,EAAM;MAAAC,KAAA;MAAAO,MAAK;QAC1DtF,KAAKwE,eAAeM,EAAG;MAAAC,KAAA;MAAAE,OAAM;OAAejF,KAAKwE,cACjDxE,KAAKuF,gBACFT,EACI;MAAAC,KAAA;MAAAE,OAAM;MACNO,WAAWC,EAAmBzF,KAAKuF;SAI/CT,EAAA;MAAAC,KAAA;OACID,EAAA;MAAAC,KAAA;MAAA;OACID,EAAM;MAAAC,KAAA;MAAAO,MAAK","ignoreList":[]}

package/dist/q2-tecton-elements/q2-month-picker.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as n, g as o } from "./index-CGkHOjh1.js";
 
-import { l as i, o as a } from "./index-B4WYBDS9.js";
+import { l as a, o as i } from "./index-C4PILj1_.js";
 
 const r = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.month-container{--comp-month-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-month-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-month-primary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-month-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)))}.month-container .navigation{display:flex;justify-content:space-between;flex-direction:row}.month-container .navigation .year-btn{padding:0 1rem;display:flex;align-items:center}.month-container .navigation .year-btn .year{margin-right:0.2rem}.month-container .navigation .year-btn .year-icon{--t-icon-stroke-width:2px;width:16px;height:16px;transition:all 0.3s ease-in-out}.month-container .navigation .year-btn .year-icon.on{transform:rotate(-180deg)}.month-container .navigation .month-controller{display:flex;align-items:center}.month-container .month-list{display:grid;grid-template-columns:auto auto auto}.month-container .month-list .month{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}.month-container .month-list .month .month-button{border-radius:50%;aspect-ratio:1;width:50px;display:flex;justify-content:center;align-items:center}.month-container .month-list .month .month-button:hover{background:var(--comp-month-primary-background);color:var(--comp-month-secondary-font-color);cursor:pointer}.month-container .month-list .month .month-button:active,.month-container .month-list .month .month-button.active{background:var(--comp-month-primary-background);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";
 
@@ -12,8 +12,8 @@ const c = class {
     // #region Own Properties
         this.monthGrid = [ [ 0, 1, 2 ], [ 3, 4, 5 ], [ 6, 7, 8 ], [ 9, 10, 11 ] ];
     this.months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ].map((t => ({
-      label: i(`tecton.element.calendar.months.${t}`),
-      abbr: i(`tecton.element.calendar.months.abbr.${t}`)
+      label: a(`tecton.element.calendar.months.${t}`),
+      abbr: a(`tecton.element.calendar.months.abbr.${t}`)
     })));
     this.scheduledAfterRender = [];
     // #endregion
@@ -35,10 +35,10 @@ const c = class {
     };
     this.moveMonth = (t, e, n) => {
       const o = t.length;
-      const i = t[0].length;
-      const a = Math.floor(e / i);
-      const r = e % i;
-      const c = [ a, r ];
+      const a = t[0].length;
+      const i = Math.floor(e / a);
+      const r = e % a;
+      const c = [ i, r ];
       if (n.key === "ArrowUp") {
         n.stopPropagation();
         n.preventDefault();
@@ -88,11 +88,11 @@ const c = class {
       var e, n, o;
       this.selectedIndex = t;
       this.focusedIndex = t;
-      const i = this.hostElement.shadowRoot.querySelector(`.month-button[data-index="${t}"]`);
+      const a = this.hostElement.shadowRoot.querySelector(`.month-button[data-index="${t}"]`);
       (e = this.hostElement.shadowRoot.querySelectorAll(`.month-button`)) === null || e === void 0 ? void 0 : e.forEach((t => t.classList.remove("active")));
-      i === null || i === void 0 ? void 0 : i.classList.add("active");
-      i === null || i === void 0 ? void 0 : i.focus();
-      const a = {
+      a === null || a === void 0 ? void 0 : a.classList.add("active");
+      a === null || a === void 0 ? void 0 : a.focus();
+      const i = {
         view: "day",
         // change to day view
         monthIndex: t,
@@ -100,9 +100,9 @@ const c = class {
       };
       (o = (n = this.hostElement).onchange) === null || o === void 0 ? void 0 : o.call(n, new CustomEvent("click", {
         bubbles: true,
-        detail: a
+        detail: i
       }));
-      this.viewChange.emit(a);
+      this.viewChange.emit(i);
     };
     this.selectYear = t => {
       this.year = Math.max(1970, t);
@@ -111,7 +111,7 @@ const c = class {
   // #endregion
   // #region Component Lifecycle Events
   componentDidLoad() {
-    a(this.hostElement);
+    i(this.hostElement);
   }
   componentDidRender() {
     var t;
@@ -122,54 +122,54 @@ const c = class {
   // #region Render Methods
   render() {
     return n("div", {
-      key: "6c9a7ca40d2a597f21e289b540f07900f2588cac",
+      key: "b7429b5ed21f7cda666f140a9a93ee643176979c",
       class: "month-container",
       onKeyDown: this.onMonthKeydown
     }, n("div", {
-      key: "bf2a873e6a183df04920eb603ef507eff82c89bd",
+      key: "802900b16d0efa602df89edb22e174329736dca4",
       class: "navigation"
     }, n("q2-btn", {
-      key: "4eff95a05e80cfe5c0593d638fd82ca2a7954765",
+      key: "0a318088ab2eb826620c056246599f5b7803c51e",
       class: "year-btn",
       onClick: () => this.viewChange.emit({
         view: "year",
         selectedYear: this.year
       })
     }, n("span", {
-      key: "69f3247510f67d368e1f15ce054cbfdb3d56901c",
+      key: "02018f884cb7b48fb581597fc7d5a2a323497668",
       class: "year"
     }, this.year), n("q2-icon", {
-      key: "281bdf4e671b05ea28aea658ae05ab11d3c4667d",
+      key: "9ab23a381d4fedb5aca2ecee19eb975d76ff4465",
       class: "year-icon off",
       type: "chevron-down"
     })), n("div", {
-      key: "9528cc408878d4f4839bed485fe5a46cb005f139",
+      key: "79dd4cd0864d051a4252c21ebbd697e0e75b0ec3",
       class: "month-controller"
     }, n("div", {
-      key: "8d7330c4e3951a001203c5f08af7495b320da5c9",
+      key: "d94ad2ebfc317206bfff5b16861c52507a168e09",
       class: "cal-year-prev-next"
     }, n("q2-btn", {
-      key: "e725c2476177186c83ecdf31ca8ebfabb3c132c7",
-      label: i("tecton.element.calendar.previousYear"),
+      key: "4d8b12fde9825bd5dca90012d42e73453f2cb777",
+      label: a("tecton.element.calendar.previousYear"),
       "hide-label": true,
       class: "cal-nav-btn prev-year",
       "test-id": "previousYearButton",
       onClick: () => this.selectYear(this.year - 1)
     }, n("q2-icon", {
-      key: "4a6b9d629c98cbdc248cfd66694cf610f2ca4423",
+      key: "428b2feb8854e145bdbc88bdd2c6a2c25a3a50ce",
       type: "arrow-left"
     })), n("q2-btn", {
-      key: "797eb8389dbffd0e1e2588d68799be8dc425ef85",
-      label: i("tecton.element.calendar.nextYear"),
+      key: "2f7ef439402c9788ae002a199813387a370e0ed3",
+      label: a("tecton.element.calendar.nextYear"),
       "hide-label": true,
       class: "cal-nav-btn next-year",
       "test-id": "nextYearButton",
       onClick: () => this.selectYear(this.year + 1)
     }, n("q2-icon", {
-      key: "c75dfb662cf8cf336b059650d24e8f22397dd9d5",
+      key: "5931c20eac7a2268c6b945b336f44e143e9fe484",
       type: "arrow-right"
     }))))), n("div", {
-      key: "18b5c98c2bc3d4c9f353b79b99fbc76c91942724",
+      key: "9e18ae0e86a741201eb2a8c6ff04b9007899cbae",
       class: "month-list",
       onClick: this.onMonthSelection
     }, this.months.map(((t, e) => n("div", {
@@ -181,9 +181,9 @@ const c = class {
       "aria-label": t.label,
       tabindex: e === this.focusedIndex ? 0 : -1
     }, t.abbr))))), this.today && n("div", {
-      key: "96451bd771873ee8643221db902dcf70bfa8df1c",
+      key: "8dfee8bcf4ee9b4137c9c8644be7f38f5794bf4d",
       class: "today-label"
-    }, i("tecton.element.calendar.today"), ": ", this.today));
+    }, a("tecton.element.calendar.today"), ": ", this.today));
   }
   get hostElement() {
     return o(this);