@cbpds/web-components
Version:
Web components for the CBP Design System.
145 lines (144 loc) • 5.72 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpStructuredList {
constructor() {
this.accessibilityText = undefined;
this.headerId = undefined;
this.striped = undefined;
this.selectable = undefined;
this.context = undefined;
this.sx = {};
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
render() {
return (h(Host, { key: 'e7c67efb217c2056cd9d70a78b81905976e10c28' }, h("slot", { key: '48cc480750b5f69258f779768bc5541e4281a98d', name: "cbp-structured-list-header" }), h("div", { key: '7e4f919c6430ba5d4b1096202036666d36752caa', role: "list", "aria-label": this.accessibilityText, "aria-describedby": this.headerId }, h("slot", { key: '09977dada8930c7d20b1291a9ab7d50a11b5308c' })), h("slot", { key: '7355b61a31039971fcfa4461732fb65a3f4c8efc', name: "cbp-structured-list-footer" })));
}
static get is() { return "cbp-structured-list"; }
static get originalStyleUrls() {
return {
"$": ["cbp-structured-list.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-structured-list.css"]
};
}
static get properties() {
return {
"accessibilityText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies an accessible label for the list as an `aria-label`, similar to a table `caption`. \nSince the structured list contains significant amount of data, it is advised to always specify a label describing the list."
},
"attribute": "accessibility-text",
"reflect": false
},
"headerId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "References an `id` placed on the element slotted into the `cbp-structured-list-header` named slot to provide additional accessible context to the list label."
},
"attribute": "header-id",
"reflect": false
},
"striped": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether the list is \"striped,\"\" with even rows shaded."
},
"attribute": "striped",
"reflect": true
},
"selectable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether the list items are selectable (via checkbox - provided by the application)."
},
"attribute": "selectable",
"reflect": true
},
"context": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"",
"resolved": "\"dark-always\" | \"dark-inverts\" | \"light-always\" | \"light-inverts\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified."
},
"attribute": "context",
"reflect": true
},
"sx": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Supports adding inline styles as an object"
},
"attribute": "sx",
"reflect": false,
"defaultValue": "{}"
}
};
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-structured-list.js.map