import { Host, h } from "@stencil/core";
export class SpwFooterContent {
    componentDidLoad() {
        this.el.closest('spw-footer').addEventListener('spwFooterCols', this.handleFooterCols.bind(this));
    }
    disconnectedCallback() {
        this.el.closest('spw-footer').removeEventListener('spwFooterCols', this.handleFooterCols.bind(this));
    }
    handleFooterCols(event) {
        const { colsMobile, colsTablet, colsDesktop } = event.detail;
        this.el.style.setProperty('--spw-footer-col-width-mobile', `calc(100% / ${colsMobile})`);
        this.el.style.setProperty('--spw-footer-col-width-tablet', `calc(100% / ${colsTablet})`);
        this.el.style.setProperty('--spw-footer-col-width-desktop', `calc(100% / ${colsDesktop})`);
    }
    render() {
        return (h(Host, { key: '75e1c33f9778b7cb46bd7f33ae2a83bc203fe5c5' }, h("div", { key: '69809ec22587a8e85ffa73e6641a53772990661f', class: "spw-footer-content" }, h("div", { key: '8d756c94d0eefcc2ef4f94ca7fdd62b7e9c8199e', class: "spw-footer-content__container spw-ds-container" }, h("slot", { key: 'def21bbee7b3f20a31cdb1b2ab22c5ec3e288633' })))));
    }
    static get is() { return "spw-footer-content"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-footer-content.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-footer-content.css"]
        };
    }
    static get elementRef() { return "el"; }
}
