@roadtrip/components 3.17.0 → 3.18.0

package/dist/roadtrip/p-5203acea.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["profilDropdownCss","Dropdown","this","onClick","isOpen","handleDocumentClick","ev","target","closest","el","render","h","class","open","tabindex","role","name","size"],"sources":["src/components/profil-dropdown/profil-dropdown.css?tag=road-profil-dropdown&encapsulation=shadow","src/components/profil-dropdown/profil-dropdown.tsx"],"sourcesContent":["/*\n * Profil Dropdown\n *\n * Index\n * - Dropdown\n * - Dropdown menu\n */\n\n/**\n * @prop --margin-top: Top margin of the menu\n */\n\n/* PROFIL DROPDOWN\n -------------------- */\n\n:host {\n  --margin-top: 0.5rem;\n  display: block;\n  font-size: var(--road-font-size-16);\n}\n\n.dropdown {\n  position: relative;\n  width: max-content;\n  font-family: var(--road-font);\n}\n\n.dropdown summary {\n  display: block;\n  width: 3.5rem;\n  cursor: pointer;\n  border-radius: 3rem;\n  outline: none;\n}\n\n.dropdown summary:focus,\n.dropdown summary.focus-visible,\n.dropdown summary:focus-within{\n  box-shadow: 0 0 0 4px var(--road-primary-80);\n}\n\n.dropdown summary::-webkit-details-marker { /* remove native arrow */\n  display: none;\n}\n\n.dropdown-button{\n  position: relative;\n  z-index: 1;\n  height: 3.5rem;\n  cursor: pointer;\n  border-radius: 0.25rem;\n}\n\n.dropdown-button:hover{\n  background: var(--road-grey-200);\n}\n\n/**\n * Open state\n */\n\n.dropdown[open] .dropdown-menu {\n  transform: scaleY(1);\n}\n\n.dropdown[open] .dropdown-menu.direction-top {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  transform: translate3d(0, -56px, 0);\n  will-change: transform;\n}\n\n/* MENU\n-------------------- */\n\n.dropdown-menu {\n  position: absolute;\n  top: 0;\n  left: 5.5rem;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  min-width: 16.875rem;\n  padding: 0.5rem 0;\n  color: var(--road-on-surface);\n  background: var(--road-surface);\n  border: 1px solid;\n  border-color: var(--road-outline-weak);\n  border-radius: 0.25rem;\n  box-shadow: var(--road-elevation-low);\n  transition: transform 0.2s ease-in-out;\n  transform: scaleY(0);\n  transform-origin: 0 0;\n}\n\n/* ITEM\n -------------------- */\n\nroad-item {\n  font-size: var(--road-button-medium);\n}\n\n.profil-item {\n  display: flex;\n  padding-bottom: 1rem;\n  margin: 1rem;\n  cursor: auto;\n  border-bottom: 1px solid var(--road-outline);\n}\n\n.profil-item-info {\n  display: flex;\n  flex-direction: column;\n  margin-left: 1rem;\n  text-align: left;\n}\n\n.profil-item-info-name {\n  font-weight: 700;\n}\n\n\n.profil-item road-avatar:hover{\n  box-shadow: none;\n}\n\n.dropdown-item {\n  display: flex;\n  align-items: center;\n  min-height: 40px;\n  padding: 0 1rem;\n  font-size: var(--road-button-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  background: var(--road-surface);\n  border: none;\n  outline: none;\n}\n\n.dropdown-item-border {\n  border-color: var(--road-outline);\n  border-bottom: 1px solid;\n}\n\n.dropdown-item road-icon{\n  margin-right: 0.7rem;\n}\n\n/**\n * Hover state\n */\n\nroad-item:hover:first-child,\nroad-item.focus-visible:first-child {\n  background: none;\n}\n\nroad-item:hover,\nroad-item.focus-visible {\n  background: var(--road-surface-inverse);\n}\n","import { Component, h, Prop, Element, Listen } from '@stencil/core';\n\n/**\n * @slot  - Element how will open the dropdown when clicked\n * @slot list - List of item values (you can add border with lines=`full` but not on the last item)\n * @slot avatar - Content of the avatar (img or First letter) <road-img> or <road-label>.\n * @slot avatarItem - Content of the avatar item (img or First letter) <road-img> or <road-label>.\n * @slot name - Content First and Last Name.\n * @slot email - Content email.\n\n\n */\n\n@Component({\n  tag: 'road-profil-dropdown',\n  styleUrl: 'profil-dropdown.css',\n  shadow: true,\n})\nexport class Dropdown {\n\n  @Element() el!: HTMLRoadProfilDropdownElement;\n\n  /**\n   * Set to `true` to open the dropdown menu and to `false` to close it.\n   */\n  @Prop({ mutable: true }) isOpen : boolean = false;\n\n  /**\n   * Toggle the display when clicking element in slot\n   */\n  private onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(ev: MouseEvent) {\n    // Check if the clicked element is the dropdown button\n    if ((ev.target as HTMLElement).closest('road-profil-dropdown') === this.el) {\n      return; // Do nothing if clicked element is the dropdown button\n    }\n    // Close dropdown if click is outside the dropdown\n    this.isOpen = false;\n  }\n\n  render() {\n\n    return (\n      <details class=\"dropdown\" open={this.isOpen}>\n        <summary aria-expanded={`${this.isOpen}`} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n          <div class={`d-flex`}>\n            <div>\n              <road-avatar>\n                <slot name=\"avatar\"/>\n              </road-avatar>\n            </div>\n          </div>\n        </summary>\n        <div class={`dropdown-menu`}>\n          <div class=\"profil-item\">\n            <road-avatar size=\"sm\">\n              <slot name=\"avatarItem\"/>\n            </road-avatar>\n            <div class=\"profil-item-info\">\n              <span class=\"profil-item-info-name\">\n                <slot name=\"name\"/>\n              </span>\n              <road-label>\n                <slot name=\"email\"/>\n              </road-label>\n            </div>\n          </div>\n          <slot name=\"list\"/>\n        </div>\n      </details>\n    );\n  }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAoB,q/D,MCkBbC,EAAQ,M,yBAYXC,KAAAC,QAAU,KAChBD,KAAKE,QAAUF,KAAKE,MAAM,E,YANgB,K,CAU5C,mBAAAC,CAAoBC,GAElB,GAAKA,EAAGC,OAAuBC,QAAQ,0BAA4BN,KAAKO,GAAI,CAC1E,M,CAGFP,KAAKE,OAAS,K,CAGhB,MAAAM,GAEE,OACEC,EAAA,WAASC,MAAM,WAAWC,KAAMX,KAAKE,QACnCO,EAAA,2BAAwB,GAAGT,KAAKE,SAAUU,SAAS,IAAIC,KAAK,SAASZ,QAASD,KAAKC,SACjFQ,EAAA,OAAKC,MAAO,UACVD,EAAA,WACEA,EAAA,mBACEA,EAAA,QAAMK,KAAK,eAKnBL,EAAA,OAAKC,MAAO,iBACVD,EAAA,OAAKC,MAAM,eACTD,EAAA,eAAaM,KAAK,MAChBN,EAAA,QAAMK,KAAK,gBAEbL,EAAA,OAAKC,MAAM,oBACTD,EAAA,QAAMC,MAAM,yBACVD,EAAA,QAAMK,KAAK,UAEbL,EAAA,kBACEA,EAAA,QAAMK,KAAK,aAIjBL,EAAA,QAAMK,KAAK,U"}

package/dist/roadtrip/{p-a73ef7de.entry.js → p-61d87e64.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,c as e,h as a,H as t,a as i}from"./p-f3d586b3.js";import{a as r}from"./p-73fe2357.js";const d=":host{--z-index:3;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-grey-900);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.modal-dialog{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateY(50px)}:host(.modal-open){visibility:visible !important;opacity:1}:host(.modal-open) .modal-dialog{transform:none}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background:var(--road-surface);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}@media (min-width: 768px){.modal-content{height:auto;border-radius:0.25rem}}.modal-header{display:flex;align-items:center;justify-content:flex-end;color:var(--road-on-header-surface);background:var(--road-header-surface)}.modal-header road-icon{color:var(--road-header-icon)}@media (min-width: 768px){.modal-header{border-radius:0.25rem 0.25rem 0 0}}.modal-header-inverse{color:var(--road-on-surface);background:none}.modal-header-inverse road-icon{color:var(--road-icon)}.modal-action,.modal-close{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;padding:0;font-weight:700;color:inherit;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.modal-action~.modal-title,.modal-close~.modal-title{padding-left:0}.modal-action-left,.modal-close-left{margin-right:auto}.modal-title{display:flex;flex-grow:1;align-items:center;justify-content:center;height:3.5rem;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium);font-weight:400}.modal-body{padding:2.5rem 0.5rem;overflow-y:auto}.modal-header-inverse+.modal-body{padding-top:0}@media (min-width: 768px){.modal-body{max-height:86vh;padding-right:5rem;padding-left:5rem}}";const n=class{constructor(a){o(this,a);this.onClose=e(this,"close",7);this.onClick=o=>{o.stopPropagation();o.preventDefault();this.close()};this.maxWidth=696;this.isOpen=false;this.hasInverseHeader=false;this.modalTitle=undefined;this.hasCloseIcon=true}async open(){this.isOpen=true}async close(){this.isOpen=false;this.el.addEventListener("transitionend",(()=>{this.onClose.emit()}),{once:true})}onEscape(o){if(o.key==="Escape"||o.key==="Esc"){this.close()}}componentDidLoad(){this.el.querySelectorAll('[data-dismiss="modal"]').forEach((o=>{o.addEventListener("click",(()=>this.close()))}))}render(){const o=this.isOpen?"modal-open":"";const e=this.hasInverseHeader?"modal-header-inverse":"";const i=this.hasCloseIcon?a("button",{type:"button",class:"modal-close",onClick:this.onClick,"aria-label":"Close"},a("road-icon",{icon:r,"aria-hidden":"true"})):"";return a(t,{class:`modal ${o}`,tabindex:"-1",role:"dialog"},a("div",{class:"modal-overlay",onClick:this.onClick,tabindex:"-1"}),a("div",{class:"modal-dialog",style:{maxWidth:`${this.maxWidth}px`},role:"document",tabindex:"0"},a("div",{class:"modal-content"},a("header",{class:`modal-header ${e}`},a("h2",{class:"modal-title"},this.modalTitle),i),a("div",{class:"modal-body"},a("slot",null)))))}get el(){return i(this)}};n.style=d;export{n as road_modal};
-//# sourceMappingURL=p-a73ef7de.entry.js.map
+import{r as o,c as a,h as e,H as i,a as t}from"./p-f3d586b3.js";import{a as r}from"./p-ac7a8bca.js";const d=":host{--z-index:3;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-grey-900);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.modal-dialog{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateY(50px)}:host(.modal-open){visibility:visible !important;opacity:1}:host(.modal-open) .modal-dialog{transform:none}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background:var(--road-surface);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}@media (min-width: 768px){.modal-content{height:auto;border-radius:0.25rem}}.modal-header{display:flex;align-items:center;justify-content:flex-end;color:var(--road-on-header-surface);background:var(--road-header-surface)}.modal-header road-icon{color:var(--road-header-icon)}@media (min-width: 768px){.modal-header{border-radius:0.25rem 0.25rem 0 0}}.modal-header-inverse{color:var(--road-on-surface);background:none}.modal-header-inverse road-icon{color:var(--road-icon)}.modal-action,.modal-close{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;padding:0;font-weight:700;color:inherit;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.modal-action~.modal-title,.modal-close~.modal-title{padding-left:0}.modal-action-left,.modal-close-left{margin-right:auto}.modal-title{display:flex;flex-grow:1;align-items:center;justify-content:center;height:3.5rem;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium);font-weight:400}.modal-body{padding:2.5rem 0.5rem;overflow-y:auto}.modal-header-inverse+.modal-body{padding-top:0}@media (min-width: 768px){.modal-body{max-height:86vh;padding-right:5rem;padding-left:5rem}}";const n=class{constructor(e){o(this,e);this.onClose=a(this,"close",7);this.onClick=o=>{o.stopPropagation();o.preventDefault();this.close()};this.maxWidth=696;this.isOpen=false;this.hasInverseHeader=false;this.modalTitle=undefined;this.hasCloseIcon=true}async open(){this.isOpen=true}async close(){this.isOpen=false;this.el.addEventListener("transitionend",(()=>{this.onClose.emit()}),{once:true})}onEscape(o){if(o.key==="Escape"||o.key==="Esc"){this.close()}}componentDidLoad(){this.el.querySelectorAll('[data-dismiss="modal"]').forEach((o=>{o.addEventListener("click",(()=>this.close()))}))}render(){const o=this.isOpen?"modal-open":"";const a=this.hasInverseHeader?"modal-header-inverse":"";const t=this.hasCloseIcon?e("button",{type:"button",class:"modal-close",onClick:this.onClick,"aria-label":"Close"},e("road-icon",{icon:r,"aria-hidden":"true"})):"";return e(i,{class:`modal ${o}`,tabindex:"-1",role:"dialog","aria-label":"modal"},e("div",{class:"modal-overlay",onClick:this.onClick,tabindex:"-1"}),e("div",{class:"modal-dialog",style:{maxWidth:`${this.maxWidth}px`},role:"document",tabindex:"0"},e("div",{class:"modal-content"},e("header",{class:`modal-header ${a}`},e("h2",{class:"modal-title"},this.modalTitle),t),e("div",{class:"modal-body"},e("slot",null)))))}get el(){return t(this)}};n.style=d;export{n as road_modal};
+//# sourceMappingURL=p-61d87e64.entry.js.map

package/dist/roadtrip/{p-a73ef7de.entry.js.map → p-61d87e64.entry.js.map}

@@ -1 +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: 5rem;\n    padding-left: 5rem;\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\">\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,inE,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,UAC3DP,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"}
+{"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: 5rem;\n    padding-left: 5rem;\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,inE,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"}

package/dist/roadtrip/p-6ad5091d.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as o,h as i,H as n,a as e}from"./p-f3d586b3.js";import"./p-1ccae339.js";const r=":host{position:fixed;right:1rem;bottom:1rem;z-index:2;box-sizing:border-box;display:block;align-items:center;max-width:3.5rem;height:3.5rem;padding:0.6rem 0.75rem 0.75rem;overflow:hidden;font-family:var(--road-font, sans-serif);font-size:var(--road-button-medium);font-weight:700;line-height:1.375;color:var(--road-on-button-fab);text-decoration:none;white-space:nowrap;background:var(--road-button-fab);border:1px solid transparent;border-radius:2rem;box-shadow:var(--road-elevation-average);transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(.position-left){right:auto;left:1rem}:host(.position-center){right:0;left:0;margin:0 auto}:host(.scroll-up){display:block;max-width:3.5rem}:host(.position-center.scroll-up){display:flex;max-width:max-content}:host(.scroll-down) .button-native{display:flex}:host(.position-center.scroll-down) .button-native{display:flex}:host(.position-center) .button-native{display:flex}:host(.scroll-down){display:flex;max-width:max-content}:host ::slotted(road-icon){margin-right:0.5rem;color:var(--road-on-button-secondary)}:host(:hover){background-color:var(--road-button-fab-variant)}.button-native{position:relative;z-index:1;align-items:center;justify-content:center;width:100%;height:100%;padding:0;margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border:none;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host([aria-disabled]){pointer-events:none;opacity:0.16}.button-native:disabled{cursor:not-allowed}";const s=class{constructor(i){t(this,i);this.roadfocus=o(this,"roadfocus",7);this.roadFocus=o(this,"roadFocus",7);this.roadblur=o(this,"roadblur",7);this.roadBlur=o(this,"roadBlur",7);this.onClick=t=>{if(this.el.shadowRoot&&this.el.attachShadow){const o=this.el.closest("form");if(o){t.preventDefault();const i=document.createElement("button");i.style.display="none";o.appendChild(i);i.click();i.remove()}}};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.onBlur=()=>{this.roadblur.emit();this.roadBlur.emit()};this.position="right";this.href=undefined;this.rel=undefined;this.target=undefined}onScroll(){const t=window.scrollY;if(t<300){this.el.classList.add("scroll-down");this.el.classList.remove("scroll-up")}if(t>300){this.el.classList.add("scroll-up");this.el.classList.remove("scroll-down")}}render(){const t=this.href===undefined?"button":"a";const o=this.position!==undefined?`position-${this.position}`:"";return i(n,{onClick:this.onClick,class:`${o}`},i(t,{class:"button-native",part:"native",onFocus:this.onFocus,onBlur:this.onBlur},i("slot",{name:"start"}),i("slot",null)))}get el(){return e(this)}};s.style=r;export{s as road_button_floating};
+//# sourceMappingURL=p-6ad5091d.entry.js.map

package/dist/roadtrip/p-6ad5091d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["buttonFloatingCss","Button","this","onClick","ev","el","shadowRoot","attachShadow","form","closest","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","onFocus","roadfocus","emit","roadFocus","onBlur","roadblur","roadBlur","onScroll","positionScroll","window","scrollY","classList","add","render","TagType","href","undefined","positionClass","position","h","Host","class","part","name"],"sources":["src/components/button-floating/button-floating.css?tag=road-button-floating&encapsulation=shadow","src/components/button-floating/button-floating.tsx"],"sourcesContent":["/*\n * Button floating\n *\n *\n * Index\n * - Button\n */\n\n\n/* BUTTON\n -------------------- */\n\n:host {\n  position: fixed;\n  right: 1rem;\n  bottom: 1rem;\n  z-index: 2;\n  box-sizing: border-box;\n  display: block;\n  align-items: center;\n  max-width: 3.5rem;\n  height: 3.5rem;\n  padding: 0.6rem 0.75rem 0.75rem;\n  overflow: hidden;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-button-medium);\n  font-weight: 700;\n  line-height: 1.375;\n  color: var(--road-on-button-fab);\n  text-decoration: none;\n  white-space: nowrap;\n  background: var(--road-button-fab);\n  border: 1px solid transparent;\n  border-radius: 2rem;\n  box-shadow: var(--road-elevation-average);\n  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n:host(.position-left) {\n  right: auto;\n  left: 1rem;\n}\n\n:host(.position-center) {\n  right: 0;\n  left: 0;\n  margin: 0 auto;\n}\n\n:host(.scroll-up) {\n  display: block;\n  max-width: 3.5rem;\n}\n\n:host(.position-center.scroll-up) {\n  display: flex;\n  max-width: max-content;\n}\n\n\n:host(.scroll-down) .button-native{\n  display: flex;\n}\n\n:host(.position-center.scroll-down) .button-native{\n  display: flex;\n}\n\n:host(.position-center) .button-native{\n  display: flex;\n}\n\n:host(.scroll-down) {\n  display: flex;\n  max-width: max-content;\n}\n\n\n\n:host ::slotted(road-icon) {\n  margin-right: 0.5rem;\n  color: var(--road-on-button-secondary);\n}\n\n\n:host(:hover) {\n  background-color: var(--road-button-fab-variant);\n}\n\n/**\n * Native button\n */\n\n.button-native {\n  position: relative;\n  z-index: 1;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: 0;\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  outline: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n\n/* DISABLED\n -------------------- */\n\n:host([aria-disabled]) {\n  pointer-events: none;\n  opacity: 0.16;\n}\n\n.button-native:disabled {\n  cursor: not-allowed;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, h, Listen } from '@stencil/core';\n\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the button.\n * @slot start - Left content of the button text, usually for icon.\n *\n * @part native - The native HTML button or anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-button-floating',\n  styleUrl: 'button-floating.css',\n  shadow: true,\n})\nexport class Button {\n\n  @Element() el!: HTMLRoadButtonElement;\n\n  /**\n  * position.\n  */\n     @Prop({ reflect: true }) position?: 'left' | 'center' | 'right' = 'right';\n\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href?: string;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target?: string;\n\n  /**\n   * Emitted when the button has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n\n  @Listen('scroll', {target: 'window'})\n\n    onScroll() {\n      const positionScroll = window.scrollY;\n      if (positionScroll < 300 ) {\n          this.el.classList.add(\"scroll-down\");\n          this.el.classList.remove(\"scroll-up\");\n      }\n      if (positionScroll > 300 ) {\n          this.el.classList.add(\"scroll-up\");\n          this.el.classList.remove(\"scroll-down\");\n      }\n    }\n\n\n\n\n  private onClick = (ev: Event) => {\n    if (this.el.shadowRoot && (this.el as any).attachShadow) {\n      // this button wants to specifically submit a form\n      // climb up the dom to see if we're in a <form>\n      // and if so, then use JS to submit it\n      const form = this.el.closest('form');\n      if (form) {\n        ev.preventDefault();\n\n        const fakeButton = document.createElement('button');\n        fakeButton.style.display = 'none';\n        form.appendChild(fakeButton);\n        fakeButton.click();\n        fakeButton.remove();\n      }\n    }\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  render() {\n    const TagType = this.href === undefined ? 'button' : 'a' as any;\n    const positionClass = this.position !== undefined ? `position-${this.position}` : '';\n\n    return (\n      <Host\n        onClick={this.onClick}\n        class={`${positionClass}`}\n      >\n        <TagType\n          class=\"button-native\"\n          part=\"native\"\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        >\n          <slot name=\"start\"/>\n          <slot/>\n        </TagType>\n      </Host>\n    );\n  }\n}"],"mappings":"wFAAA,MAAMA,EAAoB,ytD,MCgBbC,EAAM,M,yKA6DTC,KAAAC,QAAWC,IACjB,GAAIF,KAAKG,GAAGC,YAAeJ,KAAKG,GAAWE,aAAc,CAIvD,MAAMC,EAAON,KAAKG,GAAGI,QAAQ,QAC7B,GAAID,EAAM,CACRJ,EAAGM,iBAEH,MAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWG,MAAMC,QAAU,OAC3BP,EAAKQ,YAAYL,GACjBA,EAAWM,QACXN,EAAWO,Q,IAKThB,KAAAiB,QAAU,KAChBjB,KAAKkB,UAAUC,OACfnB,KAAKoB,UAAUD,MAAM,EAGfnB,KAAAqB,OAAS,KACfrB,KAAKsB,SAASH,OACdnB,KAAKuB,SAASJ,MAAM,E,cA/E+C,Q,6DAuCnE,QAAAK,GACE,MAAMC,EAAiBC,OAAOC,QAC9B,GAAIF,EAAiB,IAAM,CACvBzB,KAAKG,GAAGyB,UAAUC,IAAI,eACtB7B,KAAKG,GAAGyB,UAAUZ,OAAO,Y,CAE7B,GAAIS,EAAiB,IAAM,CACvBzB,KAAKG,GAAGyB,UAAUC,IAAI,aACtB7B,KAAKG,GAAGyB,UAAUZ,OAAO,c,EAmCjC,MAAAc,GACE,MAAMC,EAAU/B,KAAKgC,OAASC,UAAY,SAAW,IACrD,MAAMC,EAAgBlC,KAAKmC,WAAaF,UAAY,YAAYjC,KAAKmC,WAAa,GAElF,OACEC,EAACC,EAAI,CACHpC,QAASD,KAAKC,QACdqC,MAAO,GAAGJ,KAEVE,EAACL,EAAO,CACNO,MAAM,gBACNC,KAAK,SACLtB,QAASjB,KAAKiB,QACdI,OAAQrB,KAAKqB,QAEbe,EAAA,QAAMI,KAAK,UACXJ,EAAA,c"}