@duetds/components
Version:
This package includes Duet Core Components and related tools.
128 lines (127 loc) • 4.19 kB
JavaScript
import { h } from "@stencil/core";
export class DuetDefinitionList {
constructor() {
/**
* Theme of the definition list. Can be one of: "default", "turva".
*/
this.theme = "";
/**
* Controls the margin of the component. Can be one of: "auto", "none".
*/
this.margin = "auto";
/**
* Style variation of the definition list. Can be one of: "default", "striped".
*/
this.variation = "default";
}
/**
* Component lifecycle events.
*/
componentWillLoad() {
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
}
/**
* Local methods
*/
hasValidItems(array) {
return Array.isArray(array);
}
/**
* render() function
* Always the last one in the class.
*/
render() {
return (h("dl", { class: {
"duet-definition-list": true,
"duet-m-0": this.margin === "none",
[this.variation]: true,
"duet-theme-turva": this.theme === "turva",
} }, this.hasValidItems(this.items)
? this.items.map((item) => (h("div", { class: "duet-definition-list-row" },
h("dt", null, item["label"]),
h("dd", null, item["value"]))))
: ""));
}
static get is() { return "duet-definition-list"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["duet-definition-list.scss"]
}; }
static get styleUrls() { return {
"$": ["duet-definition-list.css"]
}; }
static get properties() { return {
"theme": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Theme of the definition list. Can be one of: \"default\", \"turva\"."
},
"attribute": "theme",
"reflect": false,
"defaultValue": "\"\""
},
"margin": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Controls the margin of the component. Can be one of: \"auto\", \"none\"."
},
"attribute": "margin",
"reflect": false,
"defaultValue": "\"auto\""
},
"variation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Style variation of the definition list. Can be one of: \"default\", \"striped\"."
},
"attribute": "variation",
"reflect": false,
"defaultValue": "\"default\""
},
"items": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "any[]",
"resolved": "any[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "An array of items for the definition list. Items have to include mandatory \"label\" and \"value\" fields to work."
}
}
}; }
static get elementRef() { return "element"; }
}