@roadtrip/components 3.53.0 → 3.53.1

package/dist/esm/road-alert.entry.js.map

@@ -1 +1 @@
-{"file":"road-alert.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,gwGAAgwG,CAAC;AAClxG,wBAAe,QAAQ;;MCaV,KAAK;IALlB;;;;;;QAeU,UAAK,GAAmB,MAAM,CAAC;;;;QAK7B,WAAM,GAA0C,UAAU,CAAC;;;;QA0B7D,iBAAY,GAAY,KAAK,CAAC;;;;QAKb,WAAM,GAAY,KAAK,CAAC;;;;QA6BzC,YAAO,GAAG,CAAC,EAAW;YAC5B,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,EAAE,CAAC,cAAc,EAAE,CAAC;YAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;SACd,CAAC;KAiEH;;;;IAxFC,MAAM,IAAI;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;;;;IAMD,MAAM,KAAK;QACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE;YACxC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;SACrB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;KACnB;;;;IAgBD,QAAQ,CAAC,KAAoB;QAC3B,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACjD,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;KACF;;;;IAKD,gBAAgB;QACd,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,IAAI;YAC7D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;SACpD,CAAC,CAAC;KACJ;IAEH,MAAM;;QAEJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;QACzE,IAAI,WAAW,GAAG,iBAAiB,CAAC;QAClC,IAAI,IAAI,CAAC,MAAM,KAAK,YAAY,EAAE;YAChC,WAAW,GAAG,4BAA4B,CAAC;SAC5C;QACH,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,GAAG,2BAA2B,GAAG,eAAe,CAAC;QAC5F,MAAM,aAAa,GAAG,CAAC,EAAC,MAAA,IAAI,CAAC,EAAE,0CAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA,CAAC;QAClE,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,IACxC,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,gBACV,OAAO,IAElB,iBAAW,IAAI,EAAE,eAAe,iBAAc,MAAM,GAAa,CAC1D,IACP,IAAI,CAAC;QAET,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAC,OAAO,IACnC,4DAAK,KAAK,EAAC,YAAY,IACrB,6DAAM,IAAI,EAAC,MAAM,GAAE,CACf,EACN,4DAAK,KAAK,EAAE,WAAW,IACrB,4DAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACpE,0DAAG,KAAK,EAAC,mBAAmB,IAC1B,8DAAO,CACL,EACH,IAAI,CAAC,IAAI,IAAI,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,IAAI,CAAK,CACjF,EACL,aAAa,KACZ,4DAAK,KAAK,EAAE,iBAAiB,IAC3B,6DAAM,IAAI,EAAC,QAAQ,GAAE,CACjB,CACP,EACA,gBAAgB,CACb,CACD,EACP;KACH;;;;;;;","names":[],"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}"],"version":3}
+{"file":"road-alert.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,yyGAAyyG,CAAC;AAC3zG,wBAAe,QAAQ;;MCaV,KAAK;IALlB;;;;;;QAeU,UAAK,GAAmB,MAAM,CAAC;;;;QAK7B,WAAM,GAA0C,UAAU,CAAC;;;;QA0B7D,iBAAY,GAAY,KAAK,CAAC;;;;QAKb,WAAM,GAAY,KAAK,CAAC;;;;QA6BzC,YAAO,GAAG,CAAC,EAAW;YAC5B,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,EAAE,CAAC,cAAc,EAAE,CAAC;YAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;SACd,CAAC;KAiEH;;;;IAxFC,MAAM,IAAI;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;;;;IAMD,MAAM,KAAK;QACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE;YACxC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;SACrB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;KACnB;;;;IAgBD,QAAQ,CAAC,KAAoB;QAC3B,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACjD,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;KACF;;;;IAKD,gBAAgB;QACd,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,IAAI;YAC7D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;SACpD,CAAC,CAAC;KACJ;IAEH,MAAM;;QAEJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;QACzE,IAAI,WAAW,GAAG,iBAAiB,CAAC;QAClC,IAAI,IAAI,CAAC,MAAM,KAAK,YAAY,EAAE;YAChC,WAAW,GAAG,4BAA4B,CAAC;SAC5C;QACH,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,GAAG,2BAA2B,GAAG,eAAe,CAAC;QAC5F,MAAM,aAAa,GAAG,CAAC,EAAC,MAAA,IAAI,CAAC,EAAE,0CAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA,CAAC;QAClE,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,IACxC,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,gBACV,OAAO,IAElB,iBAAW,IAAI,EAAE,eAAe,iBAAc,MAAM,GAAa,CAC1D,IACP,IAAI,CAAC;QAET,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAC,OAAO,IACnC,4DAAK,KAAK,EAAC,YAAY,IACrB,6DAAM,IAAI,EAAC,MAAM,GAAE,CACf,EACN,4DAAK,KAAK,EAAE,WAAW,IACrB,4DAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACpE,0DAAG,KAAK,EAAC,mBAAmB,IAC1B,8DAAO,CACL,EACH,IAAI,CAAC,IAAI,IAAI,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,IAAI,CAAK,CACjF,EACL,aAAa,KACZ,4DAAK,KAAK,EAAE,iBAAiB,IAC3B,6DAAM,IAAI,EAAC,QAAQ,GAAE,CACjB,CACP,EACA,gBAAgB,CACb,CACD,EACP;KACH;;;;;;;","names":[],"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-bottom: 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-content {\n  margin-top: var(--road-spacing-02);\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}"],"version":3}

package/dist/esm/road-badge_14.entry.js

@@ -148,6 +148,8 @@ const Counter = class {
         this.leftIconClasses = "";
         this.rightIconClasses = "";
         this.isDustbinVisible = false;
+        this.decreaseAriaLabel = "";
+        this.increaseAriaLabel = "";
         /**
          * The id of counter
          */
@@ -172,6 +174,22 @@ const Counter = class {
       * Set to `true` to not modify the input field
       */
         this.readonly = false;
+        /**
+       * Accessible label for the dustbin button when `dustbin` is enabled and value equals `min`.
+       */
+        this.dustbinLabelA11y = "Supprimer l'article";
+        /**
+         * Accessible label for the decrease button (suffix `, minimum {min}` is appended when not in dustbin mode).
+         */
+        this.decreaseLabelA11y = 'Diminuer la quantité';
+        /**
+         * Accessible label for the increase button (suffix `, maximum {max}` is appended when not in dustbin mode).
+         */
+        this.increaseLabelA11y = 'Augmenter la quantité';
+        /**
+        * Accessible label for the input field.
+        */
+        this.quantityLabelA11y = 'Quantité';
         this.setIsDustbinVisible = (valueInput) => {
             if (valueInput > this.min) {
                 this.isDustbinVisible = false;
@@ -243,6 +261,23 @@ const Counter = class {
     onValueChange(valueInput) {
         this.setIsDustbinVisible(valueInput);
         this.setIconsClasses(valueInput);
+        this.updateAriaLabels(valueInput);
+    }
+    onA11yLabelChange() {
+        var _a, _b, _c;
+        const currentValue = parseInt((_c = (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : String(this.value));
+        this.updateAriaLabels(currentValue);
+    }
+    updateAriaLabels(valueInput) {
+        const isDustbin = this.isDustbinVisible || (valueInput <= this.min && this.dustbin);
+        this.decreaseAriaLabel = isDustbin
+            ? this.dustbinLabelA11y
+            : this.min > 0
+                ? `${this.decreaseLabelA11y}, minimum ${this.min}`
+                : this.decreaseLabelA11y;
+        this.increaseAriaLabel = this.max
+            ? `${this.increaseLabelA11y}, maximum ${this.max}`
+            : this.increaseLabelA11y;
     }
     setIconsClasses(valueInput) {
         valueInput = valueInput !== null && valueInput !== void 0 ? valueInput : parseInt(this.inputElement.querySelector('input').value);
@@ -298,12 +333,15 @@ const Counter = class {
     }
     render() {
         const dataCi = this.isDustbinVisible ? "road-dustbin" : "";
-        return (h("road-input-group", { key: '841d49424a25f1f9a14c928b24ea9edd629651a0', class: this.size && `counter-${this.size}` }, h("road-button", { key: '902ba9dce53b2b2b050e35a885b92fb16a42c47a', slot: "prepend", size: this.size, onClick: this.decrease, class: this.leftIconClasses, disabled: this.readonly, "data-cy": "road-decrease" }, h("road-icon", { key: 'ee45dbae5079038698d0eb8509d55138988ffe8b', name: this.isDustbinVisible ? "delete-forever" : "navigation-add-less", ref: (el) => this.iconCounterLess = el, size: this.size, "data-cy": dataCi, role: "button" })), h("road-input", { key: '14e20d6aacc8562a6a3673cd381a539cfd3334ff', ref: (el) => this.inputElement = el, type: "number", min: this.min.toString(), max: (this.max && this.max.toString()), step: this.step, value: this.value, onRoadChange: this.onRoadChange, onKeyUp: this.checkValue, "data-cy": "road-input-counter", readonly: this.readonly, label: "Quantit\u00E9" }), h("road-button", { key: 'fb82377f50ab44d6a6f32669af93e8af30908c67', slot: "append", size: this.size, onClick: this.increase, class: this.rightIconClasses, disabled: this.readonly, "data-cy": "road-increase" }, h("road-icon", { key: 'ea4d77b9167b9b703037d82c51e2f82fc48e5f69', name: "navigation-add-more", size: this.size, role: "button" }))));
+        return (h("road-input-group", { key: '59731a94e0d7c0d8774556692dbdc4b1f626e635', class: this.size && `counter-${this.size}` }, h("road-button", { key: '95dcb39bb1fb496f74786095af6b5e2d7a75da00', slot: "prepend", size: this.size, onClick: this.decrease, class: this.leftIconClasses, disabled: this.readonly || (this.leftIconClasses === "disabled"), "aria-label": this.decreaseAriaLabel, "data-cy": "road-decrease" }, h("road-icon", { key: '49146a633a0f249b8cc13df674ca8e4ed1825912', name: this.isDustbinVisible ? "delete-forever" : "navigation-add-less", ref: (el) => this.iconCounterLess = el, size: this.size, "data-cy": dataCi, "aria-hidden": "true" })), h("road-input", { key: 'c84bbe30befc22c50897a0765ea2364cd17f86f8', ref: (el) => this.inputElement = el, type: "number", min: this.min.toString(), max: (this.max && this.max.toString()), step: this.step, value: this.value, onRoadChange: this.onRoadChange, onKeyUp: this.checkValue, "data-cy": "road-input-counter", readonly: this.readonly, label: "Quantit\u00E9", "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.quantityLabelA11y, "aria-live": "polite" }), h("road-button", { key: 'c6518e4cd30bed6667587766a950936e91e7bb9e', slot: "append", size: this.size, onClick: this.increase, class: this.rightIconClasses, disabled: this.readonly || (this.rightIconClasses === "disabled"), "aria-label": this.increaseAriaLabel, "data-cy": "road-increase" }, h("road-icon", { key: '285031ad919ebbb4b1659aba873f99a5748ef375', name: "navigation-add-more", size: this.size, "aria-hidden": "true" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
         "value": ["onValueChange"],
-        "readonly": ["onValueChange"]
+        "readonly": ["onValueChange"],
+        "decreaseLabelA11y": ["onA11yLabelChange"],
+        "increaseLabelA11y": ["onA11yLabelChange"],
+        "dustbinLabelA11y": ["onA11yLabelChange"]
     }; }
 };
 let counterIds = 0;
@@ -1889,7 +1927,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   return trap;
 };
 
-const drawerCss = ":host{--background:var(--road-surface);--color:var(--road-on-surface);--header-icon:var(--road-on-surface);--header-color:var(--road-on-surface);--header-background:var(--road-surface);--header-delimiter:0;--back-chevron-color:var(--road-icon);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;transition:visibility 0s linear 0.3s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay);opacity:0}.road-drawer-wrapper{width:100%}.road-drawer-wrapper .drawer-dialog{position:absolute;right:0;width:100%;pointer-events:none;transition:transform 0.3s ease-out;opacity:0;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .road-drawer-wrapper .drawer-dialog{transform:translateX(100%)}:host(.drawer-left) .road-drawer-wrapper .drawer-dialog{left:0}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .road-drawer-wrapper .drawer-dialog{width:100%;max-height:var(--max-height);transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto}.drawer-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}.drawer-header{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}.drawer-header road-icon{flex-shrink:0;color:var(--header-icon)}.drawer-footer{padding:var(--road-spacing-05);background-color:var(--road-surface)}.drawer-footer.remove-padding{padding:0}.drawer-header-inverse{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:flex;align-items:center;justify-content:center;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon{color:var(--back-chevron-color)}.drawer-action~.drawer-title,.drawer-close~.drawer-title{padding-left:0}.drawer-action-left,.drawer-close-left{margin-right:auto}.drawer-title{display:flex;flex-grow:1;align-items:center;justify-content:center;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}.drawer-body{overflow-y:auto;padding:0 var(--road-spacing-05) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}:host(.drawer-right) .drawer-body,:host(.drawer-left) .drawer-body{height:calc(100vh - 3.5rem)}.drawer-inner{padding:0 1rem 2.5rem}@media (min-width: 768px){.drawer-inner{padding:0 2rem 2.5rem}.drawer-body{padding:0 var(--road-spacing-08) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}.drawer-footer{padding:var(--road-spacing-05) var(--road-spacing-08)}.drawer-footer.remove-padding{padding:0}}:host(.drawer-open){visibility:visible !important;transition:visibility 0s linear 0s}:host(.drawer-open) .drawer-overlay,:host(.drawer-open) .drawer-dialog{opacity:1}:host(.drawer-open) .road-drawer-wrapper .drawer-dialog{transform:none}@media (prefers-reduced-motion: no-preference){:host(.drawer-open) .drawer-overlay,:host(.drawer-open) .drawer-dialog{animation:road-drawer-fade-in 0.3s ease-out both}.drawer-overlay,.drawer-dialog{animation:road-drawer-fade-out 0.3s ease-out both}@keyframes road-drawer-fade-in{from{opacity:0}to{opacity:1}}@keyframes road-drawer-fade-out{from{opacity:1}to{opacity:0}}}";
+const drawerCss = ":host{--background:var(--road-surface);--color:var(--road-on-surface);--header-icon:var(--road-on-surface);--header-color:var(--road-on-surface);--header-background:var(--road-surface);--header-delimiter:0;--back-chevron-color:var(--road-icon);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;transition:visibility 0s linear 0.3s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay);opacity:0}.road-drawer-wrapper{width:100%}.road-drawer-wrapper .drawer-dialog{position:absolute;right:0;width:100%;pointer-events:none;transition:transform 0.3s ease-out;opacity:0;transform:none}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .road-drawer-wrapper .drawer-dialog{transform:translateX(100%)}:host(.drawer-left) .road-drawer-wrapper .drawer-dialog{left:0;transform:translateX(-100%)}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .road-drawer-wrapper .drawer-dialog{width:100%;max-height:var(--max-height);bottom:0;transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto}.drawer-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}.drawer-header{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}.drawer-header road-icon{flex-shrink:0;color:var(--header-icon)}.drawer-footer{padding:var(--road-spacing-05);background-color:var(--road-surface)}.drawer-footer.remove-padding{padding:0}.drawer-header-inverse{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:flex;align-items:center;justify-content:center;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon{color:var(--back-chevron-color)}.drawer-action~.drawer-title,.drawer-close~.drawer-title{padding-left:0}.drawer-action-left,.drawer-close-left{margin-right:auto}.drawer-title{display:flex;flex-grow:1;align-items:center;justify-content:center;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}.drawer-body{overflow-y:auto;padding:0 var(--road-spacing-05) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}:host(.drawer-right) .drawer-body,:host(.drawer-left) .drawer-body{height:calc(100vh - 3.5rem)}.drawer-inner{padding:0 1rem 2.5rem}@media (min-width: 768px){.drawer-inner{padding:0 2rem 2.5rem}.drawer-body{padding:0 var(--road-spacing-08) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}.drawer-footer{padding:var(--road-spacing-05) var(--road-spacing-08)}.drawer-footer.remove-padding{padding:0}}:host(.drawer-open){visibility:visible !important;transition:visibility 0s linear 0s}:host(.drawer-open) .drawer-overlay,:host(.drawer-open) .drawer-dialog,:host(.drawer-open) .road-drawer-wrapper .drawer-dialog{opacity:1;transform:translateY(0) translateX(0)}@media (prefers-reduced-motion: no-preference){:host(.drawer-open) .drawer-overlay,:host(.drawer-open) .drawer-dialog{animation:road-drawer-fade-in 0.3s ease-out both}.drawer-overlay,.drawer-dialog{animation:road-drawer-fade-out 0.3s ease-out both}@keyframes road-drawer-fade-in{from{opacity:0}to{opacity:1}}@keyframes road-drawer-fade-out{from{opacity:1}to{opacity:0}}}";
 const RoadDrawerStyle0 = drawerCss;
 
 const Drawer = class {