@roadtrip/components 3.41.1 → 3.41.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/road-alert.cjs.entry.js +1 -1
- package/dist/cjs/road-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/road-badge_14.cjs.entry.js +1 -1
- package/dist/cjs/road-badge_14.cjs.entry.js.map +1 -1
- package/dist/cjs/road-navbar-v2.cjs.entry.js.map +1 -1
- package/dist/collection/components/alert/alert.css +1 -1
- package/dist/collection/components/drawer/drawer.css +0 -3
- package/dist/esm/road-alert.entry.js +1 -1
- package/dist/esm/road-alert.entry.js.map +1 -1
- package/dist/esm/road-badge_14.entry.js +1 -1
- package/dist/esm/road-badge_14.entry.js.map +1 -1
- package/dist/esm/road-navbar-v2.entry.js.map +1 -1
- package/dist/roadtrip/p-294a4a83.entry.js +2 -0
- package/dist/roadtrip/p-294a4a83.entry.js.map +1 -0
- package/dist/roadtrip/{p-07db2ee1.entry.js → p-d8dd3342.entry.js} +2 -2
- package/dist/roadtrip/p-d8dd3342.entry.js.map +1 -0
- package/dist/roadtrip/p-fdcebcc3.entry.js.map +1 -1
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/hydrate/index.js +104 -104
- package/hydrate/index.mjs +104 -104
- package/package.json +4 -4
- package/dist/roadtrip/p-07db2ee1.entry.js.map +0 -1
- package/dist/roadtrip/p-4182495e.entry.js +0 -2
- package/dist/roadtrip/p-4182495e.entry.js.map +0 -1
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-fee0103c.js');
|
|
6
6
|
const index$1 = require('./index-0e4df560.js');
|
|
7
7
|
|
|
8
|
-
const alertCss = ":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:
|
|
8
|
+
const alertCss = ":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)}";
|
|
9
9
|
const RoadAlertStyle0 = alertCss;
|
|
10
10
|
|
|
11
11
|
const Alert = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-alert.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,kvGAAkvG,CAAC;AACpwG,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;KA8DH;;;;IArFC,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,gBAAgB,GAAG,IAAI,CAAC,YAAY,IACxCA,oBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,gBACV,OAAO,IAElBA,uBAAW,IAAI,EAAEC,uBAAe,iBAAc,MAAM,GAAa,CAC1D,IACP,IAAI,CAAC;QAET,QACED,QAACE,UAAI,qDAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAC,OAAO,IACnCF,kEAAK,KAAK,EAAC,YAAY,IACrBA,mEAAM,IAAI,EAAC,MAAM,GAAE,CACf,EACNA,kEAAK,KAAK,EAAE,WAAW,IACrBA,kEAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,KAAK,IAAIA,mEAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACpEA,gEAAG,KAAK,EAAC,mBAAmB,IAC1BA,oEAAO,CACL,EACH,IAAI,CAAC,IAAI,IAAIA,gEAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,IAAI,CAAK,CACjF,EACNA,kEAAK,KAAK,EAAE,iBAAiB,IAC3BA,mEAAM,IAAI,EAAC,QAAQ,GAAE,CACjB,EACL,gBAAgB,CACb,CACD,EACP;KACH;;;;;;;","names":["h","navigationClose","Host"],"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.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 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 <div class={btnContainerClass}>\n <slot name=\"button\"/>\n </div>\n {closeIconElement}\n </div>\n </Host>\n );\n}\n\n}"],"version":3}
|
|
1
|
+
{"file":"road-alert.entry.cjs.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;KA8DH;;;;IArFC,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,gBAAgB,GAAG,IAAI,CAAC,YAAY,IACxCA,oBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,gBACV,OAAO,IAElBA,uBAAW,IAAI,EAAEC,uBAAe,iBAAc,MAAM,GAAa,CAC1D,IACP,IAAI,CAAC;QAET,QACED,QAACE,UAAI,qDAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAC,OAAO,IACnCF,kEAAK,KAAK,EAAC,YAAY,IACrBA,mEAAM,IAAI,EAAC,MAAM,GAAE,CACf,EACNA,kEAAK,KAAK,EAAE,WAAW,IACrBA,kEAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,KAAK,IAAIA,mEAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACpEA,gEAAG,KAAK,EAAC,mBAAmB,IAC1BA,oEAAO,CACL,EACH,IAAI,CAAC,IAAI,IAAIA,gEAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,IAAI,CAAK,CACjF,EACNA,kEAAK,KAAK,EAAE,iBAAiB,IAC3BA,mEAAM,IAAI,EAAC,QAAQ,GAAE,CACjB,EACL,gBAAgB,CACb,CACD,EACP;KACH;;;;;;;","names":["h","navigationClose","Host"],"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 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 <div class={btnContainerClass}>\n <slot name=\"button\"/>\n </div>\n {closeIconElement}\n </div>\n </Host>\n );\n}\n\n}"],"version":3}
|
|
@@ -305,7 +305,7 @@ const Counter = class {
|
|
|
305
305
|
let counterIds = 0;
|
|
306
306
|
Counter.style = RoadCounterStyle0;
|
|
307
307
|
|
|
308
|
-
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;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.drawer-dialog{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .drawer-dialog{transform:translateX(100%)}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .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;max-height:100vh;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;
|
|
308
|
+
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;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.drawer-dialog{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .drawer-dialog{transform:translateX(100%)}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .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;max-height:100vh;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;opacity:1}:host(.drawer-open) .drawer-dialog{transform:none}";
|
|
309
309
|
const RoadDrawerStyle0 = drawerCss;
|
|
310
310
|
|
|
311
311
|
const Drawer = class {
|