@postnord/web-components
Version:
PostNord Web Components
878 lines (877 loc) • 32.7 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { Host, h } from "@stencil/core";
import { ripple } from "../../../index";
/**
* The `pn-button` is built with a native `button` or `a` element, if you use the `href` attribute.
*
* @nativeClick Use the `click` event to listen when the button is clicked.
*/
export class PnButton {
buttonEl;
tooltipEl;
tooltipDx;
openEvents = ['mouseover', 'focus'];
closeEvents = ['mouseleave', 'blur', 'touchcancel', 'touchleave'];
eventListeners = [...this.openEvents, ...this.closeEvents];
hostElement;
tooltipOpen = false;
tooltipUpwards = false;
/** The label of the button, this is the same as using the default slot. @since v7.4.0 */
label = '';
/**
* Select the button appearance: default (blue), `light` (white) and `warning` (red).
*
* @category Visual
*/
appearance = '';
/**
* Select the button variant: default (colored background), `outlined` (bordered, no background) and `borderless` (borderless, no background).
*
* @category Visual
*/
variant = '';
/** Use the small button. @category Visual */
small = false;
/** Display the loading indicator. @category Visual */
loading = false;
/**
* The SVG content of the icon you want.
* @see {@link https://portal.postnord.com/web-components/?path=/docs/docs-assets--docs pn-design-assets}
* @category Icon
*/
icon;
/**
* Turn the button into an icon only. Requires `icon` and one of the following props to work: `tooltip`, `arialabel` or `arialabelledby`.
* @summary __You need an `icon` selected, as well as either `tooltip`, `arialabel` or `arialabelledby` for this to work__.
* @see {@link icon}
* @since v7.4.0
* @category Icon
*/
iconOnly = false;
/**
* Place the `icon` to the left of the button.
*
* @summary __You need an `icon` selected for this to work__.
* @see {@link icon}
* @category Icon
*/
leftIcon = false;
/**
* When the user focus/hover the button, the `tooltip` text will show up.
*
* @category Tooltip
*/
tooltip;
/**
* Prefer the tooltip to open upwards. Will still go downwards if there is no space.
* @since v7.4.0
* @category Tooltip
*/
tooltipUp = false;
/** Select HTML button type. @category Button */
type = 'button';
/**
* Connect this button to a HTML form.
* @category Button
* @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form HTML button form}
*/
form;
/** Pass an href to make the button into link (a-tag). @category Link */
href;
/** The rel attribute of the link. @category Link */
rel;
/** The target attribute of the link. @category Link */
target;
/** The download attribute of the link. @category Link */
download;
/** HTML ID. @category HTML attributes */
buttonId = null;
/** HTML aria-label attribute. @category HTML attributes */
arialabel = null;
/** HTML aria-labelledby attribute. @category HTML attributes */
arialabelledby = null;
/** HTML aria-current attribute. @since v7.9.0 @category HTML attributes */
ariacurrent = null;
/** HTML aria-controls attribute. @category HTML attributes */
ariacontrols = null;
/** HTML aria-pressed attribute. @category HTML attributes */
ariapressed = null;
/** HTML aria-haspopup attribute. @category HTML attributes */
ariahaspopup = null;
/** HTML aria-expanded attribute. @category HTML attributes */
ariaexpanded = null;
/** HTML tabindex. @category HTML attributes */
noTab = false;
openHandler() {
if (this.tooltipOpen)
this.checkTooltipPosition();
}
iconOnlyHandler() {
this.checkTooltipPosition();
if (this.tooltip)
this.initTooltip();
else
this.removeTooltip();
}
/**
* This event is fired when the `button`/`a` element of the `pn-button` is clicked.
* Setting an eventListener for `click` on the `pn-button` will trigger if you click outside of the button area
* or if the button is `disabled` with the `loading` prop.
* @since v7.4.0
**/
pnClick;
componentWillLoad() {
this.tooltipUpwards = this.tooltipUp;
}
componentDidLoad() {
this.iconOnlyHandler();
}
getRect(element) {
return element.getBoundingClientRect();
}
initTooltip() {
this.eventListeners.forEach(e => this.buttonEl.addEventListener(e, this.toggleTooltip));
}
removeTooltip() {
this.eventListeners.forEach(e => this.buttonEl.removeEventListener(e, this.toggleTooltip));
}
toggleTooltip = (event) => {
this.tooltipOpen = this.openEvents.includes(event.type);
};
setTooltipOffset() {
this.tooltipEl.style.setProperty('--pn-dx', `${this.tooltipDx}px`);
}
checkTooltipPosition() {
this.tooltipEl.style.transform = 'translateX(-50%)';
this.tooltipUpwards = this.tooltipUp;
requestAnimationFrame(() => {
const { top, x, y, right, height } = this.getRect(this.tooltipEl);
const extraMargin = 16;
this.tooltipDx = 0;
this.tooltipUpwards = this.tooltipUp ? top > height : y + height > window.innerHeight;
this.tooltipEl.style.transform = '';
if (x < 0)
this.tooltipDx = x * -1 + extraMargin;
if (right > window.innerWidth)
this.tooltipDx = window.innerWidth - right - extraMargin - 8;
requestAnimationFrame(() => this.setTooltipOffset());
});
}
getAttributes() {
const attrs = this.href
? {
'href': this.href,
'rel': !this.rel && this.target === '_blank' ? 'noopener' : this.rel,
'target': this.target ?? null,
'download': this.download ?? null,
'aria-current': this.ariacurrent,
'aria-disabled': this.loading ? 'true' : null,
}
: {
'type': this.type,
'form': this.form,
'disabled': this.loading,
'aria-pressed': this.ariapressed,
'aria-controls': this.ariacontrols,
'aria-haspopup': this.ariahaspopup,
'aria-expanded': this.ariaexpanded,
};
const appearances = ['light', 'warning'];
const variations = ['borderless', 'outlined'];
return {
'tabindex': this.noTab || (this.href && this.loading) ? '-1' : null,
'data-small': this.small,
'data-loading': this.loading,
'data-tooltip-open': this.tooltipOpen,
'data-tooltip-upwards': this.tooltipUpwards,
'data-icon-only': this.showIconOnly(),
'data-left-icon': this.leftIcon,
'data-appearance': appearances.includes(this.appearance) ? this.appearance : null,
'data-variant': variations.includes(this.variant) ? this.variant : null,
...attrs,
};
}
getTagName() {
return this.href ? 'a' : 'button';
}
showIconOnly() {
return !!this.icon && this.iconOnly && !!(this.tooltip || this.arialabel || this.arialabelledby);
}
handleClick(event) {
ripple(event, this.hostElement, '.pn-button-bg');
this.pnClick.emit(event);
}
render() {
const TagName = this.getTagName();
return (h(Host, { key: '9fd62df52e09b5f7915c1652c3bd23c47c40db42' }, h(TagName, { key: 'aecef05e4c20bb9c501399f18b7290a33e5d82e7', class: "pn-button", id: this.buttonId, "aria-label": this.arialabel, "aria-labelledby": this.arialabelledby, onClick: e => this.handleClick(e), ...this.getAttributes(), ref: (el) => (this.buttonEl = el) }, h("div", { key: '9cb56181926a77cd985be9447dd5277720370bf6', class: "pn-button-bg" }), h("div", { key: 'f81963c493162009d2219d72171f753c3ba5dcb8', class: "pn-button-content" }, h("div", { key: 'd6cc476c9bb3eaa59ae9cf80700b33e4bc836494', class: "pn-button-text", hidden: this.showIconOnly() }, this.label, h("slot", { key: '83b07110e17088f980e4a7f0094f5330f7dcc17b' })), !!this.icon && h("pn-icon", { key: '6d352caac885f7f5cf3819a7b555e278e7761259', icon: this.icon })), h("pn-spinner", { key: '3176c1f592b5e48c14f7baccc9366bf0fc0187dd', light: true }), h("div", { key: 'b97ecf99cdf1c4fa0c8db3b26c2eac33c5c9bba4', class: "pn-button-tooltip", hidden: !this.tooltip, ref: el => (this.tooltipEl = el) }, h("span", { key: '7825cd9635f5897db28ee4b32d2ac56a8c9a9b0d', class: "pn-button-tooltip-text" }, this.tooltip)))));
}
static get is() { return "pn-button"; }
static get originalStyleUrls() {
return {
"$": ["pn-button.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-button.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.4.0"
}],
"text": "The label of the button, this is the same as using the default slot."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "label",
"defaultValue": "''"
},
"appearance": {
"type": "string",
"mutable": false,
"complexType": {
"original": "PnButtonAppearance",
"resolved": "\"\" | \"light\" | \"warning\"",
"references": {
"PnButtonAppearance": {
"location": "import",
"path": "@/index",
"id": "src/index.ts::PnButtonAppearance",
"referenceLocation": "PnButtonAppearance"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Visual"
}],
"text": "Select the button appearance: default (blue), `light` (white) and `warning` (red)."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "appearance",
"defaultValue": "''"
},
"variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "PnButtonVariant",
"resolved": "\"\" | \"borderless\" | \"outlined\"",
"references": {
"PnButtonVariant": {
"location": "import",
"path": "@/index",
"id": "src/index.ts::PnButtonVariant",
"referenceLocation": "PnButtonVariant"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Visual"
}],
"text": "Select the button variant: default (colored background), `outlined` (bordered, no background) and `borderless` (borderless, no background)."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "variant",
"defaultValue": "''"
},
"small": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Visual"
}],
"text": "Use the small button."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "small",
"defaultValue": "false"
},
"loading": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Visual"
}],
"text": "Display the loading indicator."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "loading",
"defaultValue": "false"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "see",
"text": "{@link https://portal.postnord.com/web-components/?path=/docs/docs-assets--docs pn-design-assets}"
}, {
"name": "category",
"text": "Icon"
}],
"text": "The SVG content of the icon you want."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "icon"
},
"iconOnly": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "summary",
"text": "__You need an `icon` selected, as well as either `tooltip`, `arialabel` or `arialabelledby` for this to work__."
}, {
"name": "see",
"text": "{@link icon }"
}, {
"name": "since",
"text": "v7.4.0"
}, {
"name": "category",
"text": "Icon"
}],
"text": "Turn the button into an icon only. Requires `icon` and one of the following props to work: `tooltip`, `arialabel` or `arialabelledby`."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "icon-only",
"defaultValue": "false"
},
"leftIcon": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "summary",
"text": "__You need an `icon` selected for this to work__."
}, {
"name": "see",
"text": "{@link icon }"
}, {
"name": "category",
"text": "Icon"
}],
"text": "Place the `icon` to the left of the button."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "left-icon",
"defaultValue": "false"
},
"tooltip": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Tooltip"
}],
"text": "When the user focus/hover the button, the `tooltip` text will show up."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tooltip"
},
"tooltipUp": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.4.0"
}, {
"name": "category",
"text": "Tooltip"
}],
"text": "Prefer the tooltip to open upwards. Will still go downwards if there is no space."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tooltip-up",
"defaultValue": "false"
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'button' | 'reset' | 'submit' | ''",
"resolved": "\"\" | \"button\" | \"reset\" | \"submit\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Button"
}],
"text": "Select HTML button type."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "type",
"defaultValue": "'button'"
},
"form": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Button"
}, {
"name": "see",
"text": "{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form HTML button form}"
}],
"text": "Connect this button to a HTML form."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "form"
},
"href": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Link"
}],
"text": "Pass an href to make the button into link (a-tag)."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "href"
},
"rel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Link"
}],
"text": "The rel attribute of the link."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "rel"
},
"target": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Link"
}],
"text": "The target attribute of the link."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "target"
},
"download": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Link"
}],
"text": "The download attribute of the link."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "download"
},
"buttonId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML attributes"
}],
"text": "HTML ID."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "button-id",
"defaultValue": "null"
},
"arialabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML attributes"
}],
"text": "HTML aria-label attribute."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "arialabel",
"defaultValue": "null"
},
"arialabelledby": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML attributes"
}],
"text": "HTML aria-labelledby attribute."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "arialabelledby",
"defaultValue": "null"
},
"ariacurrent": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.9.0"
}, {
"name": "category",
"text": "HTML attributes"
}],
"text": "HTML aria-current attribute."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "ariacurrent",
"defaultValue": "null"
},
"ariacontrols": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML attributes"
}],
"text": "HTML aria-controls attribute."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "ariacontrols",
"defaultValue": "null"
},
"ariapressed": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML attributes"
}],
"text": "HTML aria-pressed attribute."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "ariapressed",
"defaultValue": "null"
},
"ariahaspopup": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML attributes"
}],
"text": "HTML aria-haspopup attribute."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "ariahaspopup",
"defaultValue": "null"
},
"ariaexpanded": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML attributes"
}],
"text": "HTML aria-expanded attribute."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "ariaexpanded",
"defaultValue": "null"
},
"noTab": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML attributes"
}],
"text": "HTML tabindex."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "no-tab",
"defaultValue": "false"
}
};
}
static get states() {
return {
"tooltipOpen": {},
"tooltipUpwards": {}
};
}
static get events() {
return [{
"method": "pnClick",
"name": "pnClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.4.0"
}],
"text": "This event is fired when the `button`/`a` element of the `pn-button` is clicked.\nSetting an eventListener for `click` on the `pn-button` will trigger if you click outside of the button area\nor if the button is `disabled` with the `loading` prop."
},
"complexType": {
"original": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}];
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "tooltipOpen",
"methodName": "openHandler"
}, {
"propName": "tooltip",
"methodName": "iconOnlyHandler"
}];
}
}