@roadtrip/components 3.0.0 → 3.0.1
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-navbar-item.cjs.entry.js +1 -1
- package/dist/cjs/road-profil-dropdown.cjs.entry.js +1 -1
- package/dist/cjs/road-tooltip.cjs.entry.js +1 -1
- package/dist/collection/components/global-navigation/global-navigation.stories.js +28 -14
- package/dist/collection/components/navbar/navbar.stories.js +69 -34
- package/dist/collection/components/navbar-item/navbar-item.css +12 -2
- package/dist/collection/components/profil-dropdown/profil-dropdown.css +1 -0
- package/dist/collection/components/tooltip/tooltip.css +11 -0
- package/dist/esm/road-navbar-item.entry.js +1 -1
- package/dist/esm/road-profil-dropdown.entry.js +1 -1
- package/dist/esm/road-tooltip.entry.js +1 -1
- package/dist/roadtrip/p-3c802959.entry.js +1 -0
- package/dist/roadtrip/{p-30b3d192.entry.js → p-8340165a.entry.js} +1 -1
- package/dist/roadtrip/p-88aad04d.entry.js +1 -0
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/loader/index.js +1 -1
- package/package.json +8 -6
- package/dist/roadtrip/p-b3fdf765.entry.js +0 -1
- package/dist/roadtrip/p-bf83443e.entry.js +0 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-a2306350.js');
|
|
6
6
|
|
|
7
|
-
const navbarItemCss = ":host{position:relative;box-sizing:border-box;display:flex;flex:1;flex-basis:0;flex-direction:column;flex-grow:1;align-items:center;justify-content:center;
|
|
7
|
+
const navbarItemCss = ":host{position:relative;box-sizing:border-box;display:flex;flex:1;flex-basis:0;flex-direction:column;flex-grow:1;align-items:center;justify-content:center;text-align:center;white-space:nowrap}@media (min-width: 1200px){:host{flex-grow:inherit;width:100%;padding:0.5rem}}:host(.tab-selected),:host(.tab-selected) ::slotted(road-icon){color:var(--road-primary)}:host(.tab-selected)::after{position:absolute;bottom:-12px;left:0;display:block;width:100%;height:4px;color:var(--road-primary);content:\"\";background-color:var(--road-primary)}@media (min-width: 1200px){:host(.tab-selected)::after{bottom:auto;left:0;width:4px;height:100%}}:host(.focus-visible) ::slotted(road-icon),:host(.focus-visible) ::slotted(road-icon)::after,:host(.focus-visible) ::slotted(road-label),:host(.focus-visible) ::slotted(road-label)::after,:host(:hover) ::slotted(road-icon),:host(:hover) ::slotted(road-icon)::after,:host(:hover) ::slotted(road-label),:host(:hover) ::slotted(road-label)::after{color:var(--road-primary)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;margin:0;overflow:visible;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;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%}::slotted(road-icon){display:block;width:2rem;height:2rem;margin-right:auto;margin-bottom:0.25rem;margin-left:auto;fill:currentColor}@media (min-width: 1200px){:host ::slotted(road-tooltip){width:100%}}::slotted(road-label){position:relative;box-sizing:border-box;display:flex;flex:1;flex-direction:column;font-size:var(--road-button-small);font-weight:700;text-align:center;white-space:nowrap}@media (min-width: 1200px){::slotted(road-label){display:block}}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);z-index:1;box-sizing:border-box;height:auto;font-size:var(--road-font-size-10);font-weight:400}";
|
|
8
8
|
|
|
9
9
|
const NavbarItem = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-a2306350.js');
|
|
6
6
|
|
|
7
|
-
const profilDropdownCss = ":host{--margin-top:0.5rem;display:block;font-size:var(--road-font-size-16)}.dropdown{position:relative;width:max-content;font-family:var(--road-font)}.dropdown summary{display:block;cursor:pointer;outline:none}.dropdown summary::-webkit-details-marker{display:none}.dropdown-button{position:relative;z-index:1;height:3.5rem;cursor:pointer;border-radius:0.25rem}.dropdown-button:hover{background:var(--road-grey-200)}.dropdown[open] .dropdown-menu{transform:scaleY(1)}.dropdown[open] .dropdown-menu.direction-top{position:absolute;bottom:0;left:0;transform:translate3d(0, -56px, 0);will-change:transform}.dropdown-menu{position:absolute;top:0;left:5.5rem;display:flex;flex-direction:column;width:100%;min-width:16.875rem;padding:0.5rem 0;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out;transform:scaleY(0);transform-origin:0 0}road-item{font-size:var(--road-button-medium)}.profil-item{display:flex;padding-bottom:1rem;margin:1rem;cursor:auto;border-bottom:1px solid var(--road-outline)}.profil-item-info{display:flex;flex-direction:column;margin-left:1rem;text-align:left}.profil-item-info-name{font-weight:700}.profil-item road-avatar:hover{box-shadow:none}.dropdown-item{display:flex;align-items:center;min-height:40px;padding:0 1rem;font-size:var(--road-button-medium);line-height:1.5;color:var(--road-on-surface);text-align:left;text-decoration:none;cursor:pointer;background:var(--road-surface);border:none;outline:none}.dropdown-item-border{border-color:var(--road-outline);border-bottom:1px solid}.dropdown-item road-icon{margin-right:0.7rem}road-item:hover:first-child,road-item.focus-visible:first-child{background:none}road-item:hover,road-item.focus-visible{background:var(--road-surface-inverse)}";
|
|
7
|
+
const profilDropdownCss = ":host{--margin-top:0.5rem;display:block;font-size:var(--road-font-size-16)}.dropdown{position:relative;width:max-content;font-family:var(--road-font)}.dropdown summary{display:block;cursor:pointer;outline:none}.dropdown summary::-webkit-details-marker{display:none}.dropdown-button{position:relative;z-index:1;height:3.5rem;cursor:pointer;border-radius:0.25rem}.dropdown-button:hover{background:var(--road-grey-200)}.dropdown[open] .dropdown-menu{transform:scaleY(1)}.dropdown[open] .dropdown-menu.direction-top{position:absolute;bottom:0;left:0;transform:translate3d(0, -56px, 0);will-change:transform}.dropdown-menu{position:absolute;top:0;left:5.5rem;z-index:2;display:flex;flex-direction:column;width:100%;min-width:16.875rem;padding:0.5rem 0;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out;transform:scaleY(0);transform-origin:0 0}road-item{font-size:var(--road-button-medium)}.profil-item{display:flex;padding-bottom:1rem;margin:1rem;cursor:auto;border-bottom:1px solid var(--road-outline)}.profil-item-info{display:flex;flex-direction:column;margin-left:1rem;text-align:left}.profil-item-info-name{font-weight:700}.profil-item road-avatar:hover{box-shadow:none}.dropdown-item{display:flex;align-items:center;min-height:40px;padding:0 1rem;font-size:var(--road-button-medium);line-height:1.5;color:var(--road-on-surface);text-align:left;text-decoration:none;cursor:pointer;background:var(--road-surface);border:none;outline:none}.dropdown-item-border{border-color:var(--road-outline);border-bottom:1px solid}.dropdown-item road-icon{margin-right:0.7rem}road-item:hover:first-child,road-item.focus-visible:first-child{background:none}road-item:hover,road-item.focus-visible{background:var(--road-surface-inverse)}";
|
|
8
8
|
|
|
9
9
|
const Dropdown = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-a2306350.js');
|
|
6
6
|
|
|
7
|
-
const tooltipCss = ":host{--max-width:16rem;--z-index:1;--width:auto;position:relative;display:inline-block}.tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:6rem;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=\"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=\"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%)}";
|
|
7
|
+
const tooltipCss = ":host{--max-width:16rem;--z-index:1;--width:auto;position:relative;display:inline-block}: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:6rem;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=\"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=\"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%)}";
|
|
8
8
|
|
|
9
9
|
const Tooltip = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -99,38 +99,52 @@ export default {
|
|
|
99
99
|
</script>
|
|
100
100
|
|
|
101
101
|
<road-navbar-item tab="tab-home">
|
|
102
|
-
<road-
|
|
103
|
-
|
|
102
|
+
<road-tooltip content="Home" position="right" trigger="hover" contentalign="center">
|
|
103
|
+
<road-icon name="navigation-home-outline"></road-icon>
|
|
104
|
+
<road-label class="font-weight-bold">Home</road-label>
|
|
105
|
+
</road-tooltip>
|
|
104
106
|
</road-navbar-item>
|
|
105
107
|
|
|
106
108
|
<road-navbar-item tab="tab-search">
|
|
107
|
-
<road-
|
|
108
|
-
|
|
109
|
+
<road-tooltip content="Search" position="right" trigger="hover" contentalign="center">
|
|
110
|
+
<road-icon name="search"></road-icon>
|
|
111
|
+
<road-label class="font-weight-bold">Search</road-label>
|
|
112
|
+
</road-tooltip>
|
|
109
113
|
</road-navbar-item>
|
|
110
114
|
|
|
111
115
|
<road-navbar-item tab="tab-catalog">
|
|
112
|
-
<road-
|
|
113
|
-
|
|
116
|
+
<road-tooltip content="Print" position="right" trigger="hover" contentalign="center">
|
|
117
|
+
<road-icon name="print-outline"></road-icon>
|
|
118
|
+
<road-label class="font-weight-bold">Print</road-label>
|
|
119
|
+
</road-tooltip>
|
|
114
120
|
</road-navbar-item>
|
|
115
121
|
|
|
116
122
|
<road-navbar-item tab="tab-notification" class="d-none d-xl-flex">
|
|
117
|
-
<road-
|
|
118
|
-
|
|
123
|
+
<road-tooltip content="Notifications" position="right" trigger="hover" contentalign="center">
|
|
124
|
+
<road-icon name="alert-notification-outline"></road-icon>
|
|
125
|
+
<road-label class="font-weight-bold">Notifications</road-label>
|
|
126
|
+
</road-tooltip>
|
|
119
127
|
</road-navbar-item>
|
|
120
128
|
|
|
121
129
|
<road-navbar-item tab="tab-scan" class="d-none d-xl-flex">
|
|
122
|
-
<road-
|
|
123
|
-
|
|
130
|
+
<road-tooltip content="Scan" position="right" trigger="hover" contentalign="center">
|
|
131
|
+
<road-icon name="scan"></road-icon>
|
|
132
|
+
<road-label class="font-weight-bold">Scan</road-label>
|
|
133
|
+
</road-tooltip>
|
|
124
134
|
</road-navbar-item>
|
|
125
135
|
|
|
126
136
|
<road-navbar-item tab="tab-catalogue" class="d-none d-xl-flex">
|
|
127
|
-
<road-
|
|
128
|
-
|
|
137
|
+
<road-tooltip content="Catalogue" position="right" trigger="hover" contentalign="center">
|
|
138
|
+
<road-icon name="file-catalog"></road-icon>
|
|
139
|
+
<road-label class="font-weight-bold">Catalogue</road-label>
|
|
140
|
+
</road-tooltip>
|
|
129
141
|
</road-navbar-item>
|
|
130
142
|
|
|
131
143
|
<road-navbar-item tab="tab-diag" class="d-none d-xl-flex">
|
|
132
|
-
<road-
|
|
133
|
-
|
|
144
|
+
<road-tooltip content="Diagnostic" position="right" trigger="hover" contentalign="center">
|
|
145
|
+
<road-icon name="Diagnostic"></road-icon>
|
|
146
|
+
<road-label class="font-weight-bold">Diagnostic</road-label>
|
|
147
|
+
</road-toolip>
|
|
134
148
|
</road-navbar-item>
|
|
135
149
|
|
|
136
150
|
<road-navbar-item tab="tab-menu" class="d-block d-xl-none tab-menu">
|
|
@@ -7,6 +7,7 @@ export default {
|
|
|
7
7
|
component: 'road-navbar',
|
|
8
8
|
subcomponents: {
|
|
9
9
|
'road-navbar-item': 'road-navbar-item',
|
|
10
|
+
'road-tooltip': 'road-tooltip',
|
|
10
11
|
},
|
|
11
12
|
parameters: {
|
|
12
13
|
actions: {
|
|
@@ -57,38 +58,52 @@ export default {
|
|
|
57
58
|
</road-profil-dropdown>
|
|
58
59
|
|
|
59
60
|
<road-navbar-item tab="tab-home">
|
|
60
|
-
<road-
|
|
61
|
-
|
|
61
|
+
<road-tooltip content="Home" position="right" trigger="hover" contentalign="center">
|
|
62
|
+
<road-icon name="navigation-home-outline"></road-icon>
|
|
63
|
+
<road-label class="font-weight-bold">Home</road-label>
|
|
64
|
+
</road-tooltip>
|
|
62
65
|
</road-navbar-item>
|
|
63
66
|
|
|
64
67
|
<road-navbar-item tab="tab-search">
|
|
65
|
-
<road-
|
|
66
|
-
|
|
68
|
+
<road-tooltip content="Search" position="right" trigger="hover" contentalign="center">
|
|
69
|
+
<road-icon name="search"></road-icon>
|
|
70
|
+
<road-label class="font-weight-bold">Search</road-label>
|
|
71
|
+
</road-tooltip>
|
|
67
72
|
</road-navbar-item>
|
|
68
73
|
|
|
69
74
|
<road-navbar-item tab="tab-catalog">
|
|
70
|
-
<road-
|
|
71
|
-
|
|
75
|
+
<road-tooltip content="Print" position="right" trigger="hover" contentalign="center">
|
|
76
|
+
<road-icon name="print-outline"></road-icon>
|
|
77
|
+
<road-label class="font-weight-bold">Print</road-label>
|
|
78
|
+
</road-tooltip>
|
|
72
79
|
</road-navbar-item>
|
|
73
80
|
|
|
74
81
|
<road-navbar-item tab="tab-notification" class="d-none d-xl-flex">
|
|
75
|
-
<road-
|
|
76
|
-
|
|
82
|
+
<road-tooltip content="Notifications" position="right" trigger="hover" contentalign="center">
|
|
83
|
+
<road-icon name="alert-notification-outline"></road-icon>
|
|
84
|
+
<road-label class="font-weight-bold">Notifications</road-label>
|
|
85
|
+
</road-tooltip>
|
|
77
86
|
</road-navbar-item>
|
|
78
87
|
|
|
79
88
|
<road-navbar-item tab="tab-scan" class="d-none d-xl-flex">
|
|
80
|
-
<road-
|
|
81
|
-
|
|
89
|
+
<road-tooltip content="Scan" position="right" trigger="hover" contentalign="center">
|
|
90
|
+
<road-icon name="scan"></road-icon>
|
|
91
|
+
<road-label class="font-weight-bold">Scan</road-label>
|
|
92
|
+
</road-tooltip>
|
|
82
93
|
</road-navbar-item>
|
|
83
94
|
|
|
84
95
|
<road-navbar-item tab="tab-catalogue" class="d-none d-xl-flex">
|
|
85
|
-
<road-
|
|
86
|
-
|
|
96
|
+
<road-tooltip content="Catalog" position="right" trigger="hover" contentalign="center">
|
|
97
|
+
<road-icon name="file-catalog"></road-icon>
|
|
98
|
+
<road-label class="font-weight-bold">Catalogue</road-label>
|
|
99
|
+
</road-tootltip>
|
|
87
100
|
</road-navbar-item>
|
|
88
101
|
|
|
89
102
|
<road-navbar-item tab="tab-diag" class="d-none d-xl-flex">
|
|
90
|
-
<road-
|
|
91
|
-
|
|
103
|
+
<road-tooltip content="Diagnostic" position="right" trigger="hover" contentalign="center">
|
|
104
|
+
<road-icon name="Diagnostic"></road-icon>
|
|
105
|
+
<road-label class="font-weight-bold">Diagnostic</road-label>
|
|
106
|
+
</road-tooltip>
|
|
92
107
|
</road-navbar-item>
|
|
93
108
|
|
|
94
109
|
<road-navbar-item tab="tab-menu" class="d-block d-xl-none tab-menu">
|
|
@@ -190,28 +205,38 @@ Selected.args = {
|
|
|
190
205
|
</road-profil-dropdown>
|
|
191
206
|
|
|
192
207
|
<road-navbar-item tab="tab-home" selected="true">
|
|
193
|
-
<road-
|
|
194
|
-
|
|
208
|
+
<road-tooltip content="Home" position="right" trigger="hover" contentalign="center">
|
|
209
|
+
<road-icon name="navigation-home-outline"></road-icon>
|
|
210
|
+
<road-label class="font-weight-bold">Home</road-label>
|
|
211
|
+
</road-tooltip>
|
|
195
212
|
</road-navbar-item>
|
|
196
213
|
|
|
197
214
|
<road-navbar-item tab="tab-search">
|
|
198
|
-
<road-
|
|
199
|
-
|
|
215
|
+
<road-tooltip content="Search" position="right" trigger="hover" contentalign="center">
|
|
216
|
+
<road-icon name="search"></road-icon>
|
|
217
|
+
<road-label class="font-weight-bold">Search</road-label>
|
|
218
|
+
</road-tooltip>
|
|
200
219
|
</road-navbar-item>
|
|
201
220
|
|
|
202
221
|
<road-navbar-item tab="tab-catalog">
|
|
203
|
-
<road-
|
|
204
|
-
|
|
222
|
+
<road-tooltip content="Print" position="right" trigger="hover" contentalign="center">
|
|
223
|
+
<road-icon name="print-outline"></road-icon>
|
|
224
|
+
<road-label class="font-weight-bold">Print</road-label>
|
|
225
|
+
</road-tooltip>
|
|
205
226
|
</road-navbar-item>
|
|
206
227
|
|
|
207
228
|
<road-navbar-item tab="tab-catalogue" class="d-none d-xl-flex">
|
|
208
|
-
<road-
|
|
209
|
-
|
|
229
|
+
<road-tooltip content="Catalogue" position="right" trigger="hover" contentalign="center">
|
|
230
|
+
<road-icon name="file-catalog"></road-icon>
|
|
231
|
+
<road-label class="font-weight-bold">Catalogue</road-label>
|
|
232
|
+
</road-tooltip>
|
|
210
233
|
</road-navbar-item>
|
|
211
234
|
|
|
212
235
|
<road-navbar-item tab="tab-scan" class="d-none d-xl-flex">
|
|
213
|
-
<road-
|
|
214
|
-
|
|
236
|
+
<road-tooltip content="Scan" position="right" trigger="hover" contentalign="center">
|
|
237
|
+
<road-icon name="scan"></road-icon>
|
|
238
|
+
<road-label class="font-weight-bold">Scan</road-label>
|
|
239
|
+
</road-tooltip>
|
|
215
240
|
</road-navbar-item>`,
|
|
216
241
|
};
|
|
217
242
|
|
|
@@ -238,28 +263,38 @@ withNotifications.args = {
|
|
|
238
263
|
</road-profil-dropdown>
|
|
239
264
|
|
|
240
265
|
<road-navbar-item tab="tab-home" selected="true">
|
|
241
|
-
<road-
|
|
242
|
-
|
|
266
|
+
<road-tooltip content="Home" position="right" trigger="hover" contentalign="center">
|
|
267
|
+
<road-icon name="navigation-home-outline"></road-icon>
|
|
268
|
+
<road-label class="font-weight-bold">Home</road-label>
|
|
269
|
+
</road-tooltip>
|
|
243
270
|
</road-navbar-item>
|
|
244
271
|
|
|
245
272
|
<road-navbar-item tab="tab-search">
|
|
246
|
-
<road-
|
|
247
|
-
|
|
273
|
+
<road-tooltip content="Search" position="right" trigger="hover" contentalign="center">
|
|
274
|
+
<road-icon name="search"></road-icon>
|
|
275
|
+
<road-label class="font-weight-bold">Search</road-label>
|
|
276
|
+
</road-tooltip>
|
|
248
277
|
</road-navbar-item>
|
|
249
278
|
|
|
250
279
|
<road-navbar-item tab="tab-catalog">
|
|
251
|
-
<road-
|
|
252
|
-
|
|
280
|
+
<road-tooltip content="Scan" position="right" trigger="hover" contentalign="center">
|
|
281
|
+
<road-icon name="print-outline"></road-icon>
|
|
282
|
+
<road-label class="font-weight-bold">Scan</road-label>
|
|
283
|
+
</road-tooltip>
|
|
253
284
|
<road-badge>3</road-badge>
|
|
254
285
|
</road-navbar-item>
|
|
255
286
|
|
|
256
287
|
<road-navbar-item tab="tab-catalogue" class="d-none d-xl-flex">
|
|
257
|
-
<road-
|
|
258
|
-
|
|
288
|
+
<road-tooltip content="Catalog" position="right" trigger="hover" contentalign="center">
|
|
289
|
+
<road-icon name="file-catalog"></road-icon>
|
|
290
|
+
<road-label class="font-weight-bold">Catalog</road-label>
|
|
291
|
+
</road-tooltip>
|
|
259
292
|
</road-navbar-item>
|
|
260
293
|
|
|
261
294
|
<road-navbar-item tab="tab-scan" class="d-none d-xl-flex">
|
|
262
|
-
<road-
|
|
263
|
-
|
|
295
|
+
<road-tooltip content="Scan" position="right" trigger="hover" contentalign="center">
|
|
296
|
+
<road-icon name="scan"></road-icon>
|
|
297
|
+
<road-label class="font-weight-bold">Scan</road-label>
|
|
298
|
+
</road-tooltip>
|
|
264
299
|
</road-navbar-item>`,
|
|
265
300
|
};
|
|
@@ -19,7 +19,6 @@
|
|
|
19
19
|
flex-grow: 1;
|
|
20
20
|
align-items: center;
|
|
21
21
|
justify-content: center;
|
|
22
|
-
font-weight: 700;
|
|
23
22
|
text-align: center;
|
|
24
23
|
white-space: nowrap;
|
|
25
24
|
}
|
|
@@ -96,7 +95,7 @@
|
|
|
96
95
|
width: 100%;
|
|
97
96
|
height: 100%;
|
|
98
97
|
margin: 0;
|
|
99
|
-
overflow:
|
|
98
|
+
overflow: visible;
|
|
100
99
|
font-family: inherit;
|
|
101
100
|
font-size: inherit;
|
|
102
101
|
font-style: inherit;
|
|
@@ -147,6 +146,17 @@
|
|
|
147
146
|
fill: currentColor;
|
|
148
147
|
}
|
|
149
148
|
|
|
149
|
+
/* TOOLTIP
|
|
150
|
+
-------------------- */
|
|
151
|
+
|
|
152
|
+
@media (min-width: 1200px) {
|
|
153
|
+
|
|
154
|
+
:host ::slotted(road-tooltip) {
|
|
155
|
+
width: 100%;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
}
|
|
159
|
+
|
|
150
160
|
/* LABEL
|
|
151
161
|
-------------------- */
|
|
152
162
|
|
|
@@ -24,6 +24,17 @@
|
|
|
24
24
|
display: inline-block;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
:host([trigger="hover"]) .tooltip {
|
|
28
|
+
display: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@media (min-width: 1200px) {
|
|
32
|
+
|
|
33
|
+
:host([trigger="hover"]) .tooltip {
|
|
34
|
+
display: block;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
27
38
|
.tooltip {
|
|
28
39
|
position: absolute;
|
|
29
40
|
top: -0.5rem;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, e as getElement } from './index-a99a5e7b.js';
|
|
2
2
|
|
|
3
|
-
const navbarItemCss = ":host{position:relative;box-sizing:border-box;display:flex;flex:1;flex-basis:0;flex-direction:column;flex-grow:1;align-items:center;justify-content:center;
|
|
3
|
+
const navbarItemCss = ":host{position:relative;box-sizing:border-box;display:flex;flex:1;flex-basis:0;flex-direction:column;flex-grow:1;align-items:center;justify-content:center;text-align:center;white-space:nowrap}@media (min-width: 1200px){:host{flex-grow:inherit;width:100%;padding:0.5rem}}:host(.tab-selected),:host(.tab-selected) ::slotted(road-icon){color:var(--road-primary)}:host(.tab-selected)::after{position:absolute;bottom:-12px;left:0;display:block;width:100%;height:4px;color:var(--road-primary);content:\"\";background-color:var(--road-primary)}@media (min-width: 1200px){:host(.tab-selected)::after{bottom:auto;left:0;width:4px;height:100%}}:host(.focus-visible) ::slotted(road-icon),:host(.focus-visible) ::slotted(road-icon)::after,:host(.focus-visible) ::slotted(road-label),:host(.focus-visible) ::slotted(road-label)::after,:host(:hover) ::slotted(road-icon),:host(:hover) ::slotted(road-icon)::after,:host(:hover) ::slotted(road-label),:host(:hover) ::slotted(road-label)::after{color:var(--road-primary)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;margin:0;overflow:visible;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;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%}::slotted(road-icon){display:block;width:2rem;height:2rem;margin-right:auto;margin-bottom:0.25rem;margin-left:auto;fill:currentColor}@media (min-width: 1200px){:host ::slotted(road-tooltip){width:100%}}::slotted(road-label){position:relative;box-sizing:border-box;display:flex;flex:1;flex-direction:column;font-size:var(--road-button-small);font-weight:700;text-align:center;white-space:nowrap}@media (min-width: 1200px){::slotted(road-label){display:block}}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);z-index:1;box-sizing:border-box;height:auto;font-size:var(--road-font-size-10);font-weight:400}";
|
|
4
4
|
|
|
5
5
|
const NavbarItem = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h } from './index-a99a5e7b.js';
|
|
2
2
|
|
|
3
|
-
const profilDropdownCss = ":host{--margin-top:0.5rem;display:block;font-size:var(--road-font-size-16)}.dropdown{position:relative;width:max-content;font-family:var(--road-font)}.dropdown summary{display:block;cursor:pointer;outline:none}.dropdown summary::-webkit-details-marker{display:none}.dropdown-button{position:relative;z-index:1;height:3.5rem;cursor:pointer;border-radius:0.25rem}.dropdown-button:hover{background:var(--road-grey-200)}.dropdown[open] .dropdown-menu{transform:scaleY(1)}.dropdown[open] .dropdown-menu.direction-top{position:absolute;bottom:0;left:0;transform:translate3d(0, -56px, 0);will-change:transform}.dropdown-menu{position:absolute;top:0;left:5.5rem;display:flex;flex-direction:column;width:100%;min-width:16.875rem;padding:0.5rem 0;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out;transform:scaleY(0);transform-origin:0 0}road-item{font-size:var(--road-button-medium)}.profil-item{display:flex;padding-bottom:1rem;margin:1rem;cursor:auto;border-bottom:1px solid var(--road-outline)}.profil-item-info{display:flex;flex-direction:column;margin-left:1rem;text-align:left}.profil-item-info-name{font-weight:700}.profil-item road-avatar:hover{box-shadow:none}.dropdown-item{display:flex;align-items:center;min-height:40px;padding:0 1rem;font-size:var(--road-button-medium);line-height:1.5;color:var(--road-on-surface);text-align:left;text-decoration:none;cursor:pointer;background:var(--road-surface);border:none;outline:none}.dropdown-item-border{border-color:var(--road-outline);border-bottom:1px solid}.dropdown-item road-icon{margin-right:0.7rem}road-item:hover:first-child,road-item.focus-visible:first-child{background:none}road-item:hover,road-item.focus-visible{background:var(--road-surface-inverse)}";
|
|
3
|
+
const profilDropdownCss = ":host{--margin-top:0.5rem;display:block;font-size:var(--road-font-size-16)}.dropdown{position:relative;width:max-content;font-family:var(--road-font)}.dropdown summary{display:block;cursor:pointer;outline:none}.dropdown summary::-webkit-details-marker{display:none}.dropdown-button{position:relative;z-index:1;height:3.5rem;cursor:pointer;border-radius:0.25rem}.dropdown-button:hover{background:var(--road-grey-200)}.dropdown[open] .dropdown-menu{transform:scaleY(1)}.dropdown[open] .dropdown-menu.direction-top{position:absolute;bottom:0;left:0;transform:translate3d(0, -56px, 0);will-change:transform}.dropdown-menu{position:absolute;top:0;left:5.5rem;z-index:2;display:flex;flex-direction:column;width:100%;min-width:16.875rem;padding:0.5rem 0;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out;transform:scaleY(0);transform-origin:0 0}road-item{font-size:var(--road-button-medium)}.profil-item{display:flex;padding-bottom:1rem;margin:1rem;cursor:auto;border-bottom:1px solid var(--road-outline)}.profil-item-info{display:flex;flex-direction:column;margin-left:1rem;text-align:left}.profil-item-info-name{font-weight:700}.profil-item road-avatar:hover{box-shadow:none}.dropdown-item{display:flex;align-items:center;min-height:40px;padding:0 1rem;font-size:var(--road-button-medium);line-height:1.5;color:var(--road-on-surface);text-align:left;text-decoration:none;cursor:pointer;background:var(--road-surface);border:none;outline:none}.dropdown-item-border{border-color:var(--road-outline);border-bottom:1px solid}.dropdown-item road-icon{margin-right:0.7rem}road-item:hover:first-child,road-item.focus-visible:first-child{background:none}road-item:hover,road-item.focus-visible{background:var(--road-surface-inverse)}";
|
|
4
4
|
|
|
5
5
|
const Dropdown = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, e as getElement } from './index-a99a5e7b.js';
|
|
2
2
|
|
|
3
|
-
const tooltipCss = ":host{--max-width:16rem;--z-index:1;--width:auto;position:relative;display:inline-block}.tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:6rem;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=\"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=\"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:16rem;--z-index:1;--width:auto;position:relative;display:inline-block}: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:6rem;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=\"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=\"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) {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as e,h as i,H as o,e as r}from"./p-cdc666bc.js";const a=class{constructor(i){t(this,i),this.roadnavbaritemclick=e(this,"roadnavbaritemclick",7),this.roadNavbarItemClick=e(this,"roadNavbarItemClick",7),this.disabled=!1,this.selected=!1,this.onKeyUp=t=>{"Enter"!==t.key&&" "!==t.key||this.selectTab(t)},this.onClick=t=>{this.selectTab(t)}}onNavbarChanged(t){this.selected=this.tab===t.detail.tab}selectTab(t){void 0!==this.tab&&(this.disabled||(this.roadnavbaritemclick.emit({tab:this.tab,href:this.href,selected:this.selected}),this.roadNavbarItemClick.emit({tab:this.tab,href:this.href,selected:this.selected})),void 0===this.href&&t.preventDefault())}render(){const{href:t,rel:e,target:r,selected:a,tab:s}=this;return i(o,{onClick:this.onClick,onKeyup:this.onKeyUp,role:"tab",tabindex:"0","aria-selected":a?"true":null,id:void 0!==s?`navbar-item-${s}`:null,class:{"navbar-item":!0,"tab-selected":a}},i("a",Object.assign({},{download:this.download,href:t,rel:e,target:r},{tabIndex:-1,class:"button-native",part:"native"}),i("span",{class:"button-inner"},i("slot",null))))}get el(){return r(this)}};a.style=':host{position:relative;box-sizing:border-box;display:flex;flex:1;flex-basis:0;flex-direction:column;flex-grow:1;align-items:center;justify-content:center;text-align:center;white-space:nowrap}@media (min-width: 1200px){:host{flex-grow:inherit;width:100%;padding:0.5rem}}:host(.tab-selected),:host(.tab-selected) ::slotted(road-icon){color:var(--road-primary)}:host(.tab-selected)::after{position:absolute;bottom:-12px;left:0;display:block;width:100%;height:4px;color:var(--road-primary);content:"";background-color:var(--road-primary)}@media (min-width: 1200px){:host(.tab-selected)::after{bottom:auto;left:0;width:4px;height:100%}}:host(.focus-visible) ::slotted(road-icon),:host(.focus-visible) ::slotted(road-icon)::after,:host(.focus-visible) ::slotted(road-label),:host(.focus-visible) ::slotted(road-label)::after,:host(:hover) ::slotted(road-icon),:host(:hover) ::slotted(road-icon)::after,:host(:hover) ::slotted(road-label),:host(:hover) ::slotted(road-label)::after{color:var(--road-primary)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;margin:0;overflow:visible;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;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%}::slotted(road-icon){display:block;width:2rem;height:2rem;margin-right:auto;margin-bottom:0.25rem;margin-left:auto;fill:currentColor}@media (min-width: 1200px){:host ::slotted(road-tooltip){width:100%}}::slotted(road-label){position:relative;box-sizing:border-box;display:flex;flex:1;flex-direction:column;font-size:var(--road-button-small);font-weight:700;text-align:center;white-space:nowrap}@media (min-width: 1200px){::slotted(road-label){display:block}}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);z-index:1;box-sizing:border-box;height:auto;font-size:var(--road-font-size-10);font-weight:400}';export{a as road_navbar_item}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as o,h as r}from"./p-cdc666bc.js";const e=class{constructor(r){o(this,r),this.isOpen=!1,this.onClick=()=>{this.isOpen=!this.isOpen}}render(){return r("details",{class:"dropdown",open:this.isOpen},r("summary",{"aria-expanded":`${this.isOpen}`,tabindex:"0",role:"button",onClick:this.onClick},r("div",{class:"d-flex"},r("div",null,r("road-avatar",null,r("slot",{name:"avatar"}))))),r("div",{class:"dropdown-menu"},r("div",{class:"profil-item"},r("road-avatar",{size:"sm"},r("slot",{name:"avatarItem"})),r("div",{class:"profil-item-info"},r("span",{class:"profil-item-info-name"},r("slot",{name:"name"})),r("road-label",null,r("slot",{name:"email"})))),r("slot",{name:"list"})))}};e.style=":host{--margin-top:0.5rem;display:block;font-size:var(--road-font-size-16)}.dropdown{position:relative;width:max-content;font-family:var(--road-font)}.dropdown summary{display:block;cursor:pointer;outline:none}.dropdown summary::-webkit-details-marker{display:none}.dropdown-button{position:relative;z-index:1;height:3.5rem;cursor:pointer;border-radius:0.25rem}.dropdown-button:hover{background:var(--road-grey-200)}.dropdown[open] .dropdown-menu{transform:scaleY(1)}.dropdown[open] .dropdown-menu.direction-top{position:absolute;bottom:0;left:0;transform:translate3d(0, -56px, 0);will-change:transform}.dropdown-menu{position:absolute;top:0;left:5.5rem;display:flex;flex-direction:column;width:100%;min-width:16.875rem;padding:0.5rem 0;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out;transform:scaleY(0);transform-origin:0 0}road-item{font-size:var(--road-button-medium)}.profil-item{display:flex;padding-bottom:1rem;margin:1rem;cursor:auto;border-bottom:1px solid var(--road-outline)}.profil-item-info{display:flex;flex-direction:column;margin-left:1rem;text-align:left}.profil-item-info-name{font-weight:700}.profil-item road-avatar:hover{box-shadow:none}.dropdown-item{display:flex;align-items:center;min-height:40px;padding:0 1rem;font-size:var(--road-button-medium);line-height:1.5;color:var(--road-on-surface);text-align:left;text-decoration:none;cursor:pointer;background:var(--road-surface);border:none;outline:none}.dropdown-item-border{border-color:var(--road-outline);border-bottom:1px solid}.dropdown-item road-icon{margin-right:0.7rem}road-item:hover:first-child,road-item.focus-visible:first-child{background:none}road-item:hover,road-item.focus-visible{background:var(--road-surface-inverse)}";export{e as road_profil_dropdown}
|
|
1
|
+
import{r as o,h as r}from"./p-cdc666bc.js";const e=class{constructor(r){o(this,r),this.isOpen=!1,this.onClick=()=>{this.isOpen=!this.isOpen}}render(){return r("details",{class:"dropdown",open:this.isOpen},r("summary",{"aria-expanded":`${this.isOpen}`,tabindex:"0",role:"button",onClick:this.onClick},r("div",{class:"d-flex"},r("div",null,r("road-avatar",null,r("slot",{name:"avatar"}))))),r("div",{class:"dropdown-menu"},r("div",{class:"profil-item"},r("road-avatar",{size:"sm"},r("slot",{name:"avatarItem"})),r("div",{class:"profil-item-info"},r("span",{class:"profil-item-info-name"},r("slot",{name:"name"})),r("road-label",null,r("slot",{name:"email"})))),r("slot",{name:"list"})))}};e.style=":host{--margin-top:0.5rem;display:block;font-size:var(--road-font-size-16)}.dropdown{position:relative;width:max-content;font-family:var(--road-font)}.dropdown summary{display:block;cursor:pointer;outline:none}.dropdown summary::-webkit-details-marker{display:none}.dropdown-button{position:relative;z-index:1;height:3.5rem;cursor:pointer;border-radius:0.25rem}.dropdown-button:hover{background:var(--road-grey-200)}.dropdown[open] .dropdown-menu{transform:scaleY(1)}.dropdown[open] .dropdown-menu.direction-top{position:absolute;bottom:0;left:0;transform:translate3d(0, -56px, 0);will-change:transform}.dropdown-menu{position:absolute;top:0;left:5.5rem;z-index:2;display:flex;flex-direction:column;width:100%;min-width:16.875rem;padding:0.5rem 0;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out;transform:scaleY(0);transform-origin:0 0}road-item{font-size:var(--road-button-medium)}.profil-item{display:flex;padding-bottom:1rem;margin:1rem;cursor:auto;border-bottom:1px solid var(--road-outline)}.profil-item-info{display:flex;flex-direction:column;margin-left:1rem;text-align:left}.profil-item-info-name{font-weight:700}.profil-item road-avatar:hover{box-shadow:none}.dropdown-item{display:flex;align-items:center;min-height:40px;padding:0 1rem;font-size:var(--road-button-medium);line-height:1.5;color:var(--road-on-surface);text-align:left;text-decoration:none;cursor:pointer;background:var(--road-surface);border:none;outline:none}.dropdown-item-border{border-color:var(--road-outline);border-bottom:1px solid}.dropdown-item road-icon{margin-right:0.7rem}road-item:hover:first-child,road-item.focus-visible:first-child{background:none}road-item:hover,road-item.focus-visible{background:var(--road-surface-inverse)}";export{e as road_profil_dropdown}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,h as o,H as i,e as a}from"./p-cdc666bc.js";const s=class{constructor(o){t(this,o),this.tooltipId="road-tooltip-"+ ++r,this.content="",this.position="top",this.contentAlign="center",this.isOpen=!1,this.trigger="hover",this.onClick=()=>{this.hasTrigger("click")&&(this.isOpen?this.close():this.open())},this.onMouseOver=()=>{this.hasTrigger("hover")&&this.open()},this.onMouseOut=()=>{this.hasTrigger("hover")&&this.close()}}async open(){this.isOpen=!0}async close(){this.isOpen=!1}hasTrigger(t){return this.trigger.split(" ").includes(t)}render(){return o(i,{onMouseOver:this.onMouseOver,onMouseOut:this.onMouseOut,onClick:this.onClick,"data-tooltip-position":this.position},o("slot",{"aria-describedby":this.tooltipId}),o("div",{part:"tooltip",id:this.tooltipId,class:{tooltip:!0,"tooltip-open":this.isOpen},role:"tooltip","aria-hidden":!this.isOpen},this.content,o("slot",{name:"tooltip-content"})))}get el(){return a(this)}};let r=0;s.style=':host{--max-width:16rem;--z-index:1;--width:auto;position:relative;display:inline-block}: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:6rem;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="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="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%)}';export{s as road_tooltip}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,w as a,d as o,N as r,a as t,b as d}from"./p-cdc666bc.js";import"./p-e64fe690.js";(()=>{e.o=a.__cssshim;const d=Array.from(o.querySelectorAll("script")).find((e=>new RegExp(`/${r}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===r)),l={};return"onbeforeload"in d&&!history.scrollRestoration?{then(){}}:(l.resourcesUrl=new URL(".",new URL(d.getAttribute("data-resources-url")||d.src,a.location.href)).href,((e,t)=>{const d=`__sc_import_${r.replace(/\s|-/g,"_")}`;try{a[d]=new Function("w",`return import(w);//${Math.random()}`)}catch(l){const r=new Map;a[d]=l=>{const s=new URL(l,e).href;let i=r.get(s);if(!i){const e=o.createElement("script");e.type="module",e.crossOrigin=t.crossOrigin,e.src=URL.createObjectURL(new Blob([`import * as m from '${s}'; window.${d}.m = m;`],{type:"application/javascript"})),i=new Promise((o=>{e.onload=()=>{o(a[d].m),e.remove()}})),r.set(s,i),o.head.appendChild(e)}return i}}})(l.resourcesUrl,d),a.customElements?t(l):__sc_import_roadtrip("./p-62b28500.js").then((()=>l)))})().then((e=>d([["p-cb878cf1",[[2,"road-counter",{inputId:[1,"input-id"],min:[2],max:[2],step:[1],value:[2],size:[1],dustbin:[4],leftIconClasses:[32],rightIconClasses:[32],isDustbinVisible:[32]}],[1,"road-item",{button:[4],detail:[4],active:[4],detailIcon:[1,"detail-icon"],disabled:[4],download:[1],href:[1],rel:[1],lines:[1],target:[1],type:[1],multipleInputs:[32]}],[1,"road-badge",{color:[1],bubble:[4]}],[1,"road-list",{lines:[1]}],[1,"road-toolbar",{color:[1]}],[33,"road-drawer",{isOpen:[1028,"is-open"],position:[1],drawerWidth:[2,"drawer-width"],hasInverseHeader:[4,"has-inverse-header"],hasBackIcon:[4,"has-back-icon"],backText:[1,"back-text"],drawerTitle:[1,"drawer-title"],hasCloseIcon:[4,"has-close-icon"],open:[64],close:[64],back:[64]},[[4,"keyup","onEscape"]]],[1,"road-col"],[1,"road-grid"],[6,"road-input",{inputId:[1,"input-id"],autocapitalize:[1],autocomplete:[1],autocorrect:[1],autofocus:[4],disabled:[4],enterkeyhint:[1],inputmode:[1],max:[1],maxlength:[2],min:[1],minlength:[2],name:[1],pattern:[1],placeholder:[1],readonly:[4],required:[4],spellcheck:[4],step:[1],size:[2],sizes:[1],type:[1],value:[1032],label:[1],error:[1],helper:[1],debounce:[2]}],[1,"road-row"],[1,"road-button",{color:[1],size:[513],buttonType:[1,"button-type"],disabled:[516],expand:[516],download:[1],href:[1],rel:[1],target:[1],outline:[4]}],[1,"road-input-group"],[1,"road-label"],[1,"road-icon",{color:[1],ariaLabel:[1537,"aria-label"],ariaHidden:[513,"aria-hidden"],name:[1],src:[1],icon:[8],size:[1],rotate:[1],lazy:[4],sanitize:[4],svgContent:[32],isVisible:[32]}]]],["p-400b12e7",[[1,"road-duration",{isOpen:[1028,"is-open"],header:[1],min:[2],max:[2],step:[2],open:[64],close:[64]},[[0,"roadcardclick","handleClick"]]]]],["p-8819f735",[[2,"road-plate-number",{country:[1],disabled:[4],placeholder:[1],readonly:[4],value:[1032],motorbike:[4]}]]],["p-
|
|
1
|
+
import{p as e,w as a,d as o,N as r,a as t,b as d}from"./p-cdc666bc.js";import"./p-e64fe690.js";(()=>{e.o=a.__cssshim;const d=Array.from(o.querySelectorAll("script")).find((e=>new RegExp(`/${r}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===r)),l={};return"onbeforeload"in d&&!history.scrollRestoration?{then(){}}:(l.resourcesUrl=new URL(".",new URL(d.getAttribute("data-resources-url")||d.src,a.location.href)).href,((e,t)=>{const d=`__sc_import_${r.replace(/\s|-/g,"_")}`;try{a[d]=new Function("w",`return import(w);//${Math.random()}`)}catch(l){const r=new Map;a[d]=l=>{const s=new URL(l,e).href;let i=r.get(s);if(!i){const e=o.createElement("script");e.type="module",e.crossOrigin=t.crossOrigin,e.src=URL.createObjectURL(new Blob([`import * as m from '${s}'; window.${d}.m = m;`],{type:"application/javascript"})),i=new Promise((o=>{e.onload=()=>{o(a[d].m),e.remove()}})),r.set(s,i),o.head.appendChild(e)}return i}}})(l.resourcesUrl,d),a.customElements?t(l):__sc_import_roadtrip("./p-62b28500.js").then((()=>l)))})().then((e=>d([["p-cb878cf1",[[2,"road-counter",{inputId:[1,"input-id"],min:[2],max:[2],step:[1],value:[2],size:[1],dustbin:[4],leftIconClasses:[32],rightIconClasses:[32],isDustbinVisible:[32]}],[1,"road-item",{button:[4],detail:[4],active:[4],detailIcon:[1,"detail-icon"],disabled:[4],download:[1],href:[1],rel:[1],lines:[1],target:[1],type:[1],multipleInputs:[32]}],[1,"road-badge",{color:[1],bubble:[4]}],[1,"road-list",{lines:[1]}],[1,"road-toolbar",{color:[1]}],[33,"road-drawer",{isOpen:[1028,"is-open"],position:[1],drawerWidth:[2,"drawer-width"],hasInverseHeader:[4,"has-inverse-header"],hasBackIcon:[4,"has-back-icon"],backText:[1,"back-text"],drawerTitle:[1,"drawer-title"],hasCloseIcon:[4,"has-close-icon"],open:[64],close:[64],back:[64]},[[4,"keyup","onEscape"]]],[1,"road-col"],[1,"road-grid"],[6,"road-input",{inputId:[1,"input-id"],autocapitalize:[1],autocomplete:[1],autocorrect:[1],autofocus:[4],disabled:[4],enterkeyhint:[1],inputmode:[1],max:[1],maxlength:[2],min:[1],minlength:[2],name:[1],pattern:[1],placeholder:[1],readonly:[4],required:[4],spellcheck:[4],step:[1],size:[2],sizes:[1],type:[1],value:[1032],label:[1],error:[1],helper:[1],debounce:[2]}],[1,"road-row"],[1,"road-button",{color:[1],size:[513],buttonType:[1,"button-type"],disabled:[516],expand:[516],download:[1],href:[1],rel:[1],target:[1],outline:[4]}],[1,"road-input-group"],[1,"road-label"],[1,"road-icon",{color:[1],ariaLabel:[1537,"aria-label"],ariaHidden:[513,"aria-hidden"],name:[1],src:[1],icon:[8],size:[1],rotate:[1],lazy:[4],sanitize:[4],svgContent:[32],isVisible:[32]}]]],["p-400b12e7",[[1,"road-duration",{isOpen:[1028,"is-open"],header:[1],min:[2],max:[2],step:[2],open:[64],close:[64]},[[0,"roadcardclick","handleClick"]]]]],["p-8819f735",[[2,"road-plate-number",{country:[1],disabled:[4],placeholder:[1],readonly:[4],value:[1032],motorbike:[4]}]]],["p-8340165a",[[1,"road-profil-dropdown",{isOpen:[1028,"is-open"]}]]],["p-93f07ab9",[[1,"road-accordion",{isOpen:[1028,"is-open"],isLight:[4,"is-light"],isLightSeparator:[4,"is-light-separator"],isSmall:[4,"is-small"]}]]],["p-7c3af620",[[1,"road-banner",{isOpen:[1028,"is-open"],label:[1],link:[1],url:[1],close:[64]}]]],["p-ca1de878",[[1,"road-carousel",{options:[8],pager:[4],arrows:[4],update:[64],updateAutoHeight:[64],slideTo:[64],slideNext:[64],slidePrev:[64],getActiveIndex:[64],getPreviousIndex:[64],length:[64],isEnd:[64],isBeginning:[64],startAutoplay:[64],stopAutoplay:[64],lockSwipeToNext:[64],lockSwipeToPrev:[64],lockSwipes:[64],getSwiper:[64]}]]],["p-3fa6acd4",[[6,"road-checkbox",{checkboxId:[1,"checkbox-id"],name:[1],required:[4],checked:[1028],indeterminate:[4],disabled:[4],value:[1],label:[1],inverse:[4],error:[1],helper:[1]}]]],["p-9d8877c2",[[1,"road-chip",{color:[1],outline:[4],size:[1],hasCloseIcon:[4,"has-close-icon"]}]]],["p-2db00cbc",[[1,"road-collapse",{isOpen:[1028,"is-open"],showMore:[1,"show-more"],showLess:[1,"show-less"],centered:[4]}]]],["p-aab8f34a",[[1,"road-dialog",{isOpen:[1028,"is-open"],hasCloseIcon:[4,"has-close-icon"],color:[1],icon:[1],label:[1],description:[1],open:[64],close:[64]},[[4,"keyup","onEscape"]]]]],["p-5d68795d",[[1,"road-dropdown",{isOpen:[1028,"is-open"],isLight:[4,"is-light"],position:[513],direction:[513]}]]],["p-7078ea7d",[[1,"road-modal",{maxWidth:[2,"max-width"],isOpen:[1028,"is-open"],hasInverseHeader:[4,"has-inverse-header"],modalTitle:[1,"modal-title"],hasCloseIcon:[4,"has-close-icon"],open:[64],close:[64]},[[4,"keyup","onEscape"]]]]],["p-51b4cf55",[[6,"road-range",{rangeId:[1,"range-id"],value:[1032],min:[1],max:[1],step:[1],showValue:[4,"show-value"],showTick:[4,"show-tick"],showLabels:[4,"show-labels"]}]]],["p-6fe541d7",[[1,"road-rating",{size:[513],rate:[2],reviews:[2],reviewsText:[1,"reviews-text"]}]]],["p-5807b1ed",[[1,"road-toast",{isOpen:[1028,"is-open"],color:[1],label:[1],timeout:[2],open:[64],close:[64]}]]],["p-e6e9d15a",[[1,"road-alert",{color:[1],label:[1],link:[1],url:[1]}]]],["p-e7e55fc6",[[6,"road-autocomplete",{options:[16],visible:[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["p-5d29e9c8",[[4,"road-carousel-item"]]],["p-1305c54d",[[1,"road-flap",{color:[1],size:[513]}]]],["p-69764878",[[1,"road-global-navigation",{selectedTab:[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]]]]],["p-0ad2e739",[[1,"road-img",{alt:[1],src:[1],loadSrc:[32],loadError:[32]}]]],["p-bead4406",[[1,"road-navbar",{selectedTab:[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]]]]],["p-3c802959",[[1,"road-navbar-item",{disabled:[4],download:[1],href:[1],rel:[1],selected:[1028],tab:[1],target:[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]]]]],["p-fdfbd0aa",[[1,"road-progress",{value:[2],numbersteps:[1],label:[1],showstep:[4],fullwidth:[4],color:[1]}]]],["p-a43b9024",[[2,"road-radio",{radioId:[1,"radio-id"],name:[1],required:[4],disabled:[4],value:[8],label:[1],inverse:[4],error:[4],helper:[1],inline:[4],checked:[32]},[[8,"roadChange","onRoadChangedChanged"],[8,"roadchange","onRoadChangedChanged"]]]]],["p-b6925b27",[[6,"road-radio-group",{radioGroupId:[1,"radio-group-id"],allowEmptySelection:[4,"allow-empty-selection"],name:[1],value:[1032],label:[1],asterisk:[4],ariaLabel:[513,"aria-label"],error:[1025],helper:[1]}]]],["p-510fe45c",[[1,"road-segmented-button",{size:[1],selected:[1028],tab:[1]},[[8,"roadSegmentedButtonBarChanged","onButtonBarChanged"],[8,"roadSegmentedButtonbarchanged","onButtonBarChanged"]]]]],["p-9ef4cedb",[[1,"road-segmented-button-bar",{selectedTab:[1,"selected-tab"]}]]],["p-10024b8f",[[1,"road-segmented-buttons",{selectedTab:[32],select:[64],getTab:[64],getSelected:[64]}]]],["p-3e6f0b0f",[[2,"road-select",{selectId:[1,"select-id"],options:[16],autofocus:[4],disabled:[4],name:[1],required:[4],size:[2],sizes:[1],label:[1],error:[1],value:[1032]}]]],["p-df5abb4b",[[6,"road-select-filter",{options:[16],parameters:[8],isActive:[4,"is-active"],onlySelect:[4,"only-select"],isOpen:[32],currentValue:[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[0,"roadBlur","handleBlur"],[0,"roadblur","handleBlur"],[0,"roadChange","handleChange"],[0,"roadchange","handleChange"],[4,"click","onClickOutside"]]]]],["p-6cef5b4e",[[1,"road-skeleton"]]],["p-a4e187ea",[[1,"road-spinner",{size:[513],color:[513]}]]],["p-684a5716",[[1,"road-stepper",{color:[513],light:[4],outline:[4],stateFirstStep:[1,"state-first-step"],stateSecondStep:[1,"state-second-step"],stateThirdStep:[1,"state-third-step"]}]]],["p-0ca6fb50",[[2,"road-switch",{switchId:[1,"switch-id"],name:[1],checked:[1028],disabled:[4],label:[1],color:[1],hasLeftLabel:[4,"has-left-label"],isSpaced:[4,"is-spaced"],value:[1],on:[1],off:[1]}]]],["p-e6a69601",[[1,"road-tab",{active:[1028],tab:[1],setActive:[64]}]]],["p-85d01de7",[[1,"road-tab-bar",{secondary:[4],expand:[4],center:[4],selectedTab:[1,"selected-tab"]}]]],["p-6298ef24",[[1,"road-tab-button",{download:[1],href:[1],rel:[1],layout:[1],selected:[1028],tab:[1],target:[1]},[[8,"roadTabBarChanged","onTabBarChanged"],[8,"roadTabbarchanged","onTabBarChanged"]]]]],["p-cfbb1cd3",[[6,"road-table"]]],["p-ea321cc5",[[1,"road-tabs",{selectedTab:[32],select:[64],getTab:[64],getSelected:[64]}]]],["p-e9bbb36d",[[1,"road-text",{color:[1]}]]],["p-80e42f95",[[2,"road-textarea",{textareaId:[1,"textarea-id"],autocapitalize:[1],autofocus:[4],disabled:[4],inputmode:[1],enterkeyhint:[1],maxlength:[2],minlength:[2],name:[1],placeholder:[1],sizes:[1],readonly:[4],required:[4],spellcheck:[4],cols:[2],rows:[2],wrap:[1],value:[1025],label:[1],error:[1],helper:[1]}]]],["p-dc18333b",[[2,"road-toggle",{toggleId:[1,"toggle-id"],name:[1],checked:[1028],disabled:[4],label:[1],color:[1],hasLeftLabel:[4,"has-left-label"],isSpaced:[4,"is-spaced"],value:[1],on:[1],off:[1]}]]],["p-1294ad0d",[[1,"road-toolbar-title"]]],["p-07ff311d",[[1,"road-toolbar-title-page"]]],["p-88aad04d",[[1,"road-tooltip",{tooltipId:[1,"tooltip-id"],content:[1],position:[1],contentAlign:[1,"content-align"],isOpen:[1028,"is-open"],trigger:[1],open:[64],close:[64]}]]],["p-932e323f",[[1,"road-vertical-stepper"]]],["p-42e5299f",[[4,"road-vertical-stepper-item"]]],["p-b4381f61",[[1,"road-avatar",{size:[513]}]]],["p-b65936d0",[[1,"road-card",{button:[4],value:[1],type:[1],download:[1],href:[1],rel:[1],target:[1]}]]]],e)));
|
package/loader/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
|
|
2
2
|
(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
|
|
3
3
|
export * from '../dist/esm/polyfills/index.js';
|
|
4
|
-
export * from '../dist/esm
|
|
4
|
+
export * from '../dist/esm/loader.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@roadtrip/components",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.1",
|
|
4
4
|
"description": "Web Component library for Roadtrip Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"homepage": "https://gitlab.com/mobivia-design/roadtrip/components",
|
|
@@ -57,15 +57,15 @@
|
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
59
|
"@babel/core": "^7.14.8",
|
|
60
|
-
"@geometricpanda/storybook-addon-badges": "^
|
|
60
|
+
"@geometricpanda/storybook-addon-badges": "^1.1.1",
|
|
61
61
|
"@nrk/svg-to-js": "^2.1.3",
|
|
62
62
|
"@stencil/core": "2.18.1",
|
|
63
63
|
"@stencil/eslint-plugin": "^0.4.0",
|
|
64
64
|
"@stencil/postcss": "^2.0.0",
|
|
65
|
-
"@storybook/addon-a11y": "^6.5.
|
|
66
|
-
"@storybook/addon-docs": "^6.5.
|
|
67
|
-
"@storybook/addon-essentials": "^6.5.
|
|
68
|
-
"@storybook/web-components": "^6.5.
|
|
65
|
+
"@storybook/addon-a11y": "^6.5.16",
|
|
66
|
+
"@storybook/addon-docs": "^6.5.16",
|
|
67
|
+
"@storybook/addon-essentials": "^6.5.16",
|
|
68
|
+
"@storybook/web-components": "^6.5.16",
|
|
69
69
|
"@types/jest": "^26.0.23",
|
|
70
70
|
"@types/puppeteer": "^5.4.3",
|
|
71
71
|
"autoprefixer": "^10.2.6",
|
|
@@ -76,6 +76,8 @@
|
|
|
76
76
|
"npm-run-all": "^4.1.5",
|
|
77
77
|
"postcss": "^8.3.5",
|
|
78
78
|
"puppeteer": "^10.0.0",
|
|
79
|
+
"react": "^18.2.0",
|
|
80
|
+
"react-dom": "^18.2.0",
|
|
79
81
|
"react-is": "^17.0.2",
|
|
80
82
|
"standard-version": "^9.3.1",
|
|
81
83
|
"storybook-addon-themes": "^6.1.0",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,h as o,H as i,e as a}from"./p-cdc666bc.js";const s=class{constructor(o){t(this,o),this.tooltipId="road-tooltip-"+ ++r,this.content="",this.position="top",this.contentAlign="center",this.isOpen=!1,this.trigger="hover",this.onClick=()=>{this.hasTrigger("click")&&(this.isOpen?this.close():this.open())},this.onMouseOver=()=>{this.hasTrigger("hover")&&this.open()},this.onMouseOut=()=>{this.hasTrigger("hover")&&this.close()}}async open(){this.isOpen=!0}async close(){this.isOpen=!1}hasTrigger(t){return this.trigger.split(" ").includes(t)}render(){return o(i,{onMouseOver:this.onMouseOver,onMouseOut:this.onMouseOut,onClick:this.onClick,"data-tooltip-position":this.position},o("slot",{"aria-describedby":this.tooltipId}),o("div",{part:"tooltip",id:this.tooltipId,class:{tooltip:!0,"tooltip-open":this.isOpen},role:"tooltip","aria-hidden":!this.isOpen},this.content,o("slot",{name:"tooltip-content"})))}get el(){return a(this)}};let r=0;s.style=':host{--max-width:16rem;--z-index:1;--width:auto;position:relative;display:inline-block}.tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:6rem;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="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="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%)}';export{s as road_tooltip}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as e,h as i,H as o,e as r}from"./p-cdc666bc.js";const a=class{constructor(i){t(this,i),this.roadnavbaritemclick=e(this,"roadnavbaritemclick",7),this.roadNavbarItemClick=e(this,"roadNavbarItemClick",7),this.disabled=!1,this.selected=!1,this.onKeyUp=t=>{"Enter"!==t.key&&" "!==t.key||this.selectTab(t)},this.onClick=t=>{this.selectTab(t)}}onNavbarChanged(t){this.selected=this.tab===t.detail.tab}selectTab(t){void 0!==this.tab&&(this.disabled||(this.roadnavbaritemclick.emit({tab:this.tab,href:this.href,selected:this.selected}),this.roadNavbarItemClick.emit({tab:this.tab,href:this.href,selected:this.selected})),void 0===this.href&&t.preventDefault())}render(){const{href:t,rel:e,target:r,selected:a,tab:s}=this;return i(o,{onClick:this.onClick,onKeyup:this.onKeyUp,role:"tab",tabindex:"0","aria-selected":a?"true":null,id:void 0!==s?`navbar-item-${s}`:null,class:{"navbar-item":!0,"tab-selected":a}},i("a",Object.assign({},{download:this.download,href:t,rel:e,target:r},{tabIndex:-1,class:"button-native",part:"native"}),i("span",{class:"button-inner"},i("slot",null))))}get el(){return r(this)}};a.style=':host{position:relative;box-sizing:border-box;display:flex;flex:1;flex-basis:0;flex-direction:column;flex-grow:1;align-items:center;justify-content:center;font-weight:700;text-align:center;white-space:nowrap}@media (min-width: 1200px){:host{flex-grow:inherit;width:100%;padding:0.5rem}}:host(.tab-selected),:host(.tab-selected) ::slotted(road-icon){color:var(--road-primary)}:host(.tab-selected)::after{position:absolute;bottom:-12px;left:0;display:block;width:100%;height:4px;color:var(--road-primary);content:"";background-color:var(--road-primary)}@media (min-width: 1200px){:host(.tab-selected)::after{bottom:auto;left:0;width:4px;height:100%}}:host(.focus-visible) ::slotted(road-icon),:host(.focus-visible) ::slotted(road-icon)::after,:host(.focus-visible) ::slotted(road-label),:host(.focus-visible) ::slotted(road-label)::after,:host(:hover) ::slotted(road-icon),:host(:hover) ::slotted(road-icon)::after,:host(:hover) ::slotted(road-label),:host(:hover) ::slotted(road-label)::after{color:var(--road-primary)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;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;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%}::slotted(road-icon){display:block;width:2rem;height:2rem;margin-right:auto;margin-bottom:0.25rem;margin-left:auto;fill:currentColor}::slotted(road-label){position:relative;box-sizing:border-box;display:flex;flex:1;flex-direction:column;font-size:var(--road-button-small);font-weight:700;text-align:center;white-space:nowrap}@media (min-width: 1200px){::slotted(road-label){display:block}}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);z-index:1;box-sizing:border-box;height:auto;font-size:var(--road-font-size-10);font-weight:400}';export{a as road_navbar_item}
|