@roadtrip/components 3.53.0 → 3.53.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadtrip/components",
-  "version": "3.53.0",
+  "version": "3.53.2",
   "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-23b0d708.entry.js

@@ -1,2 +0,0 @@
-import{r as a,c as r,h as e,H as o,a as t}from"./p-d7aae05d.js";import{a as n}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:var(--road-spacing-02) 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}.alert-container-horizontal{position:relative;display:flex;align-items:start;justify-content:space-between;width:100%;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}.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.layout="vertical";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(){var a;const r=this.color!==undefined?`alert-${this.color}`:"";let t="alert-container";if(this.layout==="horizontal"){t="alert-container-horizontal"}const s=this.hasCloseIcon?"btn-container justify-end":"btn-container";const i=!!((a=this.el)===null||a===void 0?void 0:a.querySelector('[slot="button"]'));const c=this.hasCloseIcon?e("button",{type:"button",class:"alert-close",onClick:this.onClick,"aria-label":"Close"},e("road-icon",{icon:n,"aria-hidden":"true"})):null;return e(o,{key:"e65caafc704e899307609c0d5ca8cd357463e497",class:r,role:"alert"},e("div",{key:"5afa6c90fcc5d808995473f06f6971227b093129",class:"alert-icon"},e("slot",{key:"1268585d0e458a97a7ad249c8866b48a7876cf23",name:"icon"})),e("div",{key:"e4faacf17350bbda2a4f93fabbb0392d80917d9d",class:t},e("div",{key:"d239178710d974b139b4eaad165a952953ee6d45",class:"alert-container-content"},this.label&&e("span",{key:"bf22f3bc13c592bbffc2aa5a64ffbc639cb3574d",class:"alert-title d-block"},this.label),e("p",{key:"9f7ac0175f98860b820c4d625818b4a500eb2489",class:"alert-description"},e("slot",{key:"05d56a7d011695020127342e8d9f6fde4d0315aa"})),this.link&&e("a",{key:"247fd1e098fb2d2425d2151c1573c516ab3b830b",href:this.url,class:"alert-link link link-default"},this.link)),i&&e("div",{key:"534bfb647ab7d1b1e17521bec005f3a4ad6eb26a",class:s},e("slot",{key:"1c1bce38ae3c54ee5fcbc2afec51605b0ac486af",name:"button"})),c))}get el(){return t(this)}};c.style=i;export{c as road_alert};
-//# sourceMappingURL=p-23b0d708.entry.js.map

package/dist/roadtrip/p-23b0d708.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["alertCss","RoadAlertStyle0","Alert","constructor","hostRef","this","color","layout","hasCloseIcon","isOpen","onClick","ev","stopPropagation","preventDefault","close","open","el","addEventListener","onClose","emit","once","onEscape","event","key","componentDidLoad","querySelectorAll","forEach","item","render","colorClass","undefined","layoutClass","btnContainerClass","hasButtonSlot","_a","querySelector","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: var(--road-spacing-02) 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.alert-container-horizontal {\n  position: relative;\n  display: flex;\n  align-items: start;\n  justify-content: space-between;\n  width: 100%;\n  flex-direction: row;\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/* 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   * position of the button \n   */\n    @Prop() layout?: 'horizontal' | 'vertical' |'default' = 'vertical';\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\n  const colorClass = this.color !== undefined ? `alert-${this.color}` : '';\n  let layoutClass = 'alert-container'; // valeur par défaut\n    if (this.layout === 'horizontal') {\n      layoutClass = 'alert-container-horizontal';\n    }\n  const btnContainerClass = this.hasCloseIcon ? 'btn-container justify-end' : 'btn-container';\n  const hasButtonSlot = !!this.el?.querySelector('[slot=\"button\"]');\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={layoutClass}>\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        {hasButtonSlot && (\n          <div class={btnContainerClass}>\n            <slot name=\"button\"/>\n          </div>\n        )}\n        {closeIconElement}\n      </div>\n    </Host>\n  );\n}\n\n}"],"mappings":"oGAAA,MAAMA,EAAW,iwGACjB,MAAAC,EAAeD,E,MCaFE,EAAK,MALlB,WAAAC,CAAAC,G,yCAeUC,KAAAC,MAAwB,OAKtBD,KAAAE,OAAgD,WA0BlDF,KAAAG,aAAwB,MAKPH,KAAAI,OAAkB,MA6BnCJ,KAAAK,QAAWC,IACjBA,EAAGC,kBACHD,EAAGE,iBAEHR,KAAKS,OAAO,C,CAtBd,UAAMC,GACJV,KAAKI,OAAS,I,CAOhB,WAAMK,GACJT,KAAKI,OAAS,MACdJ,KAAKW,GAAGC,iBAAiB,iBAAiB,KACxCZ,KAAKa,QAAQC,MAAM,GAClB,CAAEC,KAAM,M,CAiBb,QAAAC,CAASC,GACP,GAAIA,EAAMC,MAAQ,UAAYD,EAAMC,MAAQ,MAAO,CACjDlB,KAAKS,O,EAOT,gBAAAU,GACEnB,KAAKW,GAAGS,iBAAiB,0BAA0BC,SAAQC,IACzDA,EAAKV,iBAAiB,SAAS,IAAMZ,KAAKS,SAAQ,G,CAIxD,MAAAc,G,MAEE,MAAMC,EAAaxB,KAAKC,QAAUwB,UAAY,SAASzB,KAAKC,QAAU,GACtE,IAAIyB,EAAc,kBAChB,GAAI1B,KAAKE,SAAW,aAAc,CAChCwB,EAAc,4B,CAElB,MAAMC,EAAoB3B,KAAKG,aAAe,4BAA8B,gBAC5E,MAAMyB,MAAkBC,EAAA7B,KAAKW,MAAE,MAAAkB,SAAA,SAAAA,EAAEC,cAAc,oBAC/C,MAAMC,EAAmB/B,KAAKG,aAC5B6B,EAAA,UACEC,KAAK,SACLC,MAAM,cACN7B,QAASL,KAAKK,QAAO,aACV,SAEX2B,EAAA,aAAWG,KAAMC,EAAe,cAAc,UAE9C,KAEJ,OACEJ,EAACK,EAAI,CAAAnB,IAAA,2CAACgB,MAAOV,EAAYc,KAAK,SAC5BN,EAAA,OAAAd,IAAA,2CAAKgB,MAAM,cACTF,EAAA,QAAAd,IAAA,2CAAMqB,KAAK,UAEbP,EAAA,OAAAd,IAAA,2CAAKgB,MAAOR,GACVM,EAAA,OAAAd,IAAA,2CAAKgB,MAAM,2BACRlC,KAAKwC,OAASR,EAAA,QAAAd,IAAA,2CAAMgB,MAAM,uBAAuBlC,KAAKwC,OACvDR,EAAA,KAAAd,IAAA,2CAAGgB,MAAM,qBACPF,EAAA,QAAAd,IAAA,8CAEDlB,KAAKyC,MAAQT,EAAA,KAAAd,IAAA,2CAAGwB,KAAM1C,KAAK2C,IAAKT,MAAM,gCAAgClC,KAAKyC,OAE7Eb,GACCI,EAAA,OAAAd,IAAA,2CAAKgB,MAAOP,GACVK,EAAA,QAAAd,IAAA,2CAAMqB,KAAK,YAGdR,G","ignoreList":[]}