@scania/tegel
Version:
Tegel Design System
290 lines (289 loc) • 11.4 kB
JavaScript
import { h, Host } from "@stencil/core";
import generateUniqueId from "../../../utils/generateUniqueId";
/**
* @slot <default> - <b>Unnamed slot.</b> For content of an expanded accordion.
* @slot header - Slot for the Accordion Item header.
*/
export class TdsAccordionItem {
constructor() {
/** 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' })))));
}
static get is() { return "tds-accordion-item"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["accordion-item.scss"]
};
}
static get styleUrls() {
return {
"$": ["accordion-item.css"]
};
}
static get properties() {
return {
"header": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The header gives users the context about the additional information available inside the panel"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "header",
"defaultValue": "''"
},
"expandIconPosition": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'start' | 'end'",
"resolved": "\"end\" | \"start\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Changes position of the expand icon."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "expand-icon-position",
"defaultValue": "'end'"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Disabled option in `boolean`."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"expanded": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to true to expand panel open"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "expanded",
"defaultValue": "false"
},
"paddingReset": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When true, 16px on right padding instead of 64px"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "padding-reset",
"defaultValue": "false"
},
"ariaLevelValue": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'1' | '2' | '3' | '4' | '5' | '6'",
"resolved": "\"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the heading level (aria-level) for accessibility. Only accepts values between 1 and 6."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "aria-level-value",
"defaultValue": "'6'"
}
};
}
static get events() {
return [{
"method": "tdsToggle",
"name": "tdsToggle",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fires when the Accordion Item is clicked, but before it is closed or opened."
},
"complexType": {
"original": "{\n expanded: boolean;\n }",
"resolved": "{ expanded: boolean; }",
"references": {}
}
}];
}
static get methods() {
return {
"toggleAccordionItem": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Method for toggling the expanded state of the Accordion Item.",
"tags": []
}
},
"expand": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Method for expanding the Accordion Item",
"tags": []
}
},
"collapse": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Method for collapsing the Accordion Item",
"tags": []
}
},
"isExpanded": {
"complexType": {
"signature": "() => Promise<boolean>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<boolean>"
},
"docs": {
"text": "Returns the expanded state of the Accordion Item.",
"tags": []
}
}
};
}
}