@postnord/web-components
Version:
PostNord Web Components
333 lines (332 loc) • 12.4 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h, Host } from "@stencil/core";
import { ripple } from "../../../../globals/helpers";
export class PnTab {
tag = 'button';
hostElement;
/** Set a label for the tab. */
label;
/** This is the value that will be matched with `pn-tablist` value. (required) */
value;
/** Turns the tab from a `button` to an `a` element, but only if the `pn-tablist` is inside a `pn-header`. */
href;
/** The SVG content of the icon you want to display */
icon;
/** Use the ID of the container that this tab controls. */
ariacontrols;
/** Tab ID, use if you want to have the tab container be `aria-labelledby` by this tab. */
tabid;
/** Is set by `pn-tablist`, don't use this prop. @hide true */
activeTab;
/** Used by `pn-tab` to communicate with `pn-tablist`. Emits the selected tab value and element. */
setActiveTab;
setActiveTabHandler({ click = false, element } = {}) {
if (click || this.isActive()) {
const val = element?.value || this.value;
const el = (element?.value && element) || this.hostElement;
this.setActiveTab.emit({
val,
el,
});
}
}
/** Used by `pn-tab` to communicate with `pn-tablist`. Emits when the tab gets focus. */
tabEnter;
triggerEnter(event) {
this.tabEnter.emit(event);
}
/** Used by `pn-tab` to communicate with `pn-tablist`. Emits when the tab is blured. */
tabLeave;
triggerLeave(event) {
this.tabLeave.emit(event);
}
componentWillLoad() {
this.tabTag();
}
componentDidUpdate() {
this.setActiveTabHandler();
}
componentDidLoad() {
this.setActiveTabHandler();
}
arrowKeyNav(event) {
if (!/^(ArrowRight|ArrowLeft|Home|End)$/.test(event.key))
return;
event.preventDefault();
// Get tablist parent
const parent = event.target.closest('pn-tablist');
const list = Array.from(parent.querySelectorAll('pn-tab'));
const first = list[0];
const last = list[list.length - 1];
const nextElement = this.hostElement.nextElementSibling;
const previousElement = this.hostElement.previousElementSibling;
if (event.key === 'Home')
this.setActiveTabHandler({ element: first });
if (event.key === 'End')
this.setActiveTabHandler({ element: last });
if (event.key === 'ArrowRight') {
// Check the next element value. We do this because the last element i a DIV element. If no value, go to the first element.
this.setActiveTabHandler({ element: nextElement?.value ? nextElement : first });
}
if (event.key === 'ArrowLeft') {
// Go to the last element if there is no element to your left.
this.setActiveTabHandler({ element: previousElement?.value ? previousElement : last });
}
}
isActive() {
return this.activeTab === this.value;
}
tabTag() {
const isMenu = this.hostElement.closest('pn-tablist');
this.tag = isMenu.slot === 'menu' ? 'a' : 'button';
}
renderProperties() {
return this.tag === 'a'
? {
'href': this.href,
'aria-current': this.isActive() ? 'page' : 'false',
}
: {
'tabindex': this.isActive() ? 0 : -1,
'type': 'button',
'role': 'tab',
'aria-selected': this.isActive().toString(),
'aria-controls': this.ariacontrols,
};
}
handleClick(e) {
this.setActiveTabHandler({ click: true });
ripple(e, this.hostElement, '.pn-tab');
}
render() {
const Tag = this.tag;
return (h(Host, { key: '6549002f64a0f289189a941e00bc3a7ed5d3dc35' }, h(Tag, { key: '69b99a3df97967208a40c890a0b1001b2ea3cf64', id: this.tabid, class: "pn-tab", ...this.renderProperties(), onClick: (e) => this.handleClick(e), onMouseEnter: (e) => this.triggerEnter(e), onFocus: (e) => this.triggerEnter(e), onMouseLeave: (e) => this.triggerLeave(e), onBlur: (e) => this.triggerLeave(e), onKeyDown: (e) => this.arrowKeyNav(e) }, !!this.icon && h("pn-icon", { key: '11f3063b3d4612fcf51dd9a9bfeca8ba8fdd353b', icon: this.icon }), h("slot", { key: '60f34de2c5407fec8d443765f10d839c00f6f8de' }), h("span", { key: 'dae8cccba39a05351f61771c73a99beaaff94db2' }, this.label))));
}
static get is() { return "pn-tab"; }
static get originalStyleUrls() {
return {
"$": ["pn-tab.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-tab.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Set a label for the tab."
},
"getter": false,
"setter": false,
"attribute": "label",
"reflect": false
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "This is the value that will be matched with `pn-tablist` value. (required)"
},
"getter": false,
"setter": false,
"attribute": "value",
"reflect": false
},
"href": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Turns the tab from a `button` to an `a` element, but only if the `pn-tablist` is inside a `pn-header`."
},
"getter": false,
"setter": false,
"attribute": "href",
"reflect": false
},
"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 to display"
},
"getter": false,
"setter": false,
"attribute": "icon",
"reflect": false
},
"ariacontrols": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Use the ID of the container that this tab controls."
},
"getter": false,
"setter": false,
"attribute": "ariacontrols",
"reflect": false
},
"tabid": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Tab ID, use if you want to have the tab container be `aria-labelledby` by this tab."
},
"getter": false,
"setter": false,
"attribute": "tabid",
"reflect": false
},
"activeTab": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "hide",
"text": "true"
}],
"text": "Is set by `pn-tablist`, don't use this prop."
},
"getter": false,
"setter": false,
"attribute": "active-tab",
"reflect": false
}
};
}
static get events() {
return [{
"method": "setActiveTab",
"name": "setActiveTab",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Used by `pn-tab` to communicate with `pn-tablist`. Emits the selected tab value and element."
},
"complexType": {
"original": "{ val: string; el: HTMLPnTabElement }",
"resolved": "{ val: string; el: HTMLPnTabElement; }",
"references": {
"HTMLPnTabElement": {
"location": "global",
"id": "global::HTMLPnTabElement"
}
}
}
}, {
"method": "tabEnter",
"name": "tabEnter",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Used by `pn-tab` to communicate with `pn-tablist`. Emits when the tab gets focus."
},
"complexType": {
"original": "MouseEvent | FocusEvent",
"resolved": "FocusEvent | MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
},
"FocusEvent": {
"location": "global",
"id": "global::FocusEvent"
}
}
}
}, {
"method": "tabLeave",
"name": "tabLeave",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Used by `pn-tab` to communicate with `pn-tablist`. Emits when the tab is blured."
},
"complexType": {
"original": "MouseEvent | FocusEvent",
"resolved": "FocusEvent | MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
},
"FocusEvent": {
"location": "global",
"id": "global::FocusEvent"
}
}
}
}];
}
static get elementRef() { return "hostElement"; }
}
//# sourceMappingURL=pn-tab.js.map