@roadtrip/components 3.49.0 → 3.51.0
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-badge_14.cjs.entry.js +52 -61
- package/dist/cjs/road-badge_14.cjs.entry.js.map +1 -1
- package/dist/collection/components/drawer/drawer.css +12 -4
- package/dist/collection/components/drawer/drawer.js +53 -62
- package/dist/collection/components/drawer/drawer.js.map +1 -1
- package/dist/esm/road-badge_14.entry.js +52 -61
- package/dist/esm/road-badge_14.entry.js.map +1 -1
- package/dist/html.html-data.json +3864 -0
- package/dist/roadtrip/{p-c58abbfb.entry.js → p-b2df7b64.entry.js} +4 -4
- package/dist/roadtrip/p-b2df7b64.entry.js.map +1 -0
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/dist/types/components/drawer/drawer.d.ts +6 -6
- package/hydrate/index.js +54 -63
- package/hydrate/index.mjs +54 -63
- package/package.json +1 -1
- package/dist/roadtrip/p-c58abbfb.entry.js.map +0 -1
|
@@ -53,7 +53,8 @@
|
|
|
53
53
|
color: var(--color);
|
|
54
54
|
visibility: hidden !important;
|
|
55
55
|
opacity: 0;
|
|
56
|
-
transition: opacity 0.
|
|
56
|
+
transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
|
|
57
|
+
|
|
57
58
|
}
|
|
58
59
|
|
|
59
60
|
/* OVERLAY
|
|
@@ -98,6 +99,10 @@
|
|
|
98
99
|
transform: translateX(100%);
|
|
99
100
|
}
|
|
100
101
|
|
|
102
|
+
:host(.drawer-left) .road-drawer-wrapper .drawer-dialog {
|
|
103
|
+
left: 0;
|
|
104
|
+
}
|
|
105
|
+
|
|
101
106
|
/**
|
|
102
107
|
* Bottom position
|
|
103
108
|
*/
|
|
@@ -125,7 +130,9 @@
|
|
|
125
130
|
flex-direction: column;
|
|
126
131
|
width: 100%;
|
|
127
132
|
height: 100vh;
|
|
133
|
+
height: 100dvh; /* DVH to handle safari behavior and we keep vh for fallback */
|
|
128
134
|
max-height: 100vh;
|
|
135
|
+
max-height: 100dvh; /* DVH to handle safari behavior and we keep vh for fallback */
|
|
129
136
|
pointer-events: auto;
|
|
130
137
|
background-color: var(--background);
|
|
131
138
|
background-clip: padding-box;
|
|
@@ -196,8 +203,8 @@
|
|
|
196
203
|
color: var(--back-chevron-color);
|
|
197
204
|
}
|
|
198
205
|
|
|
199
|
-
.drawer-action
|
|
200
|
-
.drawer-close
|
|
206
|
+
.drawer-action~.drawer-title,
|
|
207
|
+
.drawer-close~.drawer-title {
|
|
201
208
|
padding-left: 0;
|
|
202
209
|
}
|
|
203
210
|
|
|
@@ -269,8 +276,9 @@
|
|
|
269
276
|
:host(.drawer-open) {
|
|
270
277
|
visibility: visible !important;
|
|
271
278
|
opacity: 1;
|
|
279
|
+
transition: opacity 0.3s ease-out, visibility 0s linear 0s;
|
|
272
280
|
}
|
|
273
281
|
|
|
274
282
|
:host(.drawer-open) .road-drawer-wrapper .drawer-dialog {
|
|
275
283
|
transform: none;
|
|
276
|
-
}
|
|
284
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { h, Host } from "@stencil/core";
|
|
1
|
+
import { h, Host, } from "@stencil/core";
|
|
2
2
|
import { navigationClose, navigationChevron } from "../../../icons";
|
|
3
3
|
import { createFocusTrap } from "focus-trap";
|
|
4
4
|
/**
|
|
@@ -23,7 +23,7 @@ export class Drawer {
|
|
|
23
23
|
/**
|
|
24
24
|
* position of the drawer. e.g. left, right, bottom
|
|
25
25
|
*/
|
|
26
|
-
this.position =
|
|
26
|
+
this.position = "left";
|
|
27
27
|
/**
|
|
28
28
|
* Width of the drawer
|
|
29
29
|
*/
|
|
@@ -52,6 +52,19 @@ export class Drawer {
|
|
|
52
52
|
const slot = event.target;
|
|
53
53
|
this.hasFooterContent = slot.assignedElements().length > 0;
|
|
54
54
|
};
|
|
55
|
+
/**
|
|
56
|
+
* Find and focus the first element in the drawer
|
|
57
|
+
*/
|
|
58
|
+
/**
|
|
59
|
+
* Find and focus the first element in the drawer
|
|
60
|
+
*/
|
|
61
|
+
// private focusFirstElement() {
|
|
62
|
+
// const firstElement = this.el.shadowRoot?.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex="-1"])')[0] as HTMLElement;
|
|
63
|
+
//
|
|
64
|
+
// if (firstElement) {
|
|
65
|
+
// firstElement.focus();
|
|
66
|
+
// }
|
|
67
|
+
// }
|
|
55
68
|
/**
|
|
56
69
|
* Close the dialog when clicking on the cross or layer
|
|
57
70
|
*/
|
|
@@ -101,92 +114,70 @@ export class Drawer {
|
|
|
101
114
|
}
|
|
102
115
|
}, 100); // Timeout is used to ensure the drawer has been rendered when client wants to update the property at the same time
|
|
103
116
|
}
|
|
104
|
-
// @Watch('isOpen')
|
|
105
|
-
// handleOpen(openValue: boolean) {
|
|
106
|
-
// if(openValue === true) {
|
|
107
|
-
// this.onOpen.emit();
|
|
108
|
-
// } else {
|
|
109
|
-
// this.el.addEventListener('transitionend', () => {
|
|
110
|
-
// this.onClose.emit();
|
|
111
|
-
// this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);
|
|
112
|
-
// }, { once: true});
|
|
113
|
-
// }
|
|
114
|
-
// }
|
|
115
117
|
handleOpen(openValue) {
|
|
118
|
+
var _a;
|
|
116
119
|
if (openValue === true) {
|
|
117
120
|
this.onOpen.emit();
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
this.focusFirstElement();
|
|
122
|
-
if ((_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.active) {
|
|
123
|
-
(_b = this.focusTrap) === null || _b === void 0 ? void 0 : _b.unpause();
|
|
121
|
+
this.el.addEventListener("transitionend", () => {
|
|
122
|
+
if (this.enabledFocusTrap) {
|
|
123
|
+
this.getOrCreateFocusTrap().activate();
|
|
124
124
|
}
|
|
125
|
-
|
|
126
|
-
(_c = this.focusTrap) === null || _c === void 0 ? void 0 : _c.activate();
|
|
127
|
-
}
|
|
128
|
-
}, 50); // Add a slight delay to ensure the element is rendered
|
|
125
|
+
}, { once: true });
|
|
129
126
|
}
|
|
130
127
|
else {
|
|
131
|
-
this.
|
|
132
|
-
|
|
133
|
-
(_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.deactivate();
|
|
128
|
+
(_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.deactivate();
|
|
129
|
+
this.el.addEventListener("transitionend", () => {
|
|
134
130
|
this.onClose.emit();
|
|
135
|
-
this.el.shadowRoot &&
|
|
131
|
+
this.el.shadowRoot &&
|
|
132
|
+
(this.el.shadowRoot.querySelector(".drawer-body").scrollTop = 0);
|
|
136
133
|
}, { once: true });
|
|
137
134
|
}
|
|
138
135
|
}
|
|
139
|
-
/**
|
|
140
|
-
* Find and focus the first element in the drawer
|
|
141
|
-
*/
|
|
142
|
-
focusFirstElement() {
|
|
143
|
-
var _a;
|
|
144
|
-
const firstElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex="-1"])')[0];
|
|
145
|
-
if (firstElement) {
|
|
146
|
-
firstElement.focus();
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
136
|
/**
|
|
150
137
|
* Close the dialog when press Escape key
|
|
151
138
|
*/
|
|
152
139
|
onEscape(event) {
|
|
153
|
-
if (event.key ===
|
|
140
|
+
if (event.key === "Escape" || event.key === "Esc") {
|
|
154
141
|
this.close();
|
|
155
142
|
}
|
|
156
143
|
}
|
|
157
|
-
/**
|
|
158
|
-
* Call close function when clicking an element with data-dismiss="modal" attribute
|
|
159
|
-
*/
|
|
160
144
|
componentDidLoad() {
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
item.addEventListener('click', () => this.close());
|
|
164
|
-
});
|
|
165
|
-
const drawerContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".road-drawer-wrapper");
|
|
166
|
-
this.focusTrap = createFocusTrap(drawerContent, {
|
|
167
|
-
onActivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.add("focus-trapped"),
|
|
168
|
-
onDeactivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.remove("focus-trapped"),
|
|
169
|
-
tabbableOptions: {
|
|
170
|
-
getShadowRoot: true,
|
|
171
|
-
},
|
|
145
|
+
this.el.querySelectorAll('[data-dismiss="modal"]').forEach((item) => {
|
|
146
|
+
item.addEventListener("click", () => this.close());
|
|
172
147
|
});
|
|
173
148
|
if (this.isOpen) {
|
|
174
149
|
this.handleOpen(true);
|
|
175
150
|
}
|
|
176
151
|
}
|
|
152
|
+
getOrCreateFocusTrap() {
|
|
153
|
+
var _a;
|
|
154
|
+
if (!this.focusTrap) {
|
|
155
|
+
const drawerContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".road-drawer-wrapper");
|
|
156
|
+
this.focusTrap = createFocusTrap(drawerContent, {
|
|
157
|
+
onActivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.add("focus-trapped"),
|
|
158
|
+
onDeactivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.remove("focus-trapped"),
|
|
159
|
+
tabbableOptions: {
|
|
160
|
+
getShadowRoot: true,
|
|
161
|
+
},
|
|
162
|
+
});
|
|
163
|
+
}
|
|
164
|
+
return this.focusTrap;
|
|
165
|
+
}
|
|
177
166
|
render() {
|
|
178
167
|
var _a, _b, _c;
|
|
179
|
-
const drawerIsOpenClass = this.isOpen ?
|
|
180
|
-
const removePaddingClass = this.removePadding ?
|
|
181
|
-
const inverseHeaderClass = this.hasInverseHeader
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
const
|
|
185
|
-
const
|
|
168
|
+
const drawerIsOpenClass = this.isOpen ? "drawer-open" : "";
|
|
169
|
+
const removePaddingClass = this.removePadding ? "remove-padding" : "";
|
|
170
|
+
const inverseHeaderClass = this.hasInverseHeader
|
|
171
|
+
? "drawer-header-inverse"
|
|
172
|
+
: "";
|
|
173
|
+
const ariaLabel = (_a = this.ariaLabel) !== null && _a !== void 0 ? _a : "drawer";
|
|
174
|
+
const ariaLabelBack = (_b = this.ariaLabelBack) !== null && _b !== void 0 ? _b : "Back";
|
|
175
|
+
const ariaLabelClose = (_c = this.ariaLabelClose) !== null && _c !== void 0 ? _c : "Close";
|
|
176
|
+
const drawerDelimiterClass = this.drawerTitle && !this.hasInverseHeader ? "drawer-delimiter" : "";
|
|
186
177
|
const backIconElement = this.hasBackIcon ? (h("button", { type: "button", class: "drawer-action", "aria-label": ariaLabelBack, onClick: this.onClickBack }, h("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText)) : null;
|
|
187
178
|
const closeIconElement = this.hasCloseIcon ? (h("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": ariaLabelClose }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" }))) : null;
|
|
188
|
-
const drawerWidthValue = this.position ===
|
|
189
|
-
return (h(Host, { key: '
|
|
179
|
+
const drawerWidthValue = this.position === "bottom" ? "100%" : `${this.drawerWidth}px`;
|
|
180
|
+
return (h(Host, { key: '283b6f1f997e92d9305b0ddf7191b568e1cd1587', class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: 'cf42a9521522d35a5b2479ebabce388498cf410f', class: "road-drawer-wrapper" }, h("div", { key: 'a2c92e33dc4a758e5861c124d63f9228c75657a0', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: 'b3cd8785eabb3dd1699248d48f8fc6179b24cbe3', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, h("div", { key: '15da695b8585dedfb49b27882c84501b67a7a606', class: "drawer-content" }, h("header", { key: '601f047b868cf2794c7264ae6a12ba1d2699327e', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (h("h2", { class: "drawer-title" }, this.drawerTitle)) : (h("div", { class: "drawer-title" }, h("slot", { name: "title" }))), closeIconElement), h("div", { key: '1cf0ad2e8393893fd26277179a9877961966e0f2', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: '860817b92a5a97b74de9a60f403807ad9bc2b30d' })), h("footer", { key: '8b91123cef24c0f1fe3c36482f09f46558d575aa', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, h("slot", { key: '1c459e52b42e59f2074ce603f57bcaec9a00d827', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
|
|
190
181
|
}
|
|
191
182
|
static get is() { return "road-drawer"; }
|
|
192
183
|
static get encapsulation() { return "shadow"; }
|
|
@@ -260,7 +251,7 @@ export class Drawer {
|
|
|
260
251
|
"setter": false,
|
|
261
252
|
"attribute": "position",
|
|
262
253
|
"reflect": false,
|
|
263
|
-
"defaultValue": "
|
|
254
|
+
"defaultValue": "\"left\""
|
|
264
255
|
},
|
|
265
256
|
"drawerWidth": {
|
|
266
257
|
"type": "number",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host, Watch, State } from '@stencil/core';\nimport { navigationClose, navigationChevron } from '../../../icons';\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\n/**\n * @slot - Content of the drawer.\n * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set\n * @slot footer - footer of the drawer\n * `<div slot=\"footer\">`\n `<road-button color=\"primary\" outline=\"true\" expand=\"true\">Annuler</road-button>`\n `<road-button color=\"primary\" expand=\"true\" class=\"mb-0\">Valider</road-button>`\n ` </div>`\n */\n\n\n@Component({\n tag: 'road-drawer',\n styleUrl: 'drawer.css',\n shadow: true,\n})\nexport class Drawer {\n\n /**\n * Current reference of the drawer\n */\n @Element() el!: HTMLRoadDrawerElement;\n\n /**\n * Set isOpen property to true to open the drawer\n */\n @Prop({ mutable: true }) isOpen: boolean = false;\n\n /**\n * Set removePadding property to true to remove padding for drawer body\n */\n @Prop({ mutable: true }) removePadding: boolean = false;\n\n /**\n * position of the drawer. e.g. left, right, bottom\n */\n @Prop() position: string = 'left';\n\n /**\n * Width of the drawer\n */\n @Prop() drawerWidth: number = 480;\n\n /**\n * Inverse header colors\n */\n @Prop() hasInverseHeader: boolean = false;\n\n /**\n * Show / hide back icon\n */\n @Prop() hasBackIcon: boolean = false;\n\n /**\n * Show / hide back icon\n */\n @Prop() backText?: string;\n\n /**\n * Title of the drawer in the header bar\n */\n @Prop() drawerTitle?: string;\n\n /**\n * Aria label of the drawer\n */\n @Prop() ariaLabel?: string;\n\n /**\n * Aria label of the drawer\n */\n @Prop() ariaLabelBack?: string;\n\n /**\n * Aria label of the drawer\n */\n @Prop() ariaLabelClose?: string;\n\n /**\n * Show / hide close icon\n */\n @Prop() hasCloseIcon: boolean = true;\n\n /**\n * Override focus trap\n */\n @Prop() enabledFocusTrap: boolean = true;\n\n /**\n * Indicate when opening the drawer\n */\n @Event({ eventName: 'open' }) onOpen!: EventEmitter<void>;\n\n /**\n * Indicate when closing the drawer\n */\n @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n /**\n * Indicate when return to previous state of the drawer content\n */\n @Event({ eventName: 'back' }) onBack!: EventEmitter<void>;\n\n /**\n * Focus trap state\n */\n @State() focusTrap?: FocusTrap;\n\n /**\n * Footer Content state\n */\n @State() hasFooterContent = false;\n\n /**\n * Open the drawer\n */\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the drawer\n */\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n /**\n * Return to previous state of the drawer content\n */\n @Method()\n async back() {\n this.onBack.emit();\n }\n\n /**\n * Enable/disable focus trap so it can be overrided by the client in case of something appearing over the drawer like a modal for example\n */\n @Watch('enabledFocusTrap')\n handleFocusTrapProp(value: boolean) {\n setTimeout(() => {\n if (value) {\n this.focusTrap?.unpause();\n } else {\n this.focusTrap?.pause();\n }\n }, 100); // Timeout is used to ensure the drawer has been rendered when client wants to update the property at the same time\n }\n\n // @Watch('isOpen')\n // handleOpen(openValue: boolean) {\n // if(openValue === true) {\n // this.onOpen.emit();\n // } else {\n // this.el.addEventListener('transitionend', () => {\n // this.onClose.emit();\n // this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n // }, { once: true});\n // }\n // }\n\n\n @Watch('isOpen')\n handleOpen(openValue: boolean) {\n if (openValue === true) {\n this.onOpen.emit();\n // Focus the first button element after the drawer is opened then focus trap\n setTimeout(() => {\n this.focusFirstElement();\n if (this.focusTrap?.active) {\n this.focusTrap?.unpause();\n } else {\n this.focusTrap?.activate();\n }\n }, 50); // Add a slight delay to ensure the element is rendered\n } else {\n this.el.addEventListener('transitionend', () => {\n this.focusTrap?.deactivate();\n this.onClose.emit();\n this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n }, { once: true });\n }\n }\n\n private onFooterSlotChange = (event: Event) => {\n const slot = event.target as HTMLSlotElement;\n this.hasFooterContent = slot.assignedElements().length > 0;\n };\n\n /**\n * Find and focus the first element in the drawer\n */\n private focusFirstElement() {\n const firstElement = this.el.shadowRoot?.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex=\"-1\"])')[0] as HTMLElement;\n\n if (firstElement) {\n firstElement.focus();\n }\n }\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 clicking on the cross or layer\n */\n private onClickBack = (event: MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n\n this.back();\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 const drawerContent = this.el.shadowRoot?.querySelector(\".road-drawer-wrapper\");\n this.focusTrap = createFocusTrap(drawerContent as HTMLElement, {\n onActivate: () => drawerContent?.classList.add(\"focus-trapped\"),\n onDeactivate: () => drawerContent?.classList.remove(\"focus-trapped\"),\n tabbableOptions: {\n getShadowRoot: true,\n },\n });\n if (this.isOpen) {\n this.handleOpen(true);\n }\n }\n\n render() {\n const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';\n const removePaddingClass = this.removePadding ? 'remove-padding' : '';\n const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';\n const ariaLabel = this.ariaLabel ?? 'drawer';\n const ariaLabelBack = this.ariaLabelBack ?? 'Back';\n const ariaLabelClose = this.ariaLabelClose ?? 'Close';\n const drawerDelimiterClass = this.drawerTitle && !this.hasInverseHeader ? 'drawer-delimiter' : '';\n const backIconElement = this.hasBackIcon ? (\n <button type=\"button\" class=\"drawer-action\" aria-label={ariaLabelBack} onClick={this.onClickBack}>\n <road-icon icon={navigationChevron} rotate=\"180\"></road-icon>\n {this.backText}\n </button>\n ) : null;\n const closeIconElement = this.hasCloseIcon ? (\n <button type=\"button\" class=\"drawer-close\" onClick={this.onClick} aria-label={ariaLabelClose}>\n <road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon>\n </button>\n ) : null;\n const drawerWidthValue = this.position === 'bottom' ? '100%' : `${this.drawerWidth}px`;\n\n return (\n <Host class={`${drawerIsOpenClass} drawer-${this.position}`} tabindex=\"0\" role=\"dialog\" aria-label={ariaLabel}>\n <div class=\"road-drawer-wrapper\">\n <div class=\"drawer-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n <div class=\"drawer-dialog\" style={{ maxWidth: drawerWidthValue }} role=\"document\">\n <div class=\"drawer-content\">\n <header class={`drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}`}>\n {backIconElement}\n {this.drawerTitle ? (\n <h2 class=\"drawer-title\">{this.drawerTitle}</h2>\n ) : (\n <div class=\"drawer-title\">\n <slot name=\"title\" />\n </div>\n )}\n {closeIconElement}\n </header>\n <div class={`drawer-body ${removePaddingClass}`}>\n <slot />\n </div>\n <footer\n class={`drawer-footer ${removePaddingClass}`}\n hidden={!this.hasFooterContent}\n >\n <slot name=\"footer\" onSlotchange={this.onFooterSlotChange} />\n </footer>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n}\n"]}
|
|
1
|
+
{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Listen,\n Method,\n Prop,\n h,\n Host,\n Watch,\n State,\n} from \"@stencil/core\";\nimport { navigationClose, navigationChevron } from \"../../../icons\";\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\n\n/**\n * @slot - Content of the drawer.\n * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set\n * @slot footer - footer of the drawer\n * `<div slot=\"footer\">`\n `<road-button color=\"primary\" outline=\"true\" expand=\"true\">Annuler</road-button>`\n `<road-button color=\"primary\" expand=\"true\" class=\"mb-0\">Valider</road-button>`\n ` </div>`\n */\n\n@Component({\n tag: \"road-drawer\",\n styleUrl: \"drawer.css\",\n shadow: true,\n})\nexport class Drawer {\n /**\n * Current reference of the drawer\n */\n @Element() el!: HTMLRoadDrawerElement;\n\n /**\n * Set isOpen property to true to open the drawer\n */\n @Prop({ mutable: true }) isOpen: boolean = false;\n\n /**\n * Set removePadding property to true to remove padding for drawer body\n */\n @Prop({ mutable: true }) removePadding: boolean = false;\n\n /**\n * position of the drawer. e.g. left, right, bottom\n */\n @Prop() position: string = \"left\";\n\n /**\n * Width of the drawer\n */\n @Prop() drawerWidth: number = 480;\n\n /**\n * Inverse header colors\n */\n @Prop() hasInverseHeader: boolean = false;\n\n /**\n * Show / hide back icon\n */\n @Prop() hasBackIcon: boolean = false;\n\n /**\n * Show / hide back icon\n */\n @Prop() backText?: string;\n\n /**\n * Title of the drawer in the header bar\n */\n @Prop() drawerTitle?: string;\n\n /**\n * Aria label of the drawer\n */\n @Prop() ariaLabel?: string;\n\n /**\n * Aria label of the drawer\n */\n @Prop() ariaLabelBack?: string;\n\n /**\n * Aria label of the drawer\n */\n @Prop() ariaLabelClose?: string;\n\n /**\n * Show / hide close icon\n */\n @Prop() hasCloseIcon: boolean = true;\n\n /**\n * Override focus trap\n */\n @Prop() enabledFocusTrap: boolean = true;\n\n /**\n * Indicate when opening the drawer\n */\n @Event({ eventName: \"open\" }) onOpen!: EventEmitter<void>;\n\n /**\n * Indicate when closing the drawer\n */\n @Event({ eventName: \"close\" }) onClose!: EventEmitter<void>;\n\n /**\n * Indicate when return to previous state of the drawer content\n */\n @Event({ eventName: \"back\" }) onBack!: EventEmitter<void>;\n\n /**\n * Focus trap state\n */\n @State() focusTrap?: FocusTrap;\n\n /**\n * Footer Content state\n */\n @State() hasFooterContent = false;\n\n /**\n * Open the drawer\n */\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the drawer\n */\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n /**\n * Return to previous state of the drawer content\n */\n @Method()\n async back() {\n this.onBack.emit();\n }\n\n /**\n * Enable/disable focus trap so it can be overrided by the client in case of something appearing over the drawer like a modal for example\n */\n @Watch(\"enabledFocusTrap\")\n handleFocusTrapProp(value: boolean) {\n setTimeout(() => {\n if (value) {\n this.focusTrap?.unpause();\n } else {\n this.focusTrap?.pause();\n }\n }, 100); // Timeout is used to ensure the drawer has been rendered when client wants to update the property at the same time\n }\n\n@Watch(\"isOpen\")\nhandleOpen(openValue: boolean) {\n if (openValue === true) {\n this.onOpen.emit();\n this.el.addEventListener(\n \"transitionend\",\n () => {\n if (this.enabledFocusTrap) {\n this.getOrCreateFocusTrap().activate();\n }\n },\n { once: true },\n );\n } else {\n this.focusTrap?.deactivate();\n this.el.addEventListener(\n \"transitionend\",\n () => {\n this.onClose.emit();\n this.el.shadowRoot &&\n ((this.el.shadowRoot.querySelector(\".drawer-body\") as HTMLElement).scrollTop = 0);\n },\n { once: true },\n );\n }\n}\n\n private onFooterSlotChange = (event: Event) => {\n const slot = event.target as HTMLSlotElement;\n this.hasFooterContent = slot.assignedElements().length > 0;\n };\n\n /**\n * Find and focus the first element in the drawer\n */\n /**\n * Find and focus the first element in the drawer\n */\n // private focusFirstElement() {\n // const firstElement = this.el.shadowRoot?.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex=\"-1\"])')[0] as HTMLElement;\n //\n // if (firstElement) {\n // firstElement.focus();\n // }\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 clicking on the cross or layer\n */\n private onClickBack = (event: MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n\n this.back();\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 componentDidLoad() {\n this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach((item) => {\n item.addEventListener(\"click\", () => this.close());\n });\n\n if (this.isOpen) {\n this.handleOpen(true);\n }\n}\n\nprivate getOrCreateFocusTrap(): FocusTrap {\n if (!this.focusTrap) {\n const drawerContent = this.el.shadowRoot?.querySelector(\".road-drawer-wrapper\");\n this.focusTrap = createFocusTrap(drawerContent as HTMLElement, {\n onActivate: () => drawerContent?.classList.add(\"focus-trapped\"),\n onDeactivate: () => drawerContent?.classList.remove(\"focus-trapped\"),\n tabbableOptions: {\n getShadowRoot: true,\n },\n });\n }\n return this.focusTrap;\n}\n\n render() {\n const drawerIsOpenClass = this.isOpen ? \"drawer-open\" : \"\";\n const removePaddingClass = this.removePadding ? \"remove-padding\" : \"\";\n const inverseHeaderClass = this.hasInverseHeader\n ? \"drawer-header-inverse\"\n : \"\";\n const ariaLabel = this.ariaLabel ?? \"drawer\";\n const ariaLabelBack = this.ariaLabelBack ?? \"Back\";\n const ariaLabelClose = this.ariaLabelClose ?? \"Close\";\n const drawerDelimiterClass =\n this.drawerTitle && !this.hasInverseHeader ? \"drawer-delimiter\" : \"\";\n const backIconElement = this.hasBackIcon ? (\n <button\n type=\"button\"\n class=\"drawer-action\"\n aria-label={ariaLabelBack}\n onClick={this.onClickBack}\n >\n <road-icon icon={navigationChevron} rotate=\"180\"></road-icon>\n {this.backText}\n </button>\n ) : null;\n const closeIconElement = this.hasCloseIcon ? (\n <button\n type=\"button\"\n class=\"drawer-close\"\n onClick={this.onClick}\n aria-label={ariaLabelClose}\n >\n <road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon>\n </button>\n ) : null;\n const drawerWidthValue =\n this.position === \"bottom\" ? \"100%\" : `${this.drawerWidth}px`;\n\n return (\n <Host\n class={`${drawerIsOpenClass} drawer-${this.position}`}\n tabindex=\"0\"\n role=\"dialog\"\n aria-label={ariaLabel}\n >\n <div class=\"road-drawer-wrapper\">\n <div\n class=\"drawer-overlay\"\n onClick={this.onClick}\n tabindex=\"-1\"\n ></div>\n <div\n class=\"drawer-dialog\"\n style={{ maxWidth: drawerWidthValue }}\n role=\"document\"\n >\n <div class=\"drawer-content\">\n <header\n class={`drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}`}\n >\n {backIconElement}\n {this.drawerTitle ? (\n <h2 class=\"drawer-title\">{this.drawerTitle}</h2>\n ) : (\n <div class=\"drawer-title\">\n <slot name=\"title\" />\n </div>\n )}\n {closeIconElement}\n </header>\n <div class={`drawer-body ${removePaddingClass}`}>\n <slot />\n </div>\n <footer\n class={`drawer-footer ${removePaddingClass}`}\n hidden={!this.hasFooterContent}\n >\n <slot name=\"footer\" onSlotchange={this.onFooterSlotChange} />\n </footer>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -1889,7 +1889,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
|
|
|
1889
1889
|
return trap;
|
|
1890
1890
|
};
|
|
1891
1891
|
|
|
1892
|
-
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.
|
|
1892
|
+
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.3s ease-out, 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)}.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;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;opacity:1;transition:opacity 0.3s ease-out, visibility 0s linear 0s}:host(.drawer-open) .road-drawer-wrapper .drawer-dialog{transform:none}";
|
|
1893
1893
|
const RoadDrawerStyle0 = drawerCss;
|
|
1894
1894
|
|
|
1895
1895
|
const Drawer = class {
|
|
@@ -1909,7 +1909,7 @@ const Drawer = class {
|
|
|
1909
1909
|
/**
|
|
1910
1910
|
* position of the drawer. e.g. left, right, bottom
|
|
1911
1911
|
*/
|
|
1912
|
-
this.position =
|
|
1912
|
+
this.position = "left";
|
|
1913
1913
|
/**
|
|
1914
1914
|
* Width of the drawer
|
|
1915
1915
|
*/
|
|
@@ -1938,6 +1938,19 @@ const Drawer = class {
|
|
|
1938
1938
|
const slot = event.target;
|
|
1939
1939
|
this.hasFooterContent = slot.assignedElements().length > 0;
|
|
1940
1940
|
};
|
|
1941
|
+
/**
|
|
1942
|
+
* Find and focus the first element in the drawer
|
|
1943
|
+
*/
|
|
1944
|
+
/**
|
|
1945
|
+
* Find and focus the first element in the drawer
|
|
1946
|
+
*/
|
|
1947
|
+
// private focusFirstElement() {
|
|
1948
|
+
// const firstElement = this.el.shadowRoot?.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex="-1"])')[0] as HTMLElement;
|
|
1949
|
+
//
|
|
1950
|
+
// if (firstElement) {
|
|
1951
|
+
// firstElement.focus();
|
|
1952
|
+
// }
|
|
1953
|
+
// }
|
|
1941
1954
|
/**
|
|
1942
1955
|
* Close the dialog when clicking on the cross or layer
|
|
1943
1956
|
*/
|
|
@@ -1987,92 +2000,70 @@ const Drawer = class {
|
|
|
1987
2000
|
}
|
|
1988
2001
|
}, 100); // Timeout is used to ensure the drawer has been rendered when client wants to update the property at the same time
|
|
1989
2002
|
}
|
|
1990
|
-
// @Watch('isOpen')
|
|
1991
|
-
// handleOpen(openValue: boolean) {
|
|
1992
|
-
// if(openValue === true) {
|
|
1993
|
-
// this.onOpen.emit();
|
|
1994
|
-
// } else {
|
|
1995
|
-
// this.el.addEventListener('transitionend', () => {
|
|
1996
|
-
// this.onClose.emit();
|
|
1997
|
-
// this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);
|
|
1998
|
-
// }, { once: true});
|
|
1999
|
-
// }
|
|
2000
|
-
// }
|
|
2001
2003
|
handleOpen(openValue) {
|
|
2004
|
+
var _a;
|
|
2002
2005
|
if (openValue === true) {
|
|
2003
2006
|
this.onOpen.emit();
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
this.focusFirstElement();
|
|
2008
|
-
if ((_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.active) {
|
|
2009
|
-
(_b = this.focusTrap) === null || _b === void 0 ? void 0 : _b.unpause();
|
|
2007
|
+
this.el.addEventListener("transitionend", () => {
|
|
2008
|
+
if (this.enabledFocusTrap) {
|
|
2009
|
+
this.getOrCreateFocusTrap().activate();
|
|
2010
2010
|
}
|
|
2011
|
-
|
|
2012
|
-
(_c = this.focusTrap) === null || _c === void 0 ? void 0 : _c.activate();
|
|
2013
|
-
}
|
|
2014
|
-
}, 50); // Add a slight delay to ensure the element is rendered
|
|
2011
|
+
}, { once: true });
|
|
2015
2012
|
}
|
|
2016
2013
|
else {
|
|
2017
|
-
this.
|
|
2018
|
-
|
|
2019
|
-
(_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.deactivate();
|
|
2014
|
+
(_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.deactivate();
|
|
2015
|
+
this.el.addEventListener("transitionend", () => {
|
|
2020
2016
|
this.onClose.emit();
|
|
2021
|
-
this.el.shadowRoot &&
|
|
2017
|
+
this.el.shadowRoot &&
|
|
2018
|
+
(this.el.shadowRoot.querySelector(".drawer-body").scrollTop = 0);
|
|
2022
2019
|
}, { once: true });
|
|
2023
2020
|
}
|
|
2024
2021
|
}
|
|
2025
|
-
/**
|
|
2026
|
-
* Find and focus the first element in the drawer
|
|
2027
|
-
*/
|
|
2028
|
-
focusFirstElement() {
|
|
2029
|
-
var _a;
|
|
2030
|
-
const firstElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex="-1"])')[0];
|
|
2031
|
-
if (firstElement) {
|
|
2032
|
-
firstElement.focus();
|
|
2033
|
-
}
|
|
2034
|
-
}
|
|
2035
2022
|
/**
|
|
2036
2023
|
* Close the dialog when press Escape key
|
|
2037
2024
|
*/
|
|
2038
2025
|
onEscape(event) {
|
|
2039
|
-
if (event.key ===
|
|
2026
|
+
if (event.key === "Escape" || event.key === "Esc") {
|
|
2040
2027
|
this.close();
|
|
2041
2028
|
}
|
|
2042
2029
|
}
|
|
2043
|
-
/**
|
|
2044
|
-
* Call close function when clicking an element with data-dismiss="modal" attribute
|
|
2045
|
-
*/
|
|
2046
2030
|
componentDidLoad() {
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
item.addEventListener('click', () => this.close());
|
|
2050
|
-
});
|
|
2051
|
-
const drawerContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".road-drawer-wrapper");
|
|
2052
|
-
this.focusTrap = createFocusTrap(drawerContent, {
|
|
2053
|
-
onActivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.add("focus-trapped"),
|
|
2054
|
-
onDeactivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.remove("focus-trapped"),
|
|
2055
|
-
tabbableOptions: {
|
|
2056
|
-
getShadowRoot: true,
|
|
2057
|
-
},
|
|
2031
|
+
this.el.querySelectorAll('[data-dismiss="modal"]').forEach((item) => {
|
|
2032
|
+
item.addEventListener("click", () => this.close());
|
|
2058
2033
|
});
|
|
2059
2034
|
if (this.isOpen) {
|
|
2060
2035
|
this.handleOpen(true);
|
|
2061
2036
|
}
|
|
2062
2037
|
}
|
|
2038
|
+
getOrCreateFocusTrap() {
|
|
2039
|
+
var _a;
|
|
2040
|
+
if (!this.focusTrap) {
|
|
2041
|
+
const drawerContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".road-drawer-wrapper");
|
|
2042
|
+
this.focusTrap = createFocusTrap(drawerContent, {
|
|
2043
|
+
onActivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.add("focus-trapped"),
|
|
2044
|
+
onDeactivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.remove("focus-trapped"),
|
|
2045
|
+
tabbableOptions: {
|
|
2046
|
+
getShadowRoot: true,
|
|
2047
|
+
},
|
|
2048
|
+
});
|
|
2049
|
+
}
|
|
2050
|
+
return this.focusTrap;
|
|
2051
|
+
}
|
|
2063
2052
|
render() {
|
|
2064
2053
|
var _a, _b, _c;
|
|
2065
|
-
const drawerIsOpenClass = this.isOpen ?
|
|
2066
|
-
const removePaddingClass = this.removePadding ?
|
|
2067
|
-
const inverseHeaderClass = this.hasInverseHeader
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
const
|
|
2071
|
-
const
|
|
2054
|
+
const drawerIsOpenClass = this.isOpen ? "drawer-open" : "";
|
|
2055
|
+
const removePaddingClass = this.removePadding ? "remove-padding" : "";
|
|
2056
|
+
const inverseHeaderClass = this.hasInverseHeader
|
|
2057
|
+
? "drawer-header-inverse"
|
|
2058
|
+
: "";
|
|
2059
|
+
const ariaLabel = (_a = this.ariaLabel) !== null && _a !== void 0 ? _a : "drawer";
|
|
2060
|
+
const ariaLabelBack = (_b = this.ariaLabelBack) !== null && _b !== void 0 ? _b : "Back";
|
|
2061
|
+
const ariaLabelClose = (_c = this.ariaLabelClose) !== null && _c !== void 0 ? _c : "Close";
|
|
2062
|
+
const drawerDelimiterClass = this.drawerTitle && !this.hasInverseHeader ? "drawer-delimiter" : "";
|
|
2072
2063
|
const backIconElement = this.hasBackIcon ? (h("button", { type: "button", class: "drawer-action", "aria-label": ariaLabelBack, onClick: this.onClickBack }, h("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText)) : null;
|
|
2073
2064
|
const closeIconElement = this.hasCloseIcon ? (h("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": ariaLabelClose }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" }))) : null;
|
|
2074
|
-
const drawerWidthValue = this.position ===
|
|
2075
|
-
return (h(Host, { key: '
|
|
2065
|
+
const drawerWidthValue = this.position === "bottom" ? "100%" : `${this.drawerWidth}px`;
|
|
2066
|
+
return (h(Host, { key: '283b6f1f997e92d9305b0ddf7191b568e1cd1587', class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: 'cf42a9521522d35a5b2479ebabce388498cf410f', class: "road-drawer-wrapper" }, h("div", { key: 'a2c92e33dc4a758e5861c124d63f9228c75657a0', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: 'b3cd8785eabb3dd1699248d48f8fc6179b24cbe3', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, h("div", { key: '15da695b8585dedfb49b27882c84501b67a7a606', class: "drawer-content" }, h("header", { key: '601f047b868cf2794c7264ae6a12ba1d2699327e', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (h("h2", { class: "drawer-title" }, this.drawerTitle)) : (h("div", { class: "drawer-title" }, h("slot", { name: "title" }))), closeIconElement), h("div", { key: '1cf0ad2e8393893fd26277179a9877961966e0f2', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: '860817b92a5a97b74de9a60f403807ad9bc2b30d' })), h("footer", { key: '8b91123cef24c0f1fe3c36482f09f46558d575aa', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, h("slot", { key: '1c459e52b42e59f2074ce603f57bcaec9a00d827', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
|
|
2076
2067
|
}
|
|
2077
2068
|
get el() { return getElement(this); }
|
|
2078
2069
|
static get watchers() { return {
|