@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
196 lines (190 loc) • 11.3 kB
JavaScript
import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment, c as Host } from './p-BMvVSi6Y.js';
import { K as KEY, g as generateRandomId, i as inheritAriaAttributes } from './p-COxr4v9W.js';
import { d as defineCustomElement$2 } from './p-C8YB6DYg.js';
const convertPropsToClasses = ({ bordered, expanded, }) => {
let classes = '';
if (bordered) {
classes = `${classes} modus-wc-border`;
}
if (expanded) {
classes = `${classes} modus-wc-collapse-open`;
}
else {
classes = `${classes} modus-wc-collapse-close`;
}
return classes.trim();
};
const convertPropsToDescriptionDivClasses = ({ size, }) => {
let sizeClass = 'modus-wc-text-base';
if (size) {
sizeClass = `modus-wc-text-${size}`;
}
return sizeClass;
};
const convertPropsToTitleChildDivClasses = ({ size, }) => {
let classes = '';
if (size) {
switch (size) {
case 'xs':
classes = 'modus-wc-text-base';
break;
case 'sm':
classes = 'modus-wc-text-lg';
break;
case 'md':
classes = 'modus-wc-text-xl';
break;
case 'lg':
classes = 'modus-wc-text-2xl';
break;
}
}
return classes;
};
const convertPropsToTitleDivClasses = ({ size, }) => {
let classes = '';
if (size) {
switch (size) {
case 'xs':
classes = 'modus-wc-pb-2 modus-wc-pl-2 modus-wc-pt-2';
break;
case 'sm':
classes = 'modus-wc-pb-3 modus-wc-pl-3 modus-wc-pt-3';
break;
case 'md':
classes = 'modus-wc-pb-4 modus-wc-pl-4 modus-wc-pt-4';
break;
case 'lg':
classes = 'modus-wc-pb-5 modus-wc-pl-5 modus-wc-pt-5';
break;
}
}
return classes;
};
const modusWcCollapseCss = "modus-wc-collapse .modus-wc-collapse{background-color:var(--modus-wc-color-base-100);border-color:transparent;box-sizing:border-box;color:var(--modus-wc-color-base-content);margin-bottom:var(--modus-wc-spacing-md);transition:none !important}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title{font-size:var(--modus-wc-font-size-md);font-weight:var(--modus-wc-font-weight-semibold);min-height:unset;padding:var(--modus-wc-spacing-md) var(--modus-wc-spacing-3xl) var(--modus-wc-spacing-md) var(--modus-wc-spacing-lg);width:auto}modus-wc-collapse .modus-wc-collapse .description{font-size:var(--modus-wc-font-size-sm)}modus-wc-collapse .modus-wc-collapse modus-wc-icon{height:24px;margin-inline-end:var(--modus-wc-spacing-sm)}modus-wc-collapse .modus-wc-collapse.modus-wc-border{background:var(--modus-wc-color-base-page);border:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-base-200);border-radius:var(--modus-wc-border-radius-box)}modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open .modus-wc-collapse-content{padding:var(--modus-wc-spacing-lg)}modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open .modus-wc-collapse-title{background-color:var(--modus-wc-color-base-200)}modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-border.modus-wc-collapse-open .modus-wc-collapse-title{background-color:var(--modus-wc-color-base-100)}.modus-wc-collapse-arrow>.modus-wc-collapse-title::after{top:50% !important}[data-theme=modus-classic-light] modus-wc-collapse .modus-wc-collapse,[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse{border-radius:var(--modus-wc-border-radius-md);margin-bottom:0;margin-bottom:-1px}[data-theme=modus-classic-light] modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title,[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title{font-weight:var(--modus-wc-font-weight-normal);min-height:unset;width:auto}[data-theme=modus-classic-light] modus-wc-collapse .modus-wc-collapse{background-color:var(--modus-wc-color-white);color:inherit}[data-theme=modus-classic-light] modus-wc-collapse .modus-wc-collapse .description{color:var(--modus-wc-color-gray-6)}[data-theme=modus-classic-light] modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open{border-left:var(--modus-wc-spacing-xs) solid var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open .modus-wc-collapse-title{background-color:var(--modus-wc-color-blue-pale);font-weight:var(--modus-wc-font-weight-normal);padding-inline-start:var(--modus-wc-spacing-md)}[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse{color:inherit}[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse .description{color:var(--modus-wc-color-gray-light)}[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open{border-left:var(--modus-wc-spacing-xs) solid var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open .modus-wc-collapse-title{background-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 30%, transparent);padding-inline-start:var(--modus-wc-spacing-md)}";
const ModusWcCollapse$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcCollapse extends H {
constructor() {
super();
this.__registerHost();
this.expandedChange = createEvent(this, "expandedChange");
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" })))));
}
get el() { return this; }
static get watchers() { return {
"expanded": ["expandedChanged"]
}; }
static get style() { return modusWcCollapseCss; }
}, [4, "modus-wc-collapse", {
"bordered": [4],
"customClass": [1, "custom-class"],
"expanded": [1028],
"collapseId": [1025, "collapse-id"],
"options": [16]
}, undefined, {
"expanded": ["expandedChanged"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["modus-wc-collapse", "modus-wc-icon"];
components.forEach(tagName => { switch (tagName) {
case "modus-wc-collapse":
if (!customElements.get(tagName)) {
customElements.define(tagName, ModusWcCollapse$1);
}
break;
case "modus-wc-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const ModusWcCollapse = ModusWcCollapse$1;
const defineCustomElement = defineCustomElement$1;
export { ModusWcCollapse, defineCustomElement };