@scania/tegel
Version:
Tegel Design System
272 lines (271 loc) • 10.5 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() {
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();
const secondaryElementId = generateUniqueId();
return (h(Host, { key: '066522a77c41f0ca6c49ee77d5f34623c42d00e2' }, h("div", { key: 'cd3abb9da939e81404eaf6175ba62ce2d709de71', class: `tds-accordion-item
${this.disabled ? 'disabled' : ''}
${this.expanded ? 'expanded' : ''}
` }, h("div", { key: '85647602e5644c8908240d5dfb492ce60695a50c', role: "heading", "aria-level": this.ariaLevelValue }, 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 }, h("div", { key: '2f757e9e1369381f95497c5833bd3a0e25a297f3', class: "tds-accordion-title" }, this.header, h("slot", { key: '1bf9cb769629414c763218b1a3772642b19b4ce4', name: "header" })), h("div", { key: 'b2f1cf14059d134502db363f442b4914b435a72f', class: "tds-accordion-icon" }, h("tds-icon", { key: 'aca038cd8915bd7bc0c152e37820e53f1d692041', tdsAriaHidden: true, svgTitle: "Chevron Down", name: "chevron_down", size: "16px" })))), 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 ' : ''}
` }, h("slot", { key: '274f9aff706adceb82aea35db3a91494e798ab2c' })))));
}
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"
},
"attribute": "header",
"reflect": false,
"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."
},
"attribute": "expand-icon-position",
"reflect": false,
"defaultValue": "'end'"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Disabled option in `boolean`."
},
"attribute": "disabled",
"reflect": false,
"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"
},
"attribute": "expanded",
"reflect": true,
"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"
},
"attribute": "padding-reset",
"reflect": false,
"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."
},
"attribute": "aria-level-value",
"reflect": false,
"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": []
}
}
};
}
}