@cbpds/web-components
Version:
Web components for the CBP Design System.
169 lines (168 loc) • 5.89 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { createNamespaceKey } from "../../utils/utils";
export class CbpDropdownItem {
constructor() {
this.value = undefined;
this.disabled = undefined;
this.current = undefined;
this.itemId = createNamespaceKey('cbp-dropdown-item');
this.selected = undefined;
}
handleClick({ target }) {
if (!this.disabled) {
if (target.tagName != "LABEL") {
const label = this.host.querySelector('.cbp-dropdown-item-content').innerText;
this.dropdownItemClick.emit({
host: this.host,
target: target,
label: label,
value: (!!this.value) ? this.value : label
});
}
}
}
watchSelected(newValue) {
if (this.checkbox)
this.checkbox.checked = newValue;
}
componentWillLoad() {
this.checkbox = this.host.querySelector('input[type=checkbox]');
}
componentDidLoad() {
if (this.selected && this.checkbox)
this.checkbox.checked = true;
}
render() {
return (h(Host, { key: 'e4dda9b2d37a2dd6bb5a8f6c6f5f25840c07a42f', role: "option", id: this.itemId, onClick: (e) => this.handleClick(e), "aria-selected": this.selected ? "true" : "false" }, h("div", { key: '9521603498d8abf404414695f82eddec347c54e0', class: "cbp-dropdown-item-content" }, h("slot", { key: '2dd387f4f18a04a2d7e44fb232fd7233fe68ce93' }))));
}
static get is() { return "cbp-dropdown-item"; }
static get originalStyleUrls() {
return {
"$": ["cbp-dropdown-item.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-dropdown-item.css"]
};
}
static get properties() {
return {
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies an optional value to be passed in the FormData instead of the display text/label."
},
"attribute": "value",
"reflect": false
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": true
},
"current": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "For Internal Use: Specifies the current item (referenced by `aria-activedescendant`) while using keyboard navigation."
},
"attribute": "current",
"reflect": true
},
"itemId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Optionally specify the ID of each dropdown item, which is used by the parent dropdown to associate `aria-activedescendant`. If no `itemId` is specified, one will be automatically generated."
},
"attribute": "item-id",
"reflect": false,
"defaultValue": "createNamespaceKey('cbp-dropdown-item')"
},
"selected": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies if an item is selected"
},
"attribute": "selected",
"reflect": true
}
};
}
static get events() {
return [{
"method": "dropdownItemClick",
"name": "dropdownItemClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "selected",
"methodName": "watchSelected"
}];
}
}
//# sourceMappingURL=cbp-dropdown-item.js.map