{"version":3,"names":["modalCss","LgrModalStyle0","Modal","this","closeModal","closeDisabled","isOpen","modalClosed","emit","openModal","closeModalMethod","connectedCallback","document","addEventListener","handleKeyDown","bind","disconnectedCallback","removeEventListener","event","key","closeKeyboardDisabled","render","h","Host","class","modal","fullSize","webformSize","tabIndex","onClick","name","buttonText","variant","buttonVariant"],"sources":["src/components/modal/modal.scss?tag=lgr-modal","src/components/modal/modal.tsx"],"sourcesContent":["@import '../../global/variables/grid';\n\n.modal {\n display: none;\n justify-content: center;\n align-items: center;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: var(--lgr-spacing-xxxs);\n background-color: rgba(51, 51, 51, var(--lgr-alpha-intense));\n box-sizing: border-box;\n overflow: hidden;\n\n &.is-open {\n display: flex;\n }\n\n &.full-size {\n @media (max-width: ($lgr-grid-md-break-point - 1)) {\n padding: 0;\n\n .modal-content {\n height: 100vh;\n max-height: 100vh;\n width: 100vw;\n max-width: 100vw;\n border-radius: unset;\n\n .text-wrapper {\n flex: 1;\n }\n }\n }\n }\n\n .modal-content {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n gap: var(--lgr-spacing-xs);\n max-height: 696px;\n position: relative;\n background-color: var(--lgr-color-neutral-high-pure);\n padding: var(--lgr-spacing-xs);\n border-radius: var(--lgr-border-radius-lg);\n text-align: center;\n box-sizing: border-box;\n margin: 0;\n z-index: 1;\n \n lgr-icon.close {\n position: absolute;\n top: var(--lgr-spacing-xxxs);\n right: var(--lgr-spacing-xxxs);\n font-size: var(--lgr-font-size-xl);\n color: var(--lgr-color-brand-primary);\n cursor: pointer;\n }\n\n .text-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--lgr-spacing-xs);\n }\n\n .button-wrapper {\n display: flex;\n justify-content: flex-end;\n width: 100%;\n\n lgr-button {\n width: 100%;\n }\n }\n\n @media (min-width: $lgr-grid-md-break-point) {\n width: 512px;\n }\n\n &-webform {\n padding-inline: var(--lgr-spacing-xxxs);\n\n .text-wrapper {\n overflow-y: auto;\n overflow-x: hidden;\n }\n\n @media (min-width: $lgr-grid-md-break-point) {\n width: 800px;\n max-height: fit-content;\n padding: var(--lgr-spacing-xs);\n }\n }\n }\n\n .modal-layer {\n position: fixed;\n width: 100%;\n height: 100%;\n }\n}","import { Component, Host, h, Element, Prop, Method, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'lgr-modal',\n styleUrl: 'modal.scss',\n shadow: false,\n})\nexport class Modal {\n @Element() el!: HTMLLgrModalElement;\n /**\n * Open modal\n */\n @Prop({mutable: true}) isOpen: boolean = false;\n /**\n * Button's text\n */\n @Prop() buttonText: string | undefined;\n /**\n * variant: primary, secondary or text\n */\n @Prop({ reflect: true }) buttonVariant?: 'primary' | 'secondary' | 'text' = 'primary';\n /**\n * Modal full size on mobile\n */\n @Prop() fullSize: boolean = false;\n /**\n * size for webform\n */\n @Prop() webformSize: boolean = false;\n /**\n * if enabled, close buttons will disappear.\n */\n @Prop() closeDisabled: boolean = false;\n /**\n * if enabled, close by keyboard disabled.\n */\n @Prop() closeKeyboardDisabled: boolean = false;\n /**\n * When called, this method opens the modal\n */\n @Method()\n async openModal() {\n this.isOpen = true;\n }\n /***\n *\n */\n @Method()\n async closeModalMethod() {\n this.isOpen = false;\n this.modalClosed.emit();\n };\n /**\n *\n */\n @Event() modalClosed!: EventEmitter;\n\n connectedCallback() {\n document.addEventListener('keydown', this.handleKeyDown.bind(this));\n }\n\n disconnectedCallback() {\n document.removeEventListener('keydown', this.handleKeyDown.bind(this));\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape' && !this.closeKeyboardDisabled) {\n this.closeModal();\n }\n }\n\n render() {\n return (\n \n
\n
\n {\n !this.closeDisabled &&\n close\n }\n
\n \n \n \n
\n {\n this.buttonText && !this.closeDisabled &&\n
\n {this.buttonText}\n \n
\n }\n
\n
\n
\n \n );\n }\n\n private closeModal = () => {\n if (this.closeDisabled) return;\n this.isOpen = false;\n this.modalClosed.emit();\n };\n}\n"],"mappings":"gEAAA,MAAMA,EAAW,ioDACjB,MAAAC,EAAeD,E,MCMFE,EAAK,M,kEAmGRC,KAAAC,WAAa,KACnB,GAAID,KAAKE,cAAe,OACxBF,KAAKG,OAAS,MACdH,KAAKI,YAAYC,MAAM,E,YAjGgB,M,6CAQmC,U,cAIhD,M,iBAIG,M,mBAIE,M,2BAIQ,K,CAKzC,eAAMC,GACJN,KAAKG,OAAS,I,CAMhB,sBAAMI,GACJP,KAAKG,OAAS,MACdH,KAAKI,YAAYC,M,CAOnB,iBAAAG,GACEC,SAASC,iBAAiB,UAAWV,KAAKW,cAAcC,KAAKZ,M,CAG/D,oBAAAa,GACEJ,SAASK,oBAAoB,UAAWd,KAAKW,cAAcC,KAAKZ,M,CAG1D,aAAAW,CAAcI,GACpB,GAAIA,EAAMC,MAAQ,WAAahB,KAAKiB,sBAAuB,CACzDjB,KAAKC,Y,EAIT,MAAAiB,GACE,OACEC,EAACC,EAAI,CAAAJ,IAAA,4CACHG,EAAA,OAAAH,IAAA,2CAAKK,MAAO,CACVC,MAAS,KACT,UAAWtB,KAAKG,OAChB,YAAaH,KAAKuB,WAElBJ,EAAA,OAAAH,IAAA,2CAAKK,MAAO,CACV,gBAAiB,KACjB,wBAAyBrB,KAAKwB,eAG3BxB,KAAKE,eACNiB,EAAA,YAAUM,SAAU,EAAGC,QAAS1B,KAAKC,WAAYoB,MAAM,SAAO,SAEhEF,EAAA,OAAAH,IAAA,2CAAKK,MAAM,gBACTF,EAAA,QAAAH,IAAA,2CAAMW,KAAK,eACXR,EAAA,QAAAH,IAAA,2CAAMW,KAAK,gBACXR,EAAA,QAAAH,IAAA,8CAGAhB,KAAK4B,aAAe5B,KAAKE,eACzBiB,EAAA,OAAKE,MAAM,kBACTF,EAAA,gCAAuBU,QAAS7B,KAAK8B,cAAeJ,QAAS1B,KAAKC,YAAaD,KAAK4B,YACpFT,EAAA,QAAMQ,KAAK,oBAIjBR,EAAA,OAAAH,IAAA,2CAAKK,MAAM,cAAcK,QAAS1B,KAAKC,c"}