v4web-components
Version:
Stencil Component Starter
158 lines (157 loc) • 4.68 kB
JavaScript
import { h } from '@stencil/core';
export class LabDsAccordion {
constructor() {
this.titleAccordion = undefined;
this.descriptionAccordion = undefined;
this.titlePanel = undefined;
this.bodyPanel = undefined;
this.icon = undefined;
this.openAccordion = false;
this.disabled = false;
}
render() {
return (h("div", { class: `v4-accordion ${this.openAccordion ? 'open' : 'closed'} ${this.disabled ? 'disabled' : ''}` }, h("div", { tabIndex: 1, onClick: () => {
if (this.disabled)
return;
this.openAccordion = !this.openAccordion;
}, class: "v4-accordion-header-description" }, h("div", { class: "v4-accordion-header" }, h("div", { class: "v4-accordion-title" }, this.icon && h("lab-ds-icon-not-selectable", { icon: this.icon, size: "medium" }), h("span", { class: "v4-accordion-title-text" }, this.titleAccordion)), h("lab-ds-icon-not-selectable", { class: "action-icon", icon: !this.openAccordion ? 'expand_more' : 'expand_less', size: "s-medium" })), this.descriptionAccordion && !this.openAccordion && h("div", { class: "v4-accordion-description" }, this.descriptionAccordion)), this.openAccordion && (h("div", { class: "v4-accordion-content" }, h("slot", { name: "body-accordion" }), this.titlePanel && h("div", { class: "v4-accordion-content-title" }, this.titlePanel), this.bodyPanel && h("div", { class: "v4-accordion-content-body" }, this.bodyPanel)))));
}
static get is() { return "lab-ds-accordion"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["lab-ds-accordion.css"]
};
}
static get styleUrls() {
return {
"$": ["lab-ds-accordion.css"]
};
}
static get properties() {
return {
"titleAccordion": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "title-accordion",
"reflect": false
},
"descriptionAccordion": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "description-accordion",
"reflect": false
},
"titlePanel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "title-panel",
"reflect": false
},
"bodyPanel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "body-panel",
"reflect": false
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "icon",
"reflect": false
},
"openAccordion": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "open-accordion",
"reflect": false,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
}
};
}
}
//# sourceMappingURL=lab-ds-accordion.js.map