@postnord/web-components
Version:
PostNord Web Components
60 lines (59 loc) • 2.61 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { createComponent } from "../../../globals/documentation/story";
const items = [
{ label: 'Dashboard', href: '/dashboard/', value: 'dashboard', icon: 'dashboard' },
{ label: 'Bolt', href: '/bolt/', value: 'bolt', icon: 'bolt' },
{ label: 'Shop', href: '/shop/', value: 'shop', icon: 'shop' },
{ label: 'Settings', href: '/settings/', value: 'settings', icon: 'settings' },
];
const idButton = (id) => `pn-${id}-button`;
const idPanel = (id) => `pn-${id}-panel`;
export function createPnTablist(args, { isTablist = false, isMenu = false }) {
const menu = createComponent('pn-tablist', isTablist ? args : { value: args.value, label: 'Menu' });
isMenu && menu.setAttribute('slot', 'menu');
items.forEach(({ label, value, icon, href }, index) => {
const isCustomTab = !isTablist && index === 0;
const tab = createComponent('pn-tab', isCustomTab ? args : { label, value, href, icon, ariacontrols: idPanel(value), tabid: idButton(value) });
if (!isMenu)
tab.removeAttribute('href');
// If we are in the `item` story and no icon is used, remove the attribute.
if (!isTablist && !args.icon)
tab.removeAttribute('icon');
tab.addEventListener('click', e => {
e.preventDefault();
});
menu.appendChild(tab);
});
if (isMenu) {
return menu;
}
const panels = document.createElement('div');
panels.appendChild(menu);
items.forEach(({ value, label }) => {
const panel = document.createElement('div');
panel.innerText = `This is a panel for ${label}`;
panel.setAttribute('id', idPanel(value));
panel.setAttribute('role', 'tabpanel');
panel.setAttribute('tabindex', '0');
panel.setAttribute('aria-labelledby', idButton(value));
args.value !== value && panel.setAttribute('hidden', 'true');
panels.appendChild(panel);
});
menu.addEventListener('tabchange', (e) => {
const panelId = `pn-${e.detail}-panel`;
const all = Array.from(panels.querySelectorAll('[role="tabpanel"]'));
all.forEach(el => (el.hidden = el.id !== panelId));
});
document.querySelector('style').innerText += `
[role="tabpanel"] { outline: 0; padding: 1em; margin-top: 1em; border-radius: 0.5em; transition: box-shadow 0.2s ease-in-out; }
[role="tabpanel"]:focus {
background-color: white;
box-shadow: 0 0 0 0.125em #ffffff, 0 0 0 0.25em #005d92;
}
`;
return panels;
}
//# sourceMappingURL=renderTablist.js.map