@postnord/web-components
Version:
PostNord Web Components
147 lines (142 loc) • 7.54 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { r as ripple } from './helpers.js';
import { d as defineCustomElement$2 } from './pn-icon2.js';
const pnTabCss = "pn-tab{position:relative;overflow:hidden;flex-shrink:0;scroll-snap-align:center;display:inline-block;border-radius:0.5em}pn-tab .pn-tab{position:relative;cursor:pointer;margin:1em 0.25em;padding:0 0.25em;border:none;border-radius:0.5em;color:#2d2013;background-color:transparent;font-family:inherit;font-size:1em;font-weight:500;text-decoration:none;display:flex;gap:0.5em;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;transition-property:color, outline-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);outline:0.2rem solid transparent;outline-offset:0.2rem}pn-tab .pn-tab .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}pn-tab .pn-tab>span{line-height:1.5em}pn-tab .pn-tab>pn-icon>.pn-icon-svg path,pn-tab .pn-tab>pn-icon>.pn-icon-svg polygon{transition:fill 0.2s cubic-bezier(0.7, 0, 0.3, 1);fill:#2d2013}pn-tab .pn-tab:focus-visible{overflow:hidden;outline-color:#005d92;background-color:#ffffff}pn-tab .pn-tab[aria-selected=true],pn-tab .pn-tab[aria-current=page]{color:#005d92}pn-tab .pn-tab[aria-selected=true]>pn-icon>.pn-icon-svg path,pn-tab .pn-tab[aria-selected=true]>pn-icon>.pn-icon-svg polygon,pn-tab .pn-tab[aria-current=page]>pn-icon>.pn-icon-svg path,pn-tab .pn-tab[aria-current=page]>pn-icon>.pn-icon-svg polygon{fill:#005d92}pn-tab .pn-tab[aria-selected=true]:focus,pn-tab .pn-tab[aria-current=page]:focus{color:#0d234b}pn-tab .pn-tab[aria-selected=true]:focus pn-icon>.pn-icon-svg path,pn-tab .pn-tab[aria-selected=true]:focus pn-icon>.pn-icon-svg polygon,pn-tab .pn-tab[aria-current=page]:focus pn-icon>.pn-icon-svg path,pn-tab .pn-tab[aria-current=page]:focus pn-icon>.pn-icon-svg polygon{fill:#0d234b}";
const PnTabStyle0 = pnTabCss;
const PnTab$1 = /*@__PURE__*/ proxyCustomElement(class PnTab extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.setActiveTab = createEvent(this, "setActiveTab", 7);
this.tabEnter = createEvent(this, "tabEnter", 7);
this.tabLeave = createEvent(this, "tabLeave", 7);
this.label = undefined;
this.value = undefined;
this.href = undefined;
this.icon = undefined;
this.ariacontrols = undefined;
this.tabid = undefined;
this.activeTab = undefined;
}
tag = 'button';
get hostElement() { return this; }
/** 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: 'dcc0ceb211bc13f3610d97fc956a32cf55f09b36' }, h(Tag, { key: '7e3ffe34f1bea1e538378b710e365b1233eee86a', 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: 'ade8ed44ab722a80f051e75f06862670ddc8021c', icon: this.icon }), h("slot", { key: '1993019430a55405da6b1c7df4b36a0c14064393' }), h("span", { key: '192ebb052694bca098322500dfe4327be5bcb39f' }, this.label))));
}
static get style() { return PnTabStyle0; }
}, [4, "pn-tab", {
"label": [1],
"value": [1],
"href": [1],
"icon": [1],
"ariacontrols": [1],
"tabid": [1],
"activeTab": [1, "active-tab"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["pn-tab", "pn-icon"];
components.forEach(tagName => { switch (tagName) {
case "pn-tab":
if (!customElements.get(tagName)) {
customElements.define(tagName, PnTab$1);
}
break;
case "pn-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const PnTab = PnTab$1;
const defineCustomElement = defineCustomElement$1;
export { PnTab, defineCustomElement };
//# sourceMappingURL=pn-tab.js.map