@roadtrip/components 3.18.0 → 3.19.0

package/dist/roadtrip/p-233eb25c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["modalCss","Modal","this","onClick","ev","stopPropagation","preventDefault","close","open","isOpen","el","addEventListener","onClose","emit","once","onEscape","event","key","componentDidLoad","querySelectorAll","forEach","item","render","modalIsOpenClass","inverseHeaderClass","hasInverseHeader","closeIconElement","hasCloseIcon","h","type","class","icon","navigationClose","Host","tabindex","role","style","maxWidth","modalTitle"],"sources":["src/components/modal/modal.css?tag=road-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/*\n * Modal\n *\n * Index\n * - Overlay\n * - Modal\n * - Content\n * - Header\n * - Actions\n * - Title\n * - Body\n */\n\n/**\n * @prop --z-index: The z-index of the Modal.\n */\n\n\n/* OVERLAY\n -------------------- */\n\n:host {\n  --z-index: 3;\n\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--z-index);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  font-family: var(--road-font, sans-serif);\n  line-height: 1.5;\n  color: var(--road-grey-900);\n  visibility: hidden !important;\n  opacity: 0;\n  transition: opacity 0.15s linear, visibility 0.15s;\n}\n\n/* OVERLAY\n -------------------- */\n\n.modal-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: block;\n  touch-action: none;\n  cursor: pointer;\n  background: var(--road-overlay);\n}\n\n/* MODAL\n -------------------- */\n\n.modal-dialog {\n  position: relative;\n  width: 100%;\n  pointer-events: none;\n  transition: transform 0.3s ease-out;\n  transform: translateY(50px);\n}\n\n/**\n * Open state\n */\n\n:host(.modal-open) {\n  visibility: visible !important;\n  opacity: 1;\n}\n\n:host(.modal-open) .modal-dialog {\n  transform: none;\n}\n\n/* CONTENT\n -------------------- */\n\n.modal-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100vh;\n  pointer-events: auto;\n  background: var(--road-surface);\n  background-clip: padding-box;\n  box-shadow: var(--road-elevation-hight);\n}\n\n@media (min-width: 768px) {\n\n  .modal-content {\n    height: auto;\n    border-radius: 0.25rem;\n  }\n}\n\n/* HEADER\n -------------------- */\n\n.modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  color: var(--road-on-header-surface);\n  background: var(--road-header-surface);\n}\n\n.modal-header road-icon {\n  color: var(--road-header-icon);\n}\n\n@media (min-width: 768px) {\n\n  .modal-header {\n    border-radius: 0.25rem 0.25rem 0 0;\n  }\n}\n\n/**\n * Modal header inverse colors\n */\n\n.modal-header-inverse {\n  color: var(--road-on-surface);\n  background: none;\n}\n\n.modal-header-inverse road-icon {\n  color: var(--road-icon);\n}\n\n/* ACTIONS\n -------------------- */\n\n.modal-action,\n.modal-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3.5rem;\n  height: 3.5rem;\n  padding: 0;\n  font-weight: 700;\n  color: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: 0;\n  appearance: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.modal-action ~ .modal-title,\n.modal-close ~ .modal-title {\n  padding-left: 0;\n}\n\n.modal-action-left,\n.modal-close-left {\n  margin-right: auto;\n}\n\n/* TITLE\n -------------------- */\n\n.modal-title {\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  height: 3.5rem;\n  padding-left: 3.5rem;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  font-weight: 400;\n}\n\n/* BODY\n -------------------- */\n\n.modal-body {\n  padding: 2.5rem 0.5rem;\n  overflow-y: auto;\n}\n\n.modal-header-inverse + .modal-body {\n  padding-top: 0;\n}\n\n@media (min-width: 768px) {\n\n  .modal-body {\n    max-height: 86vh;\n    padding-right: var(--road-spacing-06);\n    padding-left: var(--road-spacing-06);\n  }\n}\n","import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host } from '@stencil/core';\nimport { navigationClose } from '../../../icons';\n\n/**\n * @slot  - Content of the modal.\n */\n\n@Component({\n  tag: 'road-modal',\n  styleUrl: 'modal.css',\n  shadow: true,\n})\nexport class Modal {\n\n  /**\n   * Current reference of the modal\n   */\n  @Element() el!: HTMLRoadModalElement;\n\n  /**\n   * Max width of the modal on desktop\n   */\n  @Prop() maxWidth: number = 696;\n\n  /**\n   * Set isOpen propertie to true to show the modal\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * inverse header colors\n   */\n  @Prop() hasInverseHeader: boolean = false;\n\n  /**\n   * Title of the modal in the header bar\n   */\n  @Prop() modalTitle?: string;\n\n  /**\n   * Show / hide close icon\n   */\n  @Prop() hasCloseIcon: boolean = true;\n\n  /**\n   * Indicate when closing the modal\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Open the modal\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the modal\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n    this.el.addEventListener('transitionend', () => {\n      this.onClose.emit();\n    }, { once: true});\n  }\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  /**\n   * Close the dialog when press Escape key\n   */\n  @Listen('keyup', { target: 'document' })\n  onEscape(event: KeyboardEvent) {\n    if (event.key === 'Escape' || event.key === \"Esc\") {\n      this.close();\n    }\n  }\n\n  /**\n   * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n   */\n  componentDidLoad() {\n    this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n      item.addEventListener('click', () => this.close());\n    });\n  }\n\n  render() {\n    const modalIsOpenClass = this.isOpen ? 'modal-open' : '';\n    const inverseHeaderClass = this.hasInverseHeader ? 'modal-header-inverse' : '';\n    const closeIconElement = this.hasCloseIcon ? <button type=\"button\" class=\"modal-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button> : '';\n\n    return (\n      <Host class={`modal ${modalIsOpenClass}`} tabindex=\"-1\" role=\"dialog\" aria-label=\"modal\">\n        <div class=\"modal-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n        <div class=\"modal-dialog\" style={{ maxWidth: `${this.maxWidth}px` }} role=\"document\" tabindex=\"0\">\n          <div class=\"modal-content\">\n            <header class={`modal-header ${inverseHeaderClass}`}>\n              <h2 class=\"modal-title\">{this.modalTitle}</h2>\n              {closeIconElement}\n            </header>\n            <div class=\"modal-body\">\n              <slot/>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"],"mappings":"oGAAA,MAAMA,EAAW,qpE,MCYJC,EAAK,M,wDA2DRC,KAAAC,QAAWC,IACjBA,EAAGC,kBACHD,EAAGE,iBAEHJ,KAAKK,OAAO,E,cArDa,I,YAKgB,M,sBAKP,M,4CAUJ,I,CAWhC,UAAMC,GACJN,KAAKO,OAAS,I,CAOhB,WAAMF,GACJL,KAAKO,OAAS,MACdP,KAAKQ,GAAGC,iBAAiB,iBAAiB,KACxCT,KAAKU,QAAQC,MAAM,GAClB,CAAEC,KAAM,M,CAiBb,QAAAC,CAASC,GACP,GAAIA,EAAMC,MAAQ,UAAYD,EAAMC,MAAQ,MAAO,CACjDf,KAAKK,O,EAOT,gBAAAW,GACEhB,KAAKQ,GAAGS,iBAAiB,0BAA0BC,SAAQC,IACzDA,EAAKV,iBAAiB,SAAS,IAAMT,KAAKK,SAAQ,G,CAItD,MAAAe,GACE,MAAMC,EAAmBrB,KAAKO,OAAS,aAAe,GACtD,MAAMe,EAAqBtB,KAAKuB,iBAAmB,uBAAyB,GAC5E,MAAMC,EAAmBxB,KAAKyB,aAAeC,EAAA,UAAQC,KAAK,SAASC,MAAM,cAAc3B,QAASD,KAAKC,QAAO,aAAa,SAAQyB,EAAA,aAAWG,KAAMC,EAAe,cAAc,UAA+B,GAE9M,OACEJ,EAACK,EAAI,CAACH,MAAO,SAASP,IAAoBW,SAAS,KAAKC,KAAK,SAAQ,aAAY,SAC/EP,EAAA,OAAKE,MAAM,gBAAgB3B,QAASD,KAAKC,QAAS+B,SAAS,OAC3DN,EAAA,OAAKE,MAAM,eAAeM,MAAO,CAAEC,SAAU,GAAGnC,KAAKmC,cAAgBF,KAAK,WAAWD,SAAS,KAC5FN,EAAA,OAAKE,MAAM,iBACTF,EAAA,UAAQE,MAAO,gBAAgBN,KAC7BI,EAAA,MAAIE,MAAM,eAAe5B,KAAKoC,YAC7BZ,GAEHE,EAAA,OAAKE,MAAM,cACTF,EAAA,gB"}