/*!
 * Built with Stencil
 * By PostNord.
 */
import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, f as forceUpdate, h, a as Host } from './index-CAEP792y.js';
import { a as chevron_left, c as chevron_right } from './chevron_right-B6SVpr61.js';
import { awaitTopbar, en } from './index.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 = () => `${transformTag("pn-tablist")}{width:100%;min-width:0;position:relative;border-bottom:0.0625em solid #d3cecb;display:block}${transformTag("pn-tablist")} .pn-tablist,${transformTag("pn-tablist")} ol,${transformTag("pn-tablist")} ul{display:flex;width:100%;flex-direction:row;gap:1em;position:relative;list-style:none;padding:0;margin:0}${transformTag("pn-tablist")} .pn-tablist[data-stacked] .pn-tab,${transformTag("pn-tablist")} ol[data-stacked] .pn-tab,${transformTag("pn-tablist")} ul[data-stacked] .pn-tab{margin:0.5em 0.25em 0.75em;gap:0.25em;flex-direction:column}${transformTag("pn-tablist")} .pn-tablist[data-small] .pn-tab,${transformTag("pn-tablist")} ol[data-small] .pn-tab,${transformTag("pn-tablist")} ul[data-small] .pn-tab{margin:0.25em 0.25em 0.75em}${transformTag("pn-tablist")} .pn-tablist[data-small] .pn-tab>*:not(${transformTag("pn-icon")}),${transformTag("pn-tablist")} ol[data-small] .pn-tab>*:not(${transformTag("pn-icon")}),${transformTag("pn-tablist")} ul[data-small] .pn-tab>*:not(${transformTag("pn-icon")}){font-size:0.875em}${transformTag("pn-tablist")} .pn-tablist[data-large] .pn-tab>*:not(${transformTag("pn-icon")}),${transformTag("pn-tablist")} ol[data-large] .pn-tab>*:not(${transformTag("pn-icon")}),${transformTag("pn-tablist")} ul[data-large] .pn-tab>*:not(${transformTag("pn-icon")}){font-size:1.25em}${transformTag("pn-tablist")} .pn-tablist[data-scroll],${transformTag("pn-tablist")} ol[data-scroll],${transformTag("pn-tablist")} ul[data-scroll]{overflow-y:hidden;overflow-x:auto;scroll-snap-type:x mandatory}${transformTag("pn-tablist")} .pn-tablist::-webkit-scrollbar,${transformTag("pn-tablist")} ol::-webkit-scrollbar,${transformTag("pn-tablist")} ul::-webkit-scrollbar{display:none}${transformTag("pn-tablist")} .pn-tablist-line{height:0.25em;position:absolute;bottom:0}${transformTag("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){${transformTag("pn-tablist")} .pn-tablist-line-item{transition-duration:0s;transition-delay:0s}}${transformTag("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)}${transformTag("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)}${transformTag("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%}${transformTag("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){${transformTag("pn-tablist")} .pn-tablist-arrow{transition-duration:0s;transition-delay:0s}}${transformTag("pn-tablist")} .pn-tablist-arrow[data-show]{opacity:1;visibility:visible;transform:scaleY(1)}`;

const PnTablist = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.tabchange = createEvent(this, "tabchange");
    }
    mo;
    isMenu = false;
    isTabHovered = false;
    tabListEl;
    lineActive;
    lineHovered;
    tabElement;
    get hostElement() { return getElement(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(`${transformTag("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('.pn-tab').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);
    }
    connectedCallback() {
        this.mo = new MutationObserver(() => {
            forceUpdate(this.hostElement);
            this.setValue();
            this.rerender();
        });
        this.mo.observe(this.hostElement, { subtree: true, childList: true });
    }
    disconnectedCallback() {
        this.mo?.disconnect();
    }
    async componentWillLoad() {
        this.isMenu = this.hostElement.slot === 'menu';
        if (this.language === null)
            await awaitTopbar(this.hostElement);
    }
    componentDidRender() {
        this.setValue();
        this.rerender();
    }
    getRect(element) {
        return element.getBoundingClientRect();
    }
    activateTab(element) {
        this.styleLines(element, true);
        this.styleLines(element, false);
    }
    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: '41730f7c2c9bf8dcd0094e3485daaef03d32077d' }, h("nav", { key: '671968d8fc09799313c5cc84182c0f574c4c32c2', 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: '9a29c7b0b2be65f13f0c54782f95381b44184928' }), h("div", { key: '5c7d7811e65c236592cbc86ccb36a1f4b9c2d83f', class: "pn-tablist-line" }, h("div", { key: 'fa070fd0ad1bd2baaaaedcd83d3a184f9acd8775', ref: el => (this.lineActive = el), class: "pn-tablist-line-item pn-tablist-line-active" }), h("div", { key: 'f1d81e3ba4363412d5f35cae105766fbb77ba31e', ref: el => (this.lineHovered = el), class: "pn-tablist-line-item pn-tablist-line-hovered" }))), h("div", { key: '14d644cb2ae344966b8056422ce52966fb06058b', class: "pn-tablist-scroll" }, h("pn-button", { key: 'f8c8f0f36459b6415208679196ed15fb9cd482d2', 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: '588b9a9619087bd05a9d359b139240d054431848', 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": 0
            }],
        "showScrollArrows": [{
                "scrollHandler": 0
            }]
    }; }
};
PnTablist.style = pnTablistCss();

export { PnTablist as pn_tablist };
