@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
242 lines (241 loc) • 10.1 kB
JavaScript
import { Fragment, h, Host, } from "@stencil/core";
import { convertPropsToClasses, convertPropsToDescriptionDivClasses, convertPropsToTitleChildDivClasses, convertPropsToTitleDivClasses, } from "./modus-wc-collapse.tailwind";
import { generateRandomId, inheritAriaAttributes, KEY, } from "../utils";
/**
* A customizable collapse component used for showing and hiding content.
*
* The component supports a 'header' and 'content' `<slot>` for injecting custom HTML.
* Do not set
*/
export class ModusWcCollapse {
constructor() {
this.inheritedAttributes = {};
/** Indicates that the component should have a border. */
this.bordered = false;
/** Custom CSS class to apply to the outer div. */
this.customClass = '';
/** Controls whether the collapse is expanded or not. */
this.expanded = false;
this.handleClick = () => {
this.expanded = !this.expanded;
this.expandedChange.emit({ expanded: this.expanded });
};
this.handleContentClick = (event) => {
event.stopPropagation();
};
this.handleKeyDown = (event) => {
if (event.key === KEY.Enter || event.key === KEY.Space) {
event.preventDefault();
this.handleClick();
}
};
}
expandedChanged(newValue) {
const checkbox = this.el.querySelector('input[type="checkbox"]');
if (checkbox)
checkbox.checked = newValue;
}
componentWillLoad() {
if (!this.collapseId) {
this.collapseId = generateRandomId();
}
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
getOuterDivClasses() {
const classList = ['modus-wc-collapse modus-wc-collapse-arrow'];
const propClasses = convertPropsToClasses({
bordered: this.bordered,
expanded: this.expanded,
});
// 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(' ');
}
// istanbul ignore next
getTitleDivClasses() {
var _a;
const classList = [
'modus-wc-collapse-title modus-wc-inline-flex modus-wc-items-center modus-wc-justify-between modus-wc-min-h-4',
];
const paddingClass = convertPropsToTitleDivClasses({
size: (_a = this.options) === null || _a === void 0 ? void 0 : _a.size,
});
if (paddingClass)
classList.push(paddingClass);
return classList.join(' ');
}
// istanbul ignore next
getTitleChildDivClasses() {
var _a;
const classList = ['modus-wc-inline-flex modus-wc-items-center'];
const titleFontSize = convertPropsToTitleChildDivClasses({
size: (_a = this.options) === null || _a === void 0 ? void 0 : _a.size,
});
if (titleFontSize)
classList.push(titleFontSize);
return classList.join(' ');
}
// istanbul ignore next
getDescriptionDivClasses() {
var _a;
const classList = ['description modus-wc-font-light'];
const descriptionFontSize = convertPropsToDescriptionDivClasses({
size: (_a = this.options) === null || _a === void 0 ? void 0 : _a.size,
});
if (descriptionFontSize)
classList.push(descriptionFontSize);
return classList.join(' ');
}
render() {
const baseId = this.collapseId;
const titleId = `${baseId}-title`;
const contentId = `${baseId}-content`;
return (h(Host, { key: '64f5e9eaac709f4687b94e0711e6dd7ad8b60f60' }, h("div", Object.assign({ key: '8f0569877aa58d9193194c39ffdbd32f5e814ff5', class: this.getOuterDivClasses() }, this.inheritedAttributes), h("input", { key: '1107c2cec3e33dd0b2f0caad35bec98bb230f5b8', "aria-controls": contentId, "aria-expanded": this.expanded, "aria-labelledby": titleId, class: "modus-wc-min-h-4 modus-wc-cursor-pointer", id: `${baseId}-checkbox`, onClick: this.handleClick, onKeyDown: this.handleKeyDown, type: "checkbox" }), h("div", { key: 'de16249f31fbd4b8a9cd89ba8f7f6029fb062689', class: this.getTitleDivClasses(), id: titleId }, this.options ? (h(Fragment, null, h("div", { class: this.getTitleChildDivClasses() }, this.options.icon && (h("modus-wc-icon", { "aria-label": this.options.iconAriaLabel, decorative: true, name: this.options.icon, size: this.options.size })), this.options.title), this.options.description && (h("div", { class: this.getDescriptionDivClasses() }, this.options.description)))) : (h("slot", { name: "header" }))), h("div", { key: 'bfa1ce6b1d5e8dd760092dbcd9c70804c65f5849', "aria-labelledby": titleId, class: "modus-wc-collapse-content modus-wc-cursor-default", id: contentId, onClick: this.handleContentClick }, h("slot", { key: '0ec652e1233f4124368f225c6f9c88f74458317d', name: "content" })))));
}
static get is() { return "modus-wc-collapse"; }
static get originalStyleUrls() {
return {
"$": ["modus-wc-collapse.scss"]
};
}
static get styleUrls() {
return {
"$": ["modus-wc-collapse.css"]
};
}
static get properties() {
return {
"bordered": {
"type": "boolean",
"attribute": "bordered",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Indicates that the component should have a border."
},
"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 outer div."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"expanded": {
"type": "boolean",
"attribute": "expanded",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Controls whether the collapse is expanded or not."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"collapseId": {
"type": "string",
"attribute": "collapse-id",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "A unique identifier used to set the id attributes of various elements."
},
"getter": false,
"setter": false,
"reflect": false
},
"options": {
"type": "unknown",
"attribute": "options",
"mutable": false,
"complexType": {
"original": "ICollapseOptions",
"resolved": "ICollapseOptions | undefined",
"references": {
"ICollapseOptions": {
"location": "local",
"path": "/home/runner/work/modus-wc-2.0/modus-wc-2.0/src/components/modus-wc-collapse/modus-wc-collapse.tsx",
"id": "src/components/modus-wc-collapse/modus-wc-collapse.tsx::ICollapseOptions"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Configuration options for rendering the pre-laid out collapse component.\nDo not set this prop if you intend to use the 'header' slot."
},
"getter": false,
"setter": false
}
};
}
static get events() {
return [{
"method": "expandedChange",
"name": "expandedChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the expanded prop is internally changed."
},
"complexType": {
"original": "{ expanded: boolean }",
"resolved": "{ expanded: boolean; }",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "expanded",
"methodName": "expandedChanged"
}];
}
}