npm - @roadtrip/components - Versions diffs - 3.28.0 → 3.29.0 - Mend

@roadtrip/components 3.28.0 → 3.29.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.

Files changed (48) hide show

package/dist/cjs/road-tab-button.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-12592729.js');
-const tabButtonCss = ":host{box-sizing:border-box;font-weight:700;color:var(--tab-color);outline:0;transition:background 0.15s ease-in-out}:host(.tab-secondary){--tab-underline-selected:var(--road-secondary-600)}:host(.tab-selected){color:var(--tab-color-selected)}:host(.tab-selected) ::slotted(road-icon){color:var(--tab-color-selected)}:host(.tab-selected) .button-native::after{background:var(--tab-underline-selected);opacity:1;transform:none}:host(:hover){background:var(--tab-background-hover)}:host(.focus-visible){background:var(--tab-background-focused);outline:auto}:host(.tab-disabled){background:var(--road-surface-disabled)}:host(.tab-disabled) .button-native{cursor:not-allowed}:host(.tab-disabled) ::slotted(road-label){color:var(--road-on-surface-disabled)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;min-height:3.5rem;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.button-native::after{position:absolute;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";opacity:0;transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transform:scaleX(0);transform-origin:center}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:center;justify-content:center;width:100%;height:100%}:host ::slotted(road-icon){color:var(--tab-color)}:host(.tab-layout-icon-start) ::slotted(road-icon){margin-right:0.5rem}:host(.tab-layout-icon-top) .button-inner{flex-direction:column}:host ::slotted(road-label){display:-webkit-box;max-width:12.5rem;overflow:hidden;font-size:1rem;color:var(--road-on-surface);-webkit-line-clamp:1;-webkit-box-orient:vertical;text-align:center;text-overflow:ellipsis;white-space:inherit}:host(.tab-layout-icon-top) ::slotted(road-label){margin-top:0.25rem;font-size:1rem}";
+const tabButtonCss = ":host{box-sizing:border-box;font-weight:700;color:var(--tab-color);outline:0;transition:background 0.15s ease-in-out}:host(.tab-secondary){--tab-underline-selected:var(--road-secondary-600)}:host(.tab-selected){color:var(--tab-color-selected)}:host(.tab-selected) ::slotted(road-icon){color:var(--tab-color-selected)}:host(.tab-selected) .button-native::after{background:var(--tab-underline-selected);opacity:1;transform:none}:host(:hover){background:var(--tab-background-hover)}:host(.focus-visible){background:var(--tab-background-focused);outline:auto}:host(.tab-disabled){background:var(--road-surface-disabled)}:host(.tab-disabled) .button-native{cursor:not-allowed}:host(.tab-disabled) ::slotted(road-label){color:var(--road-on-surface-disabled)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;min-height:3.5rem;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.button-native::after{position:absolute;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";background-color:var(--road-input-outline);opacity:1;transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transform:none;transform-origin:center}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:center;justify-content:center;width:100%;height:100%}:host ::slotted(road-icon){color:var(--tab-color)}:host(.tab-layout-icon-start) ::slotted(road-icon){margin-right:0.5rem}:host(.tab-layout-icon-top) .button-inner{flex-direction:column}:host ::slotted(road-label){display:-webkit-box;max-width:12.5rem;overflow:hidden;font-size:1rem;color:var(--road-on-surface);-webkit-line-clamp:1;-webkit-box-orient:vertical;text-align:center;text-overflow:ellipsis;white-space:inherit}:host(.tab-layout-icon-top) ::slotted(road-label){margin-top:0.25rem;font-size:1rem}";
 const TabButton = class {
   constructor(hostRef) {

package/dist/cjs/road-tab-button.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"road-tab-button.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/tab-button/tab-button.css?tag=road-tab-button&encapsulation=shadow","src/components/tab-button/tab-button.tsx"],"sourcesContent":["/\n Tab button\n \n Index\n * - Button\n * - Native\n * - Underline\n * - Inner\n * - Icon\n * - Label\n \n /\n\n/*\n @prop --padding-start: Left padding of the button\n * @prop --padding-end: Right padding of the button\n * @prop --tab-color: Default color of the tab button text\n * @prop --tab-color-selected: Color of the tab button text when selected\n * @prop --tab-unerline-selected: Color of the tab button underline when selected\n * @prop --tab-background-hover: Color of the tab button when hover by a mouse\n * @prop --tab-background-focused: Color of the tab button when focused with the tab key\n /\n\n\n/ BUTTON\n -------------------- /\n\n:host {\n box-sizing: border-box;\n font-weight: 700;\n color: var(--tab-color);\n outline: 0;\n transition: background 0.15s ease-in-out;\n}\n\n/\n Active state\n /\n\n:host(.tab-secondary) {\n --tab-underline-selected: var(--road-secondary-600);\n}\n\n:host(.tab-selected) {\n color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) ::slotted(road-icon) {\n color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) .button-native::after {\n background: var(--tab-underline-selected);\n opacity: 1;\n transform: none;\n}\n\n/\n Hover state\n /\n\n:host(:hover) {\n background: var(--tab-background-hover);\n}\n\n/\n Focus state\n /\n\n:host(.focus-visible) {\n background: var(--tab-background-focused);\n outline: auto;\n}\n\n/\n Disabled\n /\n\n:host(.tab-disabled) {\n background: var(--road-surface-disabled);\n}\n\n:host(.tab-disabled) .button-native{\n cursor: not-allowed;\n}\n\n:host(.tab-disabled) ::slotted(road-label) {\n color: var(--road-on-surface-disabled);\n}\n\n\n/ NATIVE\n -------------------- /\n\n.button-native {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: inherit;\n align-items: inherit;\n justify-content: inherit;\n width: 100%;\n height: 100%;\n min-height: 3.5rem;\n padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n margin: 0;\n overflow: hidden;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n color: inherit;\n text-align: inherit;\n text-decoration: none;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n letter-spacing: inherit;\n white-space: inherit;\n cursor: pointer;\n background: transparent;\n -webkit-user-drag: none;\n border-color: initial;\n border-style: initial;\n border-width: 0;\n border-radius: inherit;\n border-image: initial;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/ UNDERLINE\n -------------------- /\n\n.button-native::after {\n position: absolute;\n bottom: 0;\n left: 0;\n display: block;\n width: 100%;\n height: 2px;\n content: \"\";\n opacity: 0;\n transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n transform: scaleX(0);\n transform-origin: center;\n}\n\n/ INNER\n -------------------- /\n\n.button-inner {\n position: relative;\n z-index: 1;\n display: flex;\n flex-flow: inherit;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n/ ICON\n -------------------- /\n\n:host ::slotted(road-icon) {\n color: var(--tab-color);\n}\n\n:host(.tab-layout-icon-start) ::slotted(road-icon) {\n margin-right: 0.5rem;\n}\n\n:host(.tab-layout-icon-top) .button-inner {\n flex-direction: column;\n}\n\n/ LABEL\n -------------------- /\n\n:host ::slotted(road-label) {\n display: -webkit-box;\n max-width: 12.5rem;\n overflow: hidden;\n font-size: 1rem;\n color: var(--road-on-surface);\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n text-align: center;\n text-overflow: ellipsis;\n white-space: inherit;\n}\n\n:host(.tab-layout-icon-top) ::slotted(road-label) {\n margin-top: 0.25rem;\n font-size: 1rem;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/\n @slot - Content of the tab-button, it should be road-icon and road-label elements.\n \n @part native - The native HTML anchor element that wraps all child elements.\n /\n\n@Component({\n tag: 'road-tab-button',\n styleUrl: 'tab-button.css',\n shadow: true,\n})\nexport class TabButton {\n\n @Element() el!: HTMLRoadTabButtonElement;\n\n /\n This attribute instructs browsers to download a URL instead of navigating to\n * it, so the user will be prompted to save it as a local file. If the attribute\n * has a value, it is used as the pre-filled file name in the Save prompt\n * (the user can still change the file name if they want).\n /\n @Prop() download: string \| undefined;\n\n /\n Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered.\n /\n @Prop() href: string \| undefined;\n\n /\n Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n /\n @Prop() rel: string \| undefined;\n\n /\n Set the layout of the text and icon in the tab bar.\n * It defaults to `'icon-start'`.\n /\n @Prop() layout?: 'icon-start' \| 'icon-top' = 'icon-start';\n\n /\n The selected tab component\n /\n @Prop({ mutable: true }) selected = false;\n\n /\n The disabled tab \n /\n @Prop({ mutable: true }) disabled = false;\n\n /\n A tab id must be provided for each `road-tab`. It's used internally to reference\n /\n @Prop() tab?: string;\n\n /\n Specifies where to display the linked URL.\n * Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n /\n @Prop() target: string \| undefined;\n\n /\n Emitted when the tab bar is clicked\n * @internal\n /\n @Event() roadtabbuttonclick!: EventEmitter;\n /* @internal */\n @Event() roadTabButtonClick!: EventEmitter;\n\n @Listen('roadTabBarChanged', { target: 'window' })\n @Listen('roadTabbarchanged', { target: 'window' })\n onTabBarChanged(ev: CustomEvent) {\n const dispatchedFrom = ev.target as HTMLElement;\n const parent = this.el.parentElement as EventTarget;\n\n if ((ev.composedPath && ev.composedPath().includes(parent)) \|\| (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n this.selected = this.tab === ev.detail.tab;\n }\n }\n\n private selectTab(ev: Event \| KeyboardEvent) {\n if (this.tab !== undefined) {\n this.roadtabbuttonclick.emit({\n tab: this.tab,\n href: this.href,\n selected: this.selected,\n });\n this.roadTabButtonClick.emit({\n tab: this.tab,\n href: this.href,\n selected: this.selected,\n });\n\n ev.preventDefault();\n }\n }\n\n private get hasLabel() {\n return !!this.el.querySelector('road-label');\n }\n\n private get hasIcon() {\n return !!this.el.querySelector('road-icon');\n }\n\n private get tabIndex() {\n const hasTabIndex = this.el.hasAttribute('tabindex');\n\n if (hasTabIndex) {\n return this.el.getAttribute('tabindex');\n }\n\n return 0;\n }\n\n private onKeyUp = (ev: KeyboardEvent) => {\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\n this.selectTab(ev);\n }\n };\n\n private onClick = (ev: Event) => {\n this.selectTab(ev);\n };\n\n render() {\n const { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab, disabled } = this;\n const attrs = {\n download: this.download,\n href: !disabled ? href : undefined, // Ne pas inclure le lien si désactivé\n rel,\n target,\n };\n \n return (\n <Host\n onClick={(ev: Event) => !disabled && this.onClick(ev)} // Bloquer les clics si désactivé\n onKeyup={(ev: KeyboardEvent) => !disabled && this.onKeyUp(ev)} // Bloquer les interactions clavier si désactivé\n role=\"tab\"\n tabindex={disabled ? -1 : tabIndex} // Désactiver le focus si désactivé\n aria-selected={selected ? 'true' : 'false'}\n aria-disabled={disabled ? 'true' : null} // Ajout pour l'accessibilité\n id={tab !== undefined ? `tab-button-${tab}` : null}\n class={{\n 'tab-selected': selected,\n 'tab-has-label': hasLabel,\n 'tab-has-icon': hasIcon,\n 'tab-has-label-only': hasLabel && !hasIcon,\n 'tab-has-icon-only': hasIcon && !hasLabel,\n [`tab-layout-${layout}`]: true,\n 'tab-disabled': disabled, // Classe CSS pour les styles désactivés\n }}\n >\n <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n <span class=\"button-inner\">\n <slot/>\n </span>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"road-tab-button.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/tab-button/tab-button.css?tag=road-tab-button&encapsulation=shadow","src/components/tab-button/tab-button.tsx"],"sourcesContent":["/\n Tab button\n \n Index\n * - Button\n * - Native\n * - Underline\n * - Inner\n * - Icon\n * - Label\n \n /\n\n/*\n @prop --padding-start: Left padding of the button\n * @prop --padding-end: Right padding of the button\n * @prop --tab-color: Default color of the tab button text\n * @prop --tab-color-selected: Color of the tab button text when selected\n * @prop --tab-unerline-selected: Color of the tab button underline when selected\n * @prop --tab-background-hover: Color of the tab button when hover by a mouse\n * @prop --tab-background-focused: Color of the tab button when focused with the tab key\n /\n\n\n/ BUTTON\n -------------------- /\n\n:host {\n box-sizing: border-box;\n font-weight: 700;\n color: var(--tab-color);\n outline: 0;\n transition: background 0.15s ease-in-out;\n}\n\n/\n Active state\n /\n\n:host(.tab-secondary) {\n --tab-underline-selected: var(--road-secondary-600);\n}\n\n:host(.tab-selected) {\n color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) ::slotted(road-icon) {\n color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) .button-native::after {\n background: var(--tab-underline-selected);\n opacity: 1;\n transform: none;\n}\n\n/\n Hover state\n /\n\n:host(:hover) {\n background: var(--tab-background-hover);\n}\n\n/\n Focus state\n /\n\n:host(.focus-visible) {\n background: var(--tab-background-focused);\n outline: auto;\n}\n\n/\n Disabled\n /\n\n:host(.tab-disabled) {\n background: var(--road-surface-disabled);\n}\n\n:host(.tab-disabled) .button-native{\n cursor: not-allowed;\n}\n\n:host(.tab-disabled) ::slotted(road-label) {\n color: var(--road-on-surface-disabled);\n}\n\n\n/ NATIVE\n -------------------- /\n\n.button-native {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: inherit;\n align-items: inherit;\n justify-content: inherit;\n width: 100%;\n height: 100%;\n min-height: 3.5rem;\n padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n margin: 0;\n overflow: hidden;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n color: inherit;\n text-align: inherit;\n text-decoration: none;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n letter-spacing: inherit;\n white-space: inherit;\n cursor: pointer;\n background: transparent;\n -webkit-user-drag: none;\n border-color: initial;\n border-style: initial;\n border-width: 0;\n border-radius: inherit;\n border-image: initial;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/ UNDERLINE\n -------------------- /\n\n.button-native::after {\n position: absolute;\n bottom: 0;\n left: 0;\n display: block;\n width: 100%;\n height: 2px;\n content: \"\";\n background-color: var(--road-input-outline);\n opacity: 1;\n transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n transform: none;\n transform-origin: center;\n}\n\n/ INNER\n -------------------- /\n\n.button-inner {\n position: relative;\n z-index: 1;\n display: flex;\n flex-flow: inherit;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n/ ICON\n -------------------- /\n\n:host ::slotted(road-icon) {\n color: var(--tab-color);\n}\n\n:host(.tab-layout-icon-start) ::slotted(road-icon) {\n margin-right: 0.5rem;\n}\n\n:host(.tab-layout-icon-top) .button-inner {\n flex-direction: column;\n}\n\n/ LABEL\n -------------------- /\n\n:host ::slotted(road-label) {\n display: -webkit-box;\n max-width: 12.5rem;\n overflow: hidden;\n font-size: 1rem;\n color: var(--road-on-surface);\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n text-align: center;\n text-overflow: ellipsis;\n white-space: inherit;\n}\n\n:host(.tab-layout-icon-top) ::slotted(road-label) {\n margin-top: 0.25rem;\n font-size: 1rem;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/\n @slot - Content of the tab-button, it should be road-icon and road-label elements.\n \n @part native - The native HTML anchor element that wraps all child elements.\n /\n\n@Component({\n tag: 'road-tab-button',\n styleUrl: 'tab-button.css',\n shadow: true,\n})\nexport class TabButton {\n\n @Element() el!: HTMLRoadTabButtonElement;\n\n /\n This attribute instructs browsers to download a URL instead of navigating to\n * it, so the user will be prompted to save it as a local file. If the attribute\n * has a value, it is used as the pre-filled file name in the Save prompt\n * (the user can still change the file name if they want).\n /\n @Prop() download: string \| undefined;\n\n /\n Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered.\n /\n @Prop() href: string \| undefined;\n\n /\n Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n /\n @Prop() rel: string \| undefined;\n\n /\n Set the layout of the text and icon in the tab bar.\n * It defaults to `'icon-start'`.\n /\n @Prop() layout?: 'icon-start' \| 'icon-top' = 'icon-start';\n\n /\n The selected tab component\n /\n @Prop({ mutable: true }) selected = false;\n\n /\n The disabled tab \n /\n @Prop({ mutable: true }) disabled = false;\n\n /\n A tab id must be provided for each `road-tab`. It's used internally to reference\n /\n @Prop() tab?: string;\n\n /\n Specifies where to display the linked URL.\n * Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n /\n @Prop() target: string \| undefined;\n\n /\n Emitted when the tab bar is clicked\n * @internal\n /\n @Event() roadtabbuttonclick!: EventEmitter;\n /* @internal */\n @Event() roadTabButtonClick!: EventEmitter;\n\n @Listen('roadTabBarChanged', { target: 'window' })\n @Listen('roadTabbarchanged', { target: 'window' })\n onTabBarChanged(ev: CustomEvent) {\n const dispatchedFrom = ev.target as HTMLElement;\n const parent = this.el.parentElement as EventTarget;\n\n if ((ev.composedPath && ev.composedPath().includes(parent)) \|\| (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n this.selected = this.tab === ev.detail.tab;\n }\n }\n\n private selectTab(ev: Event \| KeyboardEvent) {\n if (this.tab !== undefined) {\n this.roadtabbuttonclick.emit({\n tab: this.tab,\n href: this.href,\n selected: this.selected,\n });\n this.roadTabButtonClick.emit({\n tab: this.tab,\n href: this.href,\n selected: this.selected,\n });\n\n ev.preventDefault();\n }\n }\n\n private get hasLabel() {\n return !!this.el.querySelector('road-label');\n }\n\n private get hasIcon() {\n return !!this.el.querySelector('road-icon');\n }\n\n private get tabIndex() {\n const hasTabIndex = this.el.hasAttribute('tabindex');\n\n if (hasTabIndex) {\n return this.el.getAttribute('tabindex');\n }\n\n return 0;\n }\n\n private onKeyUp = (ev: KeyboardEvent) => {\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\n this.selectTab(ev);\n }\n };\n\n private onClick = (ev: Event) => {\n this.selectTab(ev);\n };\n\n render() {\n const { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab, disabled } = this;\n const attrs = {\n download: this.download,\n href: !disabled ? href : undefined, // Ne pas inclure le lien si désactivé\n rel,\n target,\n };\n \n return (\n <Host\n onClick={(ev: Event) => !disabled && this.onClick(ev)} // Bloquer les clics si désactivé\n onKeyup={(ev: KeyboardEvent) => !disabled && this.onKeyUp(ev)} // Bloquer les interactions clavier si désactivé\n role=\"tab\"\n tabindex={disabled ? -1 : tabIndex} // Désactiver le focus si désactivé\n aria-selected={selected ? 'true' : 'false'}\n aria-disabled={disabled ? 'true' : null} // Ajout pour l'accessibilité\n id={tab !== undefined ? `tab-button-${tab}` : null}\n class={{\n 'tab-selected': selected,\n 'tab-has-label': hasLabel,\n 'tab-has-icon': hasIcon,\n 'tab-has-label-only': hasLabel && !hasIcon,\n 'tab-has-icon-only': hasIcon && !hasLabel,\n [`tab-layout-${layout}`]: true,\n 'tab-disabled': disabled, // Classe CSS pour les styles désactivés\n }}\n >\n <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n <span class=\"button-inner\">\n <slot/>\n </span>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/road-toggle.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-12592729.js');
 require('./polyfill-b1fff766.js');
-const toggleCss = ".sc-road-toggle-h{--toggle-lever-width:4.5rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);font-size:var(--road-label-medium);color:var(--road-on-surface)}.form-toggle-input.sc-road-toggle{position:absolute;z-index:-1;opacity:0}.form-toggle-label.sc-road-toggle{display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-toggle-lever.sc-road-toggle{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;width:var(--toggle-lever-width);height:2rem;padding:0.5rem 0.625rem;margin-right:0.75rem;font-size:0.625rem;font-weight:700;line-height:1.6;content:\"\";background:var(--road-on-surface-extra-weak);border:0.125rem solid transparent;border-radius:1.125rem;transition:background 0.2s ease-in-out}.form-toggle-lever.sc-road-toggle::before{font-size:0.625rem;font-weight:700;color:var(--road-surface);text-transform:uppercase;content:attr(data-off)}.form-toggle-lever.sc-road-toggle::after{position:absolute;top:0.0625rem;left:0.0625rem;display:block;width:1.625rem;height:1.625rem;content:\"\";background:var(--road-on-success-surface-inverse);border-radius:50%;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{justify-content:flex-start;background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface);content:attr(data-on)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::after{transform:translateX(calc(var(--toggle-lever-width) - 2rem))}.form-toggle-input.focus-visible.sc-road-toggle~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-secondary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-right.sc-road-toggle{margin-right:0;margin-left:0.75rem}.form-toggle-spaced.sc-road-toggle{display:flex;justify-content:space-between}";
+const toggleCss = ".sc-road-toggle-h{--toggle-lever-width:4.5rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);font-size:var(--road-label-medium);color:var(--road-on-surface)}.form-toggle-input.sc-road-toggle{position:absolute;z-index:-1;opacity:0}.form-toggle-label.sc-road-toggle{display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-toggle-label.disabled.sc-road-toggle{cursor:not-allowed}.form-toggle-lever.sc-road-toggle{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;width:var(--toggle-lever-width);height:2rem;padding:0.5rem 0.625rem;margin-right:0.75rem;font-size:0.625rem;font-weight:700;line-height:1.6;content:\"\";background:var(--road-on-surface-extra-weak);border:0.125rem solid transparent;border-radius:1.125rem;transition:background 0.2s ease-in-out}.form-toggle-lever.sc-road-toggle::before{font-size:0.625rem;font-weight:700;color:var(--road-surface);text-transform:uppercase;content:attr(data-off)}.form-toggle-lever.sc-road-toggle::after{position:absolute;top:0.0625rem;left:0.0625rem;display:block;width:1.625rem;height:1.625rem;content:\"\";background:var(--road-on-success-surface-inverse);border-radius:50%;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{justify-content:flex-start;background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface);content:attr(data-on)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::after{transform:translateX(calc(var(--toggle-lever-width) - 2rem))}.form-toggle-input.focus-visible.sc-road-toggle~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-secondary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-right.sc-road-toggle{margin-right:0;margin-left:0.75rem}.form-toggle-spaced.sc-road-toggle{display:flex;justify-content:space-between}";
 const toggle = class {
   constructor(hostRef) {
@@ -53,7 +53,8 @@ const toggle = class {
     const textLabel = index.h("label", { class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
     const isSpacedClass = this.isSpaced && 'form-toggle-spaced';
     const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';
-    return (index.h(index.Host, null, index.h("input", { class: "form-toggle-input", type: "checkbox", id: this.toggleId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("label", { class: `form-toggle-label ${isSpacedClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, index.h("div", { class: `form-toggle-lever ${righttoggleClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+    const disabledClass = this.disabled ? 'disabled' : '';
+    return (index.h(index.Host, null, index.h("input", { class: "form-toggle-input", type: "checkbox", id: this.toggleId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("label", { class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, index.h("div", { class: `form-toggle-lever ${righttoggleClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
   }
   static get watchers() { return {
     "checked": ["checkedChanged"]

package/dist/cjs/road-toggle.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"road-toggle.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,~~gtFAAgtF~~;;~~MCQrtF~~,MAAM;;;;;;;;;IA2FT,YAAO,GAAG;MAChB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;KAC9B,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;oBAlGyB,eAAe,SAAS,EAAE,EAAE;gBAKhC,IAAI,CAAC,QAAQ;mBAKD,KAAK;oBAKrB,KAAK;iBAKA,GAAG,IAAI,CAAC,QAAQ,QAAQ;wBAKhB,KAAK;oBAKT,KAAK;iBAKT,IAAI;cAKP,KAAK;eAKJ,IAAI;;EA8B1B,cAAc,CAAC,SAAkB;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;GACJ;EAgBD,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IACzC,MAAM,SAAS,GAAGA,mBAAO,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS,CAAC;IAC7G,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,IAAI,oBAAoB,CAAC;IAC5D,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,GAAG,mBAAmB,GAAG,EAAE,CAAC;~~IAEtE~~,QACEA,QAACC,UAAI,QACHD,mBACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,kBACH,GAAG,IAAI,CAAC,OAAO,EAAE,mBAChB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,qBAC3B,OAAO,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB,EACFA,mBAAO,KAAK,EAAE,qBAAqB,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,~~IACvE~~,IAAI,CAAC,YAAY,IAAI,SAAS,EAC/BA,iBAAK,KAAK,EAAE,qBAAqB,gBAAgB,EAAE,cAAY,IAAI,CAAC,GAAG,aAAW,IAAI,CAAC,EAAE,GAAQ,EAChG,IAAI,CAAC,YAAY,GAAG,EAAE,GAAG,SAAS,CAC7B,CACH,EACP;GACH;;;;;AAGH,IAAI,SAAS,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["src/components/toggle/toggle.css?tag=road-toggle&encapsulation=scoped","src/components/toggle/toggle.tsx"],"sourcesContent":["/\n Toggle\n \n For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n \n Index\n * - Toggle\n * - Label\n * - Lever\n * - Feedback\n * - Position\n /\n\n/\n @prop --toggle-lever-width: width of the lever\n /\n\n/ toggle\n -------------------- /\n\n:host {\n --toggle-lever-width: 4.5rem;\n\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-label-medium);\n color: var(--road-on-surface);\n}\n\n/\n Hide input\n /\n\n.form-toggle-input {\n position: absolute;\n z-index: -1;\n opacity: 0;\n}\n\n/ LABEL\n -------------------- /\n\n.form-toggle-label {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/ LEVER\n -------------------- /\n\n.form-toggle-lever {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n width: var(--toggle-lever-width);\n height: 2rem;\n padding: 0.5rem 0.625rem;\n margin-right: 0.75rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 1.6;\n content: \"\";\n background: var(--road-on-surface-extra-weak);\n border: 0.125rem solid transparent;\n border-radius: 1.125rem;\n transition: background 0.2s ease-in-out;\n}\n\n/\n Text in the toggle widget\n /\n\n.form-toggle-lever::before {\n font-size: 0.625rem;\n font-weight: 700;\n color: var(--road-surface);\n text-transform: uppercase;\n content: attr(data-off);\n}\n\n/\n Round lever in the widget\n /\n\n.form-toggle-lever::after {\n position: absolute;\n top: 0.0625rem;\n left: 0.0625rem;\n display: block;\n width: 1.625rem;\n height: 1.625rem;\n content: \"\";\n background: var(--road-on-success-surface-inverse);\n border-radius: 50%;\n box-shadow: var(--road-elevation-low);\n transition: transform 0.2s ease-in-out;\n}\n\n/\n Checked state\n /\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {\n justify-content: flex-start;\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {\n color: var(--road-surface);\n content: attr(data-on);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::after {\n transform: translateX(calc(var(--toggle-lever-width) - 2rem));\n}\n\n/\n Focus on Tab\n /\n\n.form-toggle-input.focus-visible ~ .form-toggle-label .form-toggle-lever {\n box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary);\n}\n\n/ FEEDBACK\n -------------------- /\n\n/\n Secondary\n /\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever {\n background: var(--road-secondary);\n}\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n/\n Success\n /\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever {\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n\n/ POSITION\n -------------------- /\n\n.form-toggle-right {\n margin-right: 0;\n margin-left: 0.75rem;\n}\n\n.form-toggle-spaced {\n display: flex;\n justify-content: space-between;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n@Component({\n tag: 'road-toggle',\n styleUrl: 'toggle.css',\n scoped: true,\n})\nexport class toggle {\n\n /\n The id of toggle\n /\n @Prop() toggleId: string = `road-toggle-${toggleIds++}`;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.toggleId;\n\n /\n If `true`, the toggle is checked.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n If `true`, the user cannot interact with the toggle.\n /\n @Prop() disabled = false;\n\n /\n Label for the field\n /\n @Prop() label: string = `${this.toggleId}-label`;\n\n /\n If `true`, the label is at left of the toggle\n /\n @Prop() hasLeftLabel: boolean = false;\n\n /\n Add space between label and toggle element\n /\n @Prop() isSpaced: boolean = false;\n\n /\n Value the form will get\n /\n @Prop() value: string = 'on';\n\n /\n Text display for \"`on`\" state in the toggle lever\n /\n @Prop() on: string = \"yes\";\n\n /\n Text display for \"`off`\" state in the toggle lever\n /\n @Prop() off: string = \"no\";\n\n /\n Emitted when the checked property has changed.\n /\n @Event() roadchange!: EventEmitter<{\n checked: boolean;\n value: string \| undefined \| null\n }>;\n /* @internal /\n @Event() roadChange!: EventEmitter<{\n checked: boolean;\n value: string \| undefined \| null\n }>;\n\n /\n Emitted when the toggle has focus.\n /\n @Event() roadfocus!: EventEmitter<void>;\n /* @internal /\n @Event() roadFocus!: EventEmitter<void>;\n\n /\n Emitted when the toggle loses focus.\n /\n @Event() roadblur!: EventEmitter<void>;\n /* @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('checked')\n checkedChanged(isChecked: boolean) {\n this.roadchange.emit({\n checked: isChecked,\n value: this.value,\n });\n this.roadChange.emit({\n checked: isChecked,\n value: this.value,\n });\n }\n\n private onClick = () => {\n this.checked = !this.checked;\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n private onBlur = () => {\n this.roadBlur.emit();\n this.roadblur.emit();\n };\n\n render() {\n const labelId = this.toggleId + '-label';\n const textLabel = <label class=\"form-toggle-label\" id={labelId} htmlFor={this.toggleId}>{this.label}</label>;\n const isSpacedClass = this.isSpaced && 'form-toggle-spaced';\n const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';\n\n return (\n <Host>\n <input\n class=\"form-toggle-input\"\n type=\"checkbox\"\n id={this.toggleId}\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-checked={`${this.checked}`}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <label class={`form-toggle-label ${isSpacedClass}`} htmlFor={this.toggleId}>\n {this.hasLeftLabel && textLabel}\n <div class={`form-toggle-lever ${righttoggleClass}`} data-off={this.off} data-on={this.on}></div>\n {this.hasLeftLabel ? '' : textLabel}\n </label>\n </Host>\n );\n }\n}\n\nlet toggleIds = 0;\n"],"version":3}
1	+ {"file":"road-toggle.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,8wFAA8wF;;MCQnxF,MAAM;;;;;;;;;IA2FT,YAAO,GAAG;MAChB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;KAC9B,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;oBAlGyB,eAAe,SAAS,EAAE,EAAE;gBAKhC,IAAI,CAAC,QAAQ;mBAKD,KAAK;oBAKrB,KAAK;iBAKA,GAAG,IAAI,CAAC,QAAQ,QAAQ;wBAKhB,KAAK;oBAKT,KAAK;iBAKT,IAAI;cAKP,KAAK;eAKJ,IAAI;;EA8B1B,cAAc,CAAC,SAAkB;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;GACJ;EAgBD,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IACzC,MAAM,SAAS,GAAGA,mBAAO,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS,CAAC;IAC7G,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,IAAI,oBAAoB,CAAC;IAC5D,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,GAAG,mBAAmB,GAAG,EAAE,CAAC;IACtE,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC;IAEtD,QACEA,QAACC,UAAI,QACHD,mBACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,kBACH,GAAG,IAAI,CAAC,OAAO,EAAE,mBAChB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,qBAC3B,OAAO,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB,EACFA,mBAAO,KAAK,EAAE,qBAAqB,aAAa,IAAI,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACxF,IAAI,CAAC,YAAY,IAAI,SAAS,EAC/BA,iBAAK,KAAK,EAAE,qBAAqB,gBAAgB,EAAE,cAAY,IAAI,CAAC,GAAG,aAAW,IAAI,CAAC,EAAE,GAAQ,EAChG,IAAI,CAAC,YAAY,GAAG,EAAE,GAAG,SAAS,CAC7B,CACH,EACP;GACH;;;;;AAGH,IAAI,SAAS,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["src/components/toggle/toggle.css?tag=road-toggle&encapsulation=scoped","src/components/toggle/toggle.tsx"],"sourcesContent":["/\n Toggle\n \n For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n \n Index\n * - Toggle\n * - Label\n * - Lever\n * - Feedback\n * - Position\n /\n\n/\n @prop --toggle-lever-width: width of the lever\n /\n\n/ toggle\n -------------------- /\n\n:host {\n --toggle-lever-width: 4.5rem;\n\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-label-medium);\n color: var(--road-on-surface);\n}\n\n/\n Hide input\n /\n\n.form-toggle-input {\n position: absolute;\n z-index: -1;\n opacity: 0;\n}\n\n/ LABEL\n -------------------- /\n\n.form-toggle-label {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-toggle-label.disabled{\n cursor: not-allowed;\n}\n\n/ LEVER\n -------------------- /\n\n.form-toggle-lever {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n width: var(--toggle-lever-width);\n height: 2rem;\n padding: 0.5rem 0.625rem;\n margin-right: 0.75rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 1.6;\n content: \"\";\n background: var(--road-on-surface-extra-weak);\n border: 0.125rem solid transparent;\n border-radius: 1.125rem;\n transition: background 0.2s ease-in-out;\n}\n\n/\n Text in the toggle widget\n /\n\n.form-toggle-lever::before {\n font-size: 0.625rem;\n font-weight: 700;\n color: var(--road-surface);\n text-transform: uppercase;\n content: attr(data-off);\n}\n\n/\n Round lever in the widget\n /\n\n.form-toggle-lever::after {\n position: absolute;\n top: 0.0625rem;\n left: 0.0625rem;\n display: block;\n width: 1.625rem;\n height: 1.625rem;\n content: \"\";\n background: var(--road-on-success-surface-inverse);\n border-radius: 50%;\n box-shadow: var(--road-elevation-low);\n transition: transform 0.2s ease-in-out;\n}\n\n/\n Checked state\n /\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {\n justify-content: flex-start;\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {\n color: var(--road-surface);\n content: attr(data-on);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::after {\n transform: translateX(calc(var(--toggle-lever-width) - 2rem));\n}\n\n/\n Focus on Tab\n /\n\n.form-toggle-input.focus-visible ~ .form-toggle-label .form-toggle-lever {\n box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary);\n}\n\n/ FEEDBACK\n -------------------- /\n\n/\n Secondary\n /\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever {\n background: var(--road-secondary);\n}\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n/\n Success\n /\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever {\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n\n/ POSITION\n -------------------- /\n\n.form-toggle-right {\n margin-right: 0;\n margin-left: 0.75rem;\n}\n\n.form-toggle-spaced {\n display: flex;\n justify-content: space-between;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n@Component({\n tag: 'road-toggle',\n styleUrl: 'toggle.css',\n scoped: true,\n})\nexport class toggle {\n\n /\n The id of toggle\n /\n @Prop() toggleId: string = `road-toggle-${toggleIds++}`;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.toggleId;\n\n /\n If `true`, the toggle is checked.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n If `true`, the user cannot interact with the toggle.\n /\n @Prop() disabled = false;\n\n /\n Label for the field\n /\n @Prop() label: string = `${this.toggleId}-label`;\n\n /\n If `true`, the label is at left of the toggle\n /\n @Prop() hasLeftLabel: boolean = false;\n\n /\n Add space between label and toggle element\n /\n @Prop() isSpaced: boolean = false;\n\n /\n Value the form will get\n /\n @Prop() value: string = 'on';\n\n /\n Text display for \"`on`\" state in the toggle lever\n /\n @Prop() on: string = \"yes\";\n\n /\n Text display for \"`off`\" state in the toggle lever\n /\n @Prop() off: string = \"no\";\n\n /\n Emitted when the checked property has changed.\n /\n @Event() roadchange!: EventEmitter<{\n checked: boolean;\n value: string \| undefined \| null\n }>;\n /* @internal /\n @Event() roadChange!: EventEmitter<{\n checked: boolean;\n value: string \| undefined \| null\n }>;\n\n /\n Emitted when the toggle has focus.\n /\n @Event() roadfocus!: EventEmitter<void>;\n /* @internal /\n @Event() roadFocus!: EventEmitter<void>;\n\n /\n Emitted when the toggle loses focus.\n /\n @Event() roadblur!: EventEmitter<void>;\n /* @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('checked')\n checkedChanged(isChecked: boolean) {\n this.roadchange.emit({\n checked: isChecked,\n value: this.value,\n });\n this.roadChange.emit({\n checked: isChecked,\n value: this.value,\n });\n }\n\n private onClick = () => {\n this.checked = !this.checked;\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n private onBlur = () => {\n this.roadBlur.emit();\n this.roadblur.emit();\n };\n\n render() {\n const labelId = this.toggleId + '-label';\n const textLabel = <label class=\"form-toggle-label\" id={labelId} htmlFor={this.toggleId}>{this.label}</label>;\n const isSpacedClass = this.isSpaced && 'form-toggle-spaced';\n const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';\n const disabledClass = this.disabled ? 'disabled' : '';\n\n return (\n <Host>\n <input\n class=\"form-toggle-input\"\n type=\"checkbox\"\n id={this.toggleId}\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-checked={`${this.checked}`}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <label class={`form-toggle-label ${isSpacedClass} ${disabledClass}`} htmlFor={this.toggleId}>\n {this.hasLeftLabel && textLabel}\n <div class={`form-toggle-lever ${righttoggleClass}`} data-off={this.off} data-on={this.on}></div>\n {this.hasLeftLabel ? '' : textLabel}\n </label>\n </Host>\n );\n }\n}\n\nlet toggleIds = 0;\n"],"version":3}

package/dist/collection/components/button/button.css CHANGED Viewed

@@ -151,6 +151,24 @@
   background: var(--road-button-secondary-variant);
 }
+/**
+ * Destructive
+ */
+:host(.btn-destructive) {
+  color: var(--road-on-button-destructive-primary);
+  background: var(--road-button-destructive-primary);
+}
+:host(.btn-destructive) ::slotted(road-icon) {
+  color: var(--road-on-button-destructive-primary);
+}
+:host(.btn-destructive:not([disabled]):hover),
+:host(.btn-destructive:not([disabled]).focus-visible) {
+  background: var(--road-button-destructive-primary-variant);
+}
 /**
  * Link
  */
@@ -172,7 +190,8 @@
 :host(.btn-outline-primary),
 :host(.btn-outline-secondary),
-:host(.btn-outline-default) {
+:host(.btn-outline-default),
+:host(.btn-outline-destructive) {
   background: transparent;
 }
@@ -199,9 +218,12 @@
  * Ghost
  */
+:host(.btn-ghost) {
+  color: var(--road-on-button-ghost);
+}
 :host(.btn-ghost) ::slotted(road-icon) {
-  color: var(--road-icon);
+  color: var(--road-on-button-ghost);
 }
 :host(.btn-ghost:hover),
@@ -249,6 +271,24 @@
   background: var(--road-button-tertiary-variant);
 }
+/**
+ * Outline destructive
+ */
+:host(.btn-outline-destructive) {
+  color: var(--road-on-button-destructive-secondary);
+  border-color: var(--road-button-destructive-outline);
+}
+:host(.btn-outline-destructive) ::slotted(road-icon) {
+  color: var(--road-on-button-destructive-secondary);
+}
+:host(.btn-outline-destructive:hover),
+:host(.btn-outline-destructive.focus-visible) {
+  background: var(--road-button-destructive-secondary-variant);
+}
 /* DISABLED
  -------------------- */

package/dist/collection/components/button/button.stories.js CHANGED Viewed

@@ -12,7 +12,7 @@ export default {
   },
   argTypes: {
     color: {
-      options: ['default', 'primary', 'secondary', 'ghost'],
+      options: ['default', 'primary', 'secondary', 'ghost', 'destructive'],
       control: {
         type: 'select',
       },
@@ -191,6 +191,18 @@ Disabled.args = {
   disabled: true,
 };
+export const Destructive = Template.bind({});
+Destructive.args = {
+  color: 'destructive',
+  outline: false,
+};
+export const DestructiveOutline = Template.bind({});
+Destructive.args = {
+  color: 'destructive',
+  outline: true,
+};
 export const Icon = Template.bind({});
 Icon.args = {
   color: 'primary',

package/dist/collection/components/drawer/drawer.css CHANGED Viewed

@@ -232,6 +232,14 @@
   .drawer-inner {
     padding: 0 2rem 2.5rem;
   }
+  .drawer-body {
+    padding: 0 var(--road-spacing-08) var(--road-spacing-05);
+  }
+  .drawer-footer {
+    padding: var(--road-spacing-05) var(--road-spacing-08);
+  }
 }
 /* OPEN STATE

package/dist/collection/components/input/input.js CHANGED Viewed

@@ -67,6 +67,17 @@ export class Input {
     this.helper = undefined;
     this.debounce = 0;
   }
+  handleKeyDown(event) {
+    // Vérifier que le type est "number" avant d'appliquer les restrictions
+    if (this.type === 'number') {
+      // Liste des caractères interdits
+      const forbiddenKeys = ['e', '-', '.', ',', '¨', '^', '`', '+'];
+      // Empêcher la saisie si la touche est interdite
+      if (forbiddenKeys.includes(event.key)) {
+        event.preventDefault();
+      }
+    }
+  }
   createDebouncedRoadChange() {
     return lodashDebounce((value) => {
       this.roadChange.emit({ value: value == null ? value : value.toString() });
@@ -109,7 +120,7 @@ export class Input {
     const hasValueClass = this.value !== '' && this.value !== null ? 'has-value' : '';
     const lessLabelClass = this.label !== '' ? '' : 'less-label';
     const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value }, h("input", { class: `form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyUp: (event) => this.enforceMinMax(event.target), "data-cy": 'road-input' }), h("label", { class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.error), this.helper && this.helper !== '' && h("p", { class: "helper" }, this.helper), this.type && this.type == 'password' && h("slot", { name: "checklistPassword" })));
+    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value }, h("input", { class: `form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.type === 'number' ? (event) => this.handleKeyDown(event) : undefined, onKeyUp: (event) => this.enforceMinMax(event.target), "data-cy": 'road-input' }), h("label", { class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.error), this.helper && this.helper !== '' && h("p", { class: "helper" }, this.helper), this.type && this.type == 'password' && h("slot", { name: "checklistPassword" })));
   }
   static get is() { return "road-input"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport { debounce as lodashDebounce } from 'lodash';\nimport { AutocompleteTypes, TextFieldTypes } from '../../interface';\n\n/*\n @slot checklistPassword - Content the checklist Password exemple.\n * `<div class=\"checklist-password mt-16\" slot=\"checklistPassword\">`\n * `<span class=\"checklist-password-label\"><strong>Low Safety</strong></span>`\n * `<road-progress color=\"danger\" value=\"25\" class=\"mt-8 mb-16\"></road-progress>`\n * `<p class=\"text-medium mb-8\">For optimal safety your password must have at least :</p>`\n * `<ul class=\"m-0 pl-16\">`\n * `<li id=\"letter\" class=\"invalid mb-8\">1 lowercase and 1 uppercase</li>`\n * `<li id=\"number\" class=\"invalid mb-8\">1 digit</li>`\n * `<li id=\"length\" class=\"invalid\">8 characters minimum</li>`\n * `</ul>`\n * `</div>`\n /\n\n@Component({\n tag: 'road-input',\n styleUrl: 'input.css',\n scoped: true,\n})\nexport class Input {\n /\n The id of input\n /\n @Prop() inputId: string = `road-input-${inputIds++}`;\n\n /\n Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n /\n @Prop() autocapitalize = 'off';\n\n /\n Indicates whether the value of the control can be automatically completed by the browser.\n /\n @Prop() autocomplete: AutocompleteTypes = 'off';\n\n /\n Whether auto correction should be enabled when the user is entering/editing the text value.\n /\n @Prop() autocorrect: 'on' \| 'off' = 'off';\n\n /\n This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n /\n @Prop() autofocus = false;\n\n /\n If `true`, the user cannot interact with the input.\n /\n @Prop() disabled = false;\n\n /\n A hint to the browser for which enter key to display.\n * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n * `\"previous\"`, `\"search\"`, and `\"send\"`.\n /\n @Prop() enterkeyhint?: 'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send';\n\n /\n A hint to the browser for which keyboard to display.\n * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n /\n @Prop() inputmode?: 'none' \| 'text' \| 'tel' \| 'url' \| 'email' \| 'numeric' \| 'decimal' \| 'search';\n\n /\n The maximum value, which must not be less than its minimum (min attribute) value.\n /\n @Prop() max?: string;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n /\n @Prop() maxlength?: number;\n\n /\n The minimum value, which must not be greater than its maximum (max attribute) value.\n /\n @Prop() min?: string;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n /\n @Prop() minlength?: number;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.inputId;\n\n /\n A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n /\n @Prop() pattern?: string;\n\n /\n Instructional text that shows before the input has a value.\n /\n @Prop() placeholder?: string;\n\n /\n If `true`, the user cannot modify the value.\n /\n @Prop() readonly = false;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n If `true`, the element will have its spelling and grammar checked.\n /\n @Prop() spellcheck = false;\n\n /\n Works with the min and max attributes to limit the increments at which a value can be set.\n * Possible values are: `\"any\"` or a positive floating point number.\n /\n @Prop() step?: string;\n\n /\n The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n /\n @Prop() size?: number;\n\n /\n The sizes of the input.\n /\n @Prop() sizes: 'lg' \| 'xl' = 'lg';\n\n /\n The type of control to display. The default type is text.\n /\n @Prop() type: TextFieldTypes = 'text';\n\n /\n The value of the input.(for dynamic use use v-model for vue instead)\n /\n @Prop({ mutable: true }) value?: string \| number \| null = '';\n\n /\n Label for the field\n /\n @Prop() label?: string = '';\n\n /\n Error message for the field\n /\n @Prop() error?: string;\n\n /\n Helper message for the field\n /\n @Prop() helper?: string;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger the `roadChange` event after each keystroke.\n /\n @Prop() debounce = 0;\n\n private debouncedRoadChange = this.createDebouncedRoadChange();\n\n private createDebouncedRoadChange() {\n return lodashDebounce((value: any) => {\n this.roadChange.emit({ value: value == null ? value : value.toString() });\n }, this.debounce);\n }\n\n @Watch('debounce')\n debounceChanged() {\n // Créez une nouvelle fonction debouncedRoadChange avec la nouvelle valeur de debounce\n this.debouncedRoadChange = this.createDebouncedRoadChange();\n }\n\n /\n Update the native input element when the value changes\n /\n @Watch('value')\n protected valueChanged() {\n this.debouncedRoadChange(this.value);\n }\n\n /\n Emitted when a keyboard input occurred.\n /\n\n /* @internal /\n @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n /\n Emitted when the value has changed.\n /\n\n /* @internal /\n @Event() roadChange!: EventEmitter<{\n value: string \| undefined \| null;\n }>;\n\n /\n Emitted when the input loses focus.\n /\n\n /* @internal /\n @Event() roadBlur!: EventEmitter<string \| null>;\n\n /\n Emitted when the input has focus.\n /\n\n /* @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n private getValue(): string {\n return typeof this.value === 'number'\n ? this.value.toString()\n : (this.value \|\| '').toString();\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement \| null;\n if (input) {\n this.value = input.value \|\| \"\";\n }\n this.roadInput.emit(ev as KeyboardEvent);\n };\n\n private onBlur = () => {\n let value = this.getValue();\n\n // Vérifier si les contraintes min et max sont définies\n if (this.min !== undefined && value !== '' && parseFloat(value) < parseFloat(this.min)) {\n value = this.min; // Ajuster la valeur à la valeur minimale\n }\n\n if (this.max !== undefined && value !== '' && parseFloat(value) > parseFloat(this.max)) {\n value = this.max; // Ajuster la valeur à la valeur maximale\n }\n\n this.value = value; // Mettre à jour la valeur avec la valeur ajustée\n\n // Émettre l'événement roadblur avec la valeur ajustée\n this.roadBlur.emit(value);\n };\n\n private onFocus = () => {\n this.roadFocus.emit();\n };\n\n private enforceMinMax(el: HTMLInputElement): void {\n if (el.value !== \"\") {\n const value: number = parseInt(el.value);\n const minValue: number = parseInt(el.min);\n const maxValue: number = parseInt(el.max);\n\n if (value < minValue) {\n el.value = el.min;\n }\n\n if (value > maxValue) {\n el.value = el.max;\n }\n }\n }\n\n componentWillLoad() {\n this.debounceChanged(); // Initialize debounce on component load\n }\n\n render() {\n const value = this.getValue();\n const labelId = this.inputId + '-label';\n const hasValueClass = this.value !== '' && this.value !== null ? 'has-value' : '';\n const lessLabelClass = this.label !== '' ? '' : 'less-label';\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`} value={value}>\n <input\n class={`form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`}\n id={this.inputId}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n disabled={this.disabled}\n autoCapitalize={this.autocapitalize}\n autoComplete={this.autocomplete}\n autoCorrect={this.autocorrect}\n enterKeyHint={this.enterkeyhint}\n autoFocus={this.autofocus}\n inputMode={this.inputmode}\n min={this.min}\n max={this.max}\n minLength={this.minlength}\n maxLength={this.maxlength}\n name={this.name}\n pattern={this.pattern}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n spellcheck={this.spellcheck}\n step={this.step}\n size={this.size}\n type={this.type}\n value={value}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n onKeyUp={(event: Event) => this.enforceMinMax(event.target as HTMLInputElement)}\n data-cy='road-input'\n />\n <label class=\"form-label\" id={labelId} htmlFor={this.inputId}>{this.label}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\"><road-icon slot=\"start\" name=\"alert-error-solid\" aria-hidden=\"true\" size=\"sm\"></road-icon>{this.error}</p>}\n {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n {this.type && this.type == 'password' && <slot name=\"checklistPassword\" />}\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}
1	+ {"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport { debounce as lodashDebounce } from 'lodash';\nimport { AutocompleteTypes, TextFieldTypes } from '../../interface';\n\n/*\n @slot checklistPassword - Content the checklist Password exemple.\n * `<div class=\"checklist-password mt-16\" slot=\"checklistPassword\">`\n * `<span class=\"checklist-password-label\"><strong>Low Safety</strong></span>`\n * `<road-progress color=\"danger\" value=\"25\" class=\"mt-8 mb-16\"></road-progress>`\n * `<p class=\"text-medium mb-8\">For optimal safety your password must have at least :</p>`\n * `<ul class=\"m-0 pl-16\">`\n * `<li id=\"letter\" class=\"invalid mb-8\">1 lowercase and 1 uppercase</li>`\n * `<li id=\"number\" class=\"invalid mb-8\">1 digit</li>`\n * `<li id=\"length\" class=\"invalid\">8 characters minimum</li>`\n * `</ul>`\n * `</div>`\n /\n\n@Component({\n tag: 'road-input',\n styleUrl: 'input.css',\n scoped: true,\n})\nexport class Input {\n /\n The id of input\n /\n @Prop() inputId: string = `road-input-${inputIds++}`;\n\n /\n Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n /\n @Prop() autocapitalize = 'off';\n\n /\n Indicates whether the value of the control can be automatically completed by the browser.\n /\n @Prop() autocomplete: AutocompleteTypes = 'off';\n\n /\n Whether auto correction should be enabled when the user is entering/editing the text value.\n /\n @Prop() autocorrect: 'on' \| 'off' = 'off';\n\n /\n This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n /\n @Prop() autofocus = false;\n\n /\n If `true`, the user cannot interact with the input.\n /\n @Prop() disabled = false;\n\n /\n A hint to the browser for which enter key to display.\n * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n * `\"previous\"`, `\"search\"`, and `\"send\"`.\n /\n @Prop() enterkeyhint?: 'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send';\n\n /\n A hint to the browser for which keyboard to display.\n * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n /\n @Prop() inputmode?: 'none' \| 'text' \| 'tel' \| 'url' \| 'email' \| 'numeric' \| 'decimal' \| 'search';\n\n /\n The maximum value, which must not be less than its minimum (min attribute) value.\n /\n @Prop() max?: string;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n /\n @Prop() maxlength?: number;\n\n /\n The minimum value, which must not be greater than its maximum (max attribute) value.\n /\n @Prop() min?: string;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n /\n @Prop() minlength?: number;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.inputId;\n\n /\n A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n /\n @Prop() pattern?: string;\n\n /\n Instructional text that shows before the input has a value.\n /\n @Prop() placeholder?: string;\n\n /\n If `true`, the user cannot modify the value.\n /\n @Prop() readonly = false;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n If `true`, the element will have its spelling and grammar checked.\n /\n @Prop() spellcheck = false;\n\n /\n Works with the min and max attributes to limit the increments at which a value can be set.\n * Possible values are: `\"any\"` or a positive floating point number.\n /\n @Prop() step?: string;\n\n /\n The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n /\n @Prop() size?: number;\n\n /\n The sizes of the input.\n /\n @Prop() sizes: 'lg' \| 'xl' = 'lg';\n\n /\n The type of control to display. The default type is text.\n /\n @Prop() type: TextFieldTypes = 'text';\n\n /\n The value of the input.(for dynamic use use v-model for vue instead)\n /\n @Prop({ mutable: true }) value?: string \| number \| null = '';\n\n /\n Label for the field\n /\n @Prop() label?: string = '';\n\n /\n Error message for the field\n /\n @Prop() error?: string;\n\n /\n Helper message for the field\n /\n @Prop() helper?: string;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger the `roadChange` event after each keystroke.\n /\n @Prop() debounce = 0;\n\n private handleKeyDown(event: KeyboardEvent) {\n // Vérifier que le type est \"number\" avant d'appliquer les restrictions\n if (this.type === 'number') {\n // Liste des caractères interdits\n const forbiddenKeys = ['e', '-', '.', ',', '¨', '^', '`', '+'];\n \n // Empêcher la saisie si la touche est interdite\n if (forbiddenKeys.includes(event.key)) {\n event.preventDefault();\n }\n }\n }\n \n\n private debouncedRoadChange = this.createDebouncedRoadChange();\n\n private createDebouncedRoadChange() {\n return lodashDebounce((value: any) => {\n this.roadChange.emit({ value: value == null ? value : value.toString() });\n }, this.debounce);\n }\n\n @Watch('debounce')\n debounceChanged() {\n // Créez une nouvelle fonction debouncedRoadChange avec la nouvelle valeur de debounce\n this.debouncedRoadChange = this.createDebouncedRoadChange();\n }\n\n /\n Update the native input element when the value changes\n /\n @Watch('value')\n protected valueChanged() {\n this.debouncedRoadChange(this.value);\n }\n\n /\n Emitted when a keyboard input occurred.\n /\n\n /* @internal /\n @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n /\n Emitted when the value has changed.\n /\n\n /* @internal /\n @Event() roadChange!: EventEmitter<{\n value: string \| undefined \| null;\n }>;\n\n /\n Emitted when the input loses focus.\n /\n\n /* @internal /\n @Event() roadBlur!: EventEmitter<string \| null>;\n\n /\n Emitted when the input has focus.\n /\n\n /* @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n private getValue(): string {\n return typeof this.value === 'number'\n ? this.value.toString()\n : (this.value \|\| '').toString();\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement \| null;\n if (input) {\n this.value = input.value \|\| \"\";\n }\n this.roadInput.emit(ev as KeyboardEvent);\n };\n\n private onBlur = () => {\n let value = this.getValue();\n\n // Vérifier si les contraintes min et max sont définies\n if (this.min !== undefined && value !== '' && parseFloat(value) < parseFloat(this.min)) {\n value = this.min; // Ajuster la valeur à la valeur minimale\n }\n\n if (this.max !== undefined && value !== '' && parseFloat(value) > parseFloat(this.max)) {\n value = this.max; // Ajuster la valeur à la valeur maximale\n }\n\n this.value = value; // Mettre à jour la valeur avec la valeur ajustée\n\n // Émettre l'événement roadblur avec la valeur ajustée\n this.roadBlur.emit(value);\n };\n\n private onFocus = () => {\n this.roadFocus.emit();\n };\n\n private enforceMinMax(el: HTMLInputElement): void {\n if (el.value !== \"\") {\n const value: number = parseInt(el.value);\n const minValue: number = parseInt(el.min);\n const maxValue: number = parseInt(el.max);\n\n if (value < minValue) {\n el.value = el.min;\n }\n\n if (value > maxValue) {\n el.value = el.max;\n }\n }\n }\n\n componentWillLoad() {\n this.debounceChanged(); // Initialize debounce on component load\n }\n\n render() {\n const value = this.getValue();\n const labelId = this.inputId + '-label';\n const hasValueClass = this.value !== '' && this.value !== null ? 'has-value' : '';\n const lessLabelClass = this.label !== '' ? '' : 'less-label';\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`} value={value}>\n <input\n class={`form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`}\n id={this.inputId}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n disabled={this.disabled}\n autoCapitalize={this.autocapitalize}\n autoComplete={this.autocomplete}\n autoCorrect={this.autocorrect}\n enterKeyHint={this.enterkeyhint}\n autoFocus={this.autofocus}\n inputMode={this.inputmode}\n min={this.min}\n max={this.max}\n minLength={this.minlength}\n maxLength={this.maxlength}\n name={this.name}\n pattern={this.pattern}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n spellcheck={this.spellcheck}\n step={this.step}\n size={this.size}\n type={this.type}\n value={value}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n onKeyDown={this.type === 'number' ? (event: KeyboardEvent) => this.handleKeyDown(event) : undefined}\n onKeyUp={(event: Event) => this.enforceMinMax(event.target as HTMLInputElement)}\n data-cy='road-input'\n />\n <label class=\"form-label\" id={labelId} htmlFor={this.inputId}>{this.label}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\"><road-icon slot=\"start\" name=\"alert-error-solid\" aria-hidden=\"true\" size=\"sm\"></road-icon>{this.error}</p>}\n {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n {this.type && this.type == 'password' && <slot name=\"checklistPassword\" />}\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}

package/dist/collection/components/input-group/input-group.css CHANGED Viewed

@@ -133,6 +133,10 @@
   font-size: var(--road-font-size-14);
 }
+::slotted(road-button):hover {
+  background-color: var(--road-button-ghost-variant);
+}
 .input-group-prepend {
   z-index: 1;
   order: -1;
@@ -215,6 +219,11 @@
   background-color: var(--road-surface);
 }
+.input-group-append:hover ::slotted(road-button) {
+  background-color: var(--road-button-ghost-variant);
+}
 /* SIZES
  -------------------- */

package/dist/collection/components/input-group/input-group.stories.js CHANGED Viewed

@@ -42,7 +42,7 @@ Playground.args = {
 export const Button = Template.bind({});
 Button.args = {
   ' ': `<road-input input-id="newsletter" sizes="xl" label="Newsletter"></road-input>`,
-  append: `<road-button slot="append" outline="true">
+  append: `<road-button slot="append" color="ghost">
     OK
   </road-button>`,
 };

package/dist/collection/components/phone-number-input/phone-number-input.js CHANGED Viewed

@@ -190,7 +190,7 @@ export class RoadPhoneNumberInput {
     const valueId = selectId + '-value';
     const isInvalidClass = this.errorMessage.length ? 'is-invalid' : '';
     const isErrorClass = this.errorMessage.length ? 'is-error' : '';
-    return (h(Host, null, h("road-input-group", null, h("div", { class: `road-phone-input-select ${isErrorClass}`, slot: "prepend" }, h("select", { id: 'phone-number-input', class: `form-select-area has-value ${isInvalidClass}`, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, onChange: (event) => this.handleSelect(event), "aria-label": this.codeLabel, tabIndex: this.disabled ? -1 : 0 }, this.countryOptions && this.countryOptions.map(option => (h("option", { value: option.value, disabled: option.disabled, selected: option.selected }, option.label)))), h("label", { class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), h("label", { class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), h("road-input", { id: "phone-number", sizes: "xl", label: this.phoneLabel, value: this.phoneValue, onRoadChange: (event) => this.handleInput(event), required: this.required, error: this.errorMessage, onKeyDown: (event) => this.handleKeyDown(event), tabIndex: 0 }))));
+    return (h(Host, null, h("road-input-group", null, h("div", { class: `road-phone-input-select ${isErrorClass}`, slot: "prepend" }, h("select", { id: 'phone-number-input', class: `form-select-area has-value ${isInvalidClass}`, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, onChange: (event) => this.handleSelect(event), "aria-label": this.codeLabel, tabIndex: this.disabled ? -1 : 0 }, this.countryOptions && this.countryOptions.map(option => (h("option", { value: option.value, disabled: option.disabled, selected: option.selected }, option.label)))), h("label", { class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), h("label", { class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), h("road-input", { type: "tel", id: "phone-number", sizes: "xl", label: this.phoneLabel, value: this.phoneValue, onRoadChange: (event) => this.handleInput(event), required: this.required, error: this.errorMessage, onKeyDown: (event) => this.handleKeyDown(event), tabIndex: 0 }))));
   }
   static get is() { return "road-phone-number-input"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/phone-number-input/phone-number-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"phone-number-input.js","sourceRoot":"","sources":["../../../src/components/phone-number-input/phone-number-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, Host, State, h, Event, EventEmitter, Watch } from '@stencil/core';\nimport { PhoneNumberFormat, PhoneNumberType, PhoneNumberUtil } from 'google-libphonenumber';\nimport { CountryOption, CountryType, PhoneReturnType, ReturnObject } from './interfaces';\nimport { RoadInputCustomEvent } from '../../components';\n\nlet selectIds = 0;\n\n@Component({\n tag: 'road-phone-number-input',\n styleUrl: 'phone-number-input.css',\n scoped: true,\n})\nexport class RoadPhoneNumberInput {\n\n /** Computed phone data /\n @Event() roadPhoneNumberInput!: EventEmitter<{\n isError: boolean;\n phone: {\n numberType: string;\n countryCode: string;\n nationalNumber: string;\n code: string;\n internationalNumber: string;\n };\n }>;\n\n @Element() el!: HTMLRoadPhoneNumberInputElement;\n\n /* Disable both fields /\n @Prop() disabled: boolean = false;\n\n /* List of countries displayed in the country selection. Countries will be automatically sorted by alphabetical order (see format in example) /\n @Prop() countryData: CountryType[] = [];\n\n /* Used to display countries with the right language /\n @Prop() language: string = 'fr';\n\n /* Country selection placeHolder /\n @Prop() codeLabel: string = '';\n\n /* Phone input placeHolder /\n @Prop() phoneLabel: string = '';\n\n /* Value displayed in the phone input /\n @Prop() phoneValue?: string;\n\n /* Selected country code /\n @Prop() countryCode?: string;\n\n /* Error message (displayed only if ther is a message) /\n @Prop() errorMessage: string = '';\n\n /* Add a star in the phone input /\n @Prop() required = false;\n\n @State() selectedCountry: string = this.countryData[0].countryCode;\n @State() selectedCountryCode: string = this.countryData[0].phoneCode;\n @State() phoneNumber: string = '';\n @State() countryOptions: CountryOption[] = [];\n @State() returnObject: ReturnObject = {\n isError: false,\n phone: this.resetPhoneUtilData(),\n };\n\n @Watch('errorMessage')\n updateMessagePosition() {\n this.placeErrorMessage();\n }\n\n // On component load\n componentWillLoad() {\n this.placeErrorMessage();\n let fromSelect = false;\n\n if (this.phoneValue) {\n this.phoneNumber = this.phoneValue;\n }\n\n if (this.countryCode) {\n this.selectedCountry = this.countryCode;\n if (this.getPhoneCodeFromCountryCode(this.countryCode)) {\n this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.countryCode)!);\n fromSelect = true;\n }\n }\n\n this.updateCountryOptions();\n this.createAndDispatchPhoneData(fromSelect);\n }\n\n // On user input\n handleInput(event: RoadInputCustomEvent<{\n value: string \| null \| undefined;\n }>) {\n this.phoneNumber = event.detail.value!;\n this.createAndDispatchPhoneData();\n }\n \n\n // On user key down\n handleKeyDown(event: KeyboardEvent) {\n // Liste des caractères interdits\n const caracteresInterdits = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z','!', '@', '#', '$', '%', '^', '&', '', '(', ')', '_', '=', '[', ']', '{', '}', '\|', ';', ':', \"'\", '\"', ',', '.', '<', '>', '/', '?'];\n \n // Vérifier si la touche pressée est dans la liste des caractères interdits\n if (caracteresInterdits.includes(event.key)) {\n event.preventDefault();\n }\n }\n\n // On user key up\n handleKeyUp(event: KeyboardEvent) {\n // Récupérer la valeur saisie\n const inputValue = (event.target as HTMLInputElement).value \|\| '';\n\n // Vérifier si la valeur contient uniquement des chiffres ou le symbole \"+\"\n const containsOnlyNumbersAndPlus = /^[0-9+]*$/.test(inputValue);\n\n // Si la valeur ne contient pas uniquement des chiffres ou le symbole \"+\", réinitialiser le champ de saisie à son état précédent\n if (!containsOnlyNumbersAndPlus) {\n // Réinitialiser la valeur du champ de saisie à son état précédent\n (event.target as HTMLInputElement).value = this.phoneNumber;\n } else {\n // Si la valeur contient uniquement des chiffres ou le symbole \"+\", mettre à jour la valeur du numéro de téléphone\n this.phoneNumber = inputValue;\n this.createAndDispatchPhoneData();\n }\n }\n\n // On user select\n handleSelect(event: Event) {\n const select = event.target as HTMLSelectElement \| null;\n if (select) {\n this.updateSelectedCountry(select.value);\n this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.selectedCountry)!);\n }\n this.createAndDispatchPhoneData(true);\n this.updateCountryOptions();\n }\n\n createAndDispatchPhoneData(fromSelect?: boolean) {\n // Init phone util\n const phoneUtil = PhoneNumberUtil.getInstance();\n const PNF = PhoneNumberFormat;\n\n // Reset the return object data\n this.returnObject.phone = this.resetPhoneUtilData();\n\n const tmpCountry = this.selectedCountry.length ? this.selectedCountry : this.countryData[0].countryCode;\n\n try {\n const parsedPhoneNumber = phoneUtil.parse(this.phoneNumber, tmpCountry);\n this.returnObject.isError = !phoneUtil.isValidNumber(parsedPhoneNumber) && !this.isEmptyPhoneNumber();\n this.returnObject.phone.nationalNumber = phoneUtil.format(parsedPhoneNumber, PNF.NATIONAL);\n this.returnObject.phone.internationalNumber = phoneUtil.format(parsedPhoneNumber, PNF.INTERNATIONAL);\n\n // Set the country code values depending on the event origin\n if (phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)) {\n if (fromSelect) {\n this.returnObject.isError = !(\n phoneUtil.isValidNumber(parsedPhoneNumber) &&\n phoneUtil.isValidNumberForRegion(parsedPhoneNumber, this.selectedCountry) &&\n !this.isEmptyPhoneNumber()\n );\n } else {\n this.updateSelectedCountryCode(parsedPhoneNumber.getCountryCode()!.toString());\n this.updateSelectedCountry(phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)!);\n\n this.returnObject.phone.countryCode = this.selectedCountry;\n this.returnObject.phone.code = this.selectedCountryCode;\n }\n this.updateCountryOptions();\n }\n\n const phoneType = Object.entries(PhoneNumberType).find(entry => entry[1] === phoneUtil.getNumberType(parsedPhoneNumber))!;\n this.returnObject.phone.numberType = phoneType[0];\n } catch {} finally {\n this.roadPhoneNumberInput.emit(this.returnObject);\n }\n }\n\n // utils\n\n updateSelectedCountryCode(countryCode: string) {\n this.selectedCountryCode = countryCode;\n }\n\n updateSelectedCountry(value: string) {\n this.selectedCountry = value;\n }\n\n resetPhoneUtilData(): PhoneReturnType {\n return {\n numberType: 'UNKNOWN',\n countryCode: this.selectedCountry,\n code: this.selectedCountryCode,\n nationalNumber: this.phoneNumber,\n internationalNumber: this.phoneNumber,\n };\n }\n\n isEmptyPhoneNumber(): boolean {\n return !this.phoneNumber.length;\n }\n\n getPhoneCodeFromCountryCode(countryCode: string): string \| undefined {\n return this.countryData.find(country => country.countryCode === countryCode)?.phoneCode;\n }\n\n updateCountryOptions() {\n const validLanguage = this.countryData[0].translations[this.language] ? this.language : 'fr';\n this.countryOptions = [\n ...this.countryData\n .sort((a, b) => a.translations[validLanguage].localeCompare(b.translations[validLanguage]))\n .map(country => ({\n value: country.countryCode,\n label: `${country.translations[validLanguage]} (+${country.phoneCode})`,\n selected: country.countryCode === this.selectedCountry,\n disabled: false,\n })\n ),\n {\n value: '',\n label: '--',\n selected: this.countryData.every((country) => country.countryCode !== this.selectedCountry),\n disabled: true,\n },\n ];\n }\n\n placeErrorMessage() {\n this.waitForElementToExist('.invalid-feedback').then((messError: HTMLElement) => {\n messError.style.display = \"flex\";\n messError.style.marginTop = \"-0.5rem\";\n const phoneNumberInput = (this.el as HTMLRoadPhoneNumberInputElement);\n phoneNumberInput.appendChild(messError);\n });\n }\n\n waitForElementToExist(selector: string): Promise<HTMLElement> {\n return new Promise(resolve => {\n if (document.querySelector(selector)) {\n return resolve(document.querySelector(selector) as HTMLElement);\n }\n\n const observer = new MutationObserver(() => {\n if (document.querySelector(selector)) {\n resolve(document.querySelector(selector) as HTMLElement);\n observer.disconnect();\n }\n });\n\n observer.observe(document.body, {\n subtree: true,\n childList: true,\n });\n });\n }\n\n render() {\n const selectId = `road-select-${selectIds++}`;\n const labelId = selectId + '-label';\n const valueId = selectId + '-value';\n const isInvalidClass = this.errorMessage.length ? 'is-invalid' : '';\n const isErrorClass = this.errorMessage.length ? 'is-error' : '';\n\n return (\n <Host>\n <road-input-group>\n <div class={`road-phone-input-select ${isErrorClass}`} slot=\"prepend\">\n <select\n id='phone-number-input'\n class={`form-select-area has-value ${isInvalidClass}`}\n aria-disabled={this.disabled ? 'true' : null}\n disabled={this.disabled}\n onChange={(event) => this.handleSelect(event)}\n aria-label={this.codeLabel}\n tabIndex={this.disabled ? -1 : 0}\n >\n {this.countryOptions && this.countryOptions.map(option => (\n <option value={option.value} disabled={option.disabled} selected={option.selected}>{option.label}</option>\n ))}\n </select>\n <label class=\"form-select-area-label\" id={labelId} htmlFor={selectId}>{this.codeLabel}</label>\n <label class=\"form-select-area-value\" id={valueId} htmlFor={selectId}>+{this.selectedCountryCode}</label>\n </div>\n <road-input\n id=\"phone-number\"\n sizes=\"xl\"\n label={this.phoneLabel}\n value={this.phoneValue}\n onRoadChange={(event) => this.handleInput(event)}\n required={this.required}\n error={this.errorMessage}\n onKeyDown={(event) => this.handleKeyDown(event)} // Lier la fonction handleKeyDown à l'événement onKeyDown\n tabIndex={0}\n >\n </road-input>\n </road-input-group>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"phone-number-input.js","sourceRoot":"","sources":["../../../src/components/phone-number-input/phone-number-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAI5F,IAAI,SAAS,GAAG,CAAC,CAAC;AAOlB,MAAM,OAAO,oBAAoB;;oBAiBH,KAAK;uBAGI,EAAE;oBAGZ,IAAI;qBAGH,EAAE;sBAGD,EAAE;;;wBASA,EAAE;oBAGd,KAAK;2BAEW,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW;+BAC3B,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS;uBACrC,EAAE;0BACU,EAAE;wBACP;MACpC,OAAO,EAAE,KAAK;MACd,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE;KACjC;;EAGD,qBAAqB;IACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;EAC3B,CAAC;EAED,oBAAoB;EACpB,iBAAiB;IACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,UAAU,GAAG,KAAK,CAAC;IAEvB,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC;KACpC;IAED,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC;MACxC,IAAI,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;QACtD,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,WAAW,CAAE,CAAC,CAAC;QACpF,UAAU,GAAG,IAAI,CAAC;OACnB;KACF;IAED,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC5B,IAAI,CAAC,0BAA0B,CAAC,UAAU,CAAC,CAAC;EAC9C,CAAC;EAED,gBAAgB;EAChB,WAAW,CAAC,KAEV;IACA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAM,CAAC;IACvC,IAAI,CAAC,0BAA0B,EAAE,CAAC;EAClC,CAAC;EAGH,mBAAmB;EACnB,aAAa,CAAC,KAAoB;IAChC,iCAAiC;IACjC,MAAM,mBAAmB,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IAEva,2EAA2E;IAC3E,IAAI,mBAAmB,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;MAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;KACxB;EACH,CAAC;EAED,iBAAiB;EACjB,WAAW,CAAC,KAAoB;IAC9B,6BAA6B;IAC7B,MAAM,UAAU,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,IAAI,EAAE,CAAC;IAElE,2EAA2E;IAC3E,MAAM,0BAA0B,GAAG,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAEhE,gIAAgI;IAChI,IAAI,CAAC,0BAA0B,EAAE;MAC/B,kEAAkE;MACjE,KAAK,CAAC,MAA2B,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;KAC7D;SAAM;MACL,kHAAkH;MAClH,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;MAC9B,IAAI,CAAC,0BAA0B,EAAE,CAAC;KACnC;EACH,CAAC;EAED,iBAAiB;EACjB,YAAY,CAAC,KAAY;IACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAkC,CAAC;IACxD,IAAI,MAAM,EAAE;MACV,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;MACzC,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,eAAe,CAAE,CAAC,CAAC;KACzF;IACD,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACtC,IAAI,CAAC,oBAAoB,EAAE,CAAC;EAC9B,CAAC;EAED,0BAA0B,CAAC,UAAoB;IAC7C,kBAAkB;IAClB,MAAM,SAAS,GAAG,eAAe,CAAC,WAAW,EAAE,CAAC;IAChD,MAAM,GAAG,GAAG,iBAAiB,CAAC;IAE9B,+BAA+B;IAC/B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAEpD,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;IAExG,IAAI;MACF,MAAM,iBAAiB,GAAG,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;MACxE,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;MACtG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,GAAG,SAAS,CAAC,MAAM,CAAC,iBAAiB,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC;MAC3F,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,CAAC,MAAM,CAAC,iBAAiB,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;MAErG,4DAA4D;MAC5D,IAAI,SAAS,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,EAAE;QACvD,IAAI,UAAU,EAAE;UACd,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,CAAC,CAC3B,SAAS,CAAC,aAAa,CAAC,iBAAiB,CAAC;YAC1C,SAAS,CAAC,sBAAsB,CAAC,iBAAiB,EAAE,IAAI,CAAC,eAAe,CAAC;YACzE,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAC3B,CAAC;SACH;aAAM;UACL,IAAI,CAAC,yBAAyB,CAAC,iBAAiB,CAAC,cAAc,EAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;UAC/E,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,sBAAsB,CAAC,iBAAiB,CAAE,CAAC,CAAC;UAEjF,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC;UAC3D,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,mBAAmB,CAAC;SACzD;QACD,IAAI,CAAC,oBAAoB,EAAE,CAAC;OAC7B;MAED,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAE,CAAC;MAC1H,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;KACnD;IAAC,WAAM,GAAE;YAAS;MACjB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACnD;EACH,CAAC;EAED,QAAQ;EAER,yBAAyB,CAAC,WAAmB;IAC3C,IAAI,CAAC,mBAAmB,GAAG,WAAW,CAAC;EACzC,CAAC;EAED,qBAAqB,CAAC,KAAa;IACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;EAC/B,CAAC;EAED,kBAAkB;IAChB,OAAO;MACL,UAAU,EAAE,SAAS;MACrB,WAAW,EAAE,IAAI,CAAC,eAAe;MACjC,IAAI,EAAE,IAAI,CAAC,mBAAmB;MAC9B,cAAc,EAAE,IAAI,CAAC,WAAW;MAChC,mBAAmB,EAAE,IAAI,CAAC,WAAW;KACtC,CAAC;EACJ,CAAC;EAED,kBAAkB;IAChB,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;EAClC,CAAC;EAED,2BAA2B,CAAC,WAAmB;;IAC7C,OAAO,MAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,KAAK,WAAW,CAAC,0CAAE,SAAS,CAAC;EAC1F,CAAC;EAED,oBAAoB;IAClB,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;IAC7F,IAAI,CAAC,cAAc,GAAG;MACpB,GAAG,IAAI,CAAC,WAAW;SAChB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC;SAC1F,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QACf,KAAK,EAAE,OAAO,CAAC,WAAW;QAC1B,KAAK,EAAE,GAAG,OAAO,CAAC,YAAY,CAAC,aAAa,CAAC,MAAM,OAAO,CAAC,SAAS,GAAG;QACvE,QAAQ,EAAE,OAAO,CAAC,WAAW,KAAK,IAAI,CAAC,eAAe;QACtD,QAAQ,EAAE,KAAK;OAChB,CAAC,CACH;MACD;QACE,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,WAAW,KAAK,IAAI,CAAC,eAAe,CAAC;QAC3F,QAAQ,EAAE,IAAI;OACf;KACJ,CAAC;EACF,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,qBAAqB,CAAC,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAsB,EAAE,EAAE;MAC9E,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;MACjC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;MACtC,MAAM,gBAAgB,GAAI,IAAI,CAAC,EAAsC,CAAC;MACtE,gBAAgB,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;EACL,CAAC;EAED,qBAAqB,CAAC,QAAgB;IACpC,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;MAC3B,IAAI,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;QACpC,OAAO,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAgB,CAAC,CAAC;OACjE;MAED,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;QACzC,IAAI,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;UACpC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAgB,CAAC,CAAC;UACzD,QAAQ,CAAC,UAAU,EAAE,CAAC;SACvB;MACH,CAAC,CAAC,CAAC;MAEH,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;QAC9B,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,IAAI;OAChB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,MAAM,QAAQ,GAAG,eAAe,SAAS,EAAE,EAAE,CAAC;IAC9C,MAAM,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACpC,MAAM,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACpC,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACpE,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAEhE,OAAO,CACL,EAAC,IAAI;MACH;QACE,WAAK,KAAK,EAAE,2BAA2B,YAAY,EAAE,EAAE,IAAI,EAAC,SAAS;UACrE,cACI,EAAE,EAAC,oBAAoB,EACvB,KAAK,EAAE,8BAA8B,cAAc,EAAE,mBACtC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAC5C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,gBACjC,IAAI,CAAC,SAAS,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAE/B,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CACxD,cAAQ,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAG,MAAM,CAAC,KAAK,CAAU,CAC3G,CAAC,CACK;UACT,aAAO,KAAK,EAAC,wBAAwB,EAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,IAAG,IAAI,CAAC,SAAS,CAAS;UAC9F,aAAO,KAAK,EAAC,wBAAwB,EAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ;;YAAI,IAAI,CAAC,mBAAmB,CAAS,CACrG;QACN,kBACE,IAAI,EAAC,KAAK,EACV,EAAE,EAAC,cAAc,EACjB,KAAK,EAAC,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAChD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAC/C,QAAQ,EAAE,CAAC,GAEA,CACI,CACd,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Element, Host, State, h, Event, EventEmitter, Watch } from '@stencil/core';\nimport { PhoneNumberFormat, PhoneNumberType, PhoneNumberUtil } from 'google-libphonenumber';\nimport { CountryOption, CountryType, PhoneReturnType, ReturnObject } from './interfaces';\nimport { RoadInputCustomEvent } from '../../components';\n\nlet selectIds = 0;\n\n@Component({\n tag: 'road-phone-number-input',\n styleUrl: 'phone-number-input.css',\n scoped: true,\n})\nexport class RoadPhoneNumberInput {\n\n /** Computed phone data /\n @Event() roadPhoneNumberInput!: EventEmitter<{\n isError: boolean;\n phone: {\n numberType: string;\n countryCode: string;\n nationalNumber: string;\n code: string;\n internationalNumber: string;\n };\n }>;\n\n @Element() el!: HTMLRoadPhoneNumberInputElement;\n\n /* Disable both fields /\n @Prop() disabled: boolean = false;\n\n /* List of countries displayed in the country selection. Countries will be automatically sorted by alphabetical order (see format in example) /\n @Prop() countryData: CountryType[] = [];\n\n /* Used to display countries with the right language /\n @Prop() language: string = 'fr';\n\n /* Country selection placeHolder /\n @Prop() codeLabel: string = '';\n\n /* Phone input placeHolder /\n @Prop() phoneLabel: string = '';\n\n /* Value displayed in the phone input /\n @Prop() phoneValue?: string;\n\n /* Selected country code /\n @Prop() countryCode?: string;\n\n /* Error message (displayed only if ther is a message) /\n @Prop() errorMessage: string = '';\n\n /* Add a star in the phone input /\n @Prop() required = false;\n\n @State() selectedCountry: string = this.countryData[0].countryCode;\n @State() selectedCountryCode: string = this.countryData[0].phoneCode;\n @State() phoneNumber: string = '';\n @State() countryOptions: CountryOption[] = [];\n @State() returnObject: ReturnObject = {\n isError: false,\n phone: this.resetPhoneUtilData(),\n };\n\n @Watch('errorMessage')\n updateMessagePosition() {\n this.placeErrorMessage();\n }\n\n // On component load\n componentWillLoad() {\n this.placeErrorMessage();\n let fromSelect = false;\n\n if (this.phoneValue) {\n this.phoneNumber = this.phoneValue;\n }\n\n if (this.countryCode) {\n this.selectedCountry = this.countryCode;\n if (this.getPhoneCodeFromCountryCode(this.countryCode)) {\n this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.countryCode)!);\n fromSelect = true;\n }\n }\n\n this.updateCountryOptions();\n this.createAndDispatchPhoneData(fromSelect);\n }\n\n // On user input\n handleInput(event: RoadInputCustomEvent<{\n value: string \| null \| undefined;\n }>) {\n this.phoneNumber = event.detail.value!;\n this.createAndDispatchPhoneData();\n }\n \n\n // On user key down\n handleKeyDown(event: KeyboardEvent) {\n // Liste des caractères interdits\n const caracteresInterdits = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z','!', '@', '#', '$', '%', '^', '&', '', '(', ')', '_', '=', '[', ']', '{', '}', '\|', ';', ':', \"'\", '\"', ',', '.', '<', '>', '/', '?'];\n \n // Vérifier si la touche pressée est dans la liste des caractères interdits\n if (caracteresInterdits.includes(event.key)) {\n event.preventDefault();\n }\n }\n\n // On user key up\n handleKeyUp(event: KeyboardEvent) {\n // Récupérer la valeur saisie\n const inputValue = (event.target as HTMLInputElement).value \|\| '';\n\n // Vérifier si la valeur contient uniquement des chiffres ou le symbole \"+\"\n const containsOnlyNumbersAndPlus = /^[0-9+]*$/.test(inputValue);\n\n // Si la valeur ne contient pas uniquement des chiffres ou le symbole \"+\", réinitialiser le champ de saisie à son état précédent\n if (!containsOnlyNumbersAndPlus) {\n // Réinitialiser la valeur du champ de saisie à son état précédent\n (event.target as HTMLInputElement).value = this.phoneNumber;\n } else {\n // Si la valeur contient uniquement des chiffres ou le symbole \"+\", mettre à jour la valeur du numéro de téléphone\n this.phoneNumber = inputValue;\n this.createAndDispatchPhoneData();\n }\n }\n\n // On user select\n handleSelect(event: Event) {\n const select = event.target as HTMLSelectElement \| null;\n if (select) {\n this.updateSelectedCountry(select.value);\n this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.selectedCountry)!);\n }\n this.createAndDispatchPhoneData(true);\n this.updateCountryOptions();\n }\n\n createAndDispatchPhoneData(fromSelect?: boolean) {\n // Init phone util\n const phoneUtil = PhoneNumberUtil.getInstance();\n const PNF = PhoneNumberFormat;\n\n // Reset the return object data\n this.returnObject.phone = this.resetPhoneUtilData();\n\n const tmpCountry = this.selectedCountry.length ? this.selectedCountry : this.countryData[0].countryCode;\n\n try {\n const parsedPhoneNumber = phoneUtil.parse(this.phoneNumber, tmpCountry);\n this.returnObject.isError = !phoneUtil.isValidNumber(parsedPhoneNumber) && !this.isEmptyPhoneNumber();\n this.returnObject.phone.nationalNumber = phoneUtil.format(parsedPhoneNumber, PNF.NATIONAL);\n this.returnObject.phone.internationalNumber = phoneUtil.format(parsedPhoneNumber, PNF.INTERNATIONAL);\n\n // Set the country code values depending on the event origin\n if (phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)) {\n if (fromSelect) {\n this.returnObject.isError = !(\n phoneUtil.isValidNumber(parsedPhoneNumber) &&\n phoneUtil.isValidNumberForRegion(parsedPhoneNumber, this.selectedCountry) &&\n !this.isEmptyPhoneNumber()\n );\n } else {\n this.updateSelectedCountryCode(parsedPhoneNumber.getCountryCode()!.toString());\n this.updateSelectedCountry(phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)!);\n\n this.returnObject.phone.countryCode = this.selectedCountry;\n this.returnObject.phone.code = this.selectedCountryCode;\n }\n this.updateCountryOptions();\n }\n\n const phoneType = Object.entries(PhoneNumberType).find(entry => entry[1] === phoneUtil.getNumberType(parsedPhoneNumber))!;\n this.returnObject.phone.numberType = phoneType[0];\n } catch {} finally {\n this.roadPhoneNumberInput.emit(this.returnObject);\n }\n }\n\n // utils\n\n updateSelectedCountryCode(countryCode: string) {\n this.selectedCountryCode = countryCode;\n }\n\n updateSelectedCountry(value: string) {\n this.selectedCountry = value;\n }\n\n resetPhoneUtilData(): PhoneReturnType {\n return {\n numberType: 'UNKNOWN',\n countryCode: this.selectedCountry,\n code: this.selectedCountryCode,\n nationalNumber: this.phoneNumber,\n internationalNumber: this.phoneNumber,\n };\n }\n\n isEmptyPhoneNumber(): boolean {\n return !this.phoneNumber.length;\n }\n\n getPhoneCodeFromCountryCode(countryCode: string): string \| undefined {\n return this.countryData.find(country => country.countryCode === countryCode)?.phoneCode;\n }\n\n updateCountryOptions() {\n const validLanguage = this.countryData[0].translations[this.language] ? this.language : 'fr';\n this.countryOptions = [\n ...this.countryData\n .sort((a, b) => a.translations[validLanguage].localeCompare(b.translations[validLanguage]))\n .map(country => ({\n value: country.countryCode,\n label: `${country.translations[validLanguage]} (+${country.phoneCode})`,\n selected: country.countryCode === this.selectedCountry,\n disabled: false,\n })\n ),\n {\n value: '',\n label: '--',\n selected: this.countryData.every((country) => country.countryCode !== this.selectedCountry),\n disabled: true,\n },\n ];\n }\n\n placeErrorMessage() {\n this.waitForElementToExist('.invalid-feedback').then((messError: HTMLElement) => {\n messError.style.display = \"flex\";\n messError.style.marginTop = \"-0.5rem\";\n const phoneNumberInput = (this.el as HTMLRoadPhoneNumberInputElement);\n phoneNumberInput.appendChild(messError);\n });\n }\n\n waitForElementToExist(selector: string): Promise<HTMLElement> {\n return new Promise(resolve => {\n if (document.querySelector(selector)) {\n return resolve(document.querySelector(selector) as HTMLElement);\n }\n\n const observer = new MutationObserver(() => {\n if (document.querySelector(selector)) {\n resolve(document.querySelector(selector) as HTMLElement);\n observer.disconnect();\n }\n });\n\n observer.observe(document.body, {\n subtree: true,\n childList: true,\n });\n });\n }\n\n render() {\n const selectId = `road-select-${selectIds++}`;\n const labelId = selectId + '-label';\n const valueId = selectId + '-value';\n const isInvalidClass = this.errorMessage.length ? 'is-invalid' : '';\n const isErrorClass = this.errorMessage.length ? 'is-error' : '';\n\n return (\n <Host>\n <road-input-group>\n <div class={`road-phone-input-select ${isErrorClass}`} slot=\"prepend\">\n <select\n id='phone-number-input'\n class={`form-select-area has-value ${isInvalidClass}`}\n aria-disabled={this.disabled ? 'true' : null}\n disabled={this.disabled}\n onChange={(event) => this.handleSelect(event)}\n aria-label={this.codeLabel}\n tabIndex={this.disabled ? -1 : 0}\n >\n {this.countryOptions && this.countryOptions.map(option => (\n <option value={option.value} disabled={option.disabled} selected={option.selected}>{option.label}</option>\n ))}\n </select>\n <label class=\"form-select-area-label\" id={labelId} htmlFor={selectId}>{this.codeLabel}</label>\n <label class=\"form-select-area-value\" id={valueId} htmlFor={selectId}>+{this.selectedCountryCode}</label>\n </div>\n <road-input\n type=\"tel\"\n id=\"phone-number\"\n sizes=\"xl\"\n label={this.phoneLabel}\n value={this.phoneValue}\n onRoadChange={(event) => this.handleInput(event)}\n required={this.required}\n error={this.errorMessage}\n onKeyDown={(event) => this.handleKeyDown(event)} // Lier la fonction handleKeyDown à l'événement onKeyDown\n tabIndex={0}\n >\n </road-input>\n </road-input-group>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/tab-button/tab-button.css CHANGED Viewed

@@ -140,9 +140,10 @@
   width: 100%;
   height: 2px;
   content: "";
-  opacity: 0;
+  background-color: var(--road-input-outline);
+  opacity: 1;
   transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  transform: scaleX(0);
+  transform: none;
   transform-origin: center;
 }

package/dist/collection/components/toggle/toggle.css CHANGED Viewed

@@ -51,6 +51,10 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
+.form-toggle-label.disabled{
+  cursor: not-allowed;
+}
 /* LEVER
  -------------------- */

package/dist/collection/components/toggle/toggle.js CHANGED Viewed

@@ -39,7 +39,8 @@ export class toggle {
     const textLabel = h("label", { class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
     const isSpacedClass = this.isSpaced && 'form-toggle-spaced';
     const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';
-    return (h(Host, null, h("input", { class: "form-toggle-input", type: "checkbox", id: this.toggleId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { class: `form-toggle-label ${isSpacedClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, h("div", { class: `form-toggle-lever ${righttoggleClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+    const disabledClass = this.disabled ? 'disabled' : '';
+    return (h(Host, null, h("input", { class: "form-toggle-input", type: "checkbox", id: this.toggleId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, h("div", { class: `form-toggle-lever ${righttoggleClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
   }
   static get is() { return "road-toggle"; }
   static get encapsulation() { return "scoped"; }