@duetds/components
Version:
This package includes Duet Core Components and related tools.
226 lines (225 loc) • 16.8 kB
JavaScript
import { r as registerInstance, h, H as Host, c as getElement } from './core-12b6bfe8.js';
import { a as jsUtils_2 } from './js-utils-b3b951a3.js';
var DuetTooltip = /** @class */ (function () {
function DuetTooltip(hostRef) {
var _this = this;
registerInstance(this, hostRef);
this.tooltipId = jsUtils_2("DuetTooltip");
/**
* Own Properties
*/
this.tooltip = null;
this.scrollable = null;
this.lastScrollTop = 0;
this.timer = null;
/**
* State() variables
* Inlined decorator, alphabetical order.
*/
this.openDown = false;
this.visible = true;
/**
* Theme of the tooltip. Can be one of: "default", "turva".
*/
this.theme = "";
/**
* Adds accessible label for the info icon that is only shown for screen readers. This property is always required to create an accessibly interface!
*/
this.accessibleLabel = "Näytä lisätietoja";
/**
* Label of the tooltip. If used, replaces the accessibleLabel option.
*/
this.label = "";
/**
* Adjust the vertical positioning of the tooltip toggle in pixels. Can be a negative value as well. E.g. "-13px".
*/
this.positionVertical = "0";
/**
* Adjust the horizontal positioning of the tooltip toggle in pixels. Can be a negative value as well. E.g. "-13px".
*/
this.positionHorizontal = "0";
/**
* Toggle whether the tooltip is initially visible or not. This property should not be used in production in most cases.
*/
this.active = false;
/**
* Local methods
*/
this.toggleTooltip = function (ev) {
ev.preventDefault();
if (!_this.active) {
_this.active = true;
_this.visible = _this.isElementInViewport(_this.element.shadowRoot.querySelector(".duet-tooltip"));
if (!_this.visible) {
_this.openDown = true;
}
// This is needed to that the active tooltip stacks on
// top of other tooltips and the header.
_this.element.style.zIndex = "201";
window.addEventListener("scroll", _this.onScroll, false);
window.addEventListener("resize", _this.closeTooltip, false);
document.addEventListener("mousedown", _this.handleMouseDown, false);
setTimeout(function () {
_this.scrollable.focus({
preventScroll: true,
});
window.addEventListener("keyup", _this.handleKeyUp, false);
window.addEventListener("keydown", _this.handleKeyDown, false);
if (window.parent) {
window.parent.addEventListener("keyup", _this.handleKeyUp, false);
window.parent.addEventListener("keydown", _this.handleKeyDown, false);
}
_this.scrollable.addEventListener("blur", _this.closeTooltip, false);
}, 305);
}
else {
_this.closeTooltip();
}
};
this.handleKeyUp = function (ev) {
if (_this.active) {
// When Esc is pressed
if (ev.key === "Escape" || ev.key === "Esc" || ev.keyCode === 27) {
_this.closeTooltip();
}
// When Space is pressed
if (ev.key === "Space" || ev.keyCode === 32) {
_this.closeTooltip();
}
// When Enter is pressed
if (ev.key === "Enter" || ev.keyCode === 13) {
_this.closeTooltip();
}
}
};
this.handleKeyDown = function (ev) {
if (_this.active) {
// When Space is pressed
if (ev.key === "Space" || ev.keyCode === 32) {
ev.preventDefault();
}
}
};
this.handleMouseDown = function (ev) {
if (ev.target === _this.element) {
ev.preventDefault();
ev.stopPropagation();
}
};
this.closeTooltip = function () {
_this.active = false;
window.removeEventListener("keyup", _this.handleKeyUp);
window.removeEventListener("keydown", _this.handleKeyDown);
window.removeEventListener("scroll", _this.onScroll);
window.removeEventListener("resize", _this.closeTooltip);
document.removeEventListener("mousedown", _this.handleMouseDown);
_this.scrollable.removeEventListener("blur", _this.closeTooltip);
if (window.parent) {
window.parent.removeEventListener("keyup", _this.handleKeyUp);
window.parent.removeEventListener("keydown", _this.handleKeyDown);
}
setTimeout(function () {
_this.openDown = false;
_this.tooltip.classList.remove("duet-tooltip-down");
_this.element.style.zIndex = "200";
var button = _this.element.shadowRoot.querySelector(".duet-tooltip-button");
button.focus({
preventScroll: true,
});
}, 300);
};
this.isElementInViewport = function (el) {
var rect = el.getBoundingClientRect();
return (
// This takes the possible Nav component into account
rect.top >= 100 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth));
};
this.onScroll = function () {
_this.visible = _this.isElementInViewport(_this.tooltip);
clearTimeout(_this.timer);
var st = window.pageYOffset || document.documentElement.scrollTop;
_this.timer = setTimeout(function () {
// If not visible anymore, continue with the logic
if (!_this.visible) {
// Scrolling down
if (st > _this.lastScrollTop) {
_this.tooltip.classList.add("duet-tooltip-down");
_this.openDown = true;
// Scrolling up
}
else {
_this.tooltip.classList.remove("duet-tooltip-down");
_this.openDown = false;
}
}
_this.lastScrollTop = st <= 0 ? 0 : st;
}, 100);
};
}
/**
* Component lifecycle events.
*/
DuetTooltip.prototype.componentWillLoad = function () {
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
};
DuetTooltip.prototype.componentDidLoad = function () {
this.tooltip = this.element.shadowRoot.querySelector(".duet-tooltip");
this.scrollable = this.element.shadowRoot.querySelector(".duet-tooltip-scrollable");
};
/**
* render() function.
* Always the last one in the class.
*/
DuetTooltip.prototype.render = function () {
var _this = this;
var tooltipStyles = {
transform: "translateY(" + this.positionVertical + ") translateX(" + this.positionHorizontal + ")",
};
return (h(Host, { style: tooltipStyles }, h("button", { "aria-controls": this.tooltipId, "aria-expanded": this.active, onClick: function (ev) { return _this.toggleTooltip(ev); }, class: {
"duet-tooltip-button": true,
"duet-tooltip-button-has-label": this.label !== "",
"duet-theme-turva": this.theme === "turva",
} }, h("svg", { "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m13.5 17.25c-1.241 0-2.25-1.009-2.25-2.25v-3.75h-.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h.75c.827 0 1.5.673 1.5 1.5v3.75c0 .414.336.75.75.75h.75c.414 0 .75.336.75.75s-.336.75-.75.75z" }), h("circle", { cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { d: "m12 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z" })), this.label !== "" ? (h("span", { class: "duet-tooltip-label" }, this.label)) : (h("duet-visually-hidden", null, this.accessibleLabel))), h("div", { class: {
"duet-tooltip": true,
"duet-theme-turva": this.theme === "turva",
"duet-tooltip-down": this.openDown,
"duet-tooltip-has-label": this.label !== "",
active: this.active === true,
} }, h("div", { class: "duet-tooltip-scrollable", tabindex: "0", role: "tooltip", id: this.tooltipId }, h("slot", null)))));
};
Object.defineProperty(DuetTooltip.prototype, "element", {
get: function () { return getElement(this); },
enumerable: true,
configurable: true
});
Object.defineProperty(DuetTooltip, "style", {
get: function () { return ":host{background:transparent;border:0;margin:0;display:-ms-inline-flexbox;display:inline-flex;position:relative;width:auto;-webkit-tap-highlight-color:transparent;z-index:200;margin-top:-16px!important;margin-left:-3px!important}.duet-tooltip,:host{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}.duet-tooltip{background:transparent;border:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;opacity:0;visibility:hidden;-webkit-transition:.3s ease;transition:.3s ease;will-change:transform,opacity,visibility;-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-transform:scale(.9) translateZ(0) translateY(20px);transform:scale(.9) translateZ(0) translateY(20px);background:#fff;border:1px solid #e1e3e6;-webkit-box-shadow:0 2px 10px 0 rgba(0,41,77,.07);box-shadow:0 2px 10px 0 rgba(0,41,77,.07);border-radius:4px;min-height:48px;position:absolute;display:block;max-height:340px;width:282px;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:.875rem;color:#00294d;font-weight:400;line-height:1.25;z-index:950;right:-21px;bottom:100%}\@media only screen and (min-width:48em){.duet-tooltip{-webkit-transform-origin:50% 100%;transform-origin:50% 100%;width:320px;right:-148px}}.duet-tooltip.duet-theme-turva{color:#111;font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;border-color:#e6e6e6;-webkit-box-shadow:0 2px 10px 0 hsla(0,0%,45.9%,.13);box-shadow:0 2px 10px 0 hsla(0,0%,45.9%,.13)}.duet-tooltip:after{content:\"\";position:absolute;bottom:-20px;right:22px;width:0;height:0;z-index:200;border:10px solid transparent;border-top:10px solid #fff}\@media only screen and (min-width:48em){.duet-tooltip:after{-webkit-transform:translateX(50%);transform:translateX(50%);right:50%}}.duet-tooltip:before{content:\"\";position:absolute;bottom:-22px;right:21px;width:0;height:0;z-index:100;border:11px solid transparent;border-top:11px solid #e1e3e6}\@media only screen and (min-width:48em){.duet-tooltip:before{-webkit-transform:translateX(50%);transform:translateX(50%);right:50%}}.duet-theme-turva .duet-tooltip:before{border-top:11px solid #e6e6e6}.duet-tooltip.duet-tooltip-down{-webkit-transform:scale(.9) translateZ(0) translateY(-20px);transform:scale(.9) translateZ(0) translateY(-20px);-webkit-transform-origin:100% 0;transform-origin:100% 0;bottom:auto;top:100%}\@media only screen and (min-width:48em){.duet-tooltip.duet-tooltip-down{-webkit-transform-origin:50% 0;transform-origin:50% 0}}.duet-tooltip.duet-tooltip-down:after{bottom:auto;top:-20px;border:10px solid transparent;border-bottom:10px solid #fff}.duet-tooltip.duet-tooltip-down:before{bottom:auto;top:-22px;border:11px solid transparent;border-bottom:11px solid #e1e3e6}.duet-theme-turva .duet-tooltip.duet-tooltip-down:before{border-bottom:11px solid #e6e6e6}.duet-tooltip.duet-tooltip-has-label{right:auto!important;left:0;-webkit-transform-origin:0 0!important;transform-origin:0 0!important;width:282px!important}.duet-tooltip.duet-tooltip-has-label:after{left:1px!important;right:auto!important;-webkit-transform:none!important;transform:none!important}.duet-tooltip.duet-tooltip-has-label:before{right:auto!important;left:0!important;-webkit-transform:none!important;transform:none!important}.duet-tooltip.active{opacity:1;visibility:visible;-webkit-transform:scale(1) translateZ(0) translateY(-8px);transform:scale(1) translateZ(0) translateY(-8px)}.duet-tooltip.active.duet-tooltip-down{-webkit-transform:scale(1) translateZ(0) translateY(8px);transform:scale(1) translateZ(0) translateY(8px)}.duet-tooltip-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;margin-right:-12px;min-width:48px;height:48px;z-index:100;display:inline-block;white-space:nowrap;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#0077b3}.duet-tooltip-button.duet-theme-turva{color:#c60c30}.duet-tooltip-button:hover{color:#004d80}.duet-tooltip-button:hover.duet-theme-turva{color:#940925}.duet-tooltip-button:focus{outline:none}:host(.user-is-tabbing) .duet-tooltip-button:focus{outline:1px dotted #0077b3;outline:5px auto -webkit-focus-ring-color}.duet-tooltip-button svg{pointer-events:none;width:20px;height:20px}.duet-tooltip-button-has-label{margin-right:0}.duet-tooltip-scrollable{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;padding:20px!important;overflow-y:auto;-webkit-overflow-scrolling:touch;width:100%;max-height:250px}.duet-tooltip-scrollable:focus{outline:none}:host(.user-is-tabbing) .duet-tooltip-scrollable:focus{outline:1px dotted #0077b3;outline:5px auto -webkit-focus-ring-color}.duet-tooltip-scrollable::-webkit-scrollbar{width:4px}.duet-tooltip-scrollable::-webkit-scrollbar-track{border-radius:4px}.duet-tooltip-scrollable::-webkit-scrollbar-thumb{border-radius:4px;background:#e1e3e6}.duet-theme-turva .duet-tooltip-scrollable::-webkit-scrollbar-thumb{background:#e6e6e6}.duet-tooltip-label{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;margin-left:12px!important;white-space:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1rem;vertical-align:top;font-weight:600;line-height:1.25;z-index:100;text-align:left;max-width:calc(100% - 32px);position:relative;display:inline-block}.duet-theme-turva .duet-tooltip-label{font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}"; },
enumerable: true,
configurable: true
});
return DuetTooltip;
}());
var DuetVisuallyHidden = /** @class */ (function () {
function DuetVisuallyHidden(hostRef) {
registerInstance(this, hostRef);
}
/**
* render() function
* Always the last one in the class.
*/
DuetVisuallyHidden.prototype.render = function () {
return (h(Host, { class: "duet-visually-hidden" }, h("slot", null)));
};
Object.defineProperty(DuetVisuallyHidden, "style", {
get: function () { return ":host{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;position:absolute!important;top:0;clip:rect(1px,1px,1px,1px)!important;overflow:hidden!important;height:1px!important;width:1px!important;padding:0!important;border:0!important}"; },
enumerable: true,
configurable: true
});
return DuetVisuallyHidden;
}());
export { DuetTooltip as duet_tooltip, DuetVisuallyHidden as duet_visually_hidden };