{"version":3,"names":["bannerSlottedCss","scopedStylesheet","addSlottedStyles","hostElement","styleSheet","componentTag","tagName","toLowerCase","styleElementId","document","getElementById","styleElement","createElement","id","innerHTML","replace","head","appendChild","setAttributesToSlottedElement","slotName","slottedElementTag","attributes","slotElement","shadowRoot","querySelector","removeEventListener","handleSlotChange","addEventListener","assignedNodes","flatten","length","targetElement","find","node","nodeName","forEach","attribute","setAttribute","name","value","bannerCss","AppLaunchBannerStyle0","Banner","this","mediaQueryObject","window","matchMedia","matches","dismiss","open","dismissed","emit","connectedCallback","isTabletOrMobile","slottedLinkDesktop","render","h","key","size","type","icon","CloseIcon","accessibleName","onClick","href","textContent","isLink","iconDx","DownloadIcon","targetBlank","ctaClicked","buttonCss","AppLaunchButtonStyle0","Button","Fragment","class","variant","target","rel","label","iconButtonCss","AppLaunchIconButtonStyle0","IconButton","modalCss","AppLaunchModalStyle0","ModalState","Breakpoint","Modal","Initial","innerWidth","Mobile","Tablet","Desktop","isOpen","handleWindowResize","bind","modalState","SliderFinished","breakpoint","handleRefresh","closeModal","close","handleAnimationStart","Started","handleSliderEndStart","SliderFinishing","sliderEnded","handleSliderEnd","handleRefreshStart","Refreshing","sliderRefreshed","Refreshed","slider","refreshSlider","AlleanzaLogo","mainTitle","subtitle","onAnimationEnd","iconSx","slides","onAnimationReady","onSlideChanged","event","slideChanged","detail","onSliderEndStart","onSliderEnd","ctaPrimary","ctaSecondary","ctaPrimaryTargetUrl","ctaSecondaryTargetUrl","ctaTertiaryTargetUrl","ctaTertiary","playStoreImageSrc","playStoreUrl","appStoreImageSrc","appStoreUrl","qrCodeSrc","qrCodeCta","onCtaPrimaryClicked","ctaPrimaryClicked","onCtaSecondaryClicked","ctaSecondaryClicked","onCtaTertiaryClicked","ctaTertiaryClicked","onPlayStoreClicked","playStoreClicked","onAppStoreClicked","appStoreClicked","RefreshIcon","jumpToLastSlide","sliderCss","AppLaunchSliderStyle0","Slider","sliderEndStart","currentItem","componentWillRender","animationReady","handleSlideChange","direction","handleSlideOut","currentTarget","sliderEnd","getSlideClass","slideIndex","currentIndex","disabled","ChevronIcon","style","transform","map","slide","index","title","paragraph","ArrowIcon","imageSrc","src","alt","imageAlt","item","appStoreButtonCss","AppLaunchStoreButtonStyle0","AppStoreButton","textButtonCss","AppLaunchTextButtonStyle0","TextButton","componentDidLoad","setTargetBlankToSlottedAnchor"],"sources":["src/components/banner/banner-slotted.css","src/utils/utils.ts","src/components/banner/banner.css?tag=app-launch-banner&encapsulation=shadow","src/components/banner/banner.tsx","src/components/button/button.css?tag=app-launch-button&encapsulation=shadow","src/components/button/button.tsx","src/components/button/icon-button/icon-button.css?tag=app-launch-icon-button&encapsulation=shadow","src/components/button/icon-button/icon-button.tsx","src/components/modal/modal.css?tag=app-launch-modal&encapsulation=shadow","src/components/modal/modal.tsx","src/components/slider/slider.css?tag=app-launch-slider&encapsulation=shadow","src/components/slider/slider.tsx","src/components/button/app-store-button/app-store-button.css?tag=app-launch-store-button&encapsulation=shadow","src/components/button/app-store-button/app-store-button.tsx","src/components/button/text-button/text-button.css?tag=app-launch-text-button&encapsulation=shadow","src/components/button/text-button/text-button.tsx"],"sourcesContent":["[slot='body-desktop'] a,\n[slot='body-mobile'] a {\n  color: var(--grid-action-text-button-primary);\n  text-decoration: underline;\n}\n[slot='body-desktop'] a:hover,\n[slot='body-mobile'] a:hover {\n  color: var(--grid-action-text-button-primary-hover);\n}\n","export function addSlottedStyles(hostElement: HTMLElement, styleSheet: string) {\n  const componentTag = hostElement.tagName.toLowerCase();\n  const styleElementId = `${componentTag}-style`;\n\n  if (document.getElementById(styleElementId)) {\n    return;\n  }\n\n  const styleElement = document.createElement('style');\n  styleElement.id = styleElementId;\n  styleElement.innerHTML = styleSheet.replace(/\\[/g, `${componentTag} [`);\n  document.head.appendChild(styleElement);\n}\n\nexport function setAttributesToSlottedElement({\n  hostElement,\n  slotName,\n  slottedElementTag,\n  attributes,\n}: {\n  hostElement: HTMLElement;\n  slotName?: string;\n  slottedElementTag: string;\n  attributes: { name: string; value: string }[];\n}) {\n  let slotElement: HTMLSlotElement;\n  if (slotName) {\n    slotElement = hostElement.shadowRoot.querySelector(`[name=\"${slotName}\"]`);\n  } else {\n    slotElement = hostElement.shadowRoot.querySelector('slot');\n  }\n  if (slotElement) {\n    slotElement.removeEventListener('slotchange', handleSlotChange);\n    slotElement.addEventListener('slotchange', handleSlotChange);\n  }\n\n  function handleSlotChange() {\n    const assignedNodes = slotElement.assignedNodes({ flatten: true });\n    if (!assignedNodes || assignedNodes.length < 1) return;\n    const targetElement = assignedNodes.find(node => {\n      return node.nodeName.toLowerCase() === slottedElementTag;\n    });\n    if (!targetElement) return;\n    attributes.forEach(attribute => {\n      (targetElement as HTMLElement).setAttribute(attribute.name, attribute.value);\n    });\n  }\n}\n",":host,\n:host * {\n  box-sizing: border-box;\n}\n\n:host {\n  position: relative;\n  z-index: 91;\n}\n\n:host(:not([open])) {\n  display: none;\n}\n\n#banner {\n  display: flex;\n  justify-content: center;\n  min-height: 56px;\n  padding: 0px 120px;\n  position: relative;\n  overflow: hidden;\n  background: var(--grid-background-color-01);\n}\n\n#banner::before,\n#banner::after {\n  content: '';\n  display: block;\n  position: absolute;\n  border-radius: 50%;\n  z-index: 0;\n}\n\n#banner::before {\n  width: 380px;\n  aspect-ratio: 1;\n  background: var(--grid-background-product-04);\n  top: 0;\n  left: -244px;\n}\n\n#banner::after {\n  width: 112px;\n  aspect-ratio: 1;\n  background: var(--grid-background-color-09);\n  right: -36px;\n  top: -45px;\n}\n\n#content-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  width: 100%;\n  z-index: 1;\n  position: relative;\n}\n\n::slotted([slot='title']) {\n  color: var(--grid-content-primary) !important;\n  font: var(--label-3) !important;\n  max-width: 180px;\n  padding: 8px 0 !important;\n}\n\n#body {\n  flex: 1;\n  padding-right: 40px;\n}\n\n::slotted([slot='body-desktop']),\n::slotted([slot='body-mobile']) {\n  color: var(--grid-content-primary) !important;\n  font: var(--body-3) !important;\n  padding: 8px 0 !important;\n}\n\n#close {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n}\n\n@media screen and (max-width: 1439px) {\n  #banner {\n    padding-left: 30px;\n    padding-right: 88px;\n  }\n}\n\n@media screen and (max-width: 989px) {\n  #banner {\n    padding-right: 72px;\n  }\n\n  ::slotted([slot='title']) {\n    max-width: 148px;\n    font: var(--label-5) !important;\n  }\n\n  ::slotted([slot='body-desktop']),\n  ::slotted([slot='body-mobile']) {\n    font-size: 12px;\n  }\n}\n\n@media screen and (max-width: 767px) {\n  #banner {\n    padding-left: 16px;\n    padding-right: 64px;\n  }\n\n  #content-wrapper {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0;\n  }\n\n  ::slotted([slot='title']) {\n    max-width: 100%;\n    padding-bottom: 4px !important;\n  }\n\n  #body {\n    padding-right: 0;\n  }\n\n  ::slotted([slot='body-desktop']),\n  ::slotted([slot='body-mobile']) {\n    padding: 0 !important;\n    font: var(--body-4) !important;\n  }\n}\n","import { Component, h, Method, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\nimport CloseIcon from '../../assets/icons/close.svg';\nimport DownloadIcon from '../../assets/icons/download-outline.svg';\nimport scopedStylesheet from './banner-slotted.css';\nimport { addSlottedStyles } from '../../utils/utils';\n\n/**\n * @slot title - Slot for the title, must be a heading element\n * @slot body-desktop - Slot for the body content on desktop screen sizes, can be one or multiple <p> elements\n * @slot body-mobile - Slot for the body content on mobile screen sizes, can be one or multiple <p> elements\n * @slot cta-desktop - Slot for the link to be rendered on desktop, must be a valid <a> tag\n * @slot cta-mobile - Slot for the link to be rendered on mobile, must be a valid <a> tag\n */\n\n@Component({\n  tag: 'app-launch-banner',\n  styleUrl: 'banner.css',\n  shadow: true,\n})\nexport class Banner {\n  private mediaQueryObject = window.matchMedia('(max-width: 989px)');\n  private slottedLinkDesktop: HTMLElement;\n\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n\n  @State() isTabletOrMobile = this.mediaQueryObject.matches;\n\n  @Method() async dismiss() {\n    this.open = false;\n    this.dismissed.emit();\n  }\n\n  @Event() dismissed: EventEmitter<null>;\n  @Event() ctaClicked: EventEmitter<null>;\n\n  @Element() hostElement: HTMLElement;\n\n  connectedCallback() {\n    addSlottedStyles(this.hostElement, scopedStylesheet);\n    this.mediaQueryObject.addEventListener('change', () => {\n      this.isTabletOrMobile = this.mediaQueryObject.matches;\n    });\n    this.slottedLinkDesktop = this.hostElement.querySelector('[slot=\"cta-desktop\"]');\n  }\n\n  render() {\n    return (\n      <div id=\"banner\">\n        <app-launch-icon-button\n          id=\"close\"\n          size=\"small\"\n          type=\"secondary ghost\"\n          icon={CloseIcon}\n          accessibleName=\"Nascondi il messaggio\"\n          onClick={() => {\n            this.dismiss();\n          }}\n        ></app-launch-icon-button>\n        <div id=\"content-wrapper\">\n          <slot name=\"title\">Insert title here</slot>\n          <div id=\"body\">\n            <slot name={`body-${this.isTabletOrMobile ? 'mobile' : 'desktop'}`}>\n              Insert body text here and a <a href=\"javascript:void(0)\">link</a>\n            </slot>\n          </div>\n          {((this.slottedLinkDesktop && this.slottedLinkDesktop.textContent) || this.isTabletOrMobile) && (\n            <app-launch-text-button\n              isLink\n              iconDx={DownloadIcon}\n              targetBlank\n              onClick={() => {\n                this.ctaClicked.emit();\n              }}\n            >\n              <slot name={this.isTabletOrMobile ? 'cta-tablet-mobile' : 'cta-desktop'}></slot>\n            </app-launch-text-button>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n",":host,\n:host *,\n:host *::after,\n:host *::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  flex: 1;\n}\n\n#button {\n  min-height: 48px;\n  width: 100%;\n  max-width: 320px;\n  text-transform: uppercase;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--grid-border-radius-button);\n  cursor: pointer;\n  transition: background-color var(--duration-fast) var(--curve-expressive-ease-in-out), border-color var(--duration-fast) var(--curve-expressive-ease-in-out);\n  text-decoration: none;\n}\n\n#button:hover {\n  transition: background-color var(--duration-xxfast) var(--curve-simple-ease-out), border-color var(--duration-xxfast) var(--curve-simple-ease-out);\n}\n\n.filled {\n  background: var(--grid-action-primary);\n  border: 1px solid var(--grid-border-action-primary);\n}\n\n.filled:hover {\n  background: var(--grid-action-primary-hover);\n  border-color: var(--grid-border-action-primary-hover);\n}\n\n.ghost {\n  border: 1px solid var(--grid-border-action-primary-ghost);\n  background: transparent;\n}\n\n.ghost:hover {\n  border-color: var(--grid-border-action-primary-ghost-hover);\n}\n\n.ghost:hover #label {\n  color: var(--grid-content-on-action-primary-ghost-hover);\n}\n\n#label {\n  font: var(--label-button);\n  cursor: pointer;\n}\n\n.filled #label {\n  color: var(--grid-content-on-action-primary);\n}\n\n.ghost #label {\n  color: var(--grid-content-on-action-primary-ghost);\n}\n\n@media screen and (max-width: 989px) {\n  #button {\n    width: unset;\n    max-width: unset;\n    flex: 1;\n    white-space: nowrap;\n    padding: 8px 14px;\n  }\n}\n","import { Component, h, Prop, Fragment } from '@stencil/core';\n\n@Component({\n  tag: 'app-launch-button',\n  styleUrl: 'button.css',\n  shadow: true,\n})\nexport class Button {\n  @Prop() variant: 'filled' | 'ghost';\n  @Prop() isLink: boolean;\n  @Prop() href?: string;\n  @Prop() targetBlank?: boolean;\n  @Prop() label: string;\n\n  render() {\n    return (\n      <Fragment>\n        {this.isLink ? (\n          <a href={this.href} id=\"button\" class={this.variant} target={this.targetBlank ? '_blank' : '_self'} rel={this.targetBlank ? 'noreferrer noopener' : ''}>\n            <span id=\"label\">{this.label}</span>\n          </a>\n        ) : (\n          <button id=\"button\" class={this.variant}>\n            <label id=\"label\">{this.label}</label>\n          </button>\n        )}\n      </Fragment>\n    );\n  }\n}\n","#button {\n  height: 48px;\n  width: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: none;\n  cursor: pointer;\n}\n\n#icon {\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n#button.small #icon {\n  width: 24px;\n  height: 24px;\n}\n\n#button.small #icon svg {\n  width: 12px;\n  height: 12px;\n}\n\n#button.secondary.ghost #icon {\n  border: 1px solid var(--grid-border-action-secondary-ghost);\n}\n\n#button.secondary.ghost:hover #icon {\n  border-color: var(--grid-border-action-secondary-ghost-hover);\n}\n\n#button.secondary.ghost #icon path {\n  fill: var(--grid-content-on-action-primary-ghost);\n}\n\n#button.secondary.ghost:hover #icon path {\n  fill: var(--grid-content-on-action-primary-ghost-hover);\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'app-launch-icon-button',\n  styleUrl: 'icon-button.css',\n  shadow: true,\n})\nexport class IconButton {\n  @Prop() type: 'primary' | 'primary ghost' | 'secondary' | 'secondary ghost' | 'tertiary' | 'tertiary ghost' = 'primary';\n  @Prop() size: 'small' | 'medium' | 'big' = 'medium';\n  @Prop() icon!: string;\n  @Prop() accessibleName!: string;\n\n  render() {\n    return (\n      <button id=\"button\" class={`${this.type} ${this.size}`} aria-label={this.accessibleName}>\n        <i id=\"icon\" innerHTML={this.icon}></i>\n      </button>\n    );\n  }\n}\n",":host,\n:host *,\n:host *::after,\n:host *::before {\n  box-sizing: border-box;\n}\n\n#overlay {\n  position: fixed;\n  z-index: 999;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  overflow-y: auto;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 75, 135, 0.8);\n  padding: 32px 48px;\n  opacity: 0;\n}\n\n#overlay.animated {\n  animation: fadeIn var(--duration-medium-2) var(--curve-expressive-ease-out) 0.2s forwards;\n}\n\n#overlay.closed {\n  opacity: 1;\n  animation: fadeOut var(--duration-medium-1) var(--curve-expressive-ease-in) 0.25s forwards;\n}\n\n#overlay.animated.closed #modal-container {\n  animation: popOut var(--duration-medium-3) var(--curve-expressive-ease-in) forwards;\n}\n\n#overlay.animated.closed #floating-cta-container {\n  animation: slideOut var(--duration-xfast) var(--curve-simple-ease-in) forwards;\n}\n\n#modal-container {\n  max-width: 1200px;\n  flex: 1;\n  width: 100%;\n  background: white;\n  border-radius: 24px;\n  opacity: 0;\n  transform: scale(0);\n  display: flex;\n  flex-direction: column;\n}\n\n#overlay.animated #modal-container {\n  animation: popIn var(--duration-xxslow) var(--curve-expressive-ease-out) 0.4s forwards;\n}\n\n#modal-header {\n  width: 100%;\n  padding: 48px 80px;\n  display: flex;\n  position: relative;\n  justify-content: center;\n}\n\n#modal-header-content {\n  display: flex;\n  gap: 24px;\n}\n\n#modal-header-spacer {\n  flex: 1;\n}\n\n#modal-header-spacer.animated {\n  flex: 0;\n  transition: flex-grow var(--duration-xxslow) var(--curve-expressive-ease-in-out);\n}\n\n#logo {\n  opacity: 0;\n  height: 88px;\n}\n\n#logo svg {\n  height: 100%;\n}\n\n#logo-2 {\n  height: 88px;\n}\n\n#logo-2 svg {\n  height: 100%;\n}\n\n#logo-2.slideout {\n  opacity: 1;\n  animation: slideOut var(--duration-medium-1) var(--curve-expressive-ease-in) 0.1s forwards;\n}\n\n#overlay.animated #logo {\n  animation: slideInFromBottom var(--duration-slow) var(--curve-expressive-ease-out) 0.825s forwards;\n}\n\n#overlay.animated.refreshed #logo {\n  animation: slideInFromBottom var(--duration-slow) var(--curve-expressive-ease-out) 0.1s forwards;\n}\n\n#modal-header-title-container {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  align-self: center;\n}\n\n#title {\n  opacity: 0;\n  margin: 0;\n}\n\n#title-2 {\n  font: var(--title-2);\n  color: var(--grid-content-primary);\n  margin: 0;\n  padding: 0;\n  max-width: 16.8em;\n  opacity: 0;\n  animation: slideInFromRight var(--duration-medium-3) var(--curve-expressive-ease-out) 0.25s forwards;\n}\n\n#title-2.slideout {\n  opacity: 1;\n  animation: slideOut var(--duration-medium-1) var(--curve-expressive-ease-in) 0.1s forwards;\n}\n\n#overlay.animated #title {\n  animation: slideInFromBottom var(--duration-slow) var(--curve-expressive-ease-out) 0.85s forwards;\n}\n\n#overlay.animated #title.slideout,\n#overlay.animated.refreshed #title.slideout {\n  opacity: 1;\n  animation: fadeOut var(--duration-medium-2) var(--curve-expressive-ease-in) 0.025s forwards;\n}\n\n#overlay.animated #subtitle.slideout,\n#overlay.animated.refreshed #subtitle.slideout {\n  opacity: 1;\n  animation: fadeOut var(--duration-medium-2) var(--curve-expressive-ease-in) 0s forwards;\n}\n\n#overlay.animated.refreshed #title {\n  animation: slideInFromBottom var(--duration-slow) var(--curve-expressive-ease-out) 0.25s forwards;\n}\n\n#subtitle,\n#subtitle-mobile {\n  opacity: 0;\n}\n\n#subtitle-mobile {\n  display: none;\n}\n\n#overlay.animated #subtitle,\n#overlay.animated #subtitle-mobile {\n  animation: slideInFromBottom var(--duration-slow) var(--curve-expressive-ease-out) 0.875s forwards;\n}\n\n#overlay.animated.refreshed #subtitle,\n#overlay.animated.refreshed #subtitle-mobile {\n  animation: slideInFromBottom var(--duration-slow) var(--curve-expressive-ease-out) 0.3s forwards;\n}\n\n#title {\n  font: var(--title-1);\n  color: var(--grid-content-primary);\n}\n\n#subtitle,\n#subtitle-mobile {\n  font: var(--title-3);\n  color: var(--grid-content-primary);\n}\n\n#close-button-container {\n  position: absolute;\n  top: 8px;\n  right: 32px;\n}\n\n#modal-body {\n  padding: 0px 80px;\n  padding-bottom: 48px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n#floating-cta-container {\n  display: none;\n}\n\n#refresh-button-container {\n  height: 0px;\n  flex-shrink: 0;\n  overflow: hidden;\n  animation: expand var(--duration-medium-3) var(--curve-expressive-ease-in-out) 0.25s forwards;\n}\n\n#refresh-button-container.refreshing {\n  height: 88px;\n  animation: shrink var(--duration-medium-3) var(--curve-expressive-ease-in) forwards;\n}\n\n#refresh-button {\n  padding-top: 40px;\n  display: block;\n}\n\n@media screen and (max-width: 1200px) {\n  #modal-header {\n    padding-left: 48px;\n  }\n\n  #modal-body {\n    padding-left: 48px;\n    padding-right: 48px;\n  }\n}\n\n@media screen and (min-width: 990px) and (min-height: 800px) {\n  #overlay {\n    justify-content: center;\n  }\n\n  #modal-container {\n    max-height: 768px;\n  }\n}\n\n@media screen and (max-width: 989px) {\n  #overlay {\n    padding: 0;\n  }\n\n  #modal-container {\n    border-radius: 0;\n  }\n\n  #modal-header {\n    padding-right: 48px;\n    padding-top: 64px;\n    padding-bottom: 32px;\n  }\n\n  #modal-body {\n    padding-bottom: 136px;\n    overflow-x: hidden;\n  }\n\n  #logo,\n  #logo-2 {\n    height: 72px;\n  }\n\n  #title {\n    font: var(--title-2);\n  }\n\n  #subtitle,\n  #subtitle-mobile {\n    font: var(--headline-2);\n  }\n\n  #floating-cta-appuntamento-container {\n    display: block;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 20px;\n    padding-top: 24px;\n    color: var(--grid-content-primary);\n    border-top: 1px solid var(--grid-border-color-02);\n  }\n\n  #floating-cta-appuntamento-container .link {\n    color: var(--grid-content-primary);\n    font-weight: 700;\n  }\n\n  #floating-cta-container {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    padding: 24px 48px;\n    background: var(--grid-background-color-01);\n    box-shadow: 0px -4px 16px rgba(0, 0, 0, 0.1);\n    opacity: 0;\n  }\n\n  #overlay.animated #floating-cta-container {\n    animation: slideInFromBottom var(--duration-xslow) var(--curve-expressive-ease-out) 1.3s forwards;\n  }\n\n  #floating-buttons-container {\n    display: flex;\n    flex-direction: row-reverse;\n    flex-wrap: wrap;\n    gap: 32px;\n  }\n}\n\n@media screen and (max-width: 767px) {\n  #modal-header {\n    padding-left: 16px;\n    padding-right: 16px;\n    padding-top: 52px;\n    padding-bottom: 24px;\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  #modal-header-spacer {\n    display: none;\n  }\n\n  #modal-header-content {\n    gap: 16px;\n  }\n\n  #close-button-container {\n    top: 0;\n    right: 16px;\n  }\n\n  #modal-body {\n    padding-left: 16px;\n    padding-right: 16px;\n    padding-bottom: 104px;\n    /* padding-bottom: 24px; */\n  }\n\n  #logo,\n  #logo-2 {\n    height: 56px;\n  }\n\n  #title {\n    font: var(--title-4);\n  }\n\n  #subtitle,\n  #subtitle-mobile {\n    font: var(--headline-3);\n  }\n\n  #subtitle-mobile {\n    display: block;\n  }\n\n  #subtitle {\n    display: none;\n  }\n\n  #title-2 {\n    font: var(--title-4);\n  }\n\n  #floating-cta-appuntamento-container {\n    font-size: 14px;\n    line-height: 18px;\n    padding-top: 16px;\n  }\n\n  #floating-cta-container {\n    gap: 16px;\n    padding: 16px 16px;\n  }\n}\n\n@keyframes slideInFromLeft {\n  0% {\n    opacity: 0;\n    transform: translateX(-48px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideInFromRight {\n  0% {\n    opacity: 0;\n    transform: translateX(48px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideInFromBottom {\n  0% {\n    opacity: 0;\n    transform: translateY(48px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideInFromBottomXL {\n  0% {\n    border-top-left-radius: 16px;\n    border-top-right-radius: 16px;\n    opacity: 0;\n    transform: translateY(50%);\n  }\n  99% {\n    border-top-left-radius: 16px;\n    border-top-right-radius: 16px;\n    opacity: 1;\n    transform: translateY(0);\n  }\n  100% {\n    border-radius: 0;\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOut {\n  0% {\n    opacity: 1;\n  }\n  99% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    visibility: hidden;\n    display: none;\n  }\n}\n\n@keyframes slideOut {\n  0% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(48px);\n  }\n}\n\n@keyframes popIn {\n  0% {\n    opacity: 0;\n    transform: scale(0);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes popOut {\n  0% {\n    opacity: 1;\n    transform: scale(1);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(0);\n  }\n}\n\n@keyframes expand {\n  0% {\n    height: 0px;\n  }\n  100% {\n    height: 88px;\n  }\n}\n\n@keyframes shrink {\n  0% {\n    height: 88px;\n  }\n  100% {\n    height: 0px;\n  }\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Fragment, Element } from '@stencil/core';\nimport AlleanzaLogo from '../../assets/images/logo-alleanza.svg';\nimport RefreshIcon from '../../assets/icons/refresh.svg';\nimport CloseIcon from '../../assets/icons/close.svg';\n\nexport enum ModalState {\n  Initial = 'Initial',\n  Started = 'Started',\n  Refreshing = 'Refreshing',\n  Refreshed = 'Refreshed',\n  SliderFinishing = 'Slider finishing',\n  SliderFinished = 'Slider finished',\n}\n\nexport enum Breakpoint {\n  Desktop,\n  Tablet,\n  Mobile,\n}\n\n@Component({\n  tag: 'app-launch-modal',\n  styleUrl: 'modal.css',\n  shadow: true,\n})\nexport class Modal {\n  @Prop() mainTitle: string;\n  @Prop() subtitle: string;\n  @Prop() ctaPrimary: string;\n  @Prop() ctaSecondary: string;\n  @Prop() ctaTertiary: string;\n  @Prop() slides: { title: string; paragraph: string; imageSrc: string; imageAlt: string }[];\n  @Prop() qrCodeCta: string;\n  @Prop() qrCodeSrc: string;\n  @Prop() playStoreImageSrc: string;\n  @Prop() playStoreUrl: string;\n  @Prop() appStoreImageSrc: string;\n  @Prop() appStoreUrl: string;\n  @Prop() ctaPrimaryTargetUrl: string;\n  @Prop() ctaSecondaryTargetUrl: string;\n  @Prop() ctaTertiaryTargetUrl: string;\n\n  @State() isOpen: boolean = false;\n  @State() modalState: ModalState = ModalState.Initial;\n  @State() breakpoint: Breakpoint = window.innerWidth < 768 ? Breakpoint.Mobile : window.innerWidth < 990 ? Breakpoint.Tablet : Breakpoint.Desktop;\n\n  @Event() open: EventEmitter;\n  @Event() close: EventEmitter;\n  @Event() slideChanged: EventEmitter<number>;\n  @Event() sliderEnded: EventEmitter;\n  @Event() sliderRefreshed: EventEmitter;\n  @Event() ctaPrimaryClicked: EventEmitter;\n  @Event() ctaSecondaryClicked: EventEmitter;\n  @Event() ctaTertiaryClicked: EventEmitter;\n  @Event() playStoreClicked: EventEmitter;\n  @Event() appStoreClicked: EventEmitter;\n\n  @Element() hostElement: HTMLElement;\n\n  connectedCallback() {\n    this.isOpen = true;\n    this.open.emit();\n    window.addEventListener('resize', this.handleWindowResize.bind(this));\n  }\n\n  private handleWindowResize() {\n    if (window.innerWidth < 768) {\n      if (this.modalState === ModalState.SliderFinished && this.breakpoint === Breakpoint.Desktop) {\n        this.handleRefresh();\n      }\n      if (this.breakpoint !== Breakpoint.Mobile) {\n        this.breakpoint = Breakpoint.Mobile;\n      }\n    } else if (window.innerWidth < 990) {\n      if (this.modalState === ModalState.SliderFinished && this.breakpoint === Breakpoint.Desktop) {\n        this.handleRefresh();\n      }\n      if (this.breakpoint !== Breakpoint.Tablet) {\n        this.breakpoint = Breakpoint.Tablet;\n      }\n    } else {\n      if (this.breakpoint !== Breakpoint.Desktop) {\n        this.breakpoint = Breakpoint.Desktop;\n      }\n    }\n  }\n\n  closeModal() {\n    this.isOpen = false;\n    this.close.emit();\n  }\n\n  handleAnimationStart() {\n    this.modalState = ModalState.Started;\n  }\n\n  handleSliderEndStart() {\n    this.modalState = ModalState.SliderFinishing;\n    this.sliderEnded.emit();\n  }\n\n  handleSliderEnd() {\n    this.modalState = ModalState.SliderFinished;\n  }\n\n  handleRefreshStart() {\n    this.modalState = ModalState.Refreshing;\n    this.sliderRefreshed.emit();\n  }\n\n  handleRefresh() {\n    this.modalState = ModalState.Refreshed;\n    let slider = this.hostElement.shadowRoot.querySelector('app-launch-slider');\n    slider.refreshSlider();\n  }\n\n  render() {\n    return (\n      <div\n        id=\"overlay\"\n        class={(this.isOpen ? 'open' : 'closed') + (this.modalState !== ModalState.Initial ? ' animated' : '') + (this.modalState === ModalState.Refreshed ? ' refreshed' : '')}\n      >\n        <div id=\"modal-container\">\n          <div id=\"modal-header\">\n            <div id=\"modal-header-content\">\n              {this.modalState !== ModalState.SliderFinished && this.modalState !== ModalState.Refreshing ? (\n                <Fragment>\n                  <div id=\"logo\" innerHTML={AlleanzaLogo} key=\"logo-1\"></div>\n                  <div id=\"modal-header-title-container\">\n                    <h2 id=\"title\" class={this.modalState === ModalState.SliderFinishing ? 'slideout' : ''}>\n                      {this.mainTitle}\n                    </h2>\n                    <div id=\"subtitle\" class={this.modalState === ModalState.SliderFinishing ? 'slideout' : ''}>\n                      {this.subtitle}\n                    </div>\n                  </div>\n                </Fragment>\n              ) : (\n                <Fragment>\n                  <div\n                    id=\"logo-2\"\n                    class={this.modalState === ModalState.Refreshing ? 'slideout' : ''}\n                    innerHTML={AlleanzaLogo}\n                    key=\"logo-2\"\n                    onAnimationEnd={() => {\n                      if (this.modalState === ModalState.Refreshing) {\n                        this.handleRefresh();\n                      }\n                    }}\n                  ></div>\n                  <div id=\"modal-header-title-container\">\n                    <h3 id=\"title-2\" class={this.modalState === ModalState.Refreshing ? 'slideout' : ''}>\n                      Scopri questi e molti altri contenuti scaricando l'app Alleanza.\n                    </h3>\n                  </div>\n                </Fragment>\n              )}\n            </div>\n            <div id=\"modal-header-spacer\" class={this.modalState === ModalState.SliderFinished || this.modalState === ModalState.Refreshing ? 'animated' : ''}></div>\n            <div id=\"close-button-container\">\n              <app-launch-text-button label=\"Chiudi\" iconSx={CloseIcon} onClick={this.closeModal.bind(this)}></app-launch-text-button>\n            </div>\n          </div>\n          <div id=\"modal-body\">\n            <app-launch-slider\n              slides={this.slides}\n              modalState={this.modalState}\n              breakpoint={this.breakpoint}\n              onAnimationReady={this.handleAnimationStart.bind(this)}\n              onSlideChanged={event => {\n                this.slideChanged.emit(event.detail);\n              }}\n              onSliderEndStart={this.handleSliderEndStart.bind(this)}\n              onSliderEnd={this.handleSliderEnd.bind(this)}\n              ctaPrimary={this.ctaPrimary}\n              ctaSecondary={this.ctaSecondary}\n              ctaPrimaryTargetUrl={this.ctaPrimaryTargetUrl}\n              ctaSecondaryTargetUrl={this.ctaSecondaryTargetUrl}\n              ctaTertiaryTargetUrl={this.ctaTertiaryTargetUrl}\n              ctaTertiary={this.ctaTertiary}\n              playStoreImageSrc={this.playStoreImageSrc}\n              playStoreUrl={this.playStoreUrl}\n              appStoreImageSrc={this.appStoreImageSrc}\n              appStoreUrl={this.appStoreUrl}\n              qrCodeSrc={this.qrCodeSrc}\n              qrCodeCta={this.qrCodeCta}\n              onCtaPrimaryClicked={() => {\n                this.ctaPrimaryClicked.emit();\n              }}\n              onCtaSecondaryClicked={() => {\n                this.ctaSecondaryClicked.emit();\n              }}\n              onCtaTertiaryClicked={() => {\n                this.ctaTertiaryClicked.emit();\n              }}\n              onPlayStoreClicked={() => {\n                this.playStoreClicked.emit();\n              }}\n              onAppStoreClicked={() => {\n                this.appStoreClicked.emit();\n              }}\n            ></app-launch-slider>\n            {(this.modalState === ModalState.SliderFinished || this.modalState === ModalState.Refreshing) && (\n              <div id=\"refresh-button-container\" class={this.modalState === ModalState.Refreshing ? 'refreshing' : ''}>\n                <app-launch-text-button label=\"TORNA ALL'INIZIO\" id=\"refresh-button\" iconSx={RefreshIcon} onClick={this.handleRefreshStart.bind(this)}></app-launch-text-button>\n              </div>\n            )}\n          </div>\n        </div>\n        {this.modalState !== ModalState.SliderFinished && this.modalState !== ModalState.Refreshing && (\n          <div id=\"floating-cta-container\">\n            <div id=\"floating-buttons-container\">\n              <app-launch-button\n                label={this.ctaPrimary}\n                variant=\"filled\"\n                id=\"button-primary\"\n                isLink={this.breakpoint !== Breakpoint.Desktop}\n                href={this.breakpoint !== Breakpoint.Desktop && this.ctaPrimaryTargetUrl}\n                targetBlank\n                onClick={() => {\n                  if (this.breakpoint === Breakpoint.Desktop) {\n                    let slider = this.hostElement.shadowRoot.querySelector('app-launch-slider');\n                    slider.jumpToLastSlide();\n                  }\n                  this.ctaPrimaryClicked.emit();\n                }}\n              ></app-launch-button>\n              <app-launch-text-button\n                label={this.ctaSecondary}\n                id=\"button-secondary\"\n                isLink\n                href={this.ctaSecondaryTargetUrl}\n                targetBlank\n                onClick={() => {\n                  this.ctaSecondaryClicked.emit();\n                }}\n              ></app-launch-text-button>\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n",":host,\n:host *,\n:host *::before,\n:host *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n:host {\n  flex: 1;\n  width: 100%;\n}\n\n#slider-container {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  gap: 64px;\n  align-items: center;\n  user-select: none;\n}\n\n#slider-content {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 64px;\n  overflow: hidden;\n}\n\n.icon-button {\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--grid-border-action-primary-ghost);\n  border-radius: 100%;\n  background: none;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.icon-button:hover {\n  border-color: var(--grid-border-action-primary-ghost-hover);\n}\n\n.icon-button:hover svg * {\n  fill: var(--grid-content-on-action-primary-ghost-hover);\n}\n\n.icon-button:disabled {\n  border-color: var(--grid-border-action-primary-ghost-disabled);\n  cursor: default;\n}\n\n.icon-button:disabled svg * {\n  fill: var(--grid-content-on-action-primary-ghost-disabled);\n}\n\n#slider-container.animated .icon-button.next,\n#slider-container.animated #pagination {\n  animation: fadeIn var(--duration-xslow) var(--curve-expressive-ease-out) 1.75s forwards;\n}\n\n#slider-container.animated.refreshed .icon-button.next,\n#slider-container.animated #pagination {\n  animation: fadeIn var(--duration-xslow) var(--curve-expressive-ease-out) 0.85s forwards;\n}\n\n#slider-container.animated .icon-button.previous {\n  animation: slideInFromLeft var(--duration-xslow) var(--curve-expressive-ease-out) 1.75s forwards;\n}\n\n#slider-container.animated.refreshed .icon-button.previous {\n  animation: slideInFromLeft var(--duration-xslow) var(--curve-expressive-ease-out) 0.85s forwards;\n}\n\n.icon {\n  display: block;\n  width: 24px;\n  height: 24px;\n}\n\n.icon-button.next .icon {\n  transform: translateX(1px);\n}\n\n.icon-button.previous .icon {\n  transform: rotate(180deg) translateX(1px);\n}\n\n#slider-texts,\n#slider-images {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  position: relative;\n}\n\n#slider-images {\n  justify-content: center;\n  align-items: center;\n  min-height: 440px;\n}\n\n#slider-container.animated.ended #slider-images {\n  min-height: 352px;\n}\n\n#slider-images-background {\n  position: absolute;\n  width: 100%;\n  max-height: 100%;\n  aspect-ratio: 0.75;\n  opacity: 0;\n}\n\n#slider-texts {\n  flex-direction: column;\n  gap: 32px;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  user-select: text;\n}\n\n#buttons-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.fill-container {\n  flex: 1;\n  width: 100%;\n}\n\n.fill-container:not(#cta-appuntamento-container) {\n  max-height: 48px;\n}\n\n#cta-appuntamento-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  font: var(--headline-5);\n  color: var(--grid-content-primary);\n  opacity: 0;\n  margin-top: 32px;\n}\n\n#last-slide-container #cta-appuntamento-container {\n  margin-top: 44px;\n}\n\n#slider-container.animated #cta-appuntamento-container {\n  animation: slideInFromBottom var(--duration-xslow) var(--curve-expressive-ease-out) 1.45s forwards;\n}\n\n#slider-container.animated.refreshed #cta-appuntamento-container {\n  animation: slideInFromBottom var(--duration-xslow) var(--curve-expressive-ease-out) 0.55s forwards;\n}\n\n#slider-container #last-slide-container #cta-appuntamento-container {\n  animation-delay: 0.25s;\n}\n\n#button-primary,\n#button-secondary {\n  opacity: 0;\n}\n\n#slider-container.animated #button-primary {\n  animation: slideInFromBottom var(--duration-xslow) var(--curve-expressive-ease-out) 1.25s forwards;\n}\n\n#slider-container.animated.refreshed #button-primary {\n  animation: slideInFromBottom var(--duration-xslow) var(--curve-expressive-ease-out) 0.35s forwards;\n}\n\n#slider-container.animated.ended #button-primary,\n#slider-container.animated.ended #button-secondary,\n#slider-container.animated.ended #cta-appuntamento-container {\n  opacity: 1;\n  animation: none;\n}\n\n#slider-container.animated #button-secondary {\n  animation: slideInFromBottom var(--duration-xslow) var(--curve-expressive-ease-out) 1.35s forwards;\n}\n\n#slider-container.animated.refreshed #button-secondary {\n  animation: slideInFromBottom var(--duration-xslow) var(--curve-expressive-ease-out) 0.45s forwards;\n}\n\n#slider-container.animated #slides-content-container {\n  animation: slideInFromBottom var(--duration-xslow) var(--curve-expressive-ease-out) 1.1s forwards;\n}\n\n#slider-container.animated.refreshed #slides-content-container {\n  animation: slideInFromBottom var(--duration-xslow) var(--curve-expressive-ease-out) 0.2s forwards;\n}\n\n#slider-container.animated #slider-images-background {\n  animation: spinIn var(--duration-extended-1) var(--curve-cinematic-ease-out) 1.55s forwards;\n}\n\n#slider-container.animated.refreshed #slider-images-background {\n  animation: spinIn var(--duration-extended-1) var(--curve-cinematic-ease-out) 0.55s forwards;\n}\n\n#background-bubble-1,\n#background-bubble-2,\n#background-bubble-3 {\n  position: absolute;\n  border-radius: 100%;\n  aspect-ratio: 1;\n  transition: all var(--duration-xslow) var(--curve-expressive-ease-in-out);\n}\n\n#slider-container.animated.ended #background-bubble-1,\n#slider-container.animated.ended #background-bubble-2,\n#slider-container.animated.ended #background-bubble-3 {\n  transition-delay: 0.3s;\n}\n\n#background-bubble-1 {\n  width: 20%;\n  top: 15%;\n  left: 3%;\n  background: var(--grid-background-product-02);\n}\n\n#slider-container.animated.ended #background-bubble-1 {\n  width: 90%;\n  top: 0%;\n  left: -10%;\n  background: var(--grid-background-product-02);\n}\n\n#background-bubble-2 {\n  width: 50%;\n  right: 0;\n  top: 30%;\n  background: var(--grid-background-product-04);\n}\n\n#slider-container.animated.ended #background-bubble-2 {\n  width: 35%;\n  top: 60%;\n}\n\n#background-bubble-3 {\n  width: 80%;\n  left: 0;\n  bottom: 16px;\n  background: var(--grid-background-product-03);\n}\n\n#slider-container.animated.ended #background-bubble-3 {\n  width: 10%;\n  left: 45%;\n  bottom: 0;\n}\n\n#slider-image-items-container {\n  flex: 1;\n  height: 100%;\n  transform: scale(0);\n  display: flex;\n  justify-content: center;\n}\n\n#slider-container.animated #slider-image-items-container {\n  animation: popIn var(--duration-xslow) var(--curve-expressive-ease-out) 1.75s forwards;\n}\n\n#slider-container.animated.refreshed #slider-image-items-container {\n  animation: popIn var(--duration-xslow) var(--curve-expressive-ease-out) 0.4s forwards;\n}\n\n.slider-image-item {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  aspect-ratio: 0.52;\n  max-width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: none;\n}\n\n.slider-image-item.loop {\n  display: none;\n}\n\n.slider-image-item.current {\n  z-index: 1;\n  opacity: 1;\n  transform: translateX(0) scale(1);\n  transition: opacity var(--duration-medium-2) var(--curve-expressive-ease-out) 0.1s, transform var(--duration-medium-3) var(--curve-expressive-ease-out) 0.1s;\n}\n\n.slider-image-item.previous,\n.slider-image-item.next {\n  transition: opacity var(--duration-fast) var(--curve-expressive-ease-in), transform var(--duration-medium-1) var(--curve-expressive-ease-in);\n}\n\n.slider-image-item.previous {\n  transform: translateX(-60%) scale(0.5);\n}\n\n.slider-image-item.next {\n  transform: translateX(60%) scale(0.5);\n}\n\n.slider-image-item.previous-previous {\n  transform: translateX(-100%) scale(0.25);\n}\n.slider-image-item.next-next {\n  transform: translateX(100%) scale(0.25);\n}\n\n.slider-image-item.hidden {\n  opacity: 0;\n  visibility: hidden;\n  transition: none;\n}\n\n.slider-image {\n  height: 100%;\n  max-height: 100%;\n  max-width: 95%;\n  object-fit: contain;\n  /* border: 4px solid #d0e2ff; */\n  /* border-radius: 16px; */\n  /* border-bottom-width: 10px;\n  border-top-width: 10px; */\n  /* background: #d0e2ff; */\n}\n\n#slides-content-container {\n  display: flex;\n  flex-direction: column;\n  opacity: 0;\n  gap: 32px;\n}\n\n.slider-text-items-container {\n  display: inline-flex;\n  gap: 8px;\n  transition: transform var(--duration-xslow) var(--curve-expressive-ease-out);\n}\n\n.slider-text-item {\n  display: flex;\n  width: 100%;\n  flex-shrink: 0;\n  flex-direction: column;\n  gap: 8px;\n  color: var(--grid-content-primary);\n  opacity: 0;\n  transition: opacity var(--duration-medium-2) var(--curve-expressive-ease-out);\n}\n\n.slider-text-item.current {\n  opacity: 1;\n  transition: opacity var(--duration-medium-2) var(--curve-expressive-ease-out);\n}\n\n.slide-title {\n  font: var(--headline-5);\n  margin: 0;\n  padding: 0;\n}\n\n.slide-paragraph {\n  font: var(--body-3);\n  margin: 0;\n  padding: 0;\n}\n\n#slider-container.animated.ended .icon-button,\n#slider-container.animated.refreshed.ended .icon-button {\n  pointer-events: none;\n  animation: fadeOut var(--duration-fast) var(--curve-simple-ease-in) forwards;\n}\n\n#slider-container.animated.ended #slides-content-container,\n#slider-container.animated.ended #slider-image-items-container {\n  animation: slideOut var(--duration-medium-2) var(--curve-expressive-ease-in) forwards;\n}\n\n#last-slide-container {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  opacity: 0;\n  animation: slideInFromBottom var(--duration-slow) var(--curve-expressive-ease-out) 0.4s forwards;\n}\n\n#last-slide-container.refreshing {\n  opacity: 1;\n  animation: slideOutToBottom var(--duration-medium-2) var(--curve-expressive-ease-in) forwards;\n}\n\n#app-links {\n  display: flex;\n  flex-wrap: wrap;\n  column-gap: 16px;\n  row-gap: 8px;\n}\n\n.last-slide-title {\n  font: var(--title-5);\n  color: var(--grid-content-primary);\n  max-width: 20ch;\n}\n\n#qr-code-wrapper {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  gap: 12px;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n}\n\n#qr-code-container {\n  /* background: var(--grid-background-color-02); */\n  /* border-radius: 16px; */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  max-width: 280px;\n  aspect-ratio: 1;\n  /* padding: 80px; */\n  position: relative;\n  opacity: 0;\n  animation: slideInFromBottom var(--duration-slow) var(--curve-expressive-ease-out) 0.4s forwards;\n}\n\n#qr-code-container.refreshing {\n  opacity: 1;\n  animation: slideOutToBottom var(--duration-medium-2) var(--curve-expressive-ease-in) forwards;\n}\n\n#qr-code-container img {\n  width: 100%;\n  height: 100%;\n}\n\n#pagination {\n  display: flex;\n  gap: 8px;\n  justify-content: center;\n  opacity: 0;\n}\n\n.pagination-dot {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  border: 1px solid var(--grid-action-accent);\n}\n\n.pagination-dot.active {\n  background: var(--grid-action-accent);\n}\n\n@media screen and (max-width: 1200px) {\n  #slider-container {\n    gap: 48px;\n  }\n\n  .slider-image {\n    max-width: 90%;\n  }\n}\n\n@media screen and (max-width: 989px) {\n  /* .icon-button {\n    display: none;\n  } */\n\n  #slider-container {\n    gap: 124px;\n  }\n\n  #slider-content {\n    flex-direction: column;\n    gap: 16px;\n    overflow: visible;\n    width: 0;\n    justify-content: flex-start;\n  }\n\n  .fill-container {\n    display: none;\n    flex: unset;\n    height: auto;\n  }\n\n  #slider-texts {\n    flex: unset;\n    height: auto;\n    width: calc(100% + 152px);\n    padding-bottom: 8px;\n    /* visibility: hidden; */\n  }\n\n  /* .slider-text-items-container {\n    display: none;\n  } */\n\n  #slider-images-background {\n    width: calc(100% + 152px);\n  }\n\n  #slider-images {\n    width: 100%;\n    aspect-ratio: 0.52;\n    height: unset;\n    flex: unset;\n    pointer-events: none;\n  }\n\n  #slider-image-items-container {\n    width: 100%;\n    height: 100%;\n  }\n\n  .slider-image {\n    max-height: 100%;\n    max-width: 100%;\n  }\n\n  #buttons-container {\n    display: none;\n  }\n\n  /* .slider-image-item {\n    opacity: 1;\n  } */\n\n  /* .slider-image-item.loop {\n    display: flex;\n  }\n\n  .slider-image-item::after {\n    content: '';\n    display: block;\n    position: absolute;\n    background: black;\n    height: 100%;\n    aspect-ratio: 0.52;\n    border-radius: 16px;\n    opacity: 0;\n    transition: opacity var(--duration-medium-3) var(--curve-expressive-ease-in-out);\n  }\n\n  .slider-image-item.previous::after,\n  .slider-image-item.previous-previous::after,\n  .slider-image-item.next::after,\n  .slider-image-item.next-next::after {\n    opacity: 0.1;\n    transition: opacity var(--duration-medium-3) var(--curve-expressive-ease-in-out) 0.1s;\n  }\n\n  .slider-image-item.current {\n    transition: transform var(--duration-extended-1) var(--curve-expressive-ease-in-out) 0.05s;\n  }\n\n  .slider-image-item.previous {\n    transform: translateX(calc(-110%)) scale(0.75);\n    transition: transform var(--duration-extended-1) var(--curve-expressive-ease-in-out) 0.025s;\n  }\n\n  .slider-image-item.previous-previous {\n    transform: translateX(-220%) scale(0.5);\n    transition: transform var(--duration-extended-1) var(--curve-expressive-ease-in-out);\n  }\n\n  .slider-image-item.next {\n    transform: translateX(110%) scale(0.75);\n    transition: transform var(--duration-extended-1) var(--curve-expressive-ease-in-out) 0.05s;\n  }\n\n  .slider-image-item.next-next {\n    transform: translateX(220%) scale(0.5);\n  }\n\n  .slider-image-item.initial {\n    transition: none;\n  }\n  .slider-image-item.initial::after {\n    transition: none;\n  } */\n\n  #slides-content-container {\n    gap: 24px;\n  }\n\n  #cta-appuntamento-container {\n    margin-top: 0;\n    font-weight: 400;\n    padding-top: 8px;\n    width: calc(100vw - 32px);\n    text-align: center;\n    display: inline-block;\n  }\n\n  #cta-appuntamento {\n    display: inline;\n  }\n\n  #cta-appuntamento-container .link {\n    color: var(--grid-content-primary);\n    font-weight: 700;\n  }\n\n  #slider-container.animated #slider-images-background {\n    animation-delay: 1.1s;\n  }\n\n  #slider-container.animated.refreshed #slider-images-background {\n    animation-delay: 0.4s;\n  }\n\n  #slider-container.animated #slider-image-items-container {\n    animation-delay: 1.3s;\n  }\n\n  #slider-container.animated.refreshed #slider-image-items-container {\n    animation-delay: 0.6s;\n  }\n}\n\n@media screen and (max-width: 767px) {\n  .icon-button {\n    width: 32px;\n    height: 32px;\n    background: var(--grid-action-secondary);\n    position: relative;\n  }\n\n  .icon-button::before {\n    position: absolute;\n    content: '';\n    display: block;\n    top: -8px;\n    bottom: -8px;\n    left: -8px;\n    right: -8px;\n  }\n\n  .icon-button:hover {\n    background: var(--grid-action-secondary-hover);\n  }\n\n  .icon-button svg,\n  .icon-button .icon {\n    width: 16px;\n    height: 16px;\n  }\n\n  .icon-button svg * {\n    fill: var(--grid-content-on-action-secondary);\n  }\n\n  .icon-button:hover svg * {\n    fill: var(--grid-content-on-action-secondary-hover);\n  }\n\n  .icon-button:disabled {\n    border-color: var(--grid-border-action-disabled);\n    background: var(--grid-action-disabled);\n    cursor: default;\n  }\n\n  .icon-button:disabled svg * {\n    fill: var(--grid-content-on-action-secondary-disabled);\n  }\n\n  #slider-container {\n    gap: 24px;\n  }\n\n  #slider-images {\n    min-height: 320px;\n    pointer-events: none;\n  }\n\n  #slider-texts {\n    gap: 16px;\n    width: calc(100vw - 32px);\n    padding-bottom: 8px;\n    /* visibility: hidden; */\n  }\n\n  #slider-images-background {\n    max-width: unset;\n    width: 100vw;\n    z-index: -1;\n  }\n\n  #slider-container.animated #slider-images-background {\n    animation-name: spinInMobile;\n  }\n\n  #background-bubble-2 {\n    top: 25%;\n  }\n\n  #background-bubble-3 {\n    width: 65%;\n    bottom: 0;\n  }\n\n  #slider-content {\n    gap: 16px;\n  }\n\n  .slider-image-item.previous {\n    transform: translateX(calc(-95%)) scale(0.75);\n  }\n\n  .slider-image-item.previous-previous {\n    transform: translateX(-200%) scale(0.5);\n  }\n\n  .slider-image-item.next {\n    transform: translateX(95%) scale(0.75);\n  }\n\n  .slider-image-item.next-next {\n    transform: translateX(200%) scale(0.5);\n  }\n\n  #slides-content-container {\n    gap: 16px;\n  }\n\n  #cta-appuntamento-container {\n    font-size: 14px;\n  }\n}\n\n@keyframes slideInFromBottom {\n  0% {\n    opacity: 0;\n    transform: translateY(48px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideInFromLeft {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes slideInFromRight {\n  0% {\n    transform: translateX(48px);\n    opacity: 0;\n  }\n  100% {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes spinIn {\n  0% {\n    opacity: 0.2;\n    transform: scale(0) rotate(200deg);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1) rotate(0);\n  }\n}\n\n@keyframes spinInMobile {\n  0% {\n    opacity: 0;\n    transform: scale(0) rotate(200deg);\n  }\n  100% {\n    opacity: 0.3;\n    transform: scale(1) rotate(0);\n  }\n}\n\n@keyframes popIn {\n  0% {\n    transform: scale(0);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n}\n\n@keyframes bubble1 {\n  0% {\n    transform: translate(100%, 80%);\n  }\n  100% {\n    transform: translate(0, 0);\n  }\n}\n\n@keyframes bubble2 {\n  0% {\n    transform: translate(-30%, 0);\n  }\n  100% {\n    transform: translate(0, 0);\n  }\n}\n\n@keyframes bubble3 {\n  0% {\n    transform: translate(10%, -15%);\n  }\n  100% {\n    transform: translate(0, 0);\n  }\n}\n\n@keyframes fadeOut {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n\n@keyframes slideOut {\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(-48px);\n  }\n}\n\n@keyframes slideOutToBottom {\n  0% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(48px);\n  }\n}\n\n@keyframes slideOutToBottomL {\n  0% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(88px);\n  }\n}\n","import { Component, h, State, Prop, Method, Event, EventEmitter, Fragment } from '@stencil/core';\nimport ChevronIcon from '../../assets/icons/chevron-forward.svg';\nimport ArrowIcon from '../../assets/icons/arrow-forward-outline.svg';\nimport { Breakpoint, ModalState } from '../modal/modal';\n\n@Component({\n  tag: 'app-launch-slider',\n  styleUrl: 'slider.css',\n  shadow: true,\n})\nexport class Slider {\n  @State() currentItem: number = 0;\n  @Prop() slides: { title: string; paragraph: string; imageSrc: string; imageAlt: string }[];\n  @Prop() ctaPrimary: string;\n  @Prop() ctaSecondary: string;\n  @Prop() ctaTertiary: string;\n  @Prop() ctaPrimaryTargetUrl: string;\n  @Prop() ctaSecondaryTargetUrl: string;\n  @Prop() ctaTertiaryTargetUrl: string;\n  @Prop() breakpoint: Breakpoint = Breakpoint.Desktop;\n  @Prop() modalState: ModalState = ModalState.Initial;\n\n  @Prop() qrCodeSrc: string;\n  @Prop() qrCodeCta: string;\n  @Prop() playStoreImageSrc: string;\n  @Prop() playStoreUrl: string;\n  @Prop() appStoreImageSrc: string;\n  @Prop() appStoreUrl: string;\n\n  @Event() animationReady: EventEmitter;\n  @Event({ bubbles: false, composed: false }) slideChanged: EventEmitter<number>;\n  @Event() sliderEnd: EventEmitter;\n  @Event() sliderEndStart: EventEmitter;\n\n  @Event({ bubbles: false, composed: false }) ctaPrimaryClicked: EventEmitter;\n  @Event({ bubbles: false, composed: false }) ctaSecondaryClicked: EventEmitter;\n  @Event({ bubbles: false, composed: false }) ctaTertiaryClicked: EventEmitter;\n  @Event({ bubbles: false, composed: false }) playStoreClicked: EventEmitter;\n  @Event({ bubbles: false, composed: false }) appStoreClicked: EventEmitter;\n\n  @Method() async jumpToLastSlide() {\n    if (this.breakpoint === Breakpoint.Desktop) {\n      this.sliderEndStart.emit();\n    }\n  }\n\n  @Method() async refreshSlider() {\n    this.currentItem = 0;\n  }\n\n  // private runTimedSlider: NodeJS.Timeout;\n  // private isTimerRunning: boolean = false;\n\n  // connectedCallback() {\n  //   // if (this.breakpoint !== Breakpoint.Desktop) {\n  //   //   if (this.runTimedSlider) {\n  //   //     clearInterval(this.runTimedSlider);\n  //   //     this.isTimerRunning = false;\n  //   //   }\n  //   //   setTimeout(() => {\n  //   //     this.runTimedSlider = setInterval(this.timeSlider.bind(this), 2000);\n  //   //   }, 1500);\n  //   //   this.isTimerRunning = true;\n  //   // }\n  // }\n\n  // private timeSlider() {\n  //   if (this.currentItem < this.slides.length - 1) {\n  //     this.currentItem++;\n  //   } else {\n  //     this.currentItem++;\n  //     setTimeout(() => {\n  //       this.currentItem = 0;\n  //     }, 1000);\n  //   }\n  // }\n\n  componentWillRender() {\n    if (this.modalState === ModalState.Initial) {\n      this.animationReady.emit();\n    }\n\n    // if (this.breakpoint === Breakpoint.Desktop && this.runTimedSlider) {\n    //   clearInterval(this.runTimedSlider);\n    //   this.isTimerRunning = false;\n    // }\n    // if (this.breakpoint !== Breakpoint.Desktop && !this.isTimerRunning) {\n    //   this.runTimedSlider = this.runTimedSlider = setInterval(this.timeSlider.bind(this), 2000);\n    //   this.isTimerRunning = true;\n    // }\n  }\n\n  private handleSlideChange(direction) {\n    if (direction > 0 && this.currentItem < this.slides.length - 1) {\n      this.currentItem++;\n      this.slideChanged.emit(this.currentItem);\n    } else if (direction < 0 && this.currentItem > 0) {\n      this.currentItem--;\n      this.slideChanged.emit(this.currentItem);\n    } else if (direction > 0 && this.currentItem === this.slides.length - 1) {\n      if (this.breakpoint === Breakpoint.Desktop) {\n        this.sliderEndStart.emit();\n      }\n    }\n  }\n\n  private handleSlideOut(event) {\n    if (this.modalState === ModalState.SliderFinishing && event.target === event.currentTarget) {\n      this.sliderEnd.emit();\n    }\n  }\n\n  private getSlideClass(slideIndex: number, currentIndex: number) {\n    return `slider-image-item ${\n      slideIndex === currentIndex - 2\n        ? 'previous-previous'\n        : slideIndex === currentIndex - 1\n        ? 'previous'\n        : slideIndex === currentIndex\n        ? 'current'\n        : slideIndex === currentIndex + 1\n        ? 'next'\n        : slideIndex === currentIndex + 2\n        ? 'next-next'\n        : 'hidden'\n    } ${currentIndex === 0 ? 'initial' : ''}`;\n  }\n\n  render() {\n    return (\n      <div\n        id=\"slider-container\"\n        class={`${this.modalState !== ModalState.Initial ? 'animated' : ''} ${this.modalState === ModalState.Refreshed ? 'refreshed' : ''} ${\n          this.modalState === ModalState.SliderFinished || this.modalState === ModalState.SliderFinishing || this.modalState === ModalState.Refreshing ? 'ended' : ''\n        }`}\n      >\n        <button\n          class=\"icon-button previous\"\n          disabled={this.currentItem <= 0 || (this.modalState !== ModalState.Started && this.modalState !== ModalState.Refreshed)}\n          onClick={this.handleSlideChange.bind(this, -1)}\n        >\n          <i class=\"icon\" innerHTML={ChevronIcon}></i>\n        </button>\n        <div id=\"slider-content\">\n          <div id=\"slider-texts\">\n            <div class=\"fill-container\"></div>\n            {this.modalState !== ModalState.SliderFinished && this.modalState !== ModalState.Refreshing ? (\n              <div id=\"slides-content-container\" onAnimationEnd={this.handleSlideOut.bind(this)}>\n                <div class=\"slider-text-items-container\" style={{ transform: `translateX(calc(${-100 * this.currentItem}% - ${8 * this.currentItem}px))` }}>\n                  {this.slides.map((slide, index) => {\n                    return (\n                      <div class={`slider-text-item ${this.currentItem === index ? 'current' : ''}`}>\n                        <h3 class=\"slide-title\">{slide.title}</h3>\n                        <p class=\"slide-paragraph\">{slide.paragraph}</p>\n                      </div>\n                    );\n                  })}\n                </div>\n                {this.breakpoint === Breakpoint.Desktop && (\n                  <Fragment>\n                    <div id=\"buttons-container\">\n                      <app-launch-button\n                        label={this.ctaPrimary}\n                        variant=\"filled\"\n                        id=\"button-primary\"\n                        isLink={this.breakpoint !== Breakpoint.Desktop}\n                        href={this.breakpoint !== Breakpoint.Desktop && this.ctaPrimaryTargetUrl}\n                        targetBlank\n                        onClick={() => {\n                          this.ctaPrimaryClicked.emit();\n                          this.jumpToLastSlide();\n                        }}\n                      ></app-launch-button>\n                      <app-launch-button\n                        label={this.ctaSecondary}\n                        variant=\"ghost\"\n                        id=\"button-secondary\"\n                        isLink\n                        href={this.ctaSecondaryTargetUrl}\n                        targetBlank\n                        onClick={() => {\n                          this.ctaSecondaryClicked.emit();\n                        }}\n                      ></app-launch-button>\n                    </div>\n                    <div id=\"cta-appuntamento-container\" key=\"cta-appuntamento-1\">\n                      <p id=\"cta-appuntamento\">Non sei ancora nostro Cliente?</p>{' '}\n                      <app-launch-text-button\n                        label={this.ctaTertiary}\n                        iconDx={ArrowIcon}\n                        isLink\n                        href={this.ctaTertiaryTargetUrl}\n                        targetBlank\n                        onClick={() => {\n                          this.ctaTertiaryClicked.emit();\n                        }}\n                      ></app-launch-text-button>\n                    </div>\n                  </Fragment>\n                )}\n              </div>\n            ) : (\n              <div id=\"last-slide-container\" class={this.modalState === ModalState.Refreshing ? 'refreshing' : ''}>\n                <h3 class=\"last-slide-title\">{this.qrCodeCta}</h3>\n                <div id=\"app-links\">\n                  <app-launch-store-button\n                    href={this.playStoreUrl}\n                    imageSrc={this.playStoreImageSrc}\n                    onClick={() => {\n                      this.playStoreClicked.emit();\n                    }}\n                  ></app-launch-store-button>\n                  <app-launch-store-button\n                    href={this.appStoreUrl}\n                    imageSrc={this.appStoreImageSrc}\n                    onClick={() => {\n                      this.appStoreClicked.emit();\n                    }}\n                  ></app-launch-store-button>\n                </div>\n                <div id=\"cta-appuntamento-container\" key=\"cta-appuntamento-2\">\n                  <p id=\"cta-appuntamento\">Non sei ancora nostro Cliente?</p>{' '}\n                  <app-launch-text-button\n                    label={this.ctaTertiary}\n                    iconDx={ArrowIcon}\n                    isLink\n                    href={this.ctaTertiaryTargetUrl}\n                    targetBlank\n                    onClick={() => {\n                      this.ctaTertiaryClicked.emit();\n                    }}\n                  ></app-launch-text-button>\n                </div>\n              </div>\n            )}\n          </div>\n          <div id=\"slider-images\">\n            <div id=\"slider-images-background\" class={this.modalState === ModalState.Refreshing ? 'refreshing' : ''}>\n              <div id=\"background-bubble-1\"></div>\n              <div id=\"background-bubble-2\"></div>\n              <div id=\"background-bubble-3\"></div>\n            </div>\n            {this.modalState !== ModalState.SliderFinished && this.modalState !== ModalState.Refreshing ? (\n              <div id=\"slider-image-items-container\">\n                {this.slides.map((slide, index) => {\n                  return (\n                    <div class={`slider-image-item ${this.getSlideClass(index, this.currentItem)}`}>\n                      <img class=\"slider-image\" src={slide.imageSrc} alt={slide.imageAlt ? slide.imageAlt : ''} />\n                    </div>\n                  );\n                })}\n              </div>\n            ) : (\n              <div id=\"qr-code-wrapper\">\n                <div class=\"fill-container\"></div>\n                <div id=\"qr-code-container\" class={this.modalState === ModalState.Refreshing ? 'refreshing' : ''}>\n                  <img src={this.qrCodeSrc} alt=\"codice QR per il download dell'app\"></img>\n                </div>\n              </div>\n            )}\n          </div>\n          {this.breakpoint !== Breakpoint.Desktop && (\n            <Fragment>\n              <div id=\"pagination\">\n                {this.slides.map((item, index) => {\n                  return (\n                    <div\n                      class={`pagination-dot ${this.currentItem === index ? 'active' : ''}`}\n                      key={`pagination-dot-${item.title}`}\n                      onClick={() => {\n                        this.currentItem = index;\n                      }}\n                    ></div>\n                  );\n                })}\n              </div>\n              <div id=\"cta-appuntamento-container\" key=\"cta-appuntamento-2\">\n                <span id=\"cta-appuntamento\">Non sei ancora nostro Cliente?</span>{' '}\n                <a\n                  class=\"link\"\n                  href={this.ctaTertiaryTargetUrl}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                  onClick={() => {\n                    this.ctaTertiaryClicked.emit();\n                  }}\n                >\n                  {this.ctaTertiary}\n                </a>\n              </div>\n            </Fragment>\n          )}\n        </div>\n        <button\n          class=\"icon-button next\"\n          disabled={\n            (this.modalState !== ModalState.Started && this.modalState !== ModalState.Refreshed) ||\n            (this.breakpoint !== Breakpoint.Desktop && this.currentItem >= this.slides.length - 1)\n          }\n          onClick={this.handleSlideChange.bind(this, 1)}\n        >\n          <i class=\"icon\" innerHTML={ChevronIcon}></i>\n        </button>\n      </div>\n    );\n  }\n}\n",":host,\n:host *,\n:host *::after,\n:host *::before {\n  box-sizing: border-box;\n}\n\n#app-link {\n  display: flex;\n  height: 48px;\n  padding: 4px 0;\n  cursor: pointer;\n  position: relative;\n}\n\n#app-link::after {\n  content: '';\n  display: block;\n  position: absolute;\n  top: 4px;\n  right: 0;\n  bottom: 4px;\n  left: 0;\n  border-radius: 4px;\n  background: var(--grid-content-primary);\n  opacity: 0;\n  transition: opacity var(--duration-medium-1) var(--curve-expressive-ease-in-out);\n}\n\n#app-link:hover::after {\n  opacity: 0.05;\n  transition: opacity var(--duration-fast) var(--curve-simple-ease-out);\n}\n\n#app-link img {\n  max-height: 100%;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'app-launch-store-button',\n  styleUrl: 'app-store-button.css',\n  shadow: true,\n})\nexport class AppStoreButton {\n  @Prop() href: string;\n  @Prop() imageSrc: string;\n\n  render() {\n    return (\n      <a id=\"app-link\" href={this.href} target=\"_blank\" rel=\"noreferrer noopener\">\n        <img src={this.imageSrc} />\n      </a>\n    );\n  }\n}\n",":host,\n:host *,\n:host *::after,\n:host *::before {\n  box-sizing: border-box;\n}\n\n#button {\n  min-height: 48px;\n  padding: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: none;\n  cursor: pointer;\n  position: relative;\n}\n\n#button:hover #label,\n#button:hover ::slotted(*) {\n  color: var(--grid-action-text-button-primary-hover) !important;\n}\n\n::slotted(a)::before {\n  content: '';\n  display: block;\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n}\n\n#label {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n#label,\n::slotted(*) {\n  color: var(--grid-action-text-button-primary) !important;\n  font: var(--text-link-underline) !important;\n  text-decoration: underline;\n}\n\n.icon {\n  width: 24px;\n  height: 24px;\n  display: block;\n}\n\n.icon svg {\n  width: 24px;\n  height: 24px;\n}\n\n.icon svg * {\n  fill: var(--grid-action-text-button-primary);\n}\n\n#button:hover .icon svg * {\n  fill: var(--grid-action-text-button-primary-hover);\n}\n","import { Component, Fragment, h, Prop, Element } from '@stencil/core';\nimport { setAttributesToSlottedElement } from '../../../utils/utils';\n\n@Component({\n  tag: 'app-launch-text-button',\n  styleUrl: 'text-button.css',\n  shadow: true,\n})\nexport class TextButton {\n  @Prop() label: string;\n  @Prop() isLink?: boolean;\n  @Prop() href?: string;\n  @Prop() iconDx?: string;\n  @Prop() iconSx?: string;\n  @Prop() targetBlank?: boolean;\n\n  @Element() hostElement: HTMLElement;\n\n  componentDidLoad() {\n    if (this.isLink && this.targetBlank) {\n      this.setTargetBlankToSlottedAnchor();\n    }\n  }\n\n  private setTargetBlankToSlottedAnchor() {\n    setAttributesToSlottedElement({\n      hostElement: this.hostElement,\n      slottedElementTag: 'a',\n      attributes: [\n        { name: 'target', value: '_blank' },\n        { name: 'rel', value: 'noreferrer noopener' },\n      ],\n    });\n  }\n\n  render() {\n    return (\n      <Fragment>\n        {this.isLink ? (\n          this.href ? (\n            <a href={this.href} id=\"button\" target={this.targetBlank ? '_blank' : '_self'} rel={this.targetBlank ? 'noreferrer noopener' : ''}>\n              <span id=\"label\">\n                {this.iconSx && <i class=\"icon\" innerHTML={this.iconSx}></i>}\n                {this.label}\n                {this.iconDx && <i class=\"icon\" innerHTML={this.iconDx}></i>}\n              </span>\n            </a>\n          ) : (\n            <div id=\"button\">\n              <div id=\"label\">\n                {this.iconSx && <i class=\"icon\" innerHTML={this.iconSx}></i>}\n                {this.label ? this.label : <slot></slot>}\n                {this.iconDx && <i class=\"icon\" innerHTML={this.iconDx}></i>}\n              </div>\n            </div>\n          )\n        ) : (\n          <button id=\"button\">\n            <div id=\"label\">\n              {this.iconSx && <i class=\"icon\" innerHTML={this.iconSx}></i>}\n              {this.label ? this.label : <slot></slot>}\n              {this.iconDx && <i class=\"icon\" innerHTML={this.iconDx}></i>}\n            </div>\n          </button>\n        )}\n      </Fragment>\n    );\n  }\n}\n"],"mappings":"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"}