@postnord/web-components
Version:
PostNord Web Components
249 lines (248 loc) • 9.2 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h, Host } from "@stencil/core";
import { awaitTopbar } from "../../../globals/helpers";
/**
* There are no events or features other than the `icon`, `small` and `language` prop.
*
* Our rule is to not have disabled buttons.
* However, this component is an exception for a very specific use case regarding portal users.
*/
export class PnReadOnlyButton {
hostElement;
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 is() { return "pn-read-only-button"; }
static get originalStyleUrls() {
return {
"$": ["pn-read-only-button.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-read-only-button.css"]
};
}
static get properties() {
return {
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The SVG content of the icon you want."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "icon"
},
"leftIcon": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Icon on the left side instead of on the right."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "left-icon",
"defaultValue": "false"
},
"iconOnly": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If you're using a button with only an icon, button text is still REQUIRED for the tooltip."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "icon-only",
"defaultValue": "false"
},
"small": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Smaller button."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "small",
"defaultValue": "false"
},
"language": {
"type": "string",
"mutable": false,
"complexType": {
"original": "PnLanguages",
"resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
"references": {
"PnLanguages": {
"location": "import",
"path": "@/globals/types",
"id": "src/globals/types.ts::PnLanguages",
"referenceLocation": "PnLanguages"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set the language manually."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "language",
"defaultValue": "null"
}
};
}
static get states() {
return {
"readOnlyModeText": {},
"tooltipOpen": {},
"tooltipEl": {},
"tooltipDx": {}
};
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "language",
"methodName": "setReadOnlyModeText"
}, {
"propName": "tooltipOpen",
"methodName": "openHandler"
}];
}
}