@cbpds/web-components
Version:
Web components for the CBP Design System.
190 lines (189 loc) • 6.92 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpChip {
constructor() {
this.iconName = "plus";
this.name = undefined;
this.value = undefined;
this.pressed = false;
this.disabled = undefined;
this.context = undefined;
this.sx = {};
}
handleClick(e) {
this.ariaPressed = !this.ariaPressed;
if (this.iconName == "plus") {
this.button.setAttribute('aria-pressed', `${this.ariaPressed}`);
}
else {
this.pressed = !this.pressed;
this.pressed ? this.icon.name = "times" : this.icon.name = this.iconName;
}
this.chipClick.emit({
host: this.host,
name: this.name,
value: this.value || this.button.innerText,
active: this.ariaPressed,
nativeEvent: e,
});
}
componentWillLoad() {
this.ariaPressed = this.pressed ? true : false;
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
if (!this.icon)
this.icon = this.host.querySelector('cbp-icon');
this.iconName = this.icon.name;
}
render() {
return (h(Host, { key: '7f7316e5ee918ce49276800ad1f15f037b410423' }, h("button", { key: '8414d1273efd3ee3a9ca820e040ac6438d7dfa0e', type: "button", value: this.value, "aria-pressed": `${this.pressed}`, ref: (el) => this.button = el, onClick: (e) => this.handleClick(e), disabled: this.disabled }, h("span", { key: '173a2a7cc71b7ae22cdbdb53d170a1012f67fcdc', class: "cbp-chip__label" }, h("slot", { key: '59a35e632ddf8922e67cda10919b732772548e0e' })), this.host.querySelector('[slot=cbp-chip-icon]')
? h("slot", { name: "cbp-chip-icon" })
: h("cbp-icon", { name: "plus", ref: el => this.icon = el }))));
}
static get is() { return "cbp-chip"; }
static get originalStyleUrls() {
return {
"$": ["cbp-chip.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-chip.css"]
};
}
static get properties() {
return {
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the `name` attribute of the rendered button"
},
"attribute": "name",
"reflect": true
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the `value` attribute of the rendered button"
},
"attribute": "value",
"reflect": false
},
"pressed": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the pressed state of the button and `aria-pressed` attribute of the rendered button"
},
"attribute": "pressed",
"reflect": false,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Marks the rendered button/link in a disabled state when specified."
},
"attribute": "disabled",
"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 events() {
return [{
"method": "chipClick",
"name": "chipClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "A custom event emitted when the chip is activated/toggled."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-chip.js.map