gov-gui/dist/collection/components/gov-accordion/gov-accordion.js

Gov UI Component Library Typscript Build

import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class AccordionComponent {
    constructor() {
        this.openIndex = -1; // Tracks the currently open item
        this.animationDelay = '2s';
        this.allClasses = '';
    }
    //watching for any change in animations to trigger them
    watchAnimations() {
        this.provideClass();
    }
    watchAnimationsDelay() {
        this.provideClass();
    }
    watchAnimationsSpeed() {
        this.provideClass();
    }
    clampOpenIndex(newValue) {
        this.toggleAccordion(newValue);
    }
    // inject the animations and styles on component load
    componentWillLoad() {
        const animationClasses = getAnimationClasses({
            animation: this.animation,
            animationDelay: this.animationDelay,
            animationSpeed: this.animationSpeed
        });
        this.allClasses = getGlobalPropsClasses({
            classes: ' ' + animationClasses,
        });
    }
    //Called on change of any animation related property to trigger change
    provideClass() {
        const animationClasses = getAnimationClasses({
            animation: this.animation,
            animationDelay: this.animationDelay,
            animationSpeed: this.animationSpeed
        });
        this.allClasses = getGlobalPropsClasses({
            classes: ' ' + animationClasses,
        });
    }
    toggleAccordion(index) {
        const children = Array.from(this.el.children).filter((child) => child.tagName === 'GOV-ACCORDION-ITEM');
        const maxIndex = children.length - 1;
        // Clamp the index to the valid range
        this.openIndex = index >= 0 ? index <= maxIndex ? index : maxIndex : 0;
    }
    render() {
        const children = Array.from(this.el.children).filter((child) => child.tagName === 'GOV-ACCORDION-ITEM');
        return (h("div", { key: 'eb8af62c07476559985f3ca09b58f466dff78922', class: `accordion ${this.allClasses}` }, children.map((child, index) => {
            const title = child.getAttribute('title');
            return (h("div", { class: `accordion-item ${this.openIndex === index ? 'active' : ''}` }, h("div", { class: "accordion-header", onClick: () => this.toggleAccordion(index) }, title, h("span", { class: "arrow" }, this.openIndex === index ? '✕' : '+')), h("div", { class: { 'accordion-content': true, 'open': this.openIndex === index } }, h("slot", { name: `content-${index}` }, child.innerHTML))));
        })));
    }
    static get is() { return "gov-accordion"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["gov-accordion.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["gov-accordion.css"]
        };
    }
    static get properties() {
        return {
            "openIndex": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "open-index",
                "reflect": false,
                "defaultValue": "-1"
            },
            "animation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "animation",
                "reflect": false
            },
            "animationDelay": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'2s' | '3s' | '4s' | '5s'",
                    "resolved": "\"2s\" | \"3s\" | \"4s\" | \"5s\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "animation-delay",
                "reflect": false,
                "defaultValue": "'2s'"
            },
            "animationSpeed": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'slow' | 'slower' | 'fast' | 'faster'",
                    "resolved": "\"fast\" | \"faster\" | \"slow\" | \"slower\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "animation-speed",
                "reflect": false
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "animation",
                "methodName": "watchAnimations"
            }, {
                "propName": "animationDelay",
                "methodName": "watchAnimationsDelay"
            }, {
                "propName": "animationSpeed",
                "methodName": "watchAnimationsSpeed"
            }, {
                "propName": "openIndex",
                "methodName": "clampOpenIndex"
            }];
    }
}
//# sourceMappingURL=gov-accordion.js.map