@postnord/web-components
Version:
PostNord Web Components
225 lines (219 loc) • 11.7 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
import { a as chevron_left, c as chevron_right } from './chevron_right.js';
import { k as awaitTopbar, e as en } from './helpers.js';
import { d as defineCustomElement$4 } from './pn-button2.js';
import { d as defineCustomElement$3 } from './pn-icon2.js';
import { d as defineCustomElement$2 } from './pn-spinner2.js';
var translations = {
LEFT: {
sv: 'Bläddra åt vänster',
en: 'Scroll to the left',
da: 'Rul til venstre',
fi: 'Vieritä vasemmalle',
no: 'Rull til venstre',
},
RIGHT: {
sv: 'Bläddra åt höger',
en: 'Scroll to the right',
da: 'Rul til højre',
fi: 'Vieritä oikealle',
no: 'Rull til høyre',
},
};
const pnTablistCss = "pn-tablist{width:100%;min-width:0;position:relative;border-bottom:0.0625em solid #d3cecb;display:block}pn-tablist .pn-tablist,pn-tablist ol,pn-tablist ul{display:flex;width:100%;flex-direction:row;gap:1em;position:relative;list-style:none;padding:0;margin:0}pn-tablist .pn-tablist[data-stacked] .pn-tab,pn-tablist ol[data-stacked] .pn-tab,pn-tablist ul[data-stacked] .pn-tab{margin:0.5em 0.25em 0.75em;gap:0.25em;flex-direction:column}pn-tablist .pn-tablist[data-small] .pn-tab,pn-tablist ol[data-small] .pn-tab,pn-tablist ul[data-small] .pn-tab{margin:0.25em 0.25em 0.75em}pn-tablist .pn-tablist[data-small] .pn-tab>*:not(pn-icon),pn-tablist ol[data-small] .pn-tab>*:not(pn-icon),pn-tablist ul[data-small] .pn-tab>*:not(pn-icon){font-size:0.875em}pn-tablist .pn-tablist[data-large] .pn-tab>*:not(pn-icon),pn-tablist ol[data-large] .pn-tab>*:not(pn-icon),pn-tablist ul[data-large] .pn-tab>*:not(pn-icon){font-size:1.25em}pn-tablist .pn-tablist[data-scroll],pn-tablist ol[data-scroll],pn-tablist ul[data-scroll]{overflow-y:hidden;overflow-x:auto;scroll-snap-type:x mandatory}pn-tablist .pn-tablist::-webkit-scrollbar,pn-tablist ol::-webkit-scrollbar,pn-tablist ul::-webkit-scrollbar{display:none}pn-tablist .pn-tablist-line{height:0.25em;position:absolute;bottom:0}pn-tablist .pn-tablist-line-item{position:absolute;width:100%;height:inherit;border-radius:0.25em 0.25em 0 0;transform-origin:left center;opacity:0;transition-property:transform, opacity, width;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tablist .pn-tablist-line-item{transition-duration:0s;transition-delay:0s}}pn-tablist .pn-tablist-line-active{z-index:1;background-color:#005d92;width:var(--pn-active-width);transform:translateX(var(--pn-active-offset));opacity:var(--pn-active-opacity)}pn-tablist .pn-tablist-line-hovered{background-color:#00a0d6;width:var(--pn-hover-width);transform:translateX(var(--pn-hover-offset));opacity:var(--pn-hover-opacity)}pn-tablist .pn-tablist-scroll{position:absolute;top:50%;left:0;right:0;pointer-events:none;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;z-index:1;height:100%}pn-tablist .pn-tablist-arrow{pointer-events:all;transform:scaleY(0);opacity:0;visibility:hidden;transition-property:transform, opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tablist .pn-tablist-arrow{transition-duration:0s;transition-delay:0s}}pn-tablist .pn-tablist-arrow[data-show]{opacity:1;visibility:visible;transform:scaleY(1)}";
const PnTablist$1 = /*@__PURE__*/ proxyCustomElement(class PnTablist extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.tabchange = createEvent(this, "tabchange", 7);
}
mo;
isMenu = false;
isTabHovered = false;
tabListEl;
lineActive;
lineHovered;
tabElement;
get hostElement() { return this; }
/** Display the scrolling arrows */
showScrollArrows = false;
/** Display the scroll arrow to the left */
arrowLeft = false;
/** Display the scroll arrow to the right */
arrowRight = false;
/** Give the tablist a name for screenreaders */
label;
/** The value of the tab that is currently active, each `<pn-tab value="example-value">` also expects a unique value */
value;
/** Make the tablist smaller */
small;
/** Icons are stacked vertically instead of the default rows */
stackedicons = false;
/** Manually set the language. */
language = null;
/**
* This will emit when a tab is changed. The detail property of the event will contain the value of the selected tab.
* This is the event and value you listen to when you toggle the visibility among your tabpanels.
**/
tabchange;
setValue() {
const tabs = Array.from(this.hostElement.querySelectorAll('pn-tab'));
tabs.forEach(tab => {
tab.activeTab = this.value;
});
}
scrollHandler() {
if (this.showScrollArrows) {
this.tabListEl.addEventListener('scroll', this.scrollIndicators.bind(this));
}
else {
this.tabListEl.removeEventListener('scroll', this.scrollIndicators);
}
}
setActiveTabHandler({ detail }) {
this.tabElement = detail.el;
requestAnimationFrame(() => this.activateTab(detail.el));
if (this.value === detail.val)
return;
this.value = detail.val;
this.tabchange.emit(this.value);
this.tabElement.querySelector(this.isMenu ? 'a' : 'button').focus();
}
rerender() {
requestAnimationFrame(() => {
this.scrollIndicators();
this.isTabHovered = false;
});
}
handleEnter(e) {
this.isTabHovered = true;
this.styleLines(e.target);
}
handleLeave() {
this.isTabHovered = false;
setTimeout(() => {
if (!this.isTabHovered)
this.lineHovered.style.setProperty('--pn-hover-opacity', '0');
}, 500);
}
async componentWillLoad() {
this.isMenu = this.hostElement.slot === 'menu';
if (this.language === null)
await awaitTopbar(this.hostElement);
}
componentDidLoad() {
if (this.mo)
this.mo.disconnect();
this.mo = new MutationObserver(() => {
forceUpdate(this.hostElement);
this.rerender();
});
this.mo.observe(this.hostElement, { childList: true, subtree: true });
}
componentDidRender() {
this.rerender();
this.setValue();
}
getRect(element) {
return element.getBoundingClientRect();
}
activateTab(element) {
this.styleLines(element, true);
}
styleLines(element, active = false) {
const tabListCoords = this.getRect(this.tabListEl);
const scrollOffset = this.tabListEl.scrollLeft;
const line = this.getRect(element);
const width = line.width;
const offset = line.left + scrollOffset - tabListCoords.left;
const cssVar = active ? 'active' : 'hover';
const prop = active ? 'lineActive' : 'lineHovered';
this[prop].style.setProperty(`--pn-${cssVar}-width`, `${width}px`);
this[prop].style.setProperty(`--pn-${cssVar}-offset`, `${offset}px`);
this[prop].style.setProperty(`--pn-${cssVar}-opacity`, '1');
}
scrollIndicators() {
const { scrollWidth, scrollLeft } = this.tabListEl;
const { clientWidth } = this.hostElement;
this.showScrollArrows = scrollWidth > clientWidth;
this.arrowLeft = this.showScrollArrows && scrollLeft > 0;
this.arrowRight = this.showScrollArrows && clientWidth + 16 + scrollLeft < scrollWidth;
}
scroll({ right = false } = {}) {
const tabList = this.tabListEl;
const { scrollLeft, clientWidth } = tabList;
let left = scrollLeft;
// The width of the scroll arrow is 32px, so we remove that from this calculation so the scroll
const scrollAmount = clientWidth - 64;
if (right)
left += scrollAmount;
else
left -= scrollAmount;
tabList.scrollTo({
left,
behavior: 'smooth',
});
}
translate(prop) {
return translations?.[prop]?.[this.language || en];
}
render() {
return (h(Host, { key: 'd81c8ad3c311813a2212ed85146df74937f122bd' }, h("nav", { key: '20b167d0ce76dac66a921690ded29dd15bbbdefe', class: "pn-tablist", role: this.isMenu ? null : 'tablist', "aria-label": this.label, "data-stacked": this.stackedicons, "data-small": !this.isMenu && this.small, "data-large": this.isMenu, "data-scroll": this.showScrollArrows, ref: el => (this.tabListEl = el) }, h("slot", { key: 'f4544b5bb3640f3f53f696bbb0106c2aadab2357' }), h("div", { key: '2063a1b97d4a756d651293dd04281a4cc4906efd', class: "pn-tablist-line" }, h("div", { key: 'fe4bb041840a99a51d6c645a7bc7a0bb8e093ac5', ref: el => (this.lineActive = el), class: "pn-tablist-line-item pn-tablist-line-active" }), h("div", { key: 'bdb76078eb6d1cd031af5ed901907a20492fb862', ref: el => (this.lineHovered = el), class: "pn-tablist-line-item pn-tablist-line-hovered" }))), h("div", { key: '948d94ed36ffae659a2c6fbd8044ea1de913f385', class: "pn-tablist-scroll" }, h("pn-button", { key: 'ccde6aac551f227c7bdaf2f93d71796d57311e77', class: "pn-tablist-arrow", "data-show": this.arrowLeft, onClick: () => this.scroll(), noTab: true, appearance: "light", variant: "outlined", icon: chevron_left, iconOnly: true, arialabel: this.translate('LEFT'), small: true }), h("pn-button", { key: 'a1ae5720e2cdcb8ba1fbbcfb3052da28c00bed93', class: "pn-tablist-arrow", "data-show": this.arrowRight, onClick: () => this.scroll({ right: true }), noTab: true, appearance: "light", variant: "outlined", icon: chevron_right, iconOnly: true, arialabel: this.translate('RIGHT'), small: true }))));
}
static get watchers() { return {
"value": ["setValue"],
"showScrollArrows": ["scrollHandler"]
}; }
static get style() { return pnTablistCss; }
}, [260, "pn-tablist", {
"label": [1],
"value": [1537],
"small": [4],
"stackedicons": [4],
"language": [1],
"showScrollArrows": [32],
"arrowLeft": [32],
"arrowRight": [32]
}, [[0, "setActiveTab", "setActiveTabHandler"], [9, "resize", "rerender"], [0, "tabEnter", "handleEnter"], [0, "tabLeave", "handleLeave"]], {
"value": ["setValue"],
"showScrollArrows": ["scrollHandler"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["pn-tablist", "pn-button", "pn-icon", "pn-spinner"];
components.forEach(tagName => { switch (tagName) {
case "pn-tablist":
if (!customElements.get(tagName)) {
customElements.define(tagName, PnTablist$1);
}
break;
case "pn-button":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "pn-icon":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "pn-spinner":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const PnTablist = PnTablist$1;
const defineCustomElement = defineCustomElement$1;
export { PnTablist, defineCustomElement };
//# sourceMappingURL=pn-tablist.js.map
//# sourceMappingURL=pn-tablist.js.map