/*!
 * Built with Stencil
 * By PostNord.
 */
import { t as transformTag, r as registerInstance, g as getElement, f as forceUpdate, h, a as Host } from './index-CAEP792y.js';
import { a as arrow_left } from './arrow_left-CQaMdITw.js';
import { a as arrow_right } from './arrow_right-D_UyW-KH.js';

const pnSegmentedControlCss = () => `${transformTag("pn-segmented-control")}{position:relative;display:inline-block;max-width:100%;overflow:hidden;border-radius:3em;transform:translateZ(0);transition-property:outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-segmented-control")}{transition-duration:0s;transition-delay:0s}}${transformTag("pn-segmented-control")}{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-segmented-control")}:focus-within,${transformTag("pn-segmented-control")}:active{outline-color:#005d92}${transformTag("pn-segmented-control")} .pn-segmented-control{display:flex;align-items:center;border-radius:3em;min-height:3em;padding:0.25em;background:#f3f2f2;position:relative;overflow-x:auto;scroll-snap-type:x mandatory}${transformTag("pn-segmented-control")} .pn-segmented-control:hover .pn-sc-bg[data-hover]{opacity:1}${transformTag("pn-segmented-control")} .pn-segmented-control::-webkit-scrollbar{display:none}${transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg{position:absolute;top:50%;transform:translateY(-50%);will-change:transform;left:0;border-radius:inherit;transition-property:width, transform, background-color, opacity, box-shadow;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg{transition-duration:0s;transition-delay:0s}}${transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-active]{box-shadow:0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);border:0.0625em solid #005d92;background-color:#ffffff;z-index:1}${transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-hover]{background-color:#e0f8ff;opacity:0;border:0.25em solid transparent;z-index:0}${transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-hover][data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}${transformTag("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}${transformTag("pn-segmented-control")} .pn-sc-arrows{position:absolute;top:50%;transform:translateY(-50%);left:0;height:100%;width:100%;z-index:3;display:flex;justify-content:space-between;align-items:center;pointer-events:none}${transformTag("pn-segmented-control")} .pn-sc-arrows svg{width:1.5em}${transformTag("pn-segmented-control")} .pn-sc-arrows svg.pn-icon-svg path{fill:#005d92}${transformTag("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow{cursor:pointer;pointer-events:all;width:2.5em;height:2.5em;background:#ffffff;border:none;outline:none;display:flex;align-items:center;justify-content:center;opacity:0;will-change:transform;-webkit-tap-highlight-color:transparent;transition-property:transform, opacity, background-color, box-shadow;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow{transition-duration:0s;transition-delay:0s}}${transformTag("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow.pn-sc-arrow-left{transform:translateX(-100%);border-radius:0 50% 50% 0;padding:0 0.3em 0 0;box-shadow:0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}${transformTag("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow.pn-sc-arrow-right{transform:translateX(100%);border-radius:50% 0 0 50%;box-shadow:-0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}${transformTag("pn-segmented-control")} .pn-sc-arrows.pn-sc-left-visible .pn-sc-arrow-left,${transformTag("pn-segmented-control")} .pn-sc-arrows.pn-sc-right-visible .pn-sc-arrow-right{opacity:1;transform:translateX(0)}`;

const PnSegmentedControl = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    mo;
    segmentContainer;
    segments = [];
    activeBg;
    hoverBg;
    scrollRegistered = false;
    get hostElement() { return getElement(this); }
    showScrollArrows = false;
    showLeftArrow = false;
    showRightArrow = false;
    /** This is the name of the radio buttons inside the controller. @deprecated Set the name in the nested `pn-segment` components. */
    name;
    /** Currently active segment value. */
    value;
    valueHandler() {
        this.setActiveSegment();
    }
    changeHandler(event) {
        const target = event.target;
        this.value = target.value;
        this.setActiveSegment();
    }
    handleResize() {
        this.rerender();
    }
    handleHover(event) {
        const { target } = event.detail;
        this.calcHighlight(target, true);
    }
    componentDidLoad() {
        if (this.mo)
            this.mo.disconnect();
        this.mo = new MutationObserver(() => {
            forceUpdate(this.hostElement);
            this.setSegments();
        });
        this.mo.observe(this.hostElement, { childList: true });
        this.setSegments();
    }
    setSegments() {
        this.segments = Array.from(this.hostElement.querySelectorAll(`${transformTag("pn-segment")}`));
        this.setActiveSegment();
    }
    setActiveSegment() {
        this.segments.forEach(segmentEl => {
            if (this.value === segmentEl.value)
                segmentEl.setAttribute('selected', 'true');
            else
                segmentEl.removeAttribute('selected');
        });
        this.rerender();
    }
    rerender() {
        requestAnimationFrame(() => {
            this.calcHighlight();
            this.scrollArrowRender();
        });
    }
    /*---------------------------------------HIGHLIGHT LOGIC-------------------------------------------*/
    calcHighlight(element, hover) {
        const chip = hover ? this.hoverBg : this.activeBg;
        requestAnimationFrame(() => {
            const el = element || this.segments.find(({ value }) => value === this.value);
            const elSegment = el?.closest(`${transformTag("pn-segment")}`);
            if (!elSegment)
                return;
            const elRect = elSegment.getBoundingClientRect();
            const { left: hostLeft } = this.segmentContainer.getBoundingClientRect();
            const { left: segmentLeft, height: segmentHeight, width: segmentWidth } = elRect;
            const offset = segmentLeft - hostLeft + this.segmentContainer.scrollLeft;
            chip.style.setProperty('transform', `translate(${offset}px, -50%`);
            chip.style.setProperty('width', `${segmentWidth}px`);
            chip.style.setProperty('height', `${segmentHeight}px`);
            el.disabled ? (chip.dataset.disabled = '') : delete chip.dataset.disabled;
        });
    }
    /*---------------------------------------/HIGHLIGHT LOGIC-------------------------------------------*/
    /*---------------------------------------SCROLL ARROW LOGIC-------------------------------------------*/
    scrollArrowRender() {
        if (this.segmentContainer.scrollWidth > this.segmentContainer.clientWidth) {
            this.showScrollArrows = true;
            if (!this.scrollRegistered) {
                this.segmentContainer.addEventListener('scroll', this.scrollArrowRender.bind(this));
                this.scrollRegistered = true;
            }
            const amountScrolled = Math.round(this.segmentContainer.scrollWidth - this.segmentContainer.scrollLeft);
            const distanceToEnd = amountScrolled - this.segmentContainer.clientWidth;
            const distanceToStart = this.segmentContainer.scrollLeft;
            this.showLeftArrow = distanceToStart > 0;
            this.showRightArrow = distanceToEnd > 0;
            return;
        }
        this.showLeftArrow = false;
        this.showRightArrow = false;
        this.showScrollArrows = false;
    }
    scroll(val) {
        let amount = this.segmentContainer.scrollLeft + val;
        this.segmentContainer.scroll({
            left: amount,
            behavior: 'smooth',
        });
    }
    scrollArrowClasses() {
        const list = ['pn-sc-arrows'];
        if (this.showLeftArrow)
            list.push('pn-sc-left-visible');
        if (this.showRightArrow)
            list.push('pn-sc-right-visible');
        return list.join(' ');
    }
    /*---------------------------------------/SCROLL ARROW LOGIC-------------------------------------------*/
    render() {
        return (h(Host, { key: '4ff48c9a0556397894d55f7d3dc0a266349ef8fc' }, h("div", { key: '82ef8456eda4724b55705f9a662577eb172df89d', class: "pn-segmented-control", ref: el => (this.segmentContainer = el) }, h("slot", { key: '9b2949cf6e7976795543f6f8a67c126bee02e59d' }), h("div", { key: '42ab10791de502f48aac3a16766425b435c1c52e', class: "pn-sc-bg", "data-active": true, ref: el => (this.activeBg = el) }), h("div", { key: '24060bf183aabe485b7ff66bbad9b44a7704df12', class: "pn-sc-bg", "data-hover": true, ref: el => (this.hoverBg = el) })), h("div", { key: '31790d3f9fccd0c4242b5584ba2ff6ee32df4297', class: this.scrollArrowClasses(), hidden: !this.showScrollArrows }, h("button", { key: '8ffa7498550bc0f052b77f5297b349b84efbccb8', "aria-label": "Left", class: "pn-sc-arrow pn-sc-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, h("pn-icon", { key: '89d4ee843ade39e7264e08c31ad83c2dd32f7931', icon: arrow_left })), h("button", { key: '8f1707b0e2debb84451210d03187b51eba3f2897', "aria-label": "Right", class: "pn-sc-arrow pn-sc-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, h("pn-icon", { key: '4fa0fcd57eb268e3c9cd9e42f5d4e84b433fafee', icon: arrow_right })))));
    }
    static get watchers() { return {
        "value": [{
                "valueHandler": 0
            }]
    }; }
};
PnSegmentedControl.style = pnSegmentedControlCss();

export { PnSegmentedControl as pn_segmented_control };
