@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
361 lines (360 loc) • 13.5 kB
JavaScript
import { h, Host, } from "@stencil/core";
import { convertPropsToClasses } from "./modus-wc-chip.tailwind";
import { handleShadowDOMStyles } from "../base-component";
import { inheritAriaAttributes, KEY } from "../utils";
/**
* A customizable chip component used to display information in a compact area
*
* The component supports a `<slot>` for injecting custom content such as avatar and icons.
*/
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 the chip height can grow and its content can wrap across multiple lines. */
this.multiline = false;
/** Whether to show the close icon on right side of the chip. */
this.showRemove = false;
/** The shape of the chip: 'rectangle' (default) or 'circle'. */
this.shape = 'rectangle';
/** 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() {
// Auto-inject CSS if component is used inside user's shadow DOM
handleShadowDOMStyles(this.el);
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,
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.multiline)
classList.push('modus-wc-chip-multiline');
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
render() {
return (h(Host, { key: '6607ee12f2652f7f80a51ee5cfaa73ad16dbbb3e' }, h("button", Object.assign({ key: '1e75774576706b7a0d8ccc224254ffbfbdf824c5', "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: '8e03e28f633c65d326567c0e63cb583240b35ac7' }), this.label && h("span", { key: '8c2a1dc60e3ff0f726fef0e534ee13d3a8219a60', class: "modus-wc-chip-label" }, this.label), this.showRemove && (h("modus-wc-icon", { key: 'c4749217f4f5fe0939c2bcc6677887c95f481283', "custom-class": "modus-wc-chip-remove-icon", name: "close", 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": "''"
},
"multiline": {
"type": "boolean",
"attribute": "multiline",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Whether the chip height can grow and its content can wrap across multiple lines."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"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"
},
"shape": {
"type": "string",
"attribute": "shape",
"mutable": false,
"complexType": {
"original": "'rectangle' | 'circle'",
"resolved": "\"circle\" | \"rectangle\" | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The shape of the chip: 'rectangle' (default) or 'circle'."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'rectangle'"
},
"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"; }
}