@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
299 lines (298 loc) • 11.1 kB
JavaScript
import { h, Host, } from "@stencil/core";
import { convertPropsToClasses } from "./modus-wc-button.tailwind";
import { inheritAriaAttributes, KEY } from "../utils";
/**
* A customizable button component used to create buttons with different sizes, variants, and types.
*
* The component supports a `<slot>` for injecting content within the button, similar to a native HTML button
*/
export class ModusWcButton {
constructor() {
this.inheritedAttributes = {};
/** The color variant of the button. */
this.color = 'primary';
/** Custom CSS class to apply to the button element. */
this.customClass = '';
/** If true, the button will be disabled. */
this.disabled = false;
/** If true, the button will take the full width of its container. */
this.fullWidth = false;
/** If true, the button will be in a pressed state (for toggle buttons). */
this.pressed = false;
/** The shape of the button. */
this.shape = 'rectangle';
/** The size of the button. */
this.size = 'md';
/** The type of the button. */
this.type = 'button';
/** The variant of the button. */
this.variant = 'filled';
this.handleClick = (event) => {
if (!this.disabled) {
this.buttonClick.emit(event);
}
};
// @ts-expect-error: TODO fixes linting issue, test thoroughly
this.handleKeyDown = (event) => {
if (!this.disabled &&
(event.key === KEY.Enter || event.key === KEY.Space)) {
event.preventDefault();
this.buttonClick.emit(event);
}
};
}
componentWillLoad() {
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
getClasses() {
const classList = ['modus-wc-btn'];
const propClasses = convertPropsToClasses({
color: this.color,
disabled: this.disabled,
fullWidth: this.fullWidth,
pressed: this.pressed,
shape: this.shape,
size: this.size,
variant: this.variant,
});
// The order CSS classes are added matters to CSS specificity
if (propClasses)
classList.push(propClasses);
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
render() {
const ariaPressed = this.pressed ? 'true' : undefined;
return (h(Host, { key: 'e52093307a31052c590b31df97e47f3002426368' }, h("button", Object.assign({ key: 'ac98aafb5b30ba4bb8bef613f09bb0e9539268a5', class: this.getClasses(), "aria-pressed": ariaPressed, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: this.disabled ? -1 : 0, type: this.type }, this.inheritedAttributes), h("slot", { key: '5bcf393c59add0cdfc88478bc2e5918d6817bd70' }))));
}
static get is() { return "modus-wc-button"; }
static get originalStyleUrls() {
return {
"$": ["modus-wc-button.scss"]
};
}
static get styleUrls() {
return {
"$": ["modus-wc-button.css"]
};
}
static get properties() {
return {
"color": {
"type": "string",
"attribute": "color",
"mutable": false,
"complexType": {
"original": "'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger'",
"resolved": "\"danger\" | \"primary\" | \"secondary\" | \"tertiary\" | \"warning\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The color variant of the button."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'primary'"
},
"customClass": {
"type": "string",
"attribute": "custom-class",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Custom CSS class to apply to the button element."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"disabled": {
"type": "boolean",
"attribute": "disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "If true, the button will be disabled."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"fullWidth": {
"type": "boolean",
"attribute": "full-width",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "If true, the button will take the full width of its container."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"pressed": {
"type": "boolean",
"attribute": "pressed",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "If true, the button will be in a pressed state (for toggle buttons)."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"shape": {
"type": "string",
"attribute": "shape",
"mutable": false,
"complexType": {
"original": "'circle' | 'ellipse' | 'rectangle' | 'square'",
"resolved": "\"circle\" | \"ellipse\" | \"rectangle\" | \"square\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The shape of the button."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'rectangle'"
},
"size": {
"type": "string",
"attribute": "size",
"mutable": false,
"complexType": {
"original": "DaisySize",
"resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
"references": {
"DaisySize": {
"location": "import",
"path": "../types",
"id": "src/components/types.ts::DaisySize"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The size of the button."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'md'"
},
"type": {
"type": "string",
"attribute": "type",
"mutable": false,
"complexType": {
"original": "'button' | 'submit' | 'reset'",
"resolved": "\"button\" | \"reset\" | \"submit\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The type of the button."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'button'"
},
"variant": {
"type": "string",
"attribute": "variant",
"mutable": false,
"complexType": {
"original": "'borderless' | 'filled' | 'outlined'",
"resolved": "\"borderless\" | \"filled\" | \"outlined\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The variant of the button."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'filled'"
}
};
}
static get events() {
return [{
"method": "buttonClick",
"name": "buttonClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the button is clicked or activated via keyboard."
},
"complexType": {
"original": "MouseEvent | KeyboardEvent",
"resolved": "KeyboardEvent | MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
},
"KeyboardEvent": {
"location": "global",
"id": "global::KeyboardEvent"
}
}
}
}];
}
static get elementRef() { return "el"; }
}