@postnord/web-components/esm/pn-accordion-row.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-5606614b.js';
import { a as angle_down } from './angle_down-d788f691.js';
import { r as ripple } from './helpers-88f72b54.js';

const pnAccordionRowCss = "pn-accordion-row{position:relative;margin:0 -0.25em 0}pn-accordion-row .pn-accordion-row{width:100%;display:flex;flex-direction:column}pn-accordion-row .pn-accordion-row-summary{color:#2d2013;position:relative;border:none;outline:0;cursor:pointer;-webkit-tap-highlight-color:transparent;width:100%;padding:0.25em;font-size:1em;font-weight:400;border-radius:0.5em;list-style:none}pn-accordion-row .pn-accordion-row-summary:hover>.pn-accordion-row-text{background-color:#e0f8ff}pn-accordion-row .pn-accordion-row-summary:focus-visible>.pn-accordion-row-text{outline-color:#005d92}pn-accordion-row .pn-accordion-row-summary::-webkit-details-marker{display:none}pn-accordion-row .pn-accordion-row-text{position:relative;overflow:hidden;display:flex;align-items:center;padding:0.75em;background-color:#ffffff;border-radius:0.5em;-webkit-tap-highlight-color:transparent;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-accordion-row .pn-accordion-row-text[data-transparent]{background-color:transparent}pn-accordion-row .pn-accordion-row-text .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-accordion-row .pn-accordion-row-icon{margin-left:auto;flex-shrink:0;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-accordion-row .pn-accordion-row-icon path{fill:#005d92}pn-accordion-row .pn-accordion-row[open] .pn-accordion-row-icon{transform:rotate(-180deg)}pn-accordion-row .pn-accordion-row-content{color:#2d2013;display:block;padding:1em}";
const PnAccordionRowStyle0 = pnAccordionRowCss;

const PnAccordionRow = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.togglerow = createEvent(this, "togglerow", 7);
        this.isClosing = false;
        this.isExpanding = false;
        this.label = undefined;
        this.state = false;
        this.buttonid = undefined;
        this.contentid = undefined;
        this.transparent = false;
    }
    details;
    summary;
    content;
    animation;
    get hostElement() { return getElement(this); }
    /** Dispatched every time the row is toggled. Includes the row element and the boolean `state` prop. */
    togglerow;
    /** Internal function for closing rows when using the `single` prop on the `pn-accordion`. */
    handleRowState(event) {
        if (event.detail !== this.state) {
            this.details.style.overflow = 'hidden';
            this.closeAccordion();
        }
    }
    componentWillLoad() {
        const slottedLabel = !!this.hostElement.querySelector('[slot="label"]');
        this.label = slottedLabel ? null : this.label;
    }
    toggleOpen(open) {
        const state = open ?? !this.state;
        if (this.state !== open)
            this.togglerow.emit({ element: this.details, state });
        this.state = state;
    }
    clickHandler(e) {
        e.preventDefault();
        this.details.style.overflow = 'hidden';
        if (this.isClosing || !this.state)
            this.openAccordion();
        else if (this.isClosing || this.state)
            this.closeAccordion();
        const { x, width, y, top } = this.hostElement.getBoundingClientRect();
        const clientCor = e.clientX === 0 && e.clientY === 0 ? { clientX: x + width - 24, clientY: y - top } : e;
        ripple(clientCor, this.hostElement, '.pn-accordion-row-text');
    }
    openAccordion() {
        this.details.style.height = `${this.details.offsetHeight}px`;
        this.toggleOpen(true);
        window.requestAnimationFrame(() => {
            this.isExpanding = true;
            const startHeight = `${this.details.offsetHeight}px`;
            const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;
            this.cancelAnimations();
            this.animate(true, startHeight, endHeight);
        });
    }
    closeAccordion() {
        this.isClosing = true;
        const startHeight = `${this.details.offsetHeight}px`;
        const endHeight = `${this.summary.offsetHeight}px`;
        this.cancelAnimations();
        this.animate(false, startHeight, endHeight);
    }
    animate(open, startHeight, endHeight) {
        this.animation = this.details.animate({
            height: [startHeight, endHeight],
        }, {
            duration: 400,
            easing: 'cubic-bezier(0.6, 0, 0.2, 1)',
        });
        this.animation.onfinish = () => this.animationFinish(open);
        this.animation.oncancel = () => {
            if (open)
                this.isExpanding = false;
            else
                this.isClosing = false;
        };
    }
    animationFinish(open) {
        this.toggleOpen(open);
        this.cancelAnimations();
        this.isClosing = false;
        this.isExpanding = false;
        this.details.style.height = '';
        this.details.style.overflow = '';
    }
    cancelAnimations() {
        if (this.animation)
            this.animation.cancel();
    }
    render() {
        return (h(Host, { key: 'ecbddc7a206d174ffaa74ce496442ce06ce1366e' }, h("details", { key: '3eb50627c300e21884113368dfae02084c9cda5a', class: "pn-accordion-row", open: this.state, ref: (el) => (this.details = el) }, h("summary", { key: '952bd7d0d346c153b7031991d1f3ab43c87b6ac1', id: this.buttonid, class: "pn-accordion-row-summary", onClick: e => this.clickHandler(e), ref: el => (this.summary = el) }, h("div", { key: '7d8922b5c71b5eb78d6b0813576650171797a303', class: "pn-accordion-row-text", "data-transparent": this.transparent }, this.label ? this.label : '', h("slot", { key: 'c23bad6c33b660e5553c7b9f6d1677a3223742cb', name: "label" }), h("pn-icon", { key: '374b09b90afd9ad2d836ecf480dd00317519a7e9', class: "pn-accordion-row-icon", icon: angle_down }))), h("div", { key: '06f253b1c9ca0488f3cd674f35c0eea6bd28c1da', id: this.contentid, class: "pn-accordion-row-content", ref: (el) => (this.content = el) }, h("slot", { key: '2cb8a8fdc7aab0f7009df63ec0e7eb0f9273dc1e' })))));
    }
};
PnAccordionRow.style = PnAccordionRowStyle0;

export { PnAccordionRow as pn_accordion_row };

//# sourceMappingURL=pn-accordion-row.entry.js.map