@postnord/web-components
Version:
PostNord Web Components
114 lines (110 loc) • 6.44 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { r as registerInstance, g as getElement, h, a as Host } from './index-5606614b.js';
import { j as awaitTopbar } from './helpers-88f72b54.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;transition:color 0.3s;-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 pn-icon .pn-icon-svg path{fill:#5e554a;transition:fill 0.3s}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);transition:opacity 0.15s cubic-bezier(0.7, 0, 0.3, 1);transform:translateX(-50%);width:max-content;opacity:0;pointer-events:none}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 PnReadOnlyButtonStyle0 = pnReadOnlyButtonCss;
const PnReadOnlyButton = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.readOnlyModeText = '';
this.tooltipOpen = false;
this.tooltipEl = undefined;
this.tooltipDx = undefined;
this.icon = undefined;
this.leftIcon = false;
this.iconOnly = false;
this.small = false;
this.language = null;
}
get hostElement() { return getElement(this); }
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: '1e29735dfe7c0036e154cd8c437d88545c9e1d15', class: "pn-read-only-button" }, h("button", { key: '1e7a05e95d74a546d99eecba43dda304cf06109a', class: this.getClassNames(), "data-tooltip-open": this.tooltipOpen, disabled: true }, !this.iconOnly && h("slot", { key: '9dfde2d830a8ddb3598621d0da2823b56c7ad179' }), this.icon && h("pn-icon", { key: 'a2e4e9233183d14069c36301f3c137d6924dc999', icon: this.icon }), this.iconOnly && (h("span", { key: '3b55118ec825dbdaef6c4c01985ad9b1d7bd4258', class: "read-only-icon-only" }, h("slot", { key: '34145eedc9f229ee2a46ce774d28152ec7f83189' }))), h("div", { key: '6ff21cdb9856d2f8d2c9958ef08fe31662a3885d', class: "button-tooltip" }, this.readOnlyModeText))));
}
static get watchers() { return {
"language": ["setReadOnlyModeText"],
"tooltipOpen": ["openHandler"]
}; }
};
PnReadOnlyButton.style = PnReadOnlyButtonStyle0;
export { PnReadOnlyButton as pn_read_only_button };
//# sourceMappingURL=pn-read-only-button.entry.js.map