@cbpds/web-components
Version:
Web components for the CBP Design System.
550 lines (549 loc) • 21.5 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps, getElementAttrs, createNamespaceKey } from "../../utils/utils";
export class CbpButton {
constructor() {
this.tag = 'button';
this.type = 'button';
this.fill = 'solid';
this.color = 'primary';
this.variant = undefined;
this.controlId = createNamespaceKey('cbp-button');
this.name = undefined;
this.value = undefined;
this.href = undefined;
this.rel = undefined;
this.target = undefined;
this.download = undefined;
this.width = undefined;
this.height = undefined;
this.pressed = undefined;
this.expanded = undefined;
this.controls = undefined;
this.targetProp = undefined;
this.accessibilityText = undefined;
this.disabled = undefined;
this.context = undefined;
this.sx = {};
}
handleClick(e) {
var _a;
if (this.controls) {
if (!this.controlTarget)
this.controlTarget = document.querySelector(`#${this.controls}`);
if (this.controlTarget) {
this.controlTarget[this.targetProp] = !this.controlTarget[this.targetProp];
}
else {
console.warn('cbp-button configuration error: the control target referenced by ID by the `control` property could not be found.');
}
}
(_a = this.buttonClick) === null || _a === void 0 ? void 0 : _a.emit({
host: this.host,
nativeElement: this.button,
nativeEvent: e,
controls: this.controls ? this.controls : null,
pressed: this.pressed,
expanded: this.expanded,
name: this.button.tagName == 'BUTTON' ? this.button.name : null,
value: this.button.tagName == 'BUTTON' ? this.button.value : null,
});
}
componentWillLoad() {
this.controlTarget = this.controls ? document.querySelector(`#${this.controls}`) : undefined;
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
let hostattrs = getElementAttrs(this.host);
this.persistedAttrs = Object.fromEntries(Object.entries(hostattrs).filter(([key]) => (key.includes('aria-') || key == 'role')));
}
componentDidLoad() {
if (!this.button) {
const slottedButton = (this.button = this.host.querySelector('button,a'));
if (slottedButton) {
this.button = slottedButton;
this.button.addEventListener('click', this.handleClick);
}
}
if (this.button) {
this.button.getAttribute('id')
? this.controlId = this.button.getAttribute('id')
: this.button.setAttribute('id', `${this.controlId}`);
if (this.disabled)
this.button.setAttribute('disabled', '');
}
setCSSProps(this.button, {
'min-width': this.width,
'min-height': this.height,
});
for (const [key] of Object.entries(this.persistedAttrs)) {
this.host.removeAttribute(key);
}
this.componentLoad.emit({
host: this.host,
nativeElement: this.button,
name: this.button.tagName == 'BUTTON' ? this.button.name : null,
value: this.button.tagName == 'BUTTON' ? this.button.value : null,
});
}
render() {
const { type, name, value, disabled, rel, target, href, download } = this;
const attrs = this.tag === 'button'
? {
type,
name,
value,
disabled,
}
: {
download,
href,
rel,
target,
};
if (this.host.querySelector('[slot=cbp-button-custom]')) {
if (this.disabled)
this.button.setAttribute("disabled", '');
return (h(Host, { onClick: (e) => this.handleClick(e) }, h("slot", { name: "cbp-button-custom" })));
}
else if (this.tag === 'button') {
return (h(Host, { onClick: (e) => this.handleClick(e) }, h("button", Object.assign({}, this.persistedAttrs, attrs, { disabled: this.disabled, "aria-label": this.accessibilityText, "aria-pressed": this.pressed, "aria-expanded": this.expanded, "aria-controls": this.controls, ref: el => (this.button = el) }), h("slot", null))));
}
else {
return (h(Host, { onClick: (e) => this.handleClick(e) }, h("a", Object.assign({}, this.persistedAttrs, attrs, { "aria-label": this.accessibilityText, "aria-pressed": this.pressed, "aria-expanded": this.expanded, "aria-controls": this.controls, role: disabled ? 'link' : null, "aria-disabled": disabled ? 'true' : null, ref: el => (this.button = el) }), h("slot", null))));
}
}
static get is() { return "cbp-button"; }
static get originalStyleUrls() {
return {
"$": ["cbp-button.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-button.css"]
};
}
static get properties() {
return {
"tag": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'button' | 'a'",
"resolved": "\"a\" | \"button\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether the button is a true button element or \"link button.\""
},
"attribute": "tag",
"reflect": false,
"defaultValue": "'button'"
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'button' | 'submit' | 'reset'",
"resolved": "\"button\" | \"reset\" | \"submit\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The `type` attribute of the button: button, submit, or reset. Defaults to \"button.\""
},
"attribute": "type",
"reflect": false,
"defaultValue": "'button'"
},
"fill": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'solid' | 'outline' | 'ghost'",
"resolved": "\"ghost\" | \"outline\" | \"solid\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The visual fill of the button: solid, outline, or ghost. Defaults to \"solid.\""
},
"attribute": "fill",
"reflect": true,
"defaultValue": "'solid'"
},
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'primary' | 'secondary' | 'danger'",
"resolved": "\"danger\" | \"primary\" | \"secondary\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The color of the button: primary, secondary, or danger. Defaults to \"primary.\""
},
"attribute": "color",
"reflect": true,
"defaultValue": "'primary'"
},
"variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'square' | 'cta'",
"resolved": "\"cta\" | \"square\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies a variant of the buttons, such as square for buttons with only an icon and call-to-action button."
},
"attribute": "variant",
"reflect": true
},
"controlId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Optionally specify the ID of the control here, which is used to generate related pattern node IDs and associate everything for accessibility"
},
"attribute": "control-id",
"reflect": false,
"defaultValue": "createNamespaceKey('cbp-button')"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The `name` attribute of the button, which is passed as part of formData (as a key) for the the pressed submit button."
},
"attribute": "name",
"reflect": false
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The `value` attribute of the button, which is passed as part of formData (as a value) for the the pressed submit button."
},
"attribute": "value",
"reflect": false
},
"href": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The `href` attribute of a link button."
},
"attribute": "href",
"reflect": false
},
"rel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The `rel` attribute of a link button."
},
"attribute": "rel",
"reflect": false
},
"target": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The `target` attribute of a link button."
},
"attribute": "target",
"reflect": false
},
"download": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The `download` attribute of a link button; when present tells the browser to download the specified href URI instead\nof viewing or navigating to it."
},
"attribute": "download",
"reflect": false
},
"width": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the (min-)width of the button (in CSS units) when different from the default size."
},
"attribute": "width",
"reflect": false
},
"height": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the (min-)height of the button (in CSS units) when different from the default size."
},
"attribute": "height",
"reflect": false
},
"pressed": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"true\" | \"false\"",
"resolved": "\"false\" | \"true\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies if the button is pressed and results in `aria-pressed=\"true|false\"` being placed on the \nbutton when specified. Only valid on actual `button` elements."
},
"attribute": "pressed",
"reflect": true
},
"expanded": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"true\" | \"false\"",
"resolved": "\"false\" | \"true\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies if a controlled UI widget is expanded and results in `aria-pressed=\"true|false\"` being placed \non the button when specified. This property is usually used for progressive disclosure patterns such as \naccordions, menus, expand/collapse, etc., where focus remains on the control after the user action."
},
"attribute": "expanded",
"reflect": true
},
"controls": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the DOM element that the button controls and results in the `aria-controls` attribute\nrendered on the button with the specified value."
},
"attribute": "controls",
"reflect": false
},
"targetProp": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The property on the target element being toggled by the button/control (e.g., \"open\")."
},
"attribute": "target-prop",
"reflect": false
},
"accessibilityText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies an accessible label for the button/link as an `aria-label` when the button does not contain label text\nor a sufficiently unique label. This text overrides the default label and is not additive to it."
},
"attribute": "accessibility-text",
"reflect": 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": "buttonClick",
"name": "buttonClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "A custom event emitted when the click event occurs for either a rendered button or anchor/link."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "componentLoad",
"name": "componentLoad",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "A custom event emitted when the component has completed loading and its internal lifecycles."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-button.js.map