@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
310 lines (309 loc) • 11.4 kB
JavaScript
import { h, Host, } from "@stencil/core";
import { convertPropsToClasses } from "./modus-wc-chip.tailwind";
import { CancelCircleSolidIcon } from "../../icons/cancel-circle-solid.icon";
import { inheritAriaAttributes, KEY } from "../utils";
/**
* A customizable chip component used to display information in a compact area
*/
export class ModusWcChip {
constructor() {
this.inheritedAttributes = {};
/** Active state of chip. */
this.active = false;
/** Custom CSS class to apply to the inner div. */
this.customClass = '';
/** Whether the chip is disabled. */
this.disabled = false;
/** Whether the chip has an error. */
this.hasError = false;
/** The label to display in the chip. */
this.label = '';
/** Whether to show the close icon on right side of the chip. */
this.showRemove = false;
/** The size of the chip. */
this.size = 'md';
/** The variant of the chip. */
this.variant = 'filled';
this.handleKeyDown = (event) => {
if (!this.disabled &&
(event.key === KEY.Enter || event.key === KEY.Space)) {
event.preventDefault();
this.chipClick.emit(event);
}
};
this.handleKeyUp = (event) => {
if (!this.disabled && event.key === KEY.Escape) {
event.preventDefault();
this.chipRemove.emit(event);
}
};
this.handleChipClick = (event) => {
if (!this.disabled) {
this.chipClick.emit(event);
}
};
this.handleChipRemove = (event) => {
if (!this.disabled) {
this.chipRemove.emit(event);
}
};
}
componentWillLoad() {
if (!this.el.ariaLabel) {
this.el.ariaLabel = this.label || 'Chip';
}
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
getClasses() {
const classList = ['modus-wc-chip', 'modus-wc-btn'];
const propClasses = convertPropsToClasses({
active: this.active,
disabled: this.disabled,
hasError: this.hasError,
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() {
return (h(Host, { key: '4c957f3dc5d3cd9762bdab8c0e1b4e7cfcecd21b' }, h("button", Object.assign({ key: '35b0d2851623b55331f6c4fb03add0081eb64899', "aria-disabled": this.disabled, class: this.getClasses(), disabled: this.disabled, onClick: this.handleChipClick, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: 0, type: "button" }, this.inheritedAttributes), h("slot", { key: 'a5e34f2832892fe9bc7bf7fbecd251884a374a6d' }), this.label && h("span", { key: '7a0c365076fdbc26156eabbbd7339bee843c17c5', class: "modus-wc-chip-label" }, this.label), this.showRemove && (h(CancelCircleSolidIcon, { key: '964beb37a95c068cdd10533688c019c5ceb79fcb', className: "modus-wc-chip-remove-icon", onClick: this.handleChipRemove })))));
}
static get is() { return "modus-wc-chip"; }
static get originalStyleUrls() {
return {
"$": ["modus-wc-chip.scss"]
};
}
static get styleUrls() {
return {
"$": ["modus-wc-chip.css"]
};
}
static get properties() {
return {
"active": {
"type": "boolean",
"attribute": "active",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Active state of chip."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"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 inner div."
},
"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": "Whether the chip is disabled."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"hasError": {
"type": "boolean",
"attribute": "has-error",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Whether the chip has an error."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The label to display in the chip."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"showRemove": {
"type": "boolean",
"attribute": "show-remove",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Whether to show the close icon on right side of the chip."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"size": {
"type": "string",
"attribute": "size",
"mutable": false,
"complexType": {
"original": "ModusSize",
"resolved": "\"lg\" | \"md\" | \"sm\" | undefined",
"references": {
"ModusSize": {
"location": "import",
"path": "../types",
"id": "src/components/types.ts::ModusSize"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The size of the chip."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'md'"
},
"variant": {
"type": "string",
"attribute": "variant",
"mutable": false,
"complexType": {
"original": "'filled' | 'outline'",
"resolved": "\"filled\" | \"outline\" | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The variant of the chip."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'filled'"
}
};
}
static get events() {
return [{
"method": "chipClick",
"name": "chipClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the chip 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"
}
}
}
}, {
"method": "chipRemove",
"name": "chipRemove",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the close chip icon button is clicked."
},
"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"; }
}