@nova-design-system/nova-webcomponents 3.10.1-beta.0 → 3.11.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/nv-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/nv-tooltip.cjs.entry.js.map +1 -1
- package/dist/collection/components/nv-tooltip/nv-tooltip.css +2 -2
- package/dist/components/nv-breadcrumb.js +1 -1
- package/dist/components/nv-tooltip.js +1 -1
- package/dist/components/{p-2ef4fb88.js → p-f47a1e1e.js} +2 -2
- package/dist/{native/p-49504fd6.entry.js.map → components/p-f47a1e1e.js.map} +1 -1
- package/dist/esm/nv-tooltip.entry.js +1 -1
- package/dist/esm/nv-tooltip.entry.js.map +1 -1
- package/dist/native/native.css +1 -1
- package/dist/native/native.esm.js +1 -1
- package/dist/native/p-8a577f91.entry.js +2 -0
- package/dist/native/p-8a577f91.entry.js.map +1 -0
- package/hydrate/index.js +1 -1
- package/hydrate/index.mjs +1 -1
- package/package.json +1 -1
- package/dist/components/p-2ef4fb88.js.map +0 -1
- package/dist/native/p-49504fd6.entry.js +0 -2
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-c56424e5.js');
|
|
6
6
|
|
|
7
|
-
const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip [data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip [data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
|
|
7
|
+
const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip nv-popover>[data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip nv-popover>[data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
|
|
8
8
|
const NvTooltipStyle0 = nvTooltipCss;
|
|
9
9
|
|
|
10
10
|
const NvTooltip = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nv-tooltip.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,
|
|
1
|
+
{"file":"nv-tooltip.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,4yBAA4yB,CAAC;AACl0B,wBAAe,YAAY;;MCmBd,SAAS;IALtB;;;;;;;;QAiCW,cAAS,GAAc,QAAQ,CAAC;;;;;;QAQhC,eAAU,GAAW,CAAC,CAAC;KAiDjC;;;;IAhCC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,cAAc;YACtB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK;gBAC3D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;aAC5C,CAAC,CAAC;KACN;;;;IAMD,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,oEAAa,EAEbA,yEACE,WAAW,EAAC,OAAO,EACnB,QAAQ,QACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3BA,gEAAG,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EACpCA,mEAAM,IAAI,EAAC,SAAS,GAAQ,CACjB,CACR,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/nv-tooltip/nv-tooltip.scss?tag=nv-tooltip","src/components/nv-tooltip/nv-tooltip.tsx"],"sourcesContent":["@mixin root-styles() {\n display: inline-block;\n position: relative;\n user-select: none;\n &:has([fluid]:not([fluid='false'])) {\n display: block;\n }\n}\n\n@mixin tooltip-styles() {\n background: var(--components-tooltip-background);\n color: var(--components-tooltip-text);\n font-weight: var(--font-weight-medium-emphasis);\n padding: var(--tooltip-padding-y) var(--tooltip-padding-x);\n font-size: var(--tooltip-font-size);\n border-radius: var(--tooltip-radius);\n border: none;\n box-shadow:\n 0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1)\n var(--shadow-spread-lg-1) var(--shadow-color-opacity-1),\n 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2)\n var(--shadow-spread-lg-2) var(--shadow-color-opacity-2);\n}\n\n@mixin arrow-styles() {\n background: var(--components-tooltip-background);\n box-shadow: none;\n border: none;\n}\n\nnv-tooltip {\n @include root-styles();\n\n nv-popover > [data-scope='popover'] {\n @include tooltip-styles();\n\n [data-scope='arrow'] {\n @include arrow-styles();\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\n\n/**\n * @slot default - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover. Use for custom html, will render under the message.\n */\n@Component({\n tag: 'nv-tooltip',\n styleUrl: 'nv-tooltip.scss',\n shadow: false,\n})\nexport class NvTooltip {\n @Element() el: HTMLNvTooltipElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * @internal\n * Accepts a reference to the DOM element acting as the popover trigger. This\n * should be used when the slot for the trigger is not defined.\n */\n @Prop({ reflect: false, mutable: true })\n triggerElement: Element;\n\n /**\n * A string representing the text to be displayed inside the tooltip. This\n * content is shown when the tooltip is activated by the user, such as on\n * hover or focus events.\n */\n @Prop({ reflect: true })\n readonly message: string;\n\n /**\n * Decides where the tooltip shows up next to the element it’s linked to\n * (above, below, to the sides). If there isn’t enough room, it will adjust\n * it's position on the axis to fit on the screen, so users can always see it.\n */\n @Prop({ reflect: true })\n readonly placement: Placement = 'bottom';\n\n /**\n * Controls how long (in milliseconds) the tooltip waits to show after you\n * hover over or focus on an element. If you move away before the delay is up,\n * the tooltip won’t appear.\n */\n @Prop({ reflect: true })\n readonly enterDelay: number = 0;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the tooltip is opened or closed. Bubbles up from the popover\n * element.\n */\n @Event()\n openChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (!this.triggerElement)\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === null;\n });\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n <slot></slot>\n\n <nv-popover\n triggerMode=\"hover\"\n hasArrow\n placement={this.placement}\n triggerElement={this.triggerElement}\n groupName={'tooltip'}\n enterDelay={this.enterDelay}\n >\n <p slot=\"content\">{this.message}</p>\n <slot name=\"content\"></slot>\n </nv-popover>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
|
|
@@ -6,7 +6,7 @@ nv-tooltip {
|
|
|
6
6
|
nv-tooltip:has([fluid]:not([fluid=false])) {
|
|
7
7
|
display: block;
|
|
8
8
|
}
|
|
9
|
-
nv-tooltip [data-scope=popover] {
|
|
9
|
+
nv-tooltip nv-popover > [data-scope=popover] {
|
|
10
10
|
background: var(--components-tooltip-background);
|
|
11
11
|
color: var(--components-tooltip-text);
|
|
12
12
|
font-weight: var(--font-weight-medium-emphasis);
|
|
@@ -16,7 +16,7 @@ nv-tooltip [data-scope=popover] {
|
|
|
16
16
|
border: none;
|
|
17
17
|
box-shadow: 0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2);
|
|
18
18
|
}
|
|
19
|
-
nv-tooltip [data-scope=popover] [data-scope=arrow] {
|
|
19
|
+
nv-tooltip nv-popover > [data-scope=popover] [data-scope=arrow] {
|
|
20
20
|
background: var(--components-tooltip-background);
|
|
21
21
|
box-shadow: none;
|
|
22
22
|
border: none;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, f as forceUpdate, h, d as Host } from './p-aff3ed68.js';
|
|
2
2
|
import { c as clsx } from './p-8a1a6e56.js';
|
|
3
3
|
import { d as defineCustomElement$3 } from './p-195f46f3.js';
|
|
4
|
-
import { d as defineCustomElement$2 } from './p-
|
|
4
|
+
import { d as defineCustomElement$2 } from './p-f47a1e1e.js';
|
|
5
5
|
|
|
6
6
|
const nvBreadcrumbCss = "nv-breadcrumb{display:flex;align-items:center;color:var(--components-breadcrumb-text);font-size:var(--font-size-sm);font-style:normal;font-weight:500;line-height:var(--line-height-sm)}nv-breadcrumb.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-breadcrumb ul{display:flex;flex-direction:column;gap:var(--spacing-1-5);padding:var(--spacing-1)}nv-breadcrumb ul a,nv-breadcrumb ul button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb ul a:focus,nv-breadcrumb ul a:focus-within,nv-breadcrumb ul button:focus,nv-breadcrumb ul button:focus-within{outline:none}nv-breadcrumb ul a:focus-visible,nv-breadcrumb ul a:has(:focus-visible),nv-breadcrumb ul button:focus-visible,nv-breadcrumb ul button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3);z-index:111}nv-breadcrumb ul a:hover,nv-breadcrumb ul button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb>a,nv-breadcrumb>button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb>a:focus,nv-breadcrumb>a:focus-within,nv-breadcrumb>button:focus,nv-breadcrumb>button:focus-within{outline:none}nv-breadcrumb>a:focus-visible,nv-breadcrumb>a:has(:focus-visible),nv-breadcrumb>button:focus-visible,nv-breadcrumb>button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3);z-index:111}nv-breadcrumb>a:hover,nv-breadcrumb>button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb span[data-scope=separator]{display:inline-flex;padding-left:var(--breadcrumb-padding-y)}";
|
|
7
7
|
const NvBreadcrumbStyle0 = nvBreadcrumbCss;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-aff3ed68.js';
|
|
2
2
|
import { d as defineCustomElement$1 } from './p-195f46f3.js';
|
|
3
3
|
|
|
4
|
-
const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip [data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip [data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
|
|
4
|
+
const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip nv-popover>[data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip nv-popover>[data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
|
|
5
5
|
const NvTooltipStyle0 = nvTooltipCss;
|
|
6
6
|
|
|
7
7
|
const NvTooltip = /*@__PURE__*/ proxyCustomElement(class NvTooltip extends H {
|
|
@@ -67,4 +67,4 @@ defineCustomElement();
|
|
|
67
67
|
|
|
68
68
|
export { NvTooltip as N, defineCustomElement as d };
|
|
69
69
|
|
|
70
|
-
//# sourceMappingURL=p-
|
|
70
|
+
//# sourceMappingURL=p-f47a1e1e.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"
|
|
1
|
+
{"file":"p-f47a1e1e.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,4yBAA4yB,CAAC;AACl0B,wBAAe,YAAY;;MCmBd,SAAS;IALtB;;;;;;;;;QAiCW,cAAS,GAAc,QAAQ,CAAC;;;;;;QAQhC,eAAU,GAAW,CAAC,CAAC;KAiDjC;;;;IAhCC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,cAAc;YACtB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK;gBAC3D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;aAC5C,CAAC,CAAC;KACN;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,EAEb,mEACE,WAAW,EAAC,OAAO,EACnB,QAAQ,QACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3B,0DAAG,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EACpC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACjB,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-tooltip/nv-tooltip.scss?tag=nv-tooltip","src/components/nv-tooltip/nv-tooltip.tsx"],"sourcesContent":["@mixin root-styles() {\n display: inline-block;\n position: relative;\n user-select: none;\n &:has([fluid]:not([fluid='false'])) {\n display: block;\n }\n}\n\n@mixin tooltip-styles() {\n background: var(--components-tooltip-background);\n color: var(--components-tooltip-text);\n font-weight: var(--font-weight-medium-emphasis);\n padding: var(--tooltip-padding-y) var(--tooltip-padding-x);\n font-size: var(--tooltip-font-size);\n border-radius: var(--tooltip-radius);\n border: none;\n box-shadow:\n 0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1)\n var(--shadow-spread-lg-1) var(--shadow-color-opacity-1),\n 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2)\n var(--shadow-spread-lg-2) var(--shadow-color-opacity-2);\n}\n\n@mixin arrow-styles() {\n background: var(--components-tooltip-background);\n box-shadow: none;\n border: none;\n}\n\nnv-tooltip {\n @include root-styles();\n\n nv-popover > [data-scope='popover'] {\n @include tooltip-styles();\n\n [data-scope='arrow'] {\n @include arrow-styles();\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\n\n/**\n * @slot default - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover. Use for custom html, will render under the message.\n */\n@Component({\n tag: 'nv-tooltip',\n styleUrl: 'nv-tooltip.scss',\n shadow: false,\n})\nexport class NvTooltip {\n @Element() el: HTMLNvTooltipElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * @internal\n * Accepts a reference to the DOM element acting as the popover trigger. This\n * should be used when the slot for the trigger is not defined.\n */\n @Prop({ reflect: false, mutable: true })\n triggerElement: Element;\n\n /**\n * A string representing the text to be displayed inside the tooltip. This\n * content is shown when the tooltip is activated by the user, such as on\n * hover or focus events.\n */\n @Prop({ reflect: true })\n readonly message: string;\n\n /**\n * Decides where the tooltip shows up next to the element it’s linked to\n * (above, below, to the sides). If there isn’t enough room, it will adjust\n * it's position on the axis to fit on the screen, so users can always see it.\n */\n @Prop({ reflect: true })\n readonly placement: Placement = 'bottom';\n\n /**\n * Controls how long (in milliseconds) the tooltip waits to show after you\n * hover over or focus on an element. If you move away before the delay is up,\n * the tooltip won’t appear.\n */\n @Prop({ reflect: true })\n readonly enterDelay: number = 0;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the tooltip is opened or closed. Bubbles up from the popover\n * element.\n */\n @Event()\n openChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (!this.triggerElement)\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === null;\n });\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n <slot></slot>\n\n <nv-popover\n triggerMode=\"hover\"\n hasArrow\n placement={this.placement}\n triggerElement={this.triggerElement}\n groupName={'tooltip'}\n enterDelay={this.enterDelay}\n >\n <p slot=\"content\">{this.message}</p>\n <slot name=\"content\"></slot>\n </nv-popover>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a1936cd0.js';
|
|
2
2
|
|
|
3
|
-
const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip [data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip [data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
|
|
3
|
+
const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip nv-popover>[data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip nv-popover>[data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
|
|
4
4
|
const NvTooltipStyle0 = nvTooltipCss;
|
|
5
5
|
|
|
6
6
|
const NvTooltip = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nv-tooltip.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,
|
|
1
|
+
{"file":"nv-tooltip.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,4yBAA4yB,CAAC;AACl0B,wBAAe,YAAY;;MCmBd,SAAS;IALtB;;;;;;;;QAiCW,cAAS,GAAc,QAAQ,CAAC;;;;;;QAQhC,eAAU,GAAW,CAAC,CAAC;KAiDjC;;;;IAhCC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,cAAc;YACtB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK;gBAC3D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;aAC5C,CAAC,CAAC;KACN;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,EAEb,mEACE,WAAW,EAAC,OAAO,EACnB,QAAQ,QACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3B,0DAAG,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EACpC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACjB,CACR,EACP;KACH;;;;;;;","names":[],"sources":["src/components/nv-tooltip/nv-tooltip.scss?tag=nv-tooltip","src/components/nv-tooltip/nv-tooltip.tsx"],"sourcesContent":["@mixin root-styles() {\n display: inline-block;\n position: relative;\n user-select: none;\n &:has([fluid]:not([fluid='false'])) {\n display: block;\n }\n}\n\n@mixin tooltip-styles() {\n background: var(--components-tooltip-background);\n color: var(--components-tooltip-text);\n font-weight: var(--font-weight-medium-emphasis);\n padding: var(--tooltip-padding-y) var(--tooltip-padding-x);\n font-size: var(--tooltip-font-size);\n border-radius: var(--tooltip-radius);\n border: none;\n box-shadow:\n 0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1)\n var(--shadow-spread-lg-1) var(--shadow-color-opacity-1),\n 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2)\n var(--shadow-spread-lg-2) var(--shadow-color-opacity-2);\n}\n\n@mixin arrow-styles() {\n background: var(--components-tooltip-background);\n box-shadow: none;\n border: none;\n}\n\nnv-tooltip {\n @include root-styles();\n\n nv-popover > [data-scope='popover'] {\n @include tooltip-styles();\n\n [data-scope='arrow'] {\n @include arrow-styles();\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\n\n/**\n * @slot default - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover. Use for custom html, will render under the message.\n */\n@Component({\n tag: 'nv-tooltip',\n styleUrl: 'nv-tooltip.scss',\n shadow: false,\n})\nexport class NvTooltip {\n @Element() el: HTMLNvTooltipElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * @internal\n * Accepts a reference to the DOM element acting as the popover trigger. This\n * should be used when the slot for the trigger is not defined.\n */\n @Prop({ reflect: false, mutable: true })\n triggerElement: Element;\n\n /**\n * A string representing the text to be displayed inside the tooltip. This\n * content is shown when the tooltip is activated by the user, such as on\n * hover or focus events.\n */\n @Prop({ reflect: true })\n readonly message: string;\n\n /**\n * Decides where the tooltip shows up next to the element it’s linked to\n * (above, below, to the sides). If there isn’t enough room, it will adjust\n * it's position on the axis to fit on the screen, so users can always see it.\n */\n @Prop({ reflect: true })\n readonly placement: Placement = 'bottom';\n\n /**\n * Controls how long (in milliseconds) the tooltip waits to show after you\n * hover over or focus on an element. If you move away before the delay is up,\n * the tooltip won’t appear.\n */\n @Prop({ reflect: true })\n readonly enterDelay: number = 0;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the tooltip is opened or closed. Bubbles up from the popover\n * element.\n */\n @Event()\n openChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (!this.triggerElement)\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === null;\n });\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n <slot></slot>\n\n <nv-popover\n triggerMode=\"hover\"\n hasArrow\n placement={this.placement}\n triggerElement={this.triggerElement}\n groupName={'tooltip'}\n enterDelay={this.enterDelay}\n >\n <p slot=\"content\">{this.message}</p>\n <slot name=\"content\"></slot>\n </nv-popover>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
|