@postnord/web-components
Version:
PostNord Web Components
157 lines (152 loc) • 7.92 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { k as awaitTopbar } from './helpers.js';
import { d as defineCustomElement$2 } from './pn-icon2.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$1 = /*@__PURE__*/ proxyCustomElement(class PnReadOnlyButton extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
}
get hostElement() { return 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 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 (h(Host, { key: '050c438370b6d5c86e327be03d206880f2f572e5', class: "pn-read-only-button" }, h("button", { key: 'a6cd36bc8f112d3ff7cb6ea65768339dd789813c', class: this.getClassNames(), "data-tooltip-open": this.tooltipOpen, disabled: true }, !this.iconOnly && h("slot", { key: '94979edec979712e7ecc1f683dcf2f32a7889f48' }), this.icon && h("pn-icon", { key: '14012e9a320767c993fab05c614c659f188783e3', icon: this.icon, color: "gray700" }), this.iconOnly && (h("span", { key: '4f75372bf50ec504504ecbd808d3bf1e746c1418', class: "read-only-icon-only" }, h("slot", { key: 'a12bca58ae471729cbb2442b1791bb4ee16c7db5' }))), h("div", { key: '3ec03d46dc7c44229112a90b0df8ea4737a09e79', class: "button-tooltip" }, this.readOnlyModeText))));
}
static get watchers() { return {
"language": ["setReadOnlyModeText"],
"tooltipOpen": ["openHandler"]
}; }
static get style() { return pnReadOnlyButtonCss; }
}, [260, "pn-read-only-button", {
"icon": [1],
"leftIcon": [4, "left-icon"],
"iconOnly": [4, "icon-only"],
"small": [4],
"language": [1],
"readOnlyModeText": [32],
"tooltipOpen": [32],
"tooltipEl": [32],
"tooltipDx": [32]
}, undefined, {
"language": ["setReadOnlyModeText"],
"tooltipOpen": ["openHandler"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["pn-read-only-button", "pn-icon"];
components.forEach(tagName => { switch (tagName) {
case "pn-read-only-button":
if (!customElements.get(tagName)) {
customElements.define(tagName, PnReadOnlyButton$1);
}
break;
case "pn-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const PnReadOnlyButton = PnReadOnlyButton$1;
const defineCustomElement = defineCustomElement$1;
export { PnReadOnlyButton, defineCustomElement };
//# sourceMappingURL=pn-read-only-button.js.map
//# sourceMappingURL=pn-read-only-button.js.map