{"version":3,"sources":["src/components/ads-modal/components/close-button/CloseButton.tsx","src/components/ads-modal/components/modal-content/ModalContent.tsx","src/components/ads-modal/ads-modal.scss?tag=ads-modal&encapsulation=shadow","src/components/ads-modal/ads-modal.tsx"],"names":["CloseButton","label","clickHandler","h","class","aria-label","onClick","data-test","generateSVGImage","data","svgPathData","height","width","ModalContent","id","isOpen","title","backdropClickHandler","modalCloseClickHandler","onContentKeyUp","onKeyUp","tabIndex","aria-labelledby","aria-describedby","role","Dictionary","get","name","adsModalCss","AdsModal","[object Object]","hostRef","this","isOpenInternal","_handleKeyUp","evt","key","toLowerCase","close","stopPropagation","el","setAttribute","identifier","generateId","component","bind","open","onFocusOut","newValue","openChange","emit","isNullOrUndefined","openChangeHandler","SCROLLER","enableScroll","focusCustomTriggerEl","container","shadowRoot","querySelector","removeEventListener","Promise","resolve","disableScroll","trapFocusInModal","observeContainer","closeButton","focus","addEventListener","nextElement","relatedTarget","getIsElementDescendantOfElement","triggerEl","ctaButtonTrigger","getFocusableSelector","slottedFocusableHostEl","getSlottedElements","find","focusableSlottedEl","Pipeline.addComponent","Scroller","document","Pipeline.removeComponent","undefined","trigger","triggerText","theme","aria-haspopup","sr-label","preventDefault","hostAttributes","data-id","modalTitle","isNullOrUndefinedOrEmpty","renderTrigger","content","Host","Object","assign"],"mappings":"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","sourcesContent":["import { FunctionalComponent, VNode, h } from '@stencil/core';\n\nimport { height, svgPathData, width } from '@fortawesome/pro-light-svg-icons/faTimes';\n\nimport { generateSVGImage } from 'utils/imageHelper';\n\n/**\n * Interface for the modal button\n * @hidden\n */\ninterface IModalButtonProps {\n label: string;\n clickHandler: (evt: MouseEvent) => void;\n}\n\n/**\n * Generates a modal button\n * @return {FunctionalComponent} The close button\n */\nexport const CloseButton: FunctionalComponent = ({ label, clickHandler }: IModalButtonProps) => {\n return (\n \n ) as VNode;\n};\n","import { FunctionalComponent, VNode, h } from '@stencil/core';\n\nimport { Dictionary } from '../../../core/classes/Dictionary';\n\nimport { CloseButton } from '../close-button/CloseButton';\n\n/**\n * Interface for the modal button\n * @hidden\n */\ninterface ModalContentProps {\n id: string;\n isOpen: boolean;\n title?: Element;\n backdropClickHandler?: (evt: MouseEvent) => void;\n modalCloseClickHandler: (evt: MouseEvent) => void;\n onContentKeyUp: (event: KeyboardEvent) => void;\n}\n\nexport const ModalContent: FunctionalComponent = ({\n id,\n isOpen,\n title,\n backdropClickHandler,\n modalCloseClickHandler,\n onContentKeyUp,\n}) => {\n return (\n
\n
\n \n
\n \n
\n {title}\n
\n \n
\n
\n \n
\n
\n
\n ) as VNode;\n};\n","@import 'core';\n\n/**\n * @prop --ads-modal-backdrop-background-color: Default backdrop background color\n *\n * @prop --ads-modal-button-background-color: Button background color\n * @prop --ads-modal-button-color: Button text color\n * @prop --ads-modal-button-color-hover: Hovered button text color\n *\n * @prop --ads-modal-content-background-color: Content background color\n * @prop --ads-modal-content-body-color: Content body color\n * @prop --ads-modal-content-border-color: Content border color\n * @prop --ads-modal-content-height: Content height\n *\n * @prop --ads-modal-content-title-color: Content title color\n * @prop --ads-modal-content-title-font-size: Content title font size\n * @prop --ads-modal-content-title-font-weight: Content title font weight\n * @prop --ads-modal-content-title-text-align: Content title text align\n */\n\n::slotted([slot='body']),\n::slotted([slot='trigger']) {\n display: block !important;\n}\n\n::slotted([slot='actions']) {\n display: flex !important;\n flex-direction: column;\n justify-content: flex-end;\n width: 100%;\n\n @include media-query(md-up) {\n flex-direction: row;\n }\n}\n\n:host {\n font-family: var(--ads-font-family);\n\n &[dir='rtl'] {\n @include ads-vars-component-modal-rtl;\n }\n}\n\n:host([theme='default']) {\n @include ads-vars-component-heading-default;\n @include ads-vars-component-modal-default;\n}\n\n:host([theme='dark']) {\n @include ads-vars-component-heading-dark;\n @include ads-vars-component-modal-dark;\n}\n\n:host([dir='ltr']) {\n @include ads-vars-component-modal-ltr;\n}\n\n:host([dir='rtl']) {\n @include ads-vars-component-modal-rtl;\n}\n\n.trigger {\n display: inline-block !important;\n}\n\n.c-modal {\n display: none;\n\n &.is-open {\n align-items: center;\n bottom: 0;\n display: flex !important;\n justify-content: center;\n left: 0;\n overflow: hidden;\n position: fixed;\n right: 0;\n top: 0;\n z-index: $layer-16;\n }\n\n &__backdrop {\n background-color: var(--ads-modal-backdrop-background-color, $ads-modal-backdrop-background-color);\n bottom: inherit;\n left: inherit;\n position: fixed;\n right: inherit;\n top: inherit;\n z-index: 0;\n }\n\n &__buttons {\n left: var(--ads-modal-button-position-left, $ads-modal-button-position-left-ltr);\n position: absolute;\n right: var(--ads-modal-button-position-right, $ads-modal-button-position-right-ltr);\n top: 5px;\n }\n\n &__button {\n align-items: center;\n background-color: var(--ads-modal-button-background-color, $ads-modal-button-background-color);\n border-style: none;\n cursor: pointer;\n display: flex;\n font-size: 20px;\n height: 30px;\n justify-content: center;\n padding: 0;\n width: 30px;\n\n svg {\n fill: var(--ads-modal-button-color, $ads-modal-button-color);\n height: 20px;\n width: 20px;\n }\n\n &:hover {\n fill: var(--ads-modal-button-color-hover, $ads-modal-button-color-hover);\n }\n }\n\n &__content {\n background-color: var(--ads-modal-content-background-color, $ads-modal-content-background-color);\n border: 1px solid;\n border-color: var(--ads-modal-content-border-color, $ads-modal-content-border-color);\n border-radius: 5px;\n display: block;\n max-width: 80%;\n padding: 20px;\n position: relative;\n z-index: $layer-16;\n\n @include media-query(md-up) {\n max-width: 60%;\n }\n\n @include media-query(lg-up) {\n max-width: 50%;\n }\n\n &__body {\n color: var(--ads-modal-content-body-color, $ads-modal-content-body-color);\n height: var(--ads-modal-content-height, $ads-modal-content-height);\n margin: 20px 0;\n max-height: 250px;\n overflow: hidden;\n overflow-y: auto;\n padding-bottom: 20px;\n }\n\n &__title {\n @include ads-heading-quinary;\n color: var(--ads-modal-content-title-color, $ads-modal-content-title-color);\n font-size: var(--ads-modal-content-title-font-size, $ads-modal-content-title-font-size);\n font-weight: var(--ads-modal-content-title-font-weight, $ads-modal-content-title-font-weight);\n text-align: var(--ads-modal-content-title-text-align, $ads-modal-content-title-text-align);\n\n @include media-query(sm-up) {\n font-size: var(--ads-modal-content-title-font-size, $ads-modal-content-title-font-size);\n }\n }\n\n &__actions {\n display: flex;\n flex: 1 0;\n flex-direction: column;\n flex-wrap: wrap-reverse;\n\n @include media-query(md-up) {\n flex-direction: row;\n justify-content: flex-end;\n\n ads-cta-button {\n &:nth-child(3n + 0) {\n margin-bottom: 20px;\n }\n }\n }\n }\n }\n}\n","/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable @typescript-eslint/no-floating-promises */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\nimport { Component, Element, Event, EventEmitter, Host, Method, Prop, State, VNode, Watch, h } from '@stencil/core';\n\nimport * as Pipeline from '../core/utils/pipeline';\nimport { BaseComponent } from '../core/interfaces/BaseComponent';\nimport { ModalContent } from './components/modal-content/ModalContent';\nimport { OpenChangeEvent, OpenChangeHandler } from './ads-modal.types';\nimport {\n Scroller,\n getFocusableSelector,\n getIsElementDescendantOfElement,\n getSlottedElements,\n isNullOrUndefined,\n isNullOrUndefinedOrEmpty,\n observeContainer,\n} from 'utils/index';\nimport { Theme } from '../core/types/globalTypes';\nimport { generateId } from '../core/utils/components';\n\n/**\n * Modals communicate information using secondary window that takes focus and enables the user to maintain the context of a particular task. Modals have a title. Use modals sparingly because they interrupt user workflow.\n * @tag ``\n * @slot - Content rendered as rich text inside the component\n * @slot trigger - The component that will open the dialog\n * @example\n * console.log(evt)}\n * trigger-text=\"Open\">\n * Hello World\n * \n */\n@Component({\n tag: 'ads-modal',\n styleUrl: 'ads-modal.scss',\n shadow: true,\n})\nexport class AdsModal implements BaseComponent {\n /**\n * @hidden\n */\n public component: string;\n\n private SCROLLER: Scroller;\n\n constructor() {\n this.el.setAttribute('id', this.identifier || generateId('ads-modal'));\n this.component = 'ads-modal';\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n this.close = this.close.bind(this);\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n this.open = this.open.bind(this);\n this.onFocusOut = this.onFocusOut.bind(this);\n }\n\n @Element() private el: HTMLAdsModalElement;\n\n /**\n * Internal state that controls the open and close state of the modal\n * @hidden\n */\n @State() isOpenInternal = false;\n\n /**\n * The unique identifier (optional)\n */\n @Prop({ attribute: 'id' }) identifier?: string;\n\n /**\n * The theme for this component instance (optional)\n * Values: \"default\", \"dark\"\n */\n @Prop({ reflect: true }) theme?: Theme;\n\n /**\n * Controls the open and close state of the modal (optional)\n */\n @Prop({ reflect: true }) isOpen?: boolean;\n\n /**\n * The modal title (optional)\n */\n @Prop({ reflect: true }) modalTitle?: string;\n\n /**\n * The text for the modal trigger (optional)\n */\n @Prop({ reflect: true }) triggerText?: string;\n\n /**\n * Callback function for the open state of the modal (optional)\n */\n @Prop() openChangeHandler?: OpenChangeHandler;\n\n /**\n * Emits 'openChange' custom event. (optional)
\n * Usage: `document.querySelector('ads-modal').addEventListener('openChange', function(evt) {});`\n * @event\n */\n @Event({ bubbles: false }) openChange: EventEmitter;\n\n /**\n * Handle identifier property changes\n * @param {string} newValue The new value for \"identifier\"\n * @hidden\n */\n @Watch('identifier')\n handleIdentifierChange(newValue: string): void {\n this.el.setAttribute('id', newValue || generateId('ads-modal'));\n }\n\n /**\n * Watch for change in \"isOpen\". Manages opening and closing based on prop value\n * @param {boolean} newValue The new value for \"isOpen\"\n * @hidden\n */\n @Watch('isOpen')\n onIsOpenChanged(newValue: boolean): void {\n if (newValue === true || newValue === false) {\n if (newValue) {\n this.open();\n } else {\n this.close();\n }\n }\n }\n\n /**\n * Closes the modal\n * Usage: `document.querySelector('ads-modal').close();`\n * @return {Promise} Promise for closing the modal\n */\n @Method()\n async close(): Promise {\n if (!this.isOpenInternal) {\n return;\n }\n // if isOpen is provided, fire the event and stop\n if (this.isOpen) {\n this.openChange.emit({ newValue: false });\n if (!isNullOrUndefined(this.openChangeHandler)) {\n this.openChangeHandler({ newValue: false });\n }\n return;\n }\n // if isOpen is not provided close the modal\n if (this.isOpen !== true && this.isOpen !== false) {\n this.openChange.emit({ newValue: false });\n if (!isNullOrUndefined(this.openChangeHandler)) {\n this.openChangeHandler({ newValue: false });\n }\n }\n this.isOpenInternal = false;\n this.SCROLLER.enableScroll();\n this.focusCustomTriggerEl();\n const container = this.el.shadowRoot.querySelector('.c-modal__content');\n container.removeEventListener('focusout', this.onFocusOut);\n return Promise.resolve();\n }\n\n /**\n * Opens the modal\n * Usage: `document.querySelector('ads-modal').open();`\n * @return {Promise} Promise for opening the modal\n */\n @Method()\n async open(): Promise {\n if (this.isOpenInternal) {\n return;\n }\n // if isOpen is provided, fire the event and stop\n if (this.isOpen === false) {\n this.openChange.emit({ newValue: true });\n if (!isNullOrUndefined(this.openChangeHandler)) {\n this.openChangeHandler({ newValue: true });\n }\n return;\n }\n // if isOpen is not provided open the modal\n if (this.isOpen !== true && this.isOpen !== false) {\n this.openChange.emit({ newValue: true });\n if (!isNullOrUndefined(this.openChangeHandler)) {\n this.openChangeHandler({ newValue: true });\n }\n }\n this.isOpenInternal = true;\n this.SCROLLER.disableScroll();\n this.trapFocusInModal();\n return Promise.resolve();\n }\n\n /**\n * Returns whether the modal is currently open or not\n * @return {Promise} Open state of the modal\n */\n @Method()\n value(): Promise {\n return Promise.resolve(this.isOpenInternal);\n }\n\n /**\n * Trap focus in modal content div\n */\n private trapFocusInModal() {\n const container = this.el.shadowRoot.querySelector('.c-modal__content');\n observeContainer(container, () => {\n const closeButton: HTMLElement = this.el.shadowRoot.querySelector('.c-modal__button');\n closeButton.focus();\n container.addEventListener('focusout', this.onFocusOut);\n });\n }\n\n /**\n * If focus goes outside the content div, set it back to the close button\n * @param {FocusEvent} evt: the focus event\n *\n */\n private onFocusOut(evt: FocusEvent) {\n const container = this.el.shadowRoot.querySelector('.c-modal__content');\n const closeButton: HTMLElement = this.el.shadowRoot.querySelector('.c-modal__button');\n const nextElement = evt.relatedTarget as Element;\n if (isNullOrUndefined(nextElement) || getIsElementDescendantOfElement(nextElement, container)) {\n return;\n }\n closeButton.focus();\n }\n\n private focusCustomTriggerEl() {\n const triggerEl: HTMLElement = this.el.shadowRoot.querySelector('.trigger');\n if (!isNullOrUndefined(triggerEl)) {\n const ctaButtonTrigger: HTMLElement = triggerEl.querySelector(getFocusableSelector());\n const slottedFocusableHostEl = getSlottedElements(this.el, 'trigger').find((el: HTMLElement) => el.querySelector(getFocusableSelector()));\n if (!isNullOrUndefined(ctaButtonTrigger)) {\n ctaButtonTrigger.shadowRoot.querySelector('button').focus();\n } else if (!isNullOrUndefined(slottedFocusableHostEl)) {\n const focusableSlottedEl: HTMLElement = slottedFocusableHostEl.querySelector(getFocusableSelector());\n focusableSlottedEl.focus();\n }\n }\n }\n\n /**\n * Listen to keyboard events\n * @param {KeyboardEvent} evt The original event\n * @returns {void}\n * @private\n * @hidden\n */\n private _handleKeyUp = (evt: KeyboardEvent) => {\n if (!this.isOpenInternal) {\n return;\n }\n switch (evt.key.toLowerCase()) {\n case 'escape':\n this.close();\n break;\n default:\n return;\n }\n };\n\n /**\n * Handle click events on the backdrop component\n * @param {MouseEvent} evt The original event\n * @return {void}\n * @private\n * @hidden\n */\n private backdropClickHandler = (evt: MouseEvent): void => {\n evt.stopPropagation();\n this.close();\n };\n\n protected componentWillLoad(): void {\n Pipeline.addComponent(this.el);\n this.SCROLLER = new Scroller(document);\n if (this.isOpen === true || this.isOpen === false) {\n this.isOpenInternal = this.isOpen;\n }\n }\n\n protected disconnectedCallback(): void {\n Pipeline.removeComponent(this.el);\n this.SCROLLER = undefined;\n }\n\n /**\n * Render the modal trigger\n * @returns {void}\n * @hidden\n */\n private renderTrigger(): VNode {\n const trigger = this.triggerText ? (\n \n {this.triggerText}\n \n ) : (\n \n );\n\n return (\n {\n evt.preventDefault();\n this.open();\n }}\n data-test=\"trigger\"\n >\n {trigger}\n \n ) as VNode;\n }\n\n protected render(): VNode {\n const hostAttributes = {\n 'data-id': this.identifier,\n };\n\n const title = this.modalTitle ? (\n
\n {this.modalTitle}\n
\n ) : null;\n\n const triggerEl = !isNullOrUndefinedOrEmpty(this.triggerText) || this.el.querySelector('div[slot=\"trigger\"]') ? this.renderTrigger() : null;\n\n const content = (\n => this.close()}\n onContentKeyUp={this._handleKeyUp}\n />\n );\n\n return (\n \n {triggerEl}\n {content}\n \n ) as VNode;\n }\n}\n"]}