@cbpds/web-components
Version:
Web components for the CBP Design System.
173 lines (172 loc) • 6.04 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { createNamespaceKey } from "../../utils/utils";
export class CbpDropdownItem {
handleClick(e) {
const { target } = e;
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,
nativeEvent: e,
});
}
}
}
watchSelected(newValue) {
if (this.checkbox)
this.checkbox.checked = newValue;
}
constructor() {
this.value = undefined;
this.disabled = undefined;
this.current = undefined;
this.itemId = createNamespaceKey('cbp-dropdown-item');
this.selected = undefined;
if (!this.host.hasAttribute('slot'))
this.host.slot = "cbp-dropdown-items";
}
componentWillLoad() {
this.checkbox = this.host.querySelector('input[type=checkbox]');
}
componentDidLoad() {
if (this.selected && this.checkbox)
this.checkbox.checked = true;
}
render() {
return (h(Host, { key: 'da359461438a85ea9b3f19fd484298885441a93d', role: "option", id: this.itemId, onClick: e => this.handleClick(e), "aria-selected": this.selected ? 'true' : 'false' }, h("div", { key: 'e6ecc12b478f136686a3c1376ae9ebf1175268cb', class: "cbp-dropdown-item-content" }, h("slot", { key: '49a9ccfae4068a92c81f70cdcebff0a6f902c36e' }))));
}
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