New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/tooltip

Package Overview
Dependencies
Maintainers
12
Versions
317
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/tooltip - npm Package Compare versions

Comparing version

24.2.0-alpha4
to
24.2.0-alpha5

18

package.json
{
"name": "@vaadin/tooltip",
"version": "24.2.0-alpha4",
"version": "24.2.0-alpha5",
"publishConfig": {

@@ -38,12 +38,12 @@ "access": "public"

"@polymer/polymer": "^3.0.0",
"@vaadin/a11y-base": "24.2.0-alpha4",
"@vaadin/component-base": "24.2.0-alpha4",
"@vaadin/overlay": "24.2.0-alpha4",
"@vaadin/vaadin-lumo-styles": "24.2.0-alpha4",
"@vaadin/vaadin-material-styles": "24.2.0-alpha4",
"@vaadin/vaadin-themable-mixin": "24.2.0-alpha4"
"@vaadin/a11y-base": "24.2.0-alpha5",
"@vaadin/component-base": "24.2.0-alpha5",
"@vaadin/overlay": "24.2.0-alpha5",
"@vaadin/vaadin-lumo-styles": "24.2.0-alpha5",
"@vaadin/vaadin-material-styles": "24.2.0-alpha5",
"@vaadin/vaadin-themable-mixin": "24.2.0-alpha5"
},
"devDependencies": {
"@esm-bundle/chai": "^4.3.4",
"@vaadin/testing-helpers": "^0.4.2",
"@vaadin/testing-helpers": "^0.4.3",
"sinon": "^13.0.2"

@@ -55,3 +55,3 @@ },

],
"gitHead": "aaf7c5ebfea62628210eead4229be1718ac6b129"
"gitHead": "73db22a5e8993e3ce48d1e6540d30eff9cb5c257"
}

94

src/vaadin-tooltip-overlay.js

@@ -6,47 +6,48 @@ /**

*/
import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
registerStyles(
'vaadin-tooltip-overlay',
css`
:host {
z-index: 1100;
}
const tooltipOverlayStyles = css`
:host {
z-index: 1100;
}
[part='overlay'] {
max-width: 40ch;
}
[part='overlay'] {
max-width: 40ch;
}
:host([position^='top'][top-aligned]) [part='overlay'],
:host([position^='bottom'][top-aligned]) [part='overlay'] {
margin-top: var(--vaadin-tooltip-offset-top, 0);
}
:host([position^='top'][top-aligned]) [part='overlay'],
:host([position^='bottom'][top-aligned]) [part='overlay'] {
margin-top: var(--vaadin-tooltip-offset-top, 0);
}
:host([position^='top'][bottom-aligned]) [part='overlay'],
:host([position^='bottom'][bottom-aligned]) [part='overlay'] {
margin-bottom: var(--vaadin-tooltip-offset-bottom, 0);
}
:host([position^='top'][bottom-aligned]) [part='overlay'],
:host([position^='bottom'][bottom-aligned]) [part='overlay'] {
margin-bottom: var(--vaadin-tooltip-offset-bottom, 0);
}
:host([position^='start'][start-aligned]) [part='overlay'],
:host([position^='end'][start-aligned]) [part='overlay'] {
margin-inline-start: var(--vaadin-tooltip-offset-start, 0);
}
:host([position^='start'][start-aligned]) [part='overlay'],
:host([position^='end'][start-aligned]) [part='overlay'] {
margin-inline-start: var(--vaadin-tooltip-offset-start, 0);
}
:host([position^='start'][end-aligned]) [part='overlay'],
:host([position^='end'][end-aligned]) [part='overlay'] {
margin-inline-end: var(--vaadin-tooltip-offset-end, 0);
}
:host([position^='start'][end-aligned]) [part='overlay'],
:host([position^='end'][end-aligned]) [part='overlay'] {
margin-inline-end: var(--vaadin-tooltip-offset-end, 0);
}
@media (forced-colors: active) {
[part='overlay'] {
outline: 1px dashed;
}
@media (forced-colors: active) {
[part='overlay'] {
outline: 1px dashed;
}
`,
{ moduleId: 'vaadin-tooltip-overlay-styles' },
);
}
`;
let memoizedTemplate;
registerStyles('vaadin-tooltip-overlay', [overlayStyles, tooltipOverlayStyles], {
moduleId: 'vaadin-tooltip-overlay-styles',
});

@@ -56,6 +57,10 @@ /**

*
* @extends Overlay
* @extends HTMLElement
* @mixes DirMixin
* @mixes OverlayMixin
* @mixes PositionMixin
* @mixes ThemableMixin
* @private
*/
class TooltipOverlay extends PositionMixin(Overlay) {
class TooltipOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(PolymerElement)))) {
static get is() {

@@ -66,11 +71,8 @@ return 'vaadin-tooltip-overlay';

static get template() {
if (!memoizedTemplate) {
memoizedTemplate = super.template.cloneNode(true);
memoizedTemplate.content.querySelector('[part~="overlay"]').removeAttribute('tabindex');
// Remove whitespace text nodes around the content slot to allow "white-space: pre"
memoizedTemplate.content.querySelector('[part~="content"]').innerHTML = '<slot></slot>';
}
return memoizedTemplate;
return html`
<div id="backdrop" part="backdrop" hidden></div>
<div part="overlay" id="overlay">
<div part="content" id="content"><slot></slot></div>
</div>
`;
}

@@ -77,0 +79,0 @@

1

theme/lumo/vaadin-tooltip.js

@@ -1,3 +0,2 @@

import '@vaadin/overlay/theme/lumo/vaadin-overlay.js';
import './vaadin-tooltip-styles.js';
import '../../src/vaadin-tooltip.js';

1

theme/material/vaadin-tooltip.js

@@ -1,3 +0,2 @@

import '@vaadin/overlay/theme/material/vaadin-overlay.js';
import './vaadin-tooltip-styles.js';
import '../../src/vaadin-tooltip.js';

4

web-types.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/tooltip",
"version": "24.2.0-alpha4",
"version": "24.2.0-alpha5",
"description-markup": "markdown",

@@ -11,3 +11,3 @@ "contributions": {

"name": "vaadin-tooltip",
"description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha4/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` parts.\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top` | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start` | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end` | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha5/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` parts.\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top` | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start` | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end` | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"attributes": [

@@ -14,0 +14,0 @@ {

4

web-types.lit.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/tooltip",
"version": "24.2.0-alpha4",
"version": "24.2.0-alpha5",
"description-markup": "markdown",

@@ -19,3 +19,3 @@ "framework": "lit",

"name": "vaadin-tooltip",
"description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha4/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` parts.\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top` | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start` | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end` | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha5/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` parts.\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top` | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start` | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end` | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"extension": true,

@@ -22,0 +22,0 @@ "attributes": [