@roadtrip/components 3.41.0 → 3.41.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadtrip/components",
-  "version": "3.41.0",
+  "version": "3.41.1",
   "description": "Web Component library for Roadtrip Design System",
   "license": "Apache-2.0",
   "homepage": "https://gitlab.com/mobivia/driverservices/experience-platform/roadtrip/components",

package/dist/roadtrip/p-da3bfbfb.entry.js

@@ -1,2 +0,0 @@
-import{r as a,c as r,h as e,H as o,a as n}from"./p-d7aae05d.js";import{a as t}from"./p-55a946f4.js";const s=":host{position:relative;display:flex;align-items:flex-start;padding:0.5rem 1rem 0.5rem 0.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-body-medium);line-height:1.25;color:var(--road-on-surface);border:1px solid transparent;border-radius:0.25rem}.alert-icon{flex-shrink:0;width:2rem;height:2rem;margin-right:0.5rem}.alert-title{margin:0.375rem 0 var(--road-spacing-03);display:block;font-weight:700}.alert-container{position:relative;display:flex;align-items:start;justify-content:space-between;width:100%;flex-direction:column}@media (min-width: 992px){.alert-container{flex-direction:row}}.alert-link{display:block;margin:0;margin:var(--road-spacing-03) 0 0;color:var(--road-on-surface);text-decoration:underline}.alert-description{margin:0}.btn-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;justify-content:center;margin-top:var(--road-spacing-03)}.btn-container.justify-end{padding-top:var(--road-spacing-07);justify-content:end}@media (min-width: 992px){.btn-container{margin-top:0}}.alert-button{margin-left:var(--road-spacing-07)}.alert-close{display:flex;position:absolute;top:0;right:0;align-items:center;justify-content:center;padding:0;font-weight:700;color:inherit;cursor:pointer;background:transparent;border:0;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host(.alert-info){color:var(--road-on-info-surface);background:var(--road-info-surface);border-color:var(--road-info-outline)}:host(.alert-info) ::slotted(road-icon){fill:var(--road-info-default)}:host(.alert-info) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-info-surface-inverse);background:var(--road-info-surface-inverse);fill:var(--road-on-info-surface-inverse)}:host(.alert-info) .alert-link{color:var(--road-on-info-surface)}:host(.alert-success){color:var(--road-on-success-surface);background:var(--road-success-surface);border-color:var(--road-success-outline)}:host(.alert-success) ::slotted(road-icon){fill:var(--road-success-icon)}:host(.alert-success) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-success-surface-inverse);background:var(--road-success-surface-inverse);fill:var(--road-on-success-surface-inverse)}:host(.alert-success) .alert-link{color:var(--road-on-success-surface)}:host(.alert-warning){color:var(--road-on-warning-surface);background:var(--road-warning-surface);border-color:var(--road-warning-outline)}:host(.alert-warning) ::slotted(road-icon){fill:var(--road-warning-icon)}:host(.alert-warning) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-warning-surface-inverse);background:var(--road-warning-surface-inverse);fill:var(--road-on-warning-surface-inverse)}:host(.alert-warning) .alert-link{color:var(--road-on-warning-surface)}:host(.alert-danger){color:var(--road-on-danger-surface);background:var(--road-danger-surface);border-color:var(--road-danger-outline)}:host(.alert-danger) ::slotted(road-icon){fill:var(--road-danger-icon)}:host(.alert-danger) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-danger-surface-inverse);background:var(--road-danger-surface-inverse);fill:var(--road-on-danger-surface-inverse)}:host(.alert-danger) .alert-link{color:var(--road-on-danger-surface)}";const i=s;const c=class{constructor(e){a(this,e);this.onClose=r(this,"close",7);this.color="info";this.hasCloseIcon=false;this.isOpen=false;this.onClick=a=>{a.stopPropagation();a.preventDefault();this.close()}}async open(){this.isOpen=true}async close(){this.isOpen=false;this.el.addEventListener("transitionend",(()=>{this.onClose.emit()}),{once:true})}onEscape(a){if(a.key==="Escape"||a.key==="Esc"){this.close()}}componentDidLoad(){this.el.querySelectorAll('[data-dismiss="modal"]').forEach((a=>{a.addEventListener("click",(()=>this.close()))}))}render(){const a=this.color!==undefined?`alert-${this.color}`:"";const r=this.hasCloseIcon?"btn-container justify-end":"btn-container";const n=this.hasCloseIcon?e("button",{type:"button",class:"alert-close",onClick:this.onClick,"aria-label":"Close"},e("road-icon",{icon:t,"aria-hidden":"true"})):null;return e(o,{key:"715b0b4b3ca14ef09a049d3d0bdab782bc3aa0f4",class:a,role:"alert"},e("div",{key:"f7111b9bc55006aa33d7e422ff2d1f6be6daf906",class:"alert-icon"},e("slot",{key:"11595cdebbde435fa1d8ab57c75f1f6be047cbef",name:"icon"})),e("div",{key:"e6d3c422db98796738c8c58d63abd1b6ed063e8a",class:"alert-container"},e("div",{key:"16c1b5bbdaa306099c588bbb31c3b2fc4c28bb03",class:"alert-container-content"},this.label&&e("span",{key:"48ba2d184dc96f880fdb63ece808ddcc05a2e196",class:"alert-title d-block"},this.label),e("p",{key:"6dbc4c9ba0d10dd2e774888ae4a5b5dd132c901d",class:"alert-description"},e("slot",{key:"6e8b57a373b20e72b2d8bf0965bac83ae3c4ce51"})),this.link&&e("a",{key:"614ed34fc0332a84887f64dad7bb6c301fb27bc3",href:this.url,class:"alert-link link link-default"},this.link)),e("div",{key:"213465b88ff3e0af248929e1442a7b4dd266f539",class:r},e("slot",{key:"b1e33e176e8229e20268a3ffb49ac8ec3982dd8d",name:"button"})),n))}get el(){return n(this)}};c.style=i;export{c as road_alert};
-//# sourceMappingURL=p-da3bfbfb.entry.js.map

package/dist/roadtrip/p-da3bfbfb.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["alertCss","RoadAlertStyle0","Alert","constructor","hostRef","this","color","hasCloseIcon","isOpen","onClick","ev","stopPropagation","preventDefault","close","open","el","addEventListener","onClose","emit","once","onEscape","event","key","componentDidLoad","querySelectorAll","forEach","item","render","colorClass","undefined","btnContainerClass","closeIconElement","h","type","class","icon","navigationClose","Host","role","name","label","link","href","url"],"sources":["src/components/alert/alert.css?tag=road-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["/*\n * Alert\n *\n * Index\n * - Alert\n * - Icon\n * - Description\n * - Feedback\n */\n\n\n/* ALERT\n -------------------- */\n\n:host {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  padding: 0.5rem 1rem 0.5rem 0.5rem;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-body-medium);\n  line-height: 1.25;\n  color: var(--road-on-surface);\n  border: 1px solid transparent;\n  border-radius: 0.25rem;\n}\n\n/* ICON\n -------------------- */\n\n.alert-icon {\n  flex-shrink: 0;\n  width: 2rem;\n  height: 2rem;\n  margin-right: 0.5rem;\n}\n\n/* ALERT TITLE\n -------------------- */\n\n.alert-title {\n  margin: 0.375rem 0 var(--road-spacing-03);\n  display: block;\n  font-weight: 700;\n}\n\n/* ALERT CONTAINER\n -------------------- */\n\n.alert-container {\n  position: relative;\n  display: flex;\n  align-items: start;\n  justify-content: space-between;\n  width: 100%;\n  flex-direction: column;\n}\n\n@media (min-width: 992px) {\n\n  .alert-container {\n    flex-direction: row;\n  }\n}\n\n/* ALERT LINK\n -------------------- */\n\n.alert-link {\n  display: block;\n  margin: 0;\n  margin: var(--road-spacing-03) 0 0;\n  color: var(--road-on-surface);\n  text-decoration: underline;\n}\n\n/* DESCRIPTION\n -------------------- */\n\n.alert-description {\n  margin: 0;\n}\n\n/* BUTTON CONTAINER\n -------------------- */\n\n.btn-container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: stretch;\n  justify-content: center;\n  margin-top: var(--road-spacing-03);\n}\n\n.btn-container.justify-end {\n  padding-top: var(--road-spacing-07);\n  justify-content: end;\n}\n\n@media (min-width: 992px) {\n\n.btn-container {\n    margin-top: 0;\n  }\n}\n\n/* ALERT BUTTON\n -------------------- */\n\n.alert-button {\n  margin-left: var(--road-spacing-07);\n}\n\n/* ALERT CLOSE\n -------------------- */\n\n.alert-close {\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  align-items: center;\n  justify-content: center;\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/* FEEDBACK\n -------------------- */\n\n/**\n * Info\n */\n\n:host(.alert-info) {\n  color: var(--road-on-info-surface);\n  background: var(--road-info-surface);\n  border-color: var(--road-info-outline);\n}\n\n:host(.alert-info) ::slotted(road-icon) {\n  fill: var(--road-info-default);\n}\n\n:host(.alert-info) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-info-surface-inverse);\n  background: var(--road-info-surface-inverse);\n  fill: var(--road-on-info-surface-inverse);\n}\n\n:host(.alert-info) .alert-link {\n  color: var(--road-on-info-surface);\n}\n\n\n/**\n * Success\n */\n\n:host(.alert-success) {\n  color: var(--road-on-success-surface);\n  background: var(--road-success-surface);\n  border-color: var(--road-success-outline);\n}\n\n:host(.alert-success) ::slotted(road-icon) {\n  fill: var(--road-success-icon);\n}\n\n:host(.alert-success) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-success-surface-inverse);\n  background: var(--road-success-surface-inverse);\n  fill: var(--road-on-success-surface-inverse);\n}\n\n:host(.alert-success) .alert-link {\n  color: var(--road-on-success-surface);\n}\n\n/**\n * Warning\n */\n\n:host(.alert-warning) {\n  color: var(--road-on-warning-surface);\n  background: var(--road-warning-surface);\n  border-color: var(--road-warning-outline);\n}\n\n:host(.alert-warning) ::slotted(road-icon) {\n  fill: var(--road-warning-icon);\n}\n\n:host(.alert-warning) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-warning-surface-inverse);\n  background: var(--road-warning-surface-inverse);\n  fill: var(--road-on-warning-surface-inverse);\n}\n\n:host(.alert-warning) .alert-link {\n  color: var(--road-on-warning-surface);\n}\n\n/**\n * Danger\n */\n\n:host(.alert-danger) {\n  color: var(--road-on-danger-surface);\n  background: var(--road-danger-surface);\n  border-color: var(--road-danger-outline);\n}\n\n:host(.alert-danger) ::slotted(road-icon) {\n  fill: var(--road-danger-icon);\n}\n\n:host(.alert-danger) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-danger-surface-inverse);\n  background: var(--road-danger-surface-inverse);\n  fill: var(--road-on-danger-surface-inverse);\n}\n\n:host(.alert-danger) .alert-link {\n  color: var(--road-on-danger-surface);\n}\n","import { Component, Host, Prop, h, Listen, Event, Method, EventEmitter, Element } from '@stencil/core';\nimport { navigationClose } from '../../../icons';\nimport { FeedbackColors } from '../../interface';\n\n/**\n * @slot icon - Icon of the alert, it should be a road-icon element.\n * @slot  - Message of the alert.\n */\n\n@Component({\n  tag: 'road-alert',\n  styleUrl: 'alert.css',\n  shadow: true,\n})\nexport class Alert {\n\n    /**\n     * Current reference of the modal\n     */\n    @Element() el!: HTMLRoadAlertElement;\n\n  /**\n   * Set the color of alert. e.g. info, success, warning, danger\n   */\n  @Prop() color: FeedbackColors = 'info';\n\n  /**\n   * Title display in the alert\n   */\n   @Prop() label?: string;\n\n   /**\n   * Button display in the alert\n   * `<road-button size=\"sm\">Label</road-button>`\n   */\n   @Prop() button?: string;\n\n   /**\n   * Text Link display in the alert\n   */\n   @Prop() link?: string;\n\n   /**\n    * url display in the link\n    */\n   @Prop() url?: string;\n\n  /**\n   * Show / hide close icon\n   */\n  @Prop() hasCloseIcon: boolean = false;\n\n  /**\n   * Set isOpen propertie to true to show the modal\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\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\nrender() {\n  const colorClass = this.color !== undefined ? `alert-${this.color}` : '';\n  const btnContainerClass = this.hasCloseIcon ? 'btn-container justify-end' : 'btn-container';\n  const closeIconElement = this.hasCloseIcon ? (\n    <button\n      type=\"button\"\n      class=\"alert-close\"\n      onClick={this.onClick}\n      aria-label=\"Close\"\n    >\n      <road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon>\n    </button>\n  ) : null;\n\n  return (\n    <Host class={colorClass} role=\"alert\">\n      <div class=\"alert-icon\">\n        <slot name=\"icon\"/>\n      </div>\n      <div class=\"alert-container\">\n        <div class=\"alert-container-content\">\n          {this.label && <span class=\"alert-title d-block\">{this.label}</span>}\n          <p class=\"alert-description\">\n            <slot/>\n          </p>\n          {this.link && <a href={this.url} class=\"alert-link link link-default\">{this.link}</a>}\n        </div>\n        <div class={btnContainerClass}>\n          <slot name=\"button\"/>\n        </div>\n        {closeIconElement}\n      </div>\n    </Host>\n  );\n}\n\n}"],"mappings":"oGAAA,MAAMA,EAAW,guGACjB,MAAAC,EAAeD,E,MCaFE,EAAK,MALlB,WAAAC,CAAAC,G,yCAeUC,KAAAC,MAAwB,OA0BxBD,KAAAE,aAAwB,MAKPF,KAAAG,OAAkB,MA6BnCH,KAAAI,QAAWC,IACjBA,EAAGC,kBACHD,EAAGE,iBAEHP,KAAKQ,OAAO,C,CAtBd,UAAMC,GACJT,KAAKG,OAAS,I,CAOhB,WAAMK,GACJR,KAAKG,OAAS,MACdH,KAAKU,GAAGC,iBAAiB,iBAAiB,KACxCX,KAAKY,QAAQC,MAAM,GAClB,CAAEC,KAAM,M,CAiBb,QAAAC,CAASC,GACP,GAAIA,EAAMC,MAAQ,UAAYD,EAAMC,MAAQ,MAAO,CACjDjB,KAAKQ,O,EAOT,gBAAAU,GACElB,KAAKU,GAAGS,iBAAiB,0BAA0BC,SAAQC,IACzDA,EAAKV,iBAAiB,SAAS,IAAMX,KAAKQ,SAAQ,G,CAIxD,MAAAc,GACE,MAAMC,EAAavB,KAAKC,QAAUuB,UAAY,SAASxB,KAAKC,QAAU,GACtE,MAAMwB,EAAoBzB,KAAKE,aAAe,4BAA8B,gBAC5E,MAAMwB,EAAmB1B,KAAKE,aAC5ByB,EAAA,UACEC,KAAK,SACLC,MAAM,cACNzB,QAASJ,KAAKI,QAAO,aACV,SAEXuB,EAAA,aAAWG,KAAMC,EAAe,cAAc,UAE9C,KAEJ,OACEJ,EAACK,EAAI,CAAAf,IAAA,2CAACY,MAAON,EAAYU,KAAK,SAC5BN,EAAA,OAAAV,IAAA,2CAAKY,MAAM,cACTF,EAAA,QAAAV,IAAA,2CAAMiB,KAAK,UAEbP,EAAA,OAAAV,IAAA,2CAAKY,MAAM,mBACTF,EAAA,OAAAV,IAAA,2CAAKY,MAAM,2BACR7B,KAAKmC,OAASR,EAAA,QAAAV,IAAA,2CAAMY,MAAM,uBAAuB7B,KAAKmC,OACvDR,EAAA,KAAAV,IAAA,2CAAGY,MAAM,qBACPF,EAAA,QAAAV,IAAA,8CAEDjB,KAAKoC,MAAQT,EAAA,KAAAV,IAAA,2CAAGoB,KAAMrC,KAAKsC,IAAKT,MAAM,gCAAgC7B,KAAKoC,OAE9ET,EAAA,OAAAV,IAAA,2CAAKY,MAAOJ,GACVE,EAAA,QAAAV,IAAA,2CAAMiB,KAAK,YAEZR,G","ignoreList":[]}