@roadtrip/components 3.33.4 → 3.33.6
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/index-bf8a763e.js.map +1 -1
- package/dist/cjs/road-badge_14.cjs.entry.js +13 -3
- package/dist/cjs/road-badge_14.cjs.entry.js.map +1 -1
- package/dist/collection/components/drawer/drawer.js +4 -2
- package/dist/collection/components/drawer/drawer.js.map +1 -1
- package/dist/collection/components/icon/svg/flag-luxembourg-color.svg +1 -0
- package/dist/collection/components/icon/svg/vehicle-5-doors-hatchback-color.svg +1 -1
- package/dist/collection/components/input-group/input-group.js +9 -1
- package/dist/collection/components/input-group/input-group.js.map +1 -1
- package/dist/esm/index-f1358629.js.map +1 -1
- package/dist/esm/road-badge_14.entry.js +13 -3
- package/dist/esm/road-badge_14.entry.js.map +1 -1
- package/dist/icons/icons.svg +1 -1
- package/dist/icons/index.d.ts +1 -0
- package/dist/icons/index.js +2 -1
- package/dist/roadtrip/{p-678b1218.entry.js → p-42c0e1a9.entry.js} +3 -3
- package/dist/roadtrip/p-42c0e1a9.entry.js.map +1 -0
- package/dist/roadtrip/p-db82e012.js.map +1 -1
- package/dist/roadtrip/roadtrip.css +1 -1
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/dist/roadtrip/svg/flag-luxembourg-color.svg +1 -0
- package/dist/roadtrip/svg/vehicle-5-doors-hatchback-color.svg +1 -1
- package/dist/types/components-react.d.ts +4 -0
- package/hydrate/index.js +13 -3
- package/hydrate/index.mjs +13 -3
- package/icons/icons.svg +1 -1
- package/icons/index.d.ts +1 -0
- package/icons/index.js +2 -1
- package/package.json +1 -1
- package/dist/roadtrip/p-678b1218.entry.js.map +0 -1
|
@@ -125,7 +125,7 @@ export class Drawer {
|
|
|
125
125
|
});
|
|
126
126
|
}
|
|
127
127
|
render() {
|
|
128
|
-
var _a, _b, _c;
|
|
128
|
+
var _a, _b, _c, _d;
|
|
129
129
|
const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';
|
|
130
130
|
const removePaddingClass = this.removePadding ? 'remove-padding' : '';
|
|
131
131
|
const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';
|
|
@@ -136,7 +136,9 @@ export class Drawer {
|
|
|
136
136
|
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;
|
|
137
137
|
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;
|
|
138
138
|
const drawerWidthValue = this.position === 'bottom' ? '100%' : `${this.drawerWidth}px`;
|
|
139
|
-
|
|
139
|
+
const footerSlotElement = (_d = this.el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('slot[name="footer"]');
|
|
140
|
+
const hasFooterContent = footerSlotElement instanceof HTMLSlotElement && footerSlotElement.assignedNodes().length > 0;
|
|
141
|
+
return (h(Host, { key: 'ba990bd447f7c8eb35e7cad402f7f4154a84a8d9', class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: 'f32e6d1a0924f48e0610df3d800ce5d6eba9a296', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: '41f2848256ecaf5563a33ce230a25a8c6b8e564a', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document", tabindex: "0" }, h("div", { key: '342dae28d3322659f296027cda7efcc40efc96a4', class: "drawer-content" }, h("header", { key: '018d2bd85e27456281fd94658bf264a45516c350', 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: '93f188c1c870bef15804884d67d30d37ece4fe94', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: '6eea3bb0fcfba515561ec38d1a7602c06584e285' })), h("footer", { key: 'a068ef915c86f1bb446a29b38e8cb30e77599d3f', class: `drawer-footer ${removePaddingClass}`, style: { display: hasFooterContent ? 'block' : 'none' } }, h("slot", { key: '4983c11aedb830637585a978868680e30f7d8dc6', name: "footer" }))))));
|
|
140
142
|
}
|
|
141
143
|
static get is() { return "road-drawer"; }
|
|
142
144
|
static get encapsulation() { return "shadow"; }
|
|
@@ -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 } from '@stencil/core';\nimport { navigationClose, navigationChevron } from '../../../icons';\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 * 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 * 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 // @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\n setTimeout(() => this.focusFirstButton(), 50); // Add a slight delay to ensure the element is rendered\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 * Find and focus the first button element in the drawer\n */\n private focusFirstButton() {\n const buttonElement = this.el.shadowRoot?.querySelector('button') as HTMLElement;\n \n if (buttonElement) {\n buttonElement.focus(); // Focus the first button element\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\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=\"drawer-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n <div class=\"drawer-dialog\" style={{ maxWidth: drawerWidthValue }} role=\"document\" tabindex=\"0\">\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 class={`drawer-footer ${removePaddingClass}`}>\n <slot name=\"footer\" />\n </footer>\n </div>\n </div>\n </Host>\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 { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host, Watch } from '@stencil/core';\nimport { navigationClose, navigationChevron } from '../../../icons';\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 * 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 * 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 // @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\n setTimeout(() => this.focusFirstButton(), 50); // Add a slight delay to ensure the element is rendered\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 * Find and focus the first button element in the drawer\n */\n private focusFirstButton() {\n const buttonElement = this.el.shadowRoot?.querySelector('button') as HTMLElement;\n \n if (buttonElement) {\n buttonElement.focus(); // Focus the first button element\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\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 const footerSlotElement = this.el.shadowRoot?.querySelector('slot[name=\"footer\"]');\n const hasFooterContent = footerSlotElement instanceof HTMLSlotElement && footerSlotElement.assignedNodes().length > 0;\n \n return (\n <Host class={`${drawerIsOpenClass} drawer-${this.position}`} tabindex=\"0\" role=\"dialog\" aria-label={ariaLabel}>\n <div class=\"drawer-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n <div class=\"drawer-dialog\" style={{ maxWidth: drawerWidthValue }} role=\"document\" tabindex=\"0\">\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 class={`drawer-footer ${removePaddingClass}`} style={{ display: hasFooterContent ? 'block' : 'none' }}>\n <slot name=\"footer\" />\n </footer>\n </div>\n </div>\n </Host>\n );\n }\n \n}"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M24 4H0v16h24V4Z" fill="#DDDFE4"/><path d="M23 12H1v6.999h22V12Z" fill="#00A3E0"/><path d="M23 5H1v7h22V5Z" fill="#EF3340"/><path d="M23 9.668H1v4.667h22V9.668Z" fill="#fff"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M45.63 10.35c0-4.69-3.81-8.5-8.5-8.5H26.77c-4.69 0-8.5 3.81-8.5 8.5v5.92l2.62 2.62c2.62-.64 7.83-.87 11.06-.87 3.23 0 8.44.24 11.06.87l2.62-2.62v-5.92Zm-2.5 6.02c-3.87-.82-10.34-.85-11.18-.85-.84 0-7.31.03-11.18.85v-6.02c0-3.31 2.69-6 6-6h10.36c3.31 0 6 2.69 6 6v6.02ZM18.27 53.71l2.5-2.14V35.11l-2.5 2.5v16.1Zm24.86-18.56v16.42l2.5 2.14V37.65l-2.5-2.5Z"/><path d="m43.13 35.09 1.73-1.73.77.77v-12.6l-2.62-2.62c-.47 1.9-2.23 4.62-3.92 6.38-1.58-.5-4.37-1.05-7.14-1.05-2.77 0-5.57.55-7.14 1.05-1.69-1.76-3.44-4.48-3.91-6.38l-2.62 2.62v12.55l.73-.73 1.77 1.77V24.21c.79 1.17 1.67 2.24 2.47 3.04v15.38c.04-.1.08-.2.12-.28l.54-1.12 1.13.53c.17.08.43.17.72.26v-14.4c1.31-.39 3.73-.88 6.21-.88s4.9.49 6.21.88v14.4c.29-.09.54-.18.72-.26l1.13-.53.54 1.12c.04.09.08.19.12.28V27.25c.8-.81 1.68-1.88 2.47-3.04v10.88h-.03Z"/><path d="M41.89 50.51c-.07-1.87-.43-6.23-1.35-8.17L40 41.22l-1.13.53c-.96.45-3.83 1.12-6.93 1.12-3.1 0-5.96-.67-6.93-1.12l-1.13-.53-.54 1.12c-.92 1.93-1.28 6.3-1.35 8.17l-3.74 3.21v.58c0 3.43 6.14 7.86 12.67 7.86h2.02c6.53 0 12.67-4.43 12.67-7.86v-.58l-3.74-3.21h.02Zm-16.62-6.03c1.67.48 4.17.89 6.68.89s5.01-.41 6.68-.89c.4 1.59.66 4.06.74 5.71-1.51.42-4.25.89-7.43.89-3.18 0-5.92-.47-7.43-.89.08-1.65.35-4.13.74-5.71h.02Zm7.69 15.17h-2.02c-5.46 0-9.33-3.26-10.05-4.89l2.64-2.26c1.67.5 4.79 1.08 8.42 1.08s6.75-.58 8.42-1.08l2.64 2.26c-.72 1.63-4.59 4.89-10.05 4.89ZM15.44 15.2a1.25 1.25 0 0 0 0 1.77l1.92 1.92-9.64 9.65 1.77 1.77L20.9 18.9l-3.69-3.69a1.25 1.25 0 0 0-1.77 0v-.01Zm40.75 13.34-9.64-9.64 1.92-1.92c.49-.49.49-1.28 0-1.77a1.25 1.25 0 0 0-1.77 0l-3.69 3.69 11.41 11.41 1.77-1.77ZM7.79 44.58l1.76 1.77 11.22-11.24-1.76-1.77L7.79 44.58Zm37.08-11.223-1.768 1.768 11.236 11.236 1.768-1.768L44.87 33.357Z" fill="var(--road-icon-variant, rgb(252, 183, 49))"/></svg>
|
|
@@ -30,12 +30,20 @@ export class InputGroup {
|
|
|
30
30
|
const hasPrepend = !!this.el.querySelector('[slot="prepend"]');
|
|
31
31
|
const formControl = this.el.querySelector('.form-control');
|
|
32
32
|
const formLabel = this.el.querySelector('.form-label');
|
|
33
|
+
const formSelect = this.el.querySelector('.form-select');
|
|
34
|
+
const formSelectLabel = this.el.querySelector('.form-select-label');
|
|
33
35
|
if (formControl) {
|
|
34
36
|
formControl.style.textIndent = hasPrepend ? '2rem' : '';
|
|
35
37
|
}
|
|
38
|
+
if (formSelect) {
|
|
39
|
+
formSelect.style.textIndent = hasPrepend ? '2rem' : '';
|
|
40
|
+
}
|
|
36
41
|
if (formLabel) {
|
|
37
42
|
formLabel.style.textIndent = hasPrepend ? '2.7rem' : '';
|
|
38
43
|
}
|
|
44
|
+
if (formSelectLabel) {
|
|
45
|
+
formSelectLabel.style.textIndent = hasPrepend ? '2.7rem' : '';
|
|
46
|
+
}
|
|
39
47
|
}
|
|
40
48
|
componentDidLoad() {
|
|
41
49
|
this.updateDisabledState(this.disabled);
|
|
@@ -50,7 +58,7 @@ export class InputGroup {
|
|
|
50
58
|
? `size-${this.el.querySelector('road-input').sizes}`
|
|
51
59
|
: '';
|
|
52
60
|
const disabledClass = this.disabled ? 'is-disabled' : '';
|
|
53
|
-
return (h("div", { key: '
|
|
61
|
+
return (h("div", { key: '99a512f367c7dfb57297073d05d3e341df818ab3', class: `input-group ${errorClass} ${disabledClass} ${sizeClass}` }, h("div", { key: '9e89c27036e321223513c99d3f399694008a4b99', class: "input-group-prepend" }, h("slot", { key: 'f448db90587308448b33aeeff57e26f9943c836c', name: "prepend" })), h("slot", { key: '67214bd2d0fed61ae080aa10306b98bb376f8f7d' }), h("div", { key: '152a4f643d38c0b443a39d3cc8fa781c9b99f87b', class: "input-group-append" }, h("slot", { key: '549c3c8f388cf6f26c1080da788a9aadf53ac61b', name: "append" }))));
|
|
54
62
|
}
|
|
55
63
|
static get is() { return "road-input-group"; }
|
|
56
64
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-group.js","sourceRoot":"","sources":["../../../src/components/input-group/input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEnE;;;;GAIG;AAOH,MAAM,OAAO,UAAU;IALvB;QAQE,4EAA4E;QACpE,aAAQ,GAAY,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"input-group.js","sourceRoot":"","sources":["../../../src/components/input-group/input-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @slot prepend - Add icon or button before the field.\n * @slot - Add the road-input or road-select here.\n * @slot append - Add icon or button after the field.\n */\n\n@Component({\n tag: 'road-input-group',\n styleUrl: 'input-group.css',\n shadow: true,\n})\nexport class InputGroup {\n @Element() el!: HTMLRoadInputGroupElement;\n\n /** Disables the entire input group and propagates the state to children. */\n @Prop() disabled: boolean = false;\n\n /** Watches for changes in the `disabled` prop and updates child elements. */\n @Watch('disabled')\n handleDisabledChange(newValue: boolean) {\n this.updateDisabledState(newValue);\n }\n\n /** Applique le `disabled` aux enfants */\n private updateDisabledState(isDisabled: boolean) {\n const children = this.el.querySelectorAll('road-input, road-button, road-select');\n children.forEach(child => {\n if (isDisabled) {\n child.setAttribute('disabled', '');\n } else {\n child.removeAttribute('disabled');\n }\n });\n }\n\n /** Vérifie et applique le `text-indent` si `prepend` est présent */\n private updateIndentation() {\n const hasPrepend = !!this.el.querySelector('[slot=\"prepend\"]');\n const formControl = this.el.querySelector('.form-control') as HTMLElement;\n const formLabel = this.el.querySelector('.form-label') as HTMLElement;\n const formSelect = this.el.querySelector('.form-select') as HTMLElement;\n const formSelectLabel = this.el.querySelector('.form-select-label') as HTMLElement;\n \n if (formControl) {\n formControl.style.textIndent = hasPrepend ? '2rem' : '';\n }\n if (formSelect) {\n formSelect.style.textIndent = hasPrepend ? '2rem' : '';\n }\n if (formLabel) {\n formLabel.style.textIndent = hasPrepend ? '2.7rem' : '';\n }\n if (formSelectLabel) {\n formSelectLabel.style.textIndent = hasPrepend ? '2.7rem' : '';\n }\n }\n\n componentDidLoad() {\n this.updateDisabledState(this.disabled);\n this.updateIndentation(); // Appliquer les styles au montage\n\n // Observer les mutations (au cas où des éléments sont ajoutés dynamiquement)\n const observer = new MutationObserver(() => this.updateIndentation());\n observer.observe(this.el, { childList: true, subtree: true });\n }\n\n render() {\n const errorClass = this.el.querySelector('road-input[error]') ? 'is-invalid' : '';\n const sizeClass = this.el.querySelector('road-input[sizes]') \n ? `size-${(this.el.querySelector('road-input') as HTMLRoadInputElement).sizes}` \n : '';\n const disabledClass = this.disabled ? 'is-disabled' : '';\n\n return (\n <div class={`input-group ${errorClass} ${disabledClass} ${sizeClass}`}>\n <div class=\"input-group-prepend\">\n <slot name=\"prepend\" />\n </div>\n <slot />\n <div class=\"input-group-append\">\n <slot name=\"append\" />\n </div>\n </div>\n );\n }\n}\n"]}
|