@roadtrip/components 3.28.0 → 3.30.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/road-badge_14.cjs.entry.js +15 -4
- package/dist/cjs/road-badge_14.cjs.entry.js.map +1 -1
- package/dist/cjs/road-phone-number-input.cjs.entry.js +1 -1
- package/dist/cjs/road-phone-number-input.cjs.entry.js.map +1 -1
- package/dist/cjs/road-tab-button.cjs.entry.js +1 -1
- package/dist/cjs/road-tab-button.cjs.entry.js.map +1 -1
- package/dist/cjs/road-toggle.cjs.entry.js +3 -2
- package/dist/cjs/road-toggle.cjs.entry.js.map +1 -1
- package/dist/cjs/road-tooltip.cjs.entry.js +23 -3
- package/dist/cjs/road-tooltip.cjs.entry.js.map +1 -1
- package/dist/collection/components/button/button.css +42 -2
- package/dist/collection/components/button/button.stories.js +13 -1
- package/dist/collection/components/drawer/drawer.css +8 -0
- package/dist/collection/components/input/input.js +12 -1
- package/dist/collection/components/input/input.js.map +1 -1
- package/dist/collection/components/input-group/input-group.css +9 -0
- package/dist/collection/components/input-group/input-group.stories.js +1 -1
- package/dist/collection/components/phone-number-input/phone-number-input.js +1 -1
- package/dist/collection/components/phone-number-input/phone-number-input.js.map +1 -1
- package/dist/collection/components/tab-button/tab-button.css +3 -2
- package/dist/collection/components/toggle/toggle.css +4 -0
- package/dist/collection/components/toggle/toggle.js +2 -1
- package/dist/collection/components/toggle/toggle.js.map +1 -1
- package/dist/collection/components/tooltip/tooltip.css +2 -0
- package/dist/collection/components/tooltip/tooltip.js +22 -2
- package/dist/collection/components/tooltip/tooltip.js.map +1 -1
- package/dist/esm/road-badge_14.entry.js +15 -4
- package/dist/esm/road-badge_14.entry.js.map +1 -1
- package/dist/esm/road-phone-number-input.entry.js +1 -1
- package/dist/esm/road-phone-number-input.entry.js.map +1 -1
- package/dist/esm/road-tab-button.entry.js +1 -1
- package/dist/esm/road-tab-button.entry.js.map +1 -1
- package/dist/esm/road-toggle.entry.js +3 -2
- package/dist/esm/road-toggle.entry.js.map +1 -1
- package/dist/esm/road-tooltip.entry.js +23 -3
- package/dist/esm/road-tooltip.entry.js.map +1 -1
- package/dist/roadtrip/p-1115f970.entry.js +2 -0
- package/dist/roadtrip/p-1115f970.entry.js.map +1 -0
- package/dist/roadtrip/p-2e7d3440.entry.js +2 -0
- package/dist/roadtrip/p-2e7d3440.entry.js.map +1 -0
- package/dist/roadtrip/p-36895fa7.entry.js +2 -0
- package/dist/roadtrip/p-36895fa7.entry.js.map +1 -0
- package/dist/roadtrip/p-37563bb6.entry.js +2 -0
- package/dist/roadtrip/p-37563bb6.entry.js.map +1 -0
- package/dist/roadtrip/{p-026e28b6.entry.js → p-8ac960ce.entry.js} +2 -2
- package/dist/roadtrip/{p-026e28b6.entry.js.map → p-8ac960ce.entry.js.map} +1 -1
- package/dist/roadtrip/roadtrip.css +1 -1
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/dist/types/components/input/input.d.ts +1 -0
- package/dist/types/components/tooltip/tooltip.d.ts +6 -0
- package/hydrate/index.js +44 -12
- package/package.json +1 -1
- package/dist/roadtrip/p-49025654.entry.js +0 -2
- package/dist/roadtrip/p-49025654.entry.js.map +0 -1
- package/dist/roadtrip/p-a77727f2.entry.js +0 -2
- package/dist/roadtrip/p-a77727f2.entry.js.map +0 -1
- package/dist/roadtrip/p-c1dca3cc.entry.js +0 -2
- package/dist/roadtrip/p-c1dca3cc.entry.js.map +0 -1
- package/dist/roadtrip/p-f09d5d41.entry.js +0 -2
- package/dist/roadtrip/p-f09d5d41.entry.js.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-52302079.js';
|
|
2
2
|
|
|
3
|
-
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:
|
|
3
|
+
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}";
|
|
4
4
|
|
|
5
5
|
const TabButton = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-tab-button.entry.js","mappings":"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","names":[],"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.js","mappings":"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","names":[],"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}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host } from './index-52302079.js';
|
|
2
2
|
import './polyfill-dc7c89b2.js';
|
|
3
3
|
|
|
4
|
-
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}";
|
|
4
|
+
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}";
|
|
5
5
|
|
|
6
6
|
const toggle = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -49,7 +49,8 @@ const toggle = class {
|
|
|
49
49
|
const textLabel = h("label", { class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
|
|
50
50
|
const isSpacedClass = this.isSpaced && 'form-toggle-spaced';
|
|
51
51
|
const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';
|
|
52
|
-
|
|
52
|
+
const disabledClass = this.disabled ? 'disabled' : '';
|
|
53
|
+
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)));
|
|
53
54
|
}
|
|
54
55
|
static get watchers() { return {
|
|
55
56
|
"checked": ["checkedChanged"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-toggle.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,
|
|
1
|
+
{"file":"road-toggle.entry.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,GAAG,aAAO,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,QACE,EAAC,IAAI,QACH,aACE,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,EACF,aAAO,KAAK,EAAE,qBAAqB,aAAa,IAAI,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACxF,IAAI,CAAC,YAAY,IAAI,SAAS,EAC/B,WAAK,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":[],"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}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, a as getElement } from './index-52302079.js';
|
|
2
2
|
|
|
3
|
-
const tooltipCss = ":host{--max-width:85vw;--z-index:1;--width:max-content;position:relative;display:inline-block}:host(:hover){cursor:pointer}:host([trigger=\"hover\"]) .tooltip{display:none}@media (min-width: 1200px){:host([trigger=\"hover\"]) .tooltip{display:block}}.tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:100%;max-width:var(--max-width);padding:0.5rem;font-family:var(--road-font);font-size:var(--road-body-small);color:var(--road-on-surface);text-align:center;pointer-events:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);opacity:0;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateX(-50%) translateY(-100%)}:host([contentalign=\"left\"]) .tooltip{text-align:left}.tooltip.tooltip-text-left::after{text-align:left}.tooltip-open{opacity:1}:host([data-tooltip-position=\"top\"]) .tooltip{left:50%;transform:translateX(-50%) translateY(-70%)}:host([data-tooltip-position=\"top\"]) .tooltip-open{left:50%;transform:translateX(-50%) translateY(-100%)}:host([data-tooltip-position=\"top-left\"]) .tooltip{left:0%;transform:translateY(-70%)}:host([data-tooltip-position=\"top-left\"]) .tooltip-open{transform:translateY(-100%)}:host([data-tooltip-position=\"top-right\"]) .tooltip{left:50%;transform:translateY(-70%)}:host([data-tooltip-position=\"top-right\"]) .tooltip-open{left:100%;transform:translateY(-100%)}:host([data-tooltip-position=\"left\"]) .tooltip{top:50%;left:0%;margin-right:0.5rem;transform:translateX(-94%) translateY(-55%)}:host([data-tooltip-position=\"left\"]) .tooltip-open{transform:translateX(-103%) translateY(-55%)}:host([data-tooltip-position=\"bottom\"]) .tooltip{top:100%;left:50%;margin-top:0.5rem;transform:translateX(-50%) translateY(-40%)}:host([data-tooltip-position=\"bottom\"]) .tooltip-open{transform:translateX(-50%) translateY(-6%)}:host([data-tooltip-position=\"bottom-left\"]) .tooltip{top:100%;left:0;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position=\"bottom-right\"]) .tooltip{top:100%;left:100%;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position=\"right\"]) .tooltip{top:50%;left:100%;margin-left:0.5rem;transform:translateX(-14%) translateY(-55%)}:host([data-tooltip-position=\"right\"]) .tooltip-open{transform:translateX(-4%) translateY(-55%)}";
|
|
3
|
+
const tooltipCss = ":host{--max-width:85vw;--z-index:1;--width:max-content;position:relative;display:inline-block}:host(:hover){cursor:pointer}:host([trigger=\"hover\"]) .tooltip{display:none}@media (min-width: 1200px){:host([trigger=\"hover\"]) .tooltip{display:block}}.tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:100%;max-width:var(--max-width);padding:0.5rem;font-family:var(--road-font);font-size:var(--road-body-small);color:var(--road-on-surface);text-align:center;pointer-events:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);opacity:0;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateX(-50%) translateY(-100%)}:host([contentalign=\"left\"]) .tooltip{text-align:left}.tooltip.tooltip-text-left::after{text-align:left}.tooltip-open{visibility:visible;opacity:1}:host([data-tooltip-position=\"top\"]) .tooltip{left:50%;transform:translateX(-50%) translateY(-70%)}:host([data-tooltip-position=\"top\"]) .tooltip-open{left:50%;transform:translateX(-50%) translateY(-100%)}:host([data-tooltip-position=\"top-left\"]) .tooltip{left:0%;transform:translateY(-70%)}:host([data-tooltip-position=\"top-left\"]) .tooltip-open{transform:translateY(-100%)}:host([data-tooltip-position=\"top-right\"]) .tooltip{left:50%;transform:translateY(-70%)}:host([data-tooltip-position=\"top-right\"]) .tooltip-open{left:100%;transform:translateY(-100%)}:host([data-tooltip-position=\"left\"]) .tooltip{top:50%;left:0%;margin-right:0.5rem;transform:translateX(-94%) translateY(-55%)}:host([data-tooltip-position=\"left\"]) .tooltip-open{transform:translateX(-103%) translateY(-55%)}:host([data-tooltip-position=\"bottom\"]) .tooltip{top:100%;left:50%;margin-top:0.5rem;transform:translateX(-50%) translateY(-40%)}:host([data-tooltip-position=\"bottom\"]) .tooltip-open{transform:translateX(-50%) translateY(-6%)}:host([data-tooltip-position=\"bottom-left\"]) .tooltip{top:100%;left:0;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position=\"bottom-right\"]) .tooltip{top:100%;left:100%;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position=\"right\"]) .tooltip{top:50%;left:100%;margin-left:0.5rem;transform:translateX(-14%) translateY(-55%)}:host([data-tooltip-position=\"right\"]) .tooltip-open{transform:translateX(-4%) translateY(-55%)}";
|
|
4
4
|
|
|
5
5
|
const Tooltip = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -20,13 +20,20 @@ const Tooltip = class {
|
|
|
20
20
|
this.close();
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
|
+
this.isKeyboardNavigation = false;
|
|
24
|
+
this.handleKeyDown = () => {
|
|
25
|
+
this.isKeyboardNavigation = true;
|
|
26
|
+
};
|
|
27
|
+
this.handleMouseDown = () => {
|
|
28
|
+
this.isKeyboardNavigation = false;
|
|
29
|
+
};
|
|
23
30
|
this.onFocus = () => {
|
|
24
|
-
if (this.
|
|
31
|
+
if (this.isKeyboardNavigation && this.hasTrigger('hover')) {
|
|
25
32
|
this.open();
|
|
26
33
|
}
|
|
27
34
|
};
|
|
28
35
|
this.onBlur = () => {
|
|
29
|
-
if (this.
|
|
36
|
+
if (this.isKeyboardNavigation && this.hasTrigger('hover')) {
|
|
30
37
|
this.close();
|
|
31
38
|
}
|
|
32
39
|
};
|
|
@@ -49,6 +56,19 @@ const Tooltip = class {
|
|
|
49
56
|
async close() {
|
|
50
57
|
this.isOpen = false;
|
|
51
58
|
}
|
|
59
|
+
// Écoute les événements pour détecter le mode d'interaction
|
|
60
|
+
componentDidMount() {
|
|
61
|
+
document.addEventListener('keydown', this.handleKeyDown);
|
|
62
|
+
document.addEventListener('mousedown', this.handleMouseDown);
|
|
63
|
+
}
|
|
64
|
+
componentDidLoad() {
|
|
65
|
+
document.addEventListener('keydown', this.handleKeyDown);
|
|
66
|
+
document.addEventListener('mousedown', this.handleMouseDown);
|
|
67
|
+
}
|
|
68
|
+
componentWillUnmount() {
|
|
69
|
+
document.removeEventListener('keydown', this.handleKeyDown);
|
|
70
|
+
document.removeEventListener('mousedown', this.handleMouseDown);
|
|
71
|
+
}
|
|
52
72
|
hasTrigger(triggerType) {
|
|
53
73
|
const triggers = this.trigger.split(' ');
|
|
54
74
|
return triggers.includes(triggerType);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-tooltip.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,
|
|
1
|
+
{"file":"road-tooltip.entry.js","mappings":"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","names":[],"sources":["src/components/tooltip/tooltip.css?tag=road-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * Tooltip\n *\n * Index\n * - Tooltip\n * - Position\n */\n\n/**\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --z-index: The z-index of the tooltip.\n * @prop --width: width of the tooltip.\n */\n\n/* TOOLTIP\n -------------------- */\n\n:host {\n --max-width: 85vw;\n --z-index: 1;\n --width: max-content;\n\n position: relative;\n display: inline-block;\n}\n\n:host(:hover) {\n cursor: pointer;\n}\n\n\n:host([trigger=\"hover\"]) .tooltip {\n display: none;\n}\n\n@media (min-width: 1200px) {\n\n :host([trigger=\"hover\"]) .tooltip {\n display: block;\n }\n}\n\n.tooltip {\n position: absolute;\n top: -0.5rem;\n left: 50%;\n z-index: 1;\n width: var(--width);\n min-width: 100%;\n max-width: var(--max-width);\n padding: 0.5rem;\n font-family: var(--road-font);\n font-size: var(--road-body-small);\n color: var(--road-on-surface);\n text-align: center;\n pointer-events: none;\n background: var(--road-surface);\n border: 1px solid var(--road-outline-weak);\n border-radius: 0.25rem;\n box-shadow: var(--road-elevation-low);\n opacity: 0;\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\n transform: translateX(-50%) translateY(-100%);\n}\n\n:host([contentalign=\"left\"]) .tooltip {\n text-align: left;\n}\n\n.tooltip.tooltip-text-left::after {\n text-align: left;\n}\n\n.tooltip-open {\n visibility: visible;\n opacity: 1;\n}\n\n\n/* POSITION\n -------------------- */\n\n/**\n * Top\n */\n\n:host([data-tooltip-position=\"top\"]) .tooltip {\n left: 50%;\n transform: translateX(-50%) translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top\"]) .tooltip-open {\n left: 50%;\n transform: translateX(-50%) translateY(-100%);\n}\n\n/**\n * Top Left\n */\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip {\n left: 0%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip-open {\n transform: translateY(-100%);\n}\n\n/**\n * Top Right\n */\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip {\n left: 50%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip-open {\n left: 100%;\n transform: translateY(-100%);\n}\n\n/**\n * Left\n */\n\n:host([data-tooltip-position=\"left\"]) .tooltip {\n top: 50%;\n left: 0%;\n margin-right: 0.5rem;\n transform: translateX(-94%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"left\"]) .tooltip-open {\n transform: translateX(-103%) translateY(-55%);\n}\n\n/**\n * Bottom\n */\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip {\n top: 100%;\n left: 50%;\n margin-top: 0.5rem;\n transform: translateX(-50%) translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip-open {\n transform: translateX(-50%) translateY(-6%);\n}\n\n/**\n * Bottom Left\n */\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip {\n top: 100%;\n left: 0;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/**\n * Bottom Right\n */\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip {\n top: 100%;\n left: 100%;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/**\n * Right\n */\n\n:host([data-tooltip-position=\"right\"]) .tooltip {\n top: 50%;\n left: 100%;\n margin-left: 0.5rem;\n transform: translateX(-14%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"right\"]) .tooltip-open {\n transform: translateX(-4%) translateY(-55%);\n}\n","import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n tag: 'road-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip {\n\n @Element() el!: HTMLRoadTooltipElement;\n\n /**\n * The id of tooltip\n */\n @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n /**\n * The tooltip's content.\n */\n @Prop() content = '';\n\n /**\n * The position of the tooltip.\n */\n @Prop() position:\n | 'top'\n | 'right'\n | 'bottom'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n | 'left' = 'top';\n\n /**\n * The content align of the tooltip.\n */\n @Prop() contentAlign:\n | 'center'\n | 'left' = 'center';\n\n /**\n * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n */\n @Prop({ mutable: true }) isOpen = false;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @Prop() trigger: string = 'hover';\n\n /**\n * Open the tooltip.\n */\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n private onClick = () => {\n if (this.hasTrigger('click')) {\n this.isOpen ? this.close() : this.open();\n }\n };\n\n private onMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.close();\n }\n };\n\nprivate isKeyboardNavigation = false;\n\n// Écoute les événements pour détecter le mode d'interaction\ncomponentDidMount() {\n document.addEventListener('keydown', this.handleKeyDown);\n document.addEventListener('mousedown', this.handleMouseDown);\n}\n\ncomponentDidLoad() {\n document.addEventListener('keydown', this.handleKeyDown);\n document.addEventListener('mousedown', this.handleMouseDown);\n}\n\ncomponentWillUnmount() {\n document.removeEventListener('keydown', this.handleKeyDown);\n document.removeEventListener('mousedown', this.handleMouseDown);\n}\n\n\nprivate handleKeyDown = () => {\n this.isKeyboardNavigation = true;\n};\n\nprivate handleMouseDown = () => {\n this.isKeyboardNavigation = false;\n};\n\nprivate onFocus = () => {\n if (this.isKeyboardNavigation && this.hasTrigger('hover')) {\n this.open();\n }\n};\n\n\n private onBlur = () => {\n if (this.isKeyboardNavigation && this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n render() {\n return (\n <Host\n onMouseOver={this.onMouseOver}\n onMouseOut={this.onMouseOut}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n tabindex=\"0\" // Makes the element focusable\n data-tooltip-position={this.position}\n >\n <slot aria-describedby={this.tooltipId} />\n\n <div\n part=\"tooltip\"\n id={this.tooltipId}\n class={{\n tooltip: true,\n 'tooltip-open': this.isOpen,\n }}\n role=\"tooltip\"\n aria-hidden={!this.isOpen ? 'true' : 'false'}\n >\n {this.content}\n <slot name=\"tooltip-content\" />\n </div>\n </Host>\n );\n }\n}\n\nlet tooltipIds = 0;\n"],"version":3}
|