{"file":"vds-modal.entry.js","mappings":"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","names":[],"sources":["src/components/vds-modal/vds-modal.scss?tag=vds-modal&encapsulation=shadow","src/components/vds-modal/vds-modal.tsx"],"sourcesContent":[":host {\r\n\r\n  div.dialog {\r\n    @apply w-full max-h-full;\r\n    max-width: var(--vt-page-container-width, 1200px);\r\n  }\r\n\r\n  button.close {\r\n    @apply text-grey absolute z-[2] bg-white rounded p-2 top-[5px] right-[5px];\r\n\r\n    > svg {\r\n      fill: none;\r\n      stroke: currentColor;\r\n      stroke-linecap:round;\r\n      stroke-linejoin:round;\r\n      stroke-width:2px;\r\n      width: 26px;\r\n      height: 26px;\r\n    }\r\n  }\r\n\r\n  * {\r\n    &::-webkit-scrollbar {\r\n      width: 10px;\r\n      left: -100px;\r\n    }\r\n\r\n    &::-webkit-scrollbar-track {\r\n        background-color: var(--vt-color-grey-lighter, #EDEDEC);\r\n        border-top-right-radius: .25rem;\r\n        border-bottom-right-radius: .25rem;\r\n        border-top-left-radius: .25rem;\r\n        border-bottom-left-radius: .25rem;\r\n    }\r\n\r\n    &::-webkit-scrollbar-thumb {\r\n        background-color: var(--vt-color-grey-light, #A5A5A2);\r\n        border-radius: 8px;\r\n        border: solid 2px transparent;\r\n        background-clip: content-box;\r\n    }\r\n\r\n    scrollbar-color: var(--vt-color-grey-light, #A5A5A2);\r\n    scrollbar-width: thin;\r\n  }\r\n}\r\n\r\n:host(.lightbox) {\r\n  div.dialog {\r\n    @apply pt-6 px-5 pb-8;\r\n  }\r\n\r\n  button.close {\r\n    @apply top-[50px] right-[45px];\r\n  }\r\n}\r\n\r\n:host(.hotspot) {\r\n  div.dialog {\r\n    @apply border-b-[8px] border-b-yellow;\r\n  }\r\n\r\n  div.body {\r\n    @apply overflow-x-hidden overflow-y-auto pt-6 px-5 pb-8;\r\n  }\r\n}\r\n\r\ndiv.modal {\r\n  @apply fixed inset-0 justify-center opacity-0 transition-opacity ease-linear hidden duration-300 z-[-1] py-[50px] md:px-[50px] px-[30px] overflow-hidden;\r\n\r\n  &.backdrop {\r\n    background-color: rgba(var(--vt-color-grey-dark-rgb, 20, 20, 18), 0.5);\r\n  }\r\n\r\n  &.open {\r\n    @apply opacity-100;\r\n  }\r\n\r\n  &.flex {\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n\r\n}\r\n\r\ndiv.dialog {\r\n  @apply relative flex flex-col w-fit h-fit bg-white rounded translate-y-[-10%] transition-transform duration-300;\r\n  max-width: calc(100% - 0.01px);\r\n\r\n  &.open {\r\n    @apply translate-y-0 border-b-[8px] border-b-yellow;\r\n  }\r\n}\r\n\r\n.title {\r\n  @apply grow text-s3 uppercase text-grey-light;\r\n}\r\n\r\ndiv.header {\r\n  @apply flex-none border-b-2 border-b-yellow pb-3 mb-6;\r\n}\r\n\r\ndiv.body {\r\n  @apply relative grow w-full overflow-hidden;\r\n  &:hover {\r\n    button {\r\n      @apply opacity-100;\r\n    }\r\n  }\r\n}\r\n\r\ndiv.footer {\r\n  @apply flex-none pt-6;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\r\nimport { addEventListener, removeEventListener } from '../../utils/helpers';\r\nimport { ModalChangeEventDetail } from './vds-modal.interface';\r\n\r\n@Component({\r\n  tag: 'vds-modal',\r\n  styleUrl: 'vds-modal.scss',\r\n  shadow: true,\r\n})\r\nexport class VdsModal implements ComponentInterface {\r\n\r\n  private modalIndex: number;\r\n\r\n  private backdropElement?: HTMLElement;\r\n\r\n  private dialogElement?: HTMLElement;\r\n\r\n  private closeButtonElements?: HTMLElement[];\r\n\r\n  @Element() el!: HTMLVdsModalElement;\r\n\r\n  @Prop() headline: string;\r\n\r\n  @Prop() header = false;\r\n\r\n  @Prop() footer = false;\r\n\r\n  @Prop({ reflect: true, mutable: true }) open = false;\r\n\r\n  @Prop() stack = false;\r\n\r\n  @Prop() lightbox = false;\r\n\r\n  @Prop() hotspot = false;\r\n\r\n  @Prop() multipleSlides = false;\r\n\r\n  @Event() public vdsModalShown!: EventEmitter<ModalChangeEventDetail>;\r\n\r\n  @Event() public vdsModalHidden!: EventEmitter<ModalChangeEventDetail>;\r\n\r\n  constructor() {\r\n    this.modalIndex = this.getModalIndex();\r\n  }\r\n\r\n  @Method()\r\n  async openModal(reason?: string): Promise<void> {\r\n    if (!this.stack) {\r\n      this.closeOtherModals();\r\n    }\r\n\r\n    this.backdropElement.classList.add('flex');\r\n\r\n    new Promise<void>((resolve) => {\r\n      setTimeout(() => {\r\n        this.dialogElement.classList.add('open');\r\n        this.backdropElement.classList.add('open');\r\n        resolve();\r\n      });\r\n    }).then(() => {\r\n      setTimeout(() => {\r\n        this.vdsModalShown.emit({reason});\r\n      }, 300);\r\n    });\r\n  }\r\n\r\n  @Method()\r\n  async closeModal(reason?: string): Promise<void> {\r\n    this.dialogElement.classList.remove('open');\r\n    this.backdropElement.classList.remove('open');\r\n\r\n    new Promise<void>((resolve) => {\r\n      setTimeout(() => {\r\n        resolve()\r\n      });\r\n    }).then(() => {\r\n      setTimeout(() => {\r\n        if(!this.backdropElement.classList.contains('open')) {\r\n          this.backdropElement.classList.remove('flex');\r\n        }\r\n        this.vdsModalHidden.emit({reason});\r\n      }, 300);\r\n    });\r\n  }\r\n\r\n  render() {\r\n\r\n    return (\r\n      <Host\r\n      aria-labelledby=\"modal-title\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      class={{ 'lightbox': this.lightbox }}>\r\n        <div\r\n          class=\"modal backdrop\"\r\n          style={{ zIndex: `${10000 + this.modalIndex}` }}\r\n          ref={element => (this.backdropElement = element)}\r\n          onClick={(e: Event) => (e.target === this.backdropElement ? this.closeModal() : e.preventDefault())}\r\n        >\r\n          <div\r\n          ref={element => (this.dialogElement = element)}\r\n          class={{ 'dialog': true }}>\r\n\r\n            {this.header && (\r\n              <div class=\"header\" part=\"header\">\r\n                <slot name=\"header\"></slot>\r\n              </div>\r\n            )}\r\n\r\n\r\n            {!this.header && (\r\n              <button\r\n                type=\"button\"\r\n                class={{\r\n                  'close': true,\r\n                  'no-header': !this.header,\r\n                }}\r\n                onClick={() => this.closeModal()}\r\n              >\r\n                {this.renderCloseSVG()}\r\n              </button>\r\n            )}\r\n\r\n            <div class=\"body\" part=\"body\">\r\n              <slot name=\"body\"></slot>\r\n            </div>\r\n\r\n            {this.footer && (\r\n              <div class=\"footer\" part=\"footer\">\r\n                <slot name=\"footer\"></slot>\r\n              </div>\r\n            )}\r\n          </div>\r\n\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.closeButtonElements?.forEach(element => removeEventListener(element, 'click', () => this.closeModal()));\r\n  }\r\n\r\n  componentWillRender(): void | Promise<void> {\r\n    this.appendToBody();\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    const closeButtonElements = this.closeButtonElements = Array.from(this.el.querySelectorAll('[data-modal-close]'));\r\n    closeButtonElements.forEach(element => addEventListener(element, 'click', () => this.closeModal(element.dataset.modalClose)));\r\n\r\n    if (this.open) {\r\n      this.openModal();\r\n    }\r\n  }\r\n\r\n  private getModalIndex(): number {\r\n    const modals = Array.from(document.querySelectorAll('vds-modal'));\r\n    const index = modals.findIndex(modal => modal === this.el);\r\n    return index;\r\n  }\r\n\r\n  private appendToBody(): void {\r\n    const body = document.querySelector('body');\r\n    body.append(this.el);\r\n  }\r\n\r\n  private closeOtherModals(): void {\r\n    const modals = Array\r\n      .from(document.querySelectorAll('vds-modal'))\r\n      .filter(modal => modal !== this.el);\r\n\r\n    modals.forEach(modal => modal.closeModal());\r\n  }\r\n\r\n  private renderCloseSVG(): string {\r\n    return (\r\n      <svg viewBox=\"51 51 26 26\" width=\"26\" height=\"26\">\r\n        <path d=\"M76 52 64 64\" class=\"cls-1\"></path>\r\n        <path d=\"M76 76 52 52\" class=\"cls-1\"></path>\r\n        <path d=\"M60 68 52 76\" class=\"cls-1\"></path>\r\n      </svg>\r\n    );\r\n  }\r\n\r\n}\r\n"],"version":3}