@roadtrip/components 3.22.0 → 3.23.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 +1 -1
- package/dist/cjs/road-badge_14.cjs.entry.js.map +1 -1
- package/dist/cjs/road-select-filter.cjs.entry.js +1 -1
- package/dist/cjs/road-select-filter.cjs.entry.js.map +1 -1
- package/dist/cjs/road-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/road-tooltip.cjs.entry.js.map +1 -1
- package/dist/collection/components/icon/icon.css +4 -4
- package/dist/collection/components/select-filter/select-filter.css +1 -0
- package/dist/collection/components/tooltip/tooltip.css +59 -2
- package/dist/collection/components/tooltip/tooltip.js +2 -2
- package/dist/collection/components/tooltip/tooltip.js.map +1 -1
- package/dist/collection/components/tooltip/tooltip.stories.js +1 -1
- package/dist/esm/road-badge_14.entry.js +1 -1
- package/dist/esm/road-badge_14.entry.js.map +1 -1
- package/dist/esm/road-select-filter.entry.js +1 -1
- package/dist/esm/road-select-filter.entry.js.map +1 -1
- package/dist/esm/road-tooltip.entry.js +1 -1
- package/dist/esm/road-tooltip.entry.js.map +1 -1
- package/dist/html.html-data.json +12 -0
- package/dist/roadtrip/{p-73b4f413.entry.js → p-bc217d07.entry.js} +2 -2
- package/dist/roadtrip/{p-73b4f413.entry.js.map → p-bc217d07.entry.js.map} +1 -1
- package/dist/roadtrip/p-c653d32d.entry.js +2 -0
- package/dist/roadtrip/p-c653d32d.entry.js.map +1 -0
- package/dist/roadtrip/p-d5f9dfea.entry.js +2 -0
- package/dist/roadtrip/p-d5f9dfea.entry.js.map +1 -0
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/dist/types/components/tooltip/tooltip.d.ts +1 -1
- package/dist/types/components.d.ts +8 -0
- package/hydrate/index.js +3 -3
- package/package.json +1 -1
- package/dist/roadtrip/p-648aa41f.entry.js +0 -2
- package/dist/roadtrip/p-648aa41f.entry.js.map +0 -1
- package/dist/roadtrip/p-c096723c.entry.js +0 -2
- package/dist/roadtrip/p-c096723c.entry.js.map +0 -1
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
-------------------- */
|
|
17
17
|
|
|
18
18
|
:host {
|
|
19
|
-
--max-width:
|
|
19
|
+
--max-width: 100%;
|
|
20
20
|
--z-index: 1;
|
|
21
|
-
--width:
|
|
21
|
+
--width: max-content;
|
|
22
22
|
|
|
23
23
|
position: relative;
|
|
24
24
|
display: inline-block;
|
|
@@ -87,6 +87,33 @@
|
|
|
87
87
|
transform: translateX(-50%) translateY(-100%);
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
+
/**
|
|
91
|
+
* Top Left
|
|
92
|
+
*/
|
|
93
|
+
|
|
94
|
+
:host([data-tooltip-position="top-left"]) .tooltip {
|
|
95
|
+
left: 0%;
|
|
96
|
+
transform: translateY(-70%);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
:host([data-tooltip-position="top-left"]) .tooltip-open {
|
|
100
|
+
transform: translateY(-100%);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* Top Right
|
|
105
|
+
*/
|
|
106
|
+
|
|
107
|
+
:host([data-tooltip-position="top-right"]) .tooltip {
|
|
108
|
+
left: 50%;
|
|
109
|
+
transform: translateY(-70%);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
:host([data-tooltip-position="top-right"]) .tooltip-open {
|
|
113
|
+
left: 100%;
|
|
114
|
+
transform: translateY(-100%);
|
|
115
|
+
}
|
|
116
|
+
|
|
90
117
|
/**
|
|
91
118
|
* Left
|
|
92
119
|
*/
|
|
@@ -117,6 +144,36 @@
|
|
|
117
144
|
transform: translateX(-50%) translateY(-6%);
|
|
118
145
|
}
|
|
119
146
|
|
|
147
|
+
/**
|
|
148
|
+
* Bottom Left
|
|
149
|
+
*/
|
|
150
|
+
|
|
151
|
+
:host([data-tooltip-position="bottom-left"]) .tooltip {
|
|
152
|
+
top: 100%;
|
|
153
|
+
left: 0;
|
|
154
|
+
margin-top: 0.5rem;
|
|
155
|
+
transform: translateY(-40%);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
:host([data-tooltip-position="bottom-left"]) .tooltip-open {
|
|
159
|
+
transform: translateY(-6%);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/**
|
|
163
|
+
* Bottom Right
|
|
164
|
+
*/
|
|
165
|
+
|
|
166
|
+
:host([data-tooltip-position="bottom-right"]) .tooltip {
|
|
167
|
+
top: 100%;
|
|
168
|
+
left: 100%;
|
|
169
|
+
margin-top: 0.5rem;
|
|
170
|
+
transform: translateY(-40%);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
:host([data-tooltip-position="bottom-right"]) .tooltip-open {
|
|
174
|
+
transform: translateY(-6%);
|
|
175
|
+
}
|
|
176
|
+
|
|
120
177
|
/**
|
|
121
178
|
* Right
|
|
122
179
|
*/
|
|
@@ -104,8 +104,8 @@ export class Tooltip {
|
|
|
104
104
|
"type": "string",
|
|
105
105
|
"mutable": false,
|
|
106
106
|
"complexType": {
|
|
107
|
-
"original": "| 'top'\n | 'right'\n | 'bottom'\n | 'left'",
|
|
108
|
-
"resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
|
|
107
|
+
"original": "| 'top'\n | 'right'\n | 'bottom'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n | 'left'",
|
|
108
|
+
"resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\"",
|
|
109
109
|
"references": {}
|
|
110
110
|
},
|
|
111
111
|
"required": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE1E;;;;GAIG;AAOH,MAAM,OAAO,OAAO;;
|
|
1
|
+
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE1E;;;;GAIG;AAOH,MAAM,OAAO,OAAO;;IA8DV,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;OAC1C;IACH,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;IACH,CAAC,CAAC;IAEM,eAAU,GAAG,GAAG,EAAE;MACxB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;IACH,CAAC,CAAC;qBAvE0B,gBAAgB,EAAE,UAAU,EAAE;mBAKxC,EAAE;oBAaP,KAAK;wBAOL,QAAQ;kBAKa,KAAK;mBAOb,OAAO;;EAEjC;;KAEG;EAEH,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;EACrB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;EACtB,CAAC;EAoBO,UAAU,CAAC,WAAmB;IACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;EACxC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,2BACE,IAAI,CAAC,QAAQ;MAEpC,gCAAwB,IAAI,CAAC,SAAS,GAAI;MAE1C,WACE,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,KAAK,EAAE;UACL,OAAO,EAAE,IAAI;UACb,cAAc,EAAE,IAAI,CAAC,MAAM;SAC5B,EACD,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;QAE3C,IAAI,CAAC,OAAO;QACb,YAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,UAAU,GAAG,CAAC,CAAC","sourcesContent":["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`. 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\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 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"]}
|
|
@@ -414,7 +414,7 @@ const getSvgContent = (url, sanitize) => {
|
|
|
414
414
|
return req;
|
|
415
415
|
};
|
|
416
416
|
|
|
417
|
-
const iconCss = ":host{box-sizing:content-box;display:inline-block;color:var(--road-icon);transition:fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;fill:currentColor;contain:strict}:host svg{display:block;width:100%;height:100%}:host(.icon-sm){width:1.25rem;height:1.25rem}:host(.icon-md){width:1.5rem;height:1.5rem}:host(.icon-lg){width:2rem;height:2rem}:host(.icon-3x){width:3rem;height:3rem}:host(.icon-4x){width:4rem;height:4rem}:host(.icon-primary){color:var(--road-primary-50);fill:currentColor}:host(.icon-secondary){color:var(--road-secondary-50);fill:currentColor}:host(.icon-accent){color:var(--road-secondary-50);fill:currentColor}:host(.icon-info){color:var(--road-info-
|
|
417
|
+
const iconCss = ":host{box-sizing:content-box;display:inline-block;color:var(--road-icon);transition:fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;fill:currentColor;contain:strict}:host svg{display:block;width:100%;height:100%}:host(.icon-sm){width:1.25rem;height:1.25rem}:host(.icon-md){width:1.5rem;height:1.5rem}:host(.icon-lg){width:2rem;height:2rem}:host(.icon-3x){width:3rem;height:3rem}:host(.icon-4x){width:4rem;height:4rem}:host(.icon-primary){color:var(--road-primary-50);fill:currentColor}:host(.icon-secondary){color:var(--road-secondary-50);fill:currentColor}:host(.icon-accent){color:var(--road-secondary-50);fill:currentColor}:host(.icon-info){color:var(--road-info-icon);fill:currentColor}:host(.icon-success){color:var(--road-success-icon);fill:currentColor}:host(.icon-warning){color:var(--road-warning-icon);fill:currentColor}:host(.icon-danger){color:var(--road-danger-icon);fill:currentColor}:host(.icon-default){color:var(--road-icon);fill:currentColor}:host(.icon-white){color:var(--road-icon-inverse);fill:currentColor}:host(.icon-rotate-90){transform:rotate(90deg)}:host(.icon-rotate-180){transform:rotate(180deg);transform:scaleX(-1)}:host(.icon-rotate-270){transform:rotate(270deg)}";
|
|
418
418
|
|
|
419
419
|
const Icon = class {
|
|
420
420
|
constructor(hostRef) {
|