@scania/tegel
Version:
Tegel Design System
68 lines (64 loc) • 8.93 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-9xxNGlso.js';
import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.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:hover{background-color:var(--tds-accordion-background-hover);border-bottom:1px solid var(--tds-accordion-border-hover);border-top:1px solid var(--tds-accordion-border-hover);margin-bottom:-1px;z-index:1}.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:has(: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;z-index:2}.tds-accordion-item[disabled=true]:focus-visible{border-color:var(--tds-accordion-border)}`;
const TdsAccordionItem = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.tdsToggle = createEvent(this, "tdsToggle", 7);
/** The header gives users the context about the additional information available inside the panel */
this.header = '';
/** Changes position of the expand icon. */
this.expandIconPosition = 'end';
/** Disabled option in `boolean`. */
this.disabled = false;
/** Set to true to expand panel open */
this.expanded = false;
/** When true, 16px on right padding instead of 64px */
this.paddingReset = false;
/** Specifies the heading level (aria-level) for accessibility. Only accepts values between 1 and 6. */
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();
const secondaryElementId = generateUniqueId();
return (h(Host, { key: '17e9a722992b69661f77c0aec843fa117111eed1' }, h("div", { key: 'b292c495ceb21cc538678716975e41cdfa40cbcf', class: `tds-accordion-item
${this.disabled ? 'disabled' : ''}
${this.expanded ? 'expanded' : ''}
` }, h("div", { key: '3a5c926bfbefc218d8c60dca53c94dd246b7ff05', role: "heading", "aria-level": this.ariaLevelValue }, h("button", { key: 'ce3f4e699dc2e8d777439edb7e0b6ea66315dc25', 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 }, h("div", { key: '6c6dada270be17a214475e0a4c8de0ef34f45a61', class: "tds-accordion-title" }, this.header, h("slot", { key: '7c9a9fc36bc1b0fc1a4e95ba21fb470a8ec17a95', name: "header" })), h("div", { key: 'eddcc635b64da34b2137206f1eb5f20add5a9b62', class: "tds-accordion-icon" }, h("tds-icon", { key: '0a640885ea799bd06666e503aa3ecf111fc2adb7', tdsAriaHidden: true, svgTitle: "Chevron Down", name: "chevron_down", size: "16px" })))), h("div", { key: '851c381810b1ea21451f2beff668c44a145cbd70', role: "region", "aria-live": "polite", "aria-labelledby": secondaryElementId, id: primaryElementId, class: `tds-accordion-panel
${this.paddingReset ? 'tds-accordion-panel--padding-reset ' : ''}
` }, h("slot", { key: '3ace67e98a6a24daad4557079d7b3a8b7f927381' })))));
}
};
TdsAccordionItem.style = accordionItemCss();
export { TdsAccordionItem as tds_accordion_item };