@postnord/web-components
Version:
PostNord Web Components
120 lines (115 loc) • 6.65 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
'use strict';
var index = require('./index-DVv2io0H.js');
var index$1 = require('./index.cjs.js');
const pnReadOnlyButtonCss = "pn-read-only-button{display:inline-block}pn-read-only-button button{cursor:not-allowed;color:#5e554a;background:#f3f2f2;padding:0.75em 1.2em;width:100%;border:none;border-radius:3em;outline:none;position:relative;font-size:1em;min-height:3em;min-width:5.5em;font-weight:500;display:flex;justify-content:center;align-items:center;-webkit-tap-highlight-color:transparent}pn-read-only-button button pn-icon{flex-shrink:0;margin:0 0 0 0.5em}pn-read-only-button button .button-tooltip{position:absolute;bottom:calc(100% + 0.35em);left:50%;background:#a70707;color:#ffffff;padding:0.25em 0.75em;font-size:0.875em;font-weight:300;border-radius:1em;box-shadow:0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);z-index:5;max-width:min(95vw, 40em);transform:translateX(-50%);width:max-content;pointer-events:none;opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-read-only-button button .button-tooltip{transition-duration:0s;transition-delay:0s}}pn-read-only-button button[data-tooltip-open] .button-tooltip{opacity:1}pn-read-only-button button.pn-button-left-icon{flex-direction:row-reverse}pn-read-only-button button.pn-button-left-icon pn-icon{margin:0 0.5em 0 0}pn-read-only-button button.icon-only{width:3em;min-width:0}pn-read-only-button button.icon-only pn-icon{margin:0}pn-read-only-button button.icon-only.pn-button-small{width:2.286em;min-width:0;padding:0}pn-read-only-button button.icon-only span.read-only-icon-only{display:none}pn-read-only-button button.pn-button-small{font-size:0.875em;padding:0.5em 1em;font-weight:normal;min-height:2.286em;min-width:none}pn-read-only-button button.pn-button-small pn-icon .pn-icon-svg{height:1.28em;width:1.28em}";
const PnReadOnlyButton = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
get hostElement() { return index.getElement(this); }
readOnlyModeText = '';
tooltipOpen = false;
tooltipEl;
tooltipDx;
/** The SVG content of the icon you want. */
icon;
/** Icon on the left side instead of on the right. */
leftIcon = false;
/** If you're using a button with only an icon, button text is still REQUIRED for the tooltip. */
iconOnly = false;
/** Smaller button. */
small = false;
/** Set the language manually. */
language = null;
setReadOnlyModeText() {
const translations = {
en: 'You cannot complete this action while in read only mode',
sv: 'Du kan inte utföra denna handling i skrivskyddat läge',
da: 'Du kan ikke gennemføre denne handling i skrivebeskyttet tilstand',
fi: 'Et voi suorittaa tätä toimintoa vain luku -tilassa',
no: 'Du kan ikke utføre denne handlingen i skrivebeskyttet modus',
};
this.readOnlyModeText = translations[this.language];
}
async componentWillLoad() {
this.setReadOnlyModeText();
if (this.language)
return;
await index$1.awaitTopbar(this.hostElement);
}
componentDidLoad() {
this.initTooltip();
}
/*---------------------------------------TOOLTIP LOGIC-------------------------------------------*/
openHandler() {
if (this.tooltipOpen) {
this.checkTooltipPosition();
return;
}
this.setTooltipOffset();
}
initTooltip() {
this.tooltipEl = this.hostElement.querySelector('.button-tooltip');
const tooltipAnchor = this.hostElement;
const openEvents = ['mouseenter', 'focus'];
const closeEvents = ['mouseleave', 'blur'];
const eventListeners = [...openEvents, ...closeEvents];
eventListeners.forEach(e => {
tooltipAnchor.addEventListener(e, event => {
// Should open?
if (openEvents.includes(event.type)) {
this.tooltipOpen = true;
return;
}
// Should close?
if (closeEvents.includes(event.type)) {
this.tooltipOpen = false;
}
});
});
}
setTooltipOffset() {
this.tooltipEl.style.transform = `translateX(-50%) translateX(${this.tooltipDx}px)`;
}
checkTooltipPosition() {
this.tooltipEl.style.transform = 'translateX(-50%)';
requestAnimationFrame(() => {
const { x, right } = this.tooltipEl.getBoundingClientRect();
const extraMargin = 8;
this.tooltipDx = '0';
this.tooltipEl.style.transform = '';
if (x < 0)
this.tooltipDx = `${x * -1 + extraMargin}`;
if (right > window.innerWidth)
this.tooltipDx = `${window.innerWidth - right - extraMargin}`;
requestAnimationFrame(() => {
this.setTooltipOffset();
});
});
}
/* ---------------------------------------/TOOLTIP--------------------------------------- */
getClassNames() {
let classNames = 'pn-button ';
if (this.small)
classNames += 'pn-button-small ';
if (this.leftIcon)
classNames += 'pn-button-left-icon ';
if (this.iconOnly)
classNames += 'icon-only ';
return classNames;
}
render() {
return (index.h(index.Host, { key: '050c438370b6d5c86e327be03d206880f2f572e5', class: "pn-read-only-button" }, index.h("button", { key: 'a6cd36bc8f112d3ff7cb6ea65768339dd789813c', class: this.getClassNames(), "data-tooltip-open": this.tooltipOpen, disabled: true }, !this.iconOnly && index.h("slot", { key: '94979edec979712e7ecc1f683dcf2f32a7889f48' }), this.icon && index.h("pn-icon", { key: '14012e9a320767c993fab05c614c659f188783e3', icon: this.icon, color: "gray700" }), this.iconOnly && (index.h("span", { key: '4f75372bf50ec504504ecbd808d3bf1e746c1418', class: "read-only-icon-only" }, index.h("slot", { key: 'a12bca58ae471729cbb2442b1791bb4ee16c7db5' }))), index.h("div", { key: '3ec03d46dc7c44229112a90b0df8ea4737a09e79', class: "button-tooltip" }, this.readOnlyModeText))));
}
static get watchers() { return {
"language": ["setReadOnlyModeText"],
"tooltipOpen": ["openHandler"]
}; }
};
PnReadOnlyButton.style = pnReadOnlyButtonCss;
exports.pn_read_only_button = PnReadOnlyButton;
//# sourceMappingURL=pn-read-only-button.entry.cjs.js.map