Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@spectrum-web-components/overlay

Package Overview
Dependencies
Maintainers
5
Versions
312
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@spectrum-web-components/overlay - npm Package Compare versions

Comparing version 0.3.7 to 0.3.8

6

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log

## [0.3.8](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/overlay@0.3.7...@spectrum-web-components/overlay@0.3.8) (2020-06-08)
### Bug Fixes
- **overlay:** ensure undefined data is not passed into theme ([3e2e1ca](https://github.com/adobe/spectrum-web-components/commit/3e2e1caa4c37eedf6e569b5124c9e59f207bb92f))
## [0.3.7](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/overlay@0.3.6...@spectrum-web-components/overlay@0.3.7) (2020-05-08)

@@ -8,0 +14,0 @@

181

custom-elements.json

@@ -1,180 +0,1 @@

{
"version": "experimental",
"tags": [
{
"name": "overlay-trigger",
"path": "./src/overlay-trigger.ts",
"description": "A overlay trigger component for displaying overlays relative to other content.",
"attributes": [
{
"name": "placement",
"type": "Placement",
"default": "\"bottom\""
},
{
"name": "offset",
"type": "number",
"default": "6"
},
{
"name": "disabled",
"type": "boolean",
"default": "false"
}
],
"properties": [
{
"name": "placement",
"attribute": "placement",
"type": "Placement",
"default": "\"bottom\""
},
{
"name": "offset",
"attribute": "offset",
"type": "number",
"default": "6"
},
{
"name": "disabled",
"attribute": "disabled",
"type": "boolean",
"default": "false"
}
],
"slots": [
{
"name": "hover-content",
"description": "The content that will be displayed on hover"
},
{
"name": "click-content",
"description": "The content that will be displayed on click"
}
]
},
{
"name": "overlay-trigger",
"path": "./src/index.ts",
"description": "A overlay trigger component for displaying overlays relative to other content.",
"attributes": [
{
"name": "placement",
"type": "Placement",
"default": "\"bottom\""
},
{
"name": "offset",
"type": "number",
"default": "6"
},
{
"name": "disabled",
"type": "boolean",
"default": "false"
}
],
"properties": [
{
"name": "placement",
"attribute": "placement",
"type": "Placement",
"default": "\"bottom\""
},
{
"name": "offset",
"attribute": "offset",
"type": "number",
"default": "6"
},
{
"name": "disabled",
"attribute": "disabled",
"type": "boolean",
"default": "false"
}
],
"slots": [
{
"name": "hover-content",
"description": "The content that will be displayed on hover"
},
{
"name": "click-content",
"description": "The content that will be displayed on click"
}
]
},
{
"name": "active-overlay",
"path": "./src/index.ts",
"attributes": [
{
"name": "animating",
"type": "boolean",
"default": "false"
},
{
"name": "placement",
"type": "\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\" | undefined"
},
{
"name": "data-popper-placement",
"type": "\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\" | undefined"
}
],
"properties": [
{
"name": "overlayContent",
"type": "HTMLElement | undefined"
},
{
"name": "overlayContentTip",
"type": "HTMLElement | undefined"
},
{
"name": "trigger",
"type": "HTMLElement | undefined"
},
{
"name": "state",
"type": "OverlayStateType"
},
{
"name": "animating",
"attribute": "animating",
"type": "boolean",
"default": "false"
},
{
"name": "placement",
"attribute": "placement",
"type": "\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\" | undefined"
},
{
"name": "color",
"type": "\"light\" | \"lightest\" | \"dark\" | \"darkest\" | undefined"
},
{
"name": "scale",
"type": "\"medium\" | \"large\" | undefined"
},
{
"name": "dataPopperPlacement",
"attribute": "data-popper-placement",
"type": "\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\" | undefined"
},
{
"name": "offset",
"type": "number",
"default": "6"
},
{
"name": "interaction",
"type": "TriggerInteractions",
"default": "\"hover\""
}
]
}
]
}
{"version":"experimental","tags":[{"name":"overlay-trigger","path":"./src/overlay-trigger.ts","description":"A overlay trigger component for displaying overlays relative to other content.","attributes":[{"name":"placement","type":"Placement","default":"\"bottom\""},{"name":"offset","type":"number","default":"6"},{"name":"disabled","type":"boolean","default":"false"}],"properties":[{"name":"placement","attribute":"placement","type":"Placement","default":"\"bottom\""},{"name":"offset","attribute":"offset","type":"number","default":"6"},{"name":"disabled","attribute":"disabled","type":"boolean","default":"false"}],"slots":[{"name":"hover-content","description":"The content that will be displayed on hover"},{"name":"click-content","description":"The content that will be displayed on click"}]},{"name":"overlay-trigger","path":"./src/index.ts","description":"A overlay trigger component for displaying overlays relative to other content.","attributes":[{"name":"placement","type":"Placement","default":"\"bottom\""},{"name":"offset","type":"number","default":"6"},{"name":"disabled","type":"boolean","default":"false"}],"properties":[{"name":"placement","attribute":"placement","type":"Placement","default":"\"bottom\""},{"name":"offset","attribute":"offset","type":"number","default":"6"},{"name":"disabled","attribute":"disabled","type":"boolean","default":"false"}],"slots":[{"name":"hover-content","description":"The content that will be displayed on hover"},{"name":"click-content","description":"The content that will be displayed on click"}]},{"name":"active-overlay","path":"./src/index.ts","attributes":[{"name":"animating","type":"boolean","default":"false"},{"name":"placement","type":"\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\" | undefined"},{"name":"data-popper-placement","type":"\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\" | undefined"}],"properties":[{"name":"overlayContent","type":"HTMLElement | undefined"},{"name":"overlayContentTip","type":"HTMLElement | undefined"},{"name":"trigger","type":"HTMLElement | undefined"},{"name":"state","type":"OverlayStateType"},{"name":"animating","attribute":"animating","type":"boolean","default":"false"},{"name":"placement","attribute":"placement","type":"\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\" | undefined"},{"name":"color","type":"\"light\" | \"lightest\" | \"dark\" | \"darkest\" | undefined"},{"name":"scale","type":"\"medium\" | \"large\" | undefined"},{"name":"dataPopperPlacement","attribute":"data-popper-placement","type":"\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\" | undefined"},{"name":"offset","type":"number","default":"6"},{"name":"interaction","type":"TriggerInteractions","default":"\"hover\""}]}]}

464

lib/active-overlay.js

@@ -15,2 +15,3 @@ /*

import { html, LitElement, property, } from 'lit-element';
import { ifDefined } from 'lit-html/directives/if-defined';
import styles from './active-overlay.css.js';

@@ -61,229 +62,229 @@ const stateMachine = {

};
export class ActiveOverlay extends LitElement {
constructor() {
super(...arguments);
this.originalSlot = null;
this._state = stateTransition();
this.animating = false;
this.offset = 6;
this.interaction = 'hover';
this.positionAnimationFrame = 0;
}
get state() {
return this._state;
}
set state(state) {
const nextState = stateTransition(this.state, state);
if (nextState === this.state) {
return;
let ActiveOverlay = /** @class */ (() => {
class ActiveOverlay extends LitElement {
constructor() {
super(...arguments);
this.originalSlot = null;
this._state = stateTransition();
this.animating = false;
this.offset = 6;
this.interaction = 'hover';
this.positionAnimationFrame = 0;
}
this._state = nextState;
if (this.state === 'active' ||
this.state === 'visible' ||
this.state === 'hiding') {
this.setAttribute('state', this.state);
get state() {
return this._state;
}
else {
this.removeAttribute('state');
set state(state) {
const nextState = stateTransition(this.state, state);
if (nextState === this.state) {
return;
}
this._state = nextState;
if (this.state === 'active' ||
this.state === 'visible' ||
this.state === 'hiding') {
this.setAttribute('state', this.state);
}
else {
this.removeAttribute('state');
}
}
}
get hasTheme() {
return !!this.color || !!this.scale;
}
static get styles() {
return [styles];
}
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
/* istanbul ignore if */
if (!this.overlayContent)
return;
this.stealOverlayContent(this.overlayContent);
/* istanbul ignore if */
if (!this.overlayContent || !this.trigger || !this.shadowRoot)
return;
/* istanbul ignore else */
if (this.placement && this.placement !== 'none') {
this.popper = createPopper(this.trigger, this, {
placement: this.placement,
modifiers: [
maxSize,
applyMaxSize,
{
name: 'arrow',
options: {
element: this.overlayContentTip,
get hasTheme() {
return !!this.color || !!this.scale;
}
static get styles() {
return [styles];
}
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
/* istanbul ignore if */
if (!this.overlayContent)
return;
this.stealOverlayContent(this.overlayContent);
/* istanbul ignore if */
if (!this.overlayContent || !this.trigger || !this.shadowRoot)
return;
/* istanbul ignore else */
if (this.placement && this.placement !== 'none') {
this.popper = createPopper(this.trigger, this, {
placement: this.placement,
modifiers: [
maxSize,
applyMaxSize,
{
name: 'arrow',
options: {
element: this.overlayContentTip,
},
},
},
{
name: 'offset',
options: {
offset: [0, this.offset],
{
name: 'offset',
options: {
offset: [0, this.offset],
},
},
},
],
],
});
}
this.state = 'active';
document.addEventListener('sp-update-overlays', () => {
this.updateOverlayPosition();
this.state = 'visible';
});
this.updateOverlayPosition().then(() => this.applyContentAnimation('spOverlayFadeIn'));
}
this.state = 'active';
document.addEventListener('sp-update-overlays', () => {
this.updateOverlayPosition();
this.state = 'visible';
});
this.updateOverlayPosition().then(() => this.applyContentAnimation('spOverlayFadeIn'));
}
updateOverlayPopperPlacement() {
/* istanbul ignore if */
if (!this.overlayContent)
return;
if (this.dataPopperPlacement) {
// Copy this attribute to the actual overlay node so that it can use
// the attribute for styling shadow DOM elements based on the side
// that popper has chosen for it
this.overlayContent.setAttribute('placement', this.dataPopperPlacement);
updateOverlayPopperPlacement() {
/* istanbul ignore if */
if (!this.overlayContent)
return;
if (this.dataPopperPlacement) {
// Copy this attribute to the actual overlay node so that it can use
// the attribute for styling shadow DOM elements based on the side
// that popper has chosen for it
this.overlayContent.setAttribute('placement', this.dataPopperPlacement);
}
else if (this.originalPlacement) {
this.overlayContent.setAttribute('placement', this.originalPlacement);
}
else {
this.overlayContent.removeAttribute('placement');
}
}
else if (this.originalPlacement) {
this.overlayContent.setAttribute('placement', this.originalPlacement);
updated(changedProperties) {
if (changedProperties.has('dataPopperPlacement')) {
this.updateOverlayPopperPlacement();
}
}
else {
this.overlayContent.removeAttribute('placement');
open(openDetail) {
this.extractDetail(openDetail);
}
}
updated(changedProperties) {
if (changedProperties.has('dataPopperPlacement')) {
this.updateOverlayPopperPlacement();
extractDetail(detail) {
this.overlayContent = detail.content;
this.overlayContentTip = detail.contentTip;
this.trigger = detail.trigger;
this.placement = detail.placement;
this.offset = detail.offset;
this.interaction = detail.interaction;
this.color = detail.theme.color;
this.scale = detail.theme.scale;
}
}
open(openDetail) {
this.extractDetail(openDetail);
}
extractDetail(detail) {
this.overlayContent = detail.content;
this.overlayContentTip = detail.contentTip;
this.trigger = detail.trigger;
this.placement = detail.placement;
this.offset = detail.offset;
this.interaction = detail.interaction;
this.color = detail.theme.color;
this.scale = detail.theme.scale;
}
dispose() {
/* istanbul ignore if */
if (this.state !== 'dispose')
return;
/* istanbul ignore if */
if (this.timeout) {
clearTimeout(this.timeout);
delete this.timeout;
dispose() {
/* istanbul ignore if */
if (this.state !== 'dispose')
return;
/* istanbul ignore if */
if (this.timeout) {
clearTimeout(this.timeout);
delete this.timeout;
}
/* istanbul ignore else */
if (this.popper) {
this.popper.destroy();
this.popper = undefined;
}
this.returnOverlayContent();
this.state = 'disposed';
}
/* istanbul ignore else */
if (this.popper) {
this.popper.destroy();
this.popper = undefined;
stealOverlayContent(element) {
/* istanbul ignore if */
if (this.placeholder || !element)
return;
/* istanbul ignore else */
if (!this.placeholder) {
this.placeholder = document.createComment('placeholder for ' + element.nodeName);
}
const parentElement = element.parentElement || element.getRootNode();
/* istanbul ignore else */
if (parentElement) {
parentElement.replaceChild(this.placeholder, element);
}
this.overlayContent = element;
this.originalSlot = this.overlayContent.getAttribute('slot');
this.overlayContent.setAttribute('slot', 'overlay');
this.appendChild(this.overlayContent);
this.originalPlacement = this.overlayContent.getAttribute('placement');
}
this.returnOverlayContent();
this.state = 'disposed';
}
stealOverlayContent(element) {
/* istanbul ignore if */
if (this.placeholder || !element)
return;
/* istanbul ignore else */
if (!this.placeholder) {
this.placeholder = document.createComment('placeholder for ' + element.nodeName);
returnOverlayContent() {
/* istanbul ignore if */
if (!this.overlayContent)
return;
if (this.originalSlot) {
this.overlayContent.setAttribute('slot', this.originalSlot);
delete this.originalSlot;
}
else {
this.overlayContent.removeAttribute('slot');
}
/* istanbul ignore else */
if (this.placeholder) {
const parentElement = this.placeholder.parentElement ||
this.placeholder.getRootNode();
/* istanbul ignore else */
if (parentElement) {
parentElement.replaceChild(this.overlayContent, this.placeholder);
this.overlayContent.dispatchEvent(new Event('sp-overlay-closed'));
}
}
if (this.originalPlacement) {
this.overlayContent.setAttribute('placement', this.originalPlacement);
delete this.originalPlacement;
}
delete this.placeholder;
}
const parentElement = element.parentElement || element.getRootNode();
/* istanbul ignore else */
if (parentElement) {
parentElement.replaceChild(this.placeholder, element);
async updateOverlayPosition() {
if (this.popper) {
await this.popper.update();
}
}
this.overlayContent = element;
this.originalSlot = this.overlayContent.getAttribute('slot');
this.overlayContent.setAttribute('slot', 'overlay');
this.appendChild(this.overlayContent);
this.originalPlacement = this.overlayContent.getAttribute('placement');
}
returnOverlayContent() {
/* istanbul ignore if */
if (!this.overlayContent)
return;
if (this.originalSlot) {
this.overlayContent.setAttribute('slot', this.originalSlot);
delete this.originalSlot;
}
else {
this.overlayContent.removeAttribute('slot');
}
/* istanbul ignore else */
if (this.placeholder) {
const parentElement = this.placeholder.parentElement ||
this.placeholder.getRootNode();
/* istanbul ignore else */
if (parentElement) {
parentElement.replaceChild(this.overlayContent, this.placeholder);
this.overlayContent.dispatchEvent(new Event('sp-overlay-closed'));
async hide(animated = true) {
this.state = 'hiding';
if (animated) {
await this.applyContentAnimation('spOverlayFadeOut');
}
this.state = 'dispose';
}
if (this.originalPlacement) {
this.overlayContent.setAttribute('placement', this.originalPlacement);
delete this.originalPlacement;
schedulePositionUpdate() {
// Edge needs a little time to update the DOM before computing the layout
cancelAnimationFrame(this.positionAnimationFrame);
this.positionAnimationFrame = requestAnimationFrame(() => this.updateOverlayPosition());
}
delete this.placeholder;
}
async updateOverlayPosition() {
if (this.popper) {
await this.popper.update();
onSlotChange() {
this.schedulePositionUpdate();
}
}
async hide(animated = true) {
this.state = 'hiding';
if (animated) {
await this.applyContentAnimation('spOverlayFadeOut');
connectedCallback() {
super.connectedCallback();
this.schedulePositionUpdate();
}
this.state = 'dispose';
}
schedulePositionUpdate() {
// Edge needs a little time to update the DOM before computing the layout
cancelAnimationFrame(this.positionAnimationFrame);
this.positionAnimationFrame = requestAnimationFrame(() => this.updateOverlayPosition());
}
onSlotChange() {
this.schedulePositionUpdate();
}
connectedCallback() {
super.connectedCallback();
this.schedulePositionUpdate();
}
applyContentAnimation(animation) {
return new Promise((resolve, reject) => {
/* istanbul ignore if */
if (!this.shadowRoot) {
reject();
return;
}
const contents = this.shadowRoot.querySelector('#contents');
const doneHandler = (event) => {
if (animation !== event.animationName)
applyContentAnimation(animation) {
return new Promise((resolve, reject) => {
/* istanbul ignore if */
if (!this.shadowRoot) {
reject();
return;
contents.removeEventListener('animationend', doneHandler);
contents.removeEventListener('animationcancel', doneHandler);
this.animating = false;
resolve(event.type === 'animationcancel');
};
contents.addEventListener('animationend', doneHandler);
contents.addEventListener('animationcancel', doneHandler);
contents.style.animationName = animation;
this.animating = true;
});
}
renderTheme(content) {
const color = this.color;
const scale = this.scale;
return html `
<sp-theme .color=${color} .scale=${scale}>
}
const contents = this.shadowRoot.querySelector('#contents');
const doneHandler = (event) => {
if (animation !== event.animationName)
return;
contents.removeEventListener('animationend', doneHandler);
contents.removeEventListener('animationcancel', doneHandler);
this.animating = false;
resolve(event.type === 'animationcancel');
};
contents.addEventListener('animationend', doneHandler);
contents.addEventListener('animationcancel', doneHandler);
contents.style.animationName = animation;
this.animating = true;
});
}
renderTheme(content) {
const { color, scale } = this;
return html `
<sp-theme color=${ifDefined(color)} scale=${ifDefined(scale)}>
${content}
</sp-theme>
`;
}
render() {
const content = html `
}
render() {
const content = html `
<div id="contents">

@@ -293,31 +294,34 @@ <slot @slotchange=${this.onSlotChange} name="overlay"></slot>

`;
return this.hasTheme ? this.renderTheme(content) : content;
}
static create(details) {
const overlay = new ActiveOverlay();
/* istanbul ignore else */
if (details.content) {
overlay.open(details);
return this.hasTheme ? this.renderTheme(content) : content;
}
return overlay;
static create(details) {
const overlay = new ActiveOverlay();
/* istanbul ignore else */
if (details.content) {
overlay.open(details);
}
return overlay;
}
}
}
__decorate([
property()
], ActiveOverlay.prototype, "_state", void 0);
__decorate([
property({ reflect: true, type: Boolean })
], ActiveOverlay.prototype, "animating", void 0);
__decorate([
property({ reflect: true })
], ActiveOverlay.prototype, "placement", void 0);
__decorate([
property({ attribute: false })
], ActiveOverlay.prototype, "color", void 0);
__decorate([
property({ attribute: false })
], ActiveOverlay.prototype, "scale", void 0);
__decorate([
property({ attribute: 'data-popper-placement' })
], ActiveOverlay.prototype, "dataPopperPlacement", void 0);
__decorate([
property()
], ActiveOverlay.prototype, "_state", void 0);
__decorate([
property({ reflect: true, type: Boolean })
], ActiveOverlay.prototype, "animating", void 0);
__decorate([
property({ reflect: true })
], ActiveOverlay.prototype, "placement", void 0);
__decorate([
property({ attribute: false })
], ActiveOverlay.prototype, "color", void 0);
__decorate([
property({ attribute: false })
], ActiveOverlay.prototype, "scale", void 0);
__decorate([
property({ attribute: 'data-popper-placement' })
], ActiveOverlay.prototype, "dataPopperPlacement", void 0);
return ActiveOverlay;
})();
export { ActiveOverlay };
//# sourceMappingURL=active-overlay.js.map

1

lib/index.js

@@ -16,2 +16,3 @@ /*

export * from './overlay-trigger.js';
export * from './overlay-types';
/* istanbul ignore else */

@@ -18,0 +19,0 @@ if (!customElements.get('overlay-trigger')) {

152

lib/overlay-trigger.js

@@ -23,14 +23,15 @@ /*

*/
export class OverlayTrigger extends LitElement {
constructor() {
super(...arguments);
this.placement = 'bottom';
this.offset = 6;
this.disabled = false;
}
static get styles() {
return [overlayTriggerStyles];
}
render() {
return html `
let OverlayTrigger = /** @class */ (() => {
class OverlayTrigger extends LitElement {
constructor() {
super(...arguments);
this.placement = 'bottom';
this.offset = 6;
this.disabled = false;
}
static get styles() {
return [overlayTriggerStyles];
}
render() {
return html `
<div

@@ -58,71 +59,74 @@ id="trigger"

`;
}
onTriggerClick() {
/* istanbul ignore else */
if (this.targetContent && this.clickContent) {
this.closeClickOverlay = Overlay.open(this.targetContent, 'click', this.clickContent, {
offset: this.offset,
placement: this.placement,
});
}
}
onTriggerMouseEnter() {
/* istanbul ignore else */
if (this.targetContent && this.hoverContent) {
this.closeHoverOverlay = Overlay.open(this.targetContent, 'hover', this.hoverContent, {
offset: this.offset,
placement: this.placement,
});
onTriggerClick() {
/* istanbul ignore else */
if (this.targetContent && this.clickContent) {
this.closeClickOverlay = Overlay.open(this.targetContent, 'click', this.clickContent, {
offset: this.offset,
placement: this.placement,
});
}
}
}
onTriggerMouseLeave() {
/* istanbul ignore else */
if (this.closeHoverOverlay) {
this.closeHoverOverlay();
delete this.closeHoverOverlay;
onTriggerMouseEnter() {
/* istanbul ignore else */
if (this.targetContent && this.hoverContent) {
this.closeHoverOverlay = Overlay.open(this.targetContent, 'hover', this.hoverContent, {
offset: this.offset,
placement: this.placement,
});
}
}
}
onClickSlotChange(event) {
const content = this.extractSlotContentFromEvent(event);
this.clickContent = content;
}
onHoverSlotChange(event) {
const content = this.extractSlotContentFromEvent(event);
this.hoverContent = content;
}
onTargetSlotChange(event) {
const content = this.extractSlotContentFromEvent(event);
this.targetContent = content;
}
extractSlotContentFromEvent(event) {
/* istanbul ignore if */
if (!event.target) {
return;
onTriggerMouseLeave() {
/* istanbul ignore else */
if (this.closeHoverOverlay) {
this.closeHoverOverlay();
delete this.closeHoverOverlay;
}
}
const slot = event.target;
const nodes = slot.assignedNodes();
return nodes.find((node) => node instanceof HTMLElement);
}
disconnectedCallback() {
/* istanbul ignore else */
if (this.closeClickOverlay) {
this.closeClickOverlay();
delete this.closeClickOverlay;
onClickSlotChange(event) {
const content = this.extractSlotContentFromEvent(event);
this.clickContent = content;
}
if (this.closeHoverOverlay) {
this.closeHoverOverlay();
delete this.closeHoverOverlay;
onHoverSlotChange(event) {
const content = this.extractSlotContentFromEvent(event);
this.hoverContent = content;
}
super.disconnectedCallback();
onTargetSlotChange(event) {
const content = this.extractSlotContentFromEvent(event);
this.targetContent = content;
}
extractSlotContentFromEvent(event) {
/* istanbul ignore if */
if (!event.target) {
return;
}
const slot = event.target;
const nodes = slot.assignedNodes();
return nodes.find((node) => node instanceof HTMLElement);
}
disconnectedCallback() {
/* istanbul ignore else */
if (this.closeClickOverlay) {
this.closeClickOverlay();
delete this.closeClickOverlay;
}
if (this.closeHoverOverlay) {
this.closeHoverOverlay();
delete this.closeHoverOverlay;
}
super.disconnectedCallback();
}
}
}
__decorate([
property({ reflect: true })
], OverlayTrigger.prototype, "placement", void 0);
__decorate([
property({ type: Number, reflect: true })
], OverlayTrigger.prototype, "offset", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], OverlayTrigger.prototype, "disabled", void 0);
__decorate([
property({ reflect: true })
], OverlayTrigger.prototype, "placement", void 0);
__decorate([
property({ type: Number, reflect: true })
], OverlayTrigger.prototype, "offset", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], OverlayTrigger.prototype, "disabled", void 0);
return OverlayTrigger;
})();
export { OverlayTrigger };
//# sourceMappingURL=overlay-trigger.js.map

172

lib/overlay.js

@@ -17,88 +17,94 @@ /*

*/
export class Overlay {
/**
*
* @param owner the parent element we will use to position the overlay element
* @param interaction the type of interaction that caused this overlay to be shown
* @param overlayElement the item to display as an overlay
*/
constructor(owner, interaction, overlayElement) {
this.isOpen = false;
this.owner = owner;
this.overlayElement = overlayElement;
this.interaction = interaction;
}
/**
* Open an overlay
*
* @param owner the parent element we will use to position the overlay element
* @param interaction the type of interaction that caused this overlay to be shown
* @param overlayElement the item to display as an overlay
* @param options display parameters
* @param options.delayed if true delay opening of the overlay based on the global warmup/cooldown timer
* @param options.offset distance to offset the overlay
* @param options.placement side on which to position the overlay
* @returns an Overlay object which can be used to close the overlay
*/
static open(owner, interaction, overlayElement, options) {
const overlay = new Overlay(owner, interaction, overlayElement);
overlay.open(options);
return () => overlay.close();
}
static update() {
const overlayUpdateEvent = new CustomEvent('sp-update-overlays', {
bubbles: true,
composed: true,
cancelable: true,
});
document.dispatchEvent(overlayUpdateEvent);
}
/**
* Open an overlay
*
* @param options display parameters
* @param options.delayed delay before opening the overlay
* @param options.offset distance to offset the overlay
* @param options.placement side on which to position the overlay
* @returns a Promise that resolves to true if this operation was cancelled
*/
async open({ delayed, offset = 0, placement = 'top', }) {
/* istanbul ignore if */
if (this.isOpen)
let Overlay = /** @class */ (() => {
class Overlay {
/**
*
* @param owner the parent element we will use to position the overlay element
* @param interaction the type of interaction that caused this overlay to be shown
* @param overlayElement the item to display as an overlay
*/
constructor(owner, interaction, overlayElement) {
this.isOpen = false;
this.owner = owner;
this.overlayElement = overlayElement;
this.interaction = interaction;
}
/**
* Open an overlay
*
* @param owner the parent element we will use to position the overlay element
* @param interaction the type of interaction that caused this overlay to be shown
* @param overlayElement the item to display as an overlay
* @param options display parameters
* @param options.delayed if true delay opening of the overlay based on the global warmup/cooldown timer
* @param options.offset distance to offset the overlay
* @param options.placement side on which to position the overlay
* @returns an Overlay object which can be used to close the overlay
*/
static open(owner, interaction, overlayElement, options) {
const overlay = new Overlay(owner, interaction, overlayElement);
overlay.open(options);
return () => {
overlay.close();
};
}
static update() {
const overlayUpdateEvent = new CustomEvent('sp-update-overlays', {
bubbles: true,
composed: true,
cancelable: true,
});
document.dispatchEvent(overlayUpdateEvent);
}
/**
* Open an overlay
*
* @param options display parameters
* @param options.delayed delay before opening the overlay
* @param options.offset distance to offset the overlay
* @param options.placement side on which to position the overlay
* @returns a Promise that resolves to true if this operation was cancelled
*/
async open({ delayed, offset = 0, placement = 'top', }) {
/* istanbul ignore if */
if (this.isOpen)
return true;
/* istanbul ignore else */
if (delayed === undefined) {
delayed = this.overlayElement.hasAttribute('delayed');
}
const queryThemeDetail = {
color: undefined,
scale: undefined,
};
const queryThemeEvent = new CustomEvent('sp-query-theme', {
bubbles: true,
composed: true,
detail: queryThemeDetail,
cancelable: true,
});
this.owner.dispatchEvent(queryThemeEvent);
const overlayDetailQuery = {};
const queryOverlayDetailEvent = new CustomEvent('sp-overlay-query', {
bubbles: true,
composed: true,
detail: overlayDetailQuery,
cancelable: true,
});
this.overlayElement.dispatchEvent(queryOverlayDetailEvent);
Overlay.overlayStack.openOverlay(Object.assign({ content: this.overlayElement, contentTip: overlayDetailQuery.overlayContentTipElement, delayed, offset: offset, placement: placement, trigger: this.owner, interaction: this.interaction, theme: queryThemeDetail }, overlayDetailQuery));
this.isOpen = true;
return true;
/* istanbul ignore else */
if (delayed === undefined) {
delayed = this.overlayElement.hasAttribute('delayed');
}
const queryThemeDetail = {
color: undefined,
scale: undefined,
};
const queryThemeEvent = new CustomEvent('sp-query-theme', {
bubbles: true,
composed: true,
detail: queryThemeDetail,
cancelable: true,
});
this.owner.dispatchEvent(queryThemeEvent);
const overlayDetailQuery = {};
const queryOverlayDetailEvent = new CustomEvent('sp-overlay-query', {
bubbles: true,
composed: true,
detail: overlayDetailQuery,
cancelable: true,
});
this.overlayElement.dispatchEvent(queryOverlayDetailEvent);
Overlay.overlayStack.openOverlay(Object.assign({ content: this.overlayElement, contentTip: overlayDetailQuery.overlayContentTipElement, delayed, offset: offset, placement: placement, trigger: this.owner, interaction: this.interaction, theme: queryThemeDetail }, overlayDetailQuery));
this.isOpen = true;
return true;
/**
* Close the overlay if it is open
*/
close() {
Overlay.overlayStack.closeOverlay(this.overlayElement);
}
}
/**
* Close the overlay if it is open
*/
close() {
Overlay.overlayStack.closeOverlay(this.overlayElement);
}
}
Overlay.overlayStack = new OverlayStack();
Overlay.overlayStack = new OverlayStack();
return Overlay;
})();
export { Overlay };
//# sourceMappingURL=overlay.js.map

2

lib/popper-arrow-rotate.d.ts
import { Modifier } from '@popperjs/core/lib/types';
export declare const computeArrowRotateStyles: Modifier<{}>;
export declare const computeArrowRotateStyles: Modifier<Record<string, unknown>>;

8

package.json

@@ -21,3 +21,3 @@ {

],
"version": "0.3.7",
"version": "0.3.8",
"description": "",

@@ -49,7 +49,7 @@ "main": "lib/index.js",

"@popperjs/core": "^2.2.2",
"@spectrum-web-components/theme": "^0.4.0",
"@spectrum-web-components/theme": "^0.4.1",
"popper-max-size-modifier": "^0.2.0",
"tslib": "^1.10.0"
"tslib": "^2.0.0"
},
"gitHead": "1f8f11ef9dfb81e9b2ad7998fcc2955b331440ab"
"gitHead": "16b57d15356859cee73278cdf796274e3245320b"
}

8

src/active-overlay.ts

@@ -28,2 +28,3 @@ /*

} from 'lit-element';
import { ifDefined } from 'lit-html/directives/if-defined';
import styles from './active-overlay.css.js';

@@ -119,3 +120,3 @@

}
public set state(state) {
public set state(state: OverlayStateType) {
const nextState = stateTransition(this.state, state);

@@ -406,6 +407,5 @@ if (nextState === this.state) {

public renderTheme(content: TemplateResult): TemplateResult {
const color = this.color as Color;
const scale = this.scale as Scale;
const { color, scale } = this;
return html`
<sp-theme .color=${color} .scale=${scale}>
<sp-theme color=${ifDefined(color)} scale=${ifDefined(scale)}>
${content}

@@ -412,0 +412,0 @@ </sp-theme>

2

src/apply-max-size.ts

@@ -45,3 +45,3 @@ /*

};
}) {
}): void {
const { height: maxHeight } = state.modifiersData.maxSize;

@@ -48,0 +48,0 @@ if (!appliedSizeDefaults.has(state.elements.popper)) {

4

src/overlay.ts

@@ -75,3 +75,5 @@ /*

overlay.open(options);
return () => overlay.close();
return (): void => {
overlay.close();
};
}

@@ -78,0 +80,0 @@

6

src/popper-arrow-rotate.ts

@@ -18,3 +18,5 @@ /*

function computeArrowRotateStylesFn(ref: ModifierArguments<{}>): undefined {
function computeArrowRotateStylesFn(
ref: ModifierArguments<Record<string, unknown>>
): undefined {
if (!ref.state.styles || !ref.state.styles.arrow) return;

@@ -54,3 +56,3 @@

export const computeArrowRotateStyles: Modifier<{}> = {
export const computeArrowRotateStyles: Modifier<Record<string, unknown>> = {
name: 'computeArrowRotateStyles',

@@ -57,0 +59,0 @@ enabled: true,

lib/active-overlay.js.map

Sorry, the diff of this file is not supported yet

lib/apply-max-size.js.map

Sorry, the diff of this file is not supported yet

lib/index.js.map

Sorry, the diff of this file is not supported yet

lib/overlay-trigger.js.map

Sorry, the diff of this file is not supported yet

lib/overlay.js.map

Sorry, the diff of this file is not supported yet

lib/popper-arrow-rotate.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc