@scania/tegel/dist/cjs/tds-accordion-item.cjs.entry.js

Tegel Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-ca8040ad.js');
const generateUniqueId = require('./generateUniqueId-e3fc9863.js');

const accordionItemCss = ".tds-accordion-item{box-sizing:border-box;list-style:none;color:var(--tds-accordion-color);position:relative;border-top:1px solid var(--tds-accordion-border)}.tds-accordion-item *{box-sizing:border-box}.tds-accordion-item button.tds-accordion-header-icon-start,.tds-accordion-item button.tds-accordion-header-icon-end{all:unset}.tds-accordion-item .tds-accordion-header-icon-start,.tds-accordion-item .tds-accordion-header-icon-end,.tds-accordion-item button.tds-accordion-header-icon-start,.tds-accordion-item button.tds-accordion-header-icon-end{box-sizing:border-box;cursor:pointer;display:flex;align-items:center;width:100%;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);padding:var(--tds-spacing-element-16);background-color:var(--tds-accordion-background)}.tds-accordion-item .tds-accordion-header-icon-start *,.tds-accordion-item .tds-accordion-header-icon-end *,.tds-accordion-item button.tds-accordion-header-icon-start *,.tds-accordion-item button.tds-accordion-header-icon-end *{box-sizing:border-box}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon,.tds-accordion-item button.tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item button.tds-accordion-header-icon-end .tds-accordion-icon{transform-origin:center;transition:transform 0.15s ease-in-out;color:var(--tds-accordion-icon-color)}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon>tds-icon,.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon>tds-icon,.tds-accordion-item button.tds-accordion-header-icon-start .tds-accordion-icon>tds-icon,.tds-accordion-item button.tds-accordion-header-icon-end .tds-accordion-icon>tds-icon{display:block}.tds-accordion-item .tds-accordion-title{flex-grow:2}.tds-accordion-item .tds-accordion-panel{cursor:default;padding:var(--tds-spacing-element-8) var(--tds-spacing-layout-64) var(--tds-spacing-element-32) var(--tds-spacing-element-16);display:none;font:var(--tds-detail-03);letter-spacing:var(--tds-detail-03-ls)}.tds-accordion-item .tds-accordion-panel p{margin:0;padding:0}.tds-accordion-item .tds-accordion-panel--padding-reset{padding-right:var(--tds-spacing-element-16)}.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon{margin:0 0 0 var(--tds-spacing-element-32)}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-title{order:1}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon{order:0;margin:0 var(--tds-spacing-element-16) 0 0}.tds-accordion-item.disabled,.tds-accordion-item.disabled .tds-accordion-header-icon-end,.tds-accordion-item.disabled .tds-accordion-header-icon-start,.tds-accordion-item.disabled .tds-accordion-panel{color:var(--tds-accordion-color-disabled);cursor:not-allowed}.tds-accordion-item.disabled .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-header-icon-end .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-panel .tds-accordion-icon{color:var(--tds-accordion-color-disabled)}.tds-accordion-item.disabled:hover,.tds-accordion-item.disabled:hover *,.tds-accordion-item.disabled:active,.tds-accordion-item.disabled:active *,.tds-accordion-item.disabled.active,.tds-accordion-item.disabled.active *{cursor:not-allowed}.tds-accordion-item.disabled:hover .tds-accordion-header-icon-start,.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end,.tds-accordion-item.disabled:active .tds-accordion-header-icon-start,.tds-accordion-item.disabled:active .tds-accordion-header-icon-end,.tds-accordion-item.disabled.active .tds-accordion-header-icon-start,.tds-accordion-item.disabled.active .tds-accordion-header-icon-end{background-color:var(--tds-accordion-bg);outline:none;pointer-events:none}.tds-accordion-item.disabled:hover .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end::after,.tds-accordion-item.disabled:active .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:active .tds-accordion-header-icon-end::after,.tds-accordion-item.disabled.active .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled.active .tds-accordion-header-icon-end::after{border-color:transparent}.tds-accordion-item.expanded .tds-accordion-panel{display:block;padding-bottom:31px}.tds-accordion-item.expanded .tds-accordion-icon{transform:rotate(180deg)}.tds-accordion-item.expanded .tds-accordion-header-icon-end .tds-accordion-icon{margin-right:0;margin-left:var(--tds-spacing-element-32)}.tds-accordion-item.expanded .tds-accordion-header-icon-start .tds-accordion-icon{margin-left:0;margin-right:var(--tds-spacing-element-16)}.tds-accordion-item:first-child{margin-bottom:-1px;border-bottom:1px solid var(--tds-accordion-border)}.tds-accordion-item:has(.tds-accordion-header-icon-start:focus-visible),.tds-accordion-item:has(.tds-accordion-header-icon-end:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;background-color:var(--tds-accordion-background-focus)}.tds-accordion-item[disabled=true]:focus-visible{border-color:var(--tds-accordion-border)}:host(:hover) .tds-accordion-header-icon-start,:host(:hover) .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-hover)}.tds-accordion-item:has(:hover){background-color:var(--tds-accordion-background-hover)}.tds-accordion-item:has(.tds-accordion-header-icon-start:active),.tds-accordion-item:has(.tds-accordion-header-icon-end:active){background-color:var(--tds-accordion-background-active)}:host(:hover) .tds-accordion-item:has(.tds-accordion-header-icon-start:active) .tds-accordion-header-icon-start,:host(:hover) .tds-accordion-item:has(.tds-accordion-header-icon-end:active) .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-active)}.tds-accordion-header-icon-start:active,.tds-accordion-header-icon-end:active{outline:none}";
const TdsAccordionItemStyle0 = accordionItemCss;

const TdsAccordionItem = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.tdsToggle = index.createEvent(this, "tdsToggle", 7);
        this.header = '';
        this.expandIconPosition = 'end';
        this.disabled = false;
        this.expanded = false;
        this.paddingReset = false;
        this.ariaLevelValue = '6';
    }
    /** Method for toggling the expanded state of the Accordion Item. */
    async toggleAccordionItem() {
        const event = this.tdsToggle.emit({
            expanded: !this.expanded,
        });
        if (!event.defaultPrevented) {
            this.expanded = !this.expanded;
        }
    }
    /** Method for expanding the Accordion Item */
    async expand() {
        const event = this.tdsToggle.emit({
            expanded: true,
        });
        if (!event.defaultPrevented) {
            this.expanded = true;
        }
    }
    /** Method for collapsing the Accordion Item */
    async collapse() {
        const event = this.tdsToggle.emit({
            expanded: false,
        });
        if (!event.defaultPrevented) {
            this.expanded = false;
        }
    }
    /** Returns the expanded state of the Accordion Item. */
    async isExpanded() {
        return this.expanded;
    }
    render() {
        const primaryElementId = generateUniqueId.generateUniqueId();
        const secondaryElementId = generateUniqueId.generateUniqueId();
        return (index.h(index.Host, { key: '066522a77c41f0ca6c49ee77d5f34623c42d00e2' }, index.h("div", { key: 'cd3abb9da939e81404eaf6175ba62ce2d709de71', class: `tds-accordion-item
        ${this.disabled ? 'disabled' : ''}
        ${this.expanded ? 'expanded' : ''}
        ` }, index.h("div", { key: '85647602e5644c8908240d5dfb492ce60695a50c', role: "heading", "aria-level": this.ariaLevelValue }, index.h("button", { key: 'e74a1cc68af901a1acae4cf2d49708499af1e044', id: secondaryElementId, "aria-controls": primaryElementId, type: "button", "aria-expanded": this.expanded ? 'true' : 'false', "aria-disabled": this.disabled, class: `tds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.toggleAccordionItem(), disabled: this.disabled }, index.h("div", { key: '2f757e9e1369381f95497c5833bd3a0e25a297f3', class: "tds-accordion-title" }, this.header, index.h("slot", { key: '1bf9cb769629414c763218b1a3772642b19b4ce4', name: "header" })), index.h("div", { key: 'b2f1cf14059d134502db363f442b4914b435a72f', class: "tds-accordion-icon" }, index.h("tds-icon", { key: 'aca038cd8915bd7bc0c152e37820e53f1d692041', tdsAriaHidden: true, svgTitle: "Chevron Down", name: "chevron_down", size: "16px" })))), index.h("div", { key: '76aa6973dac5bf9c8203c37d047f4e466a6e9fc7', role: "region", "aria-live": "polite", "aria-labelledby": secondaryElementId, id: primaryElementId, class: `tds-accordion-panel
            ${this.paddingReset ? 'tds-accordion-panel--padding-reset ' : ''}
            ` }, index.h("slot", { key: '274f9aff706adceb82aea35db3a91494e798ab2c' })))));
    }
};
TdsAccordionItem.style = TdsAccordionItemStyle0;

exports.tds_accordion_item = TdsAccordionItem;