@trimble-oss/moduswebcomponents/cjs/modus-wc-collapse.cjs.entry.js

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

'use strict';

var index = require('./index-CtEGR9Z7.js');
var baseComponent = require('./base-component-Dx-Crsr_.js');
var utils = require('./utils-B2oo-h7a.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 details.modus-wc-collapse>summary{display:inline-flex}modus-wc-collapse .modus-wc-collapse{background-color:var(--modus-wc-color-base-100);border-radius:0;box-sizing:border-box;color:var(--modus-wc-color-base-content);margin-bottom:var(--modus-wc-spacing-md);transition:none}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title{cursor:pointer;font-size:var(--modus-wc-font-size-md);font-weight:var(--modus-wc-font-weight-semibold);min-height:unset;padding:var(--modus-wc-spacing-lg) var(--modus-wc-spacing-3xl) var(--modus-wc-spacing-lg) var(--modus-wc-spacing-3xl);position:relative;width:auto}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title:hover{background-color:var(--modus-wc-color-base-100);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title:focus{background-color:var(--modus-wc-color-base-200);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title:active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title-selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title-active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title-open{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title.selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title.active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title-disabled:hover{background-color:inherit}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title--active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title--selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title:checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title.checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title-checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title.pressed{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title-pressed{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title[aria-pressed=true]{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title:hover,modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title:active,modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title:focus{background-color:transparent;color:var(--modus-wc-color-base-content)}modus-wc-collapse .modus-wc-collapse .description{font-size:var(--modus-wc-font-size-md);padding-inline-start:var(--modus-wc-spacing-md)}modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-content{font-size:var(--modus-wc-font-size-md)}modus-wc-collapse .modus-wc-collapse .modus-wc-title-main-content{display:inline-flex;flex:1;flex-direction:column;min-width:0}modus-wc-collapse .modus-wc-collapse .modus-wc-summary-main-content{align-items:center;display:flex;justify-content:space-between;min-height:1rem;width:100%}modus-wc-collapse .modus-wc-collapse .modus-wc-title-main-row>modus-wc-icon{height:24px;margin-inline-end:var(--modus-wc-spacing-sm)}modus-wc-collapse .modus-wc-collapse .modus-wc-title-end-content{align-items:center;display:inline-flex}modus-wc-collapse .modus-wc-collapse .title-end-icon{height:24px;margin-inline-start:var(--modus-wc-spacing-sm);pointer-events:none;position:relative;top:2px}modus-wc-collapse .modus-wc-collapse .title-start-icon{height:24px;inset-inline-start:var(--modus-wc-spacing-lg);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}modus-wc-collapse .modus-wc-collapse.modus-wc-border{background-color:var(--modus-wc-color-base-page);border:none;border-bottom:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-base-200)}modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open .modus-wc-collapse-content{padding:var(--modus-wc-spacing-md);padding-top:var(--modus-wc-spacing-sm)}modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open .modus-wc-collapse-title{color:var(--modus-wc-color-base-content)}modus-wc-collapse .modus-wc-collapse.has-start-icon>.modus-wc-collapse-title{padding-inline-start:var(--modus-wc-size-xxl)}modus-wc-collapse .modus-wc-collapse.has-start-icon>.modus-wc-collapse-title::before{inset-inline-start:49px}modus-wc-collapse .modus-wc-collapse.modus-wc-chevron-left>.modus-wc-collapse-title{padding-inline-end:16px}modus-wc-collapse .modus-wc-collapse.no-leading-icons>.modus-wc-collapse-title{padding-inline-start:16px}modus-wc-collapse .modus-wc-collapse.no-leading-icons>.modus-wc-collapse-description{padding-inline-start:var(--modus-wc-spacing-md)}.modus-wc-collapse-arrow.modus-wc-chevron-left>.modus-wc-collapse-title::before{box-shadow:2px 2px;content:\"\";display:block;height:0.5rem;inset-inline-start:var(--modus-wc-spacing-lg);pointer-events:none;position:absolute;top:44%;transform:translateY(-50%) rotate(45deg);transform-origin:75% 75%;transition-duration:0.2s;transition-property:transform;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);width:0.5rem}.modus-wc-collapse-arrow.modus-wc-chevron-left.modus-wc-collapse-open>.modus-wc-collapse-title::before{top:50%;transform:translateY(-50%) rotate(225deg)}.modus-wc-collapse-arrow.modus-wc-chevron-left>.modus-wc-collapse-title::after{display:none}[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.modus-wc-border{border:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-base-200)}[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)}[data-theme=modus-classic-light] modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open.no-leading-icons .modus-wc-collapse-description{padding-inline-start:var(--modus-wc-spacing-md)}[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse{background-color:var(--modus-wc-color-trimble-gray);color:inherit}[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse.modus-wc-border{border:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-base-200)}[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse .description{color:var(--modus-wc-color-base-inverted)}[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)}[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open.no-leading-icons .modus-wc-collapse-title,[data-theme=modus-classic-dark] modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open.no-leading-icons .modus-wc-collapse-description{padding-inline-start:var(--modus-wc-spacing-md)}[data-theme=connect-light] modus-wc-collapse .modus-wc-collapse,[data-theme=connect-dark] modus-wc-collapse .modus-wc-collapse{background-color:var(--modus-wc-color-base-page);border:1px solid var(--modus-wc-color-base-200);color:var(--modus-wc-color-base-content)}[data-theme=connect-light] modus-wc-collapse .modus-wc-collapse.modus-wc-border,[data-theme=connect-dark] modus-wc-collapse .modus-wc-collapse.modus-wc-border{border-radius:var(--modus-wc-border-radius-box)}[data-theme=modus-modern-light] modus-wc-collapse .modus-wc-collapse:not(.modus-wc-border){border-radius:var(--modus-wc-border-radius-box)}[data-theme=modus-modern-dark] modus-wc-collapse .modus-wc-collapse:not(.modus-wc-border){border-radius:var(--modus-wc-border-radius-box)}[data-theme=modus-modern-dark] modus-wc-collapse .modus-wc-collapse{color:var(--modus-wc-color-base-inverted)}[data-theme=modus-modern-dark] modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-title,[data-theme=modus-modern-dark] modus-wc-collapse .modus-wc-collapse .description,[data-theme=modus-modern-dark] modus-wc-collapse .modus-wc-collapse .modus-wc-collapse-content,[data-theme=modus-modern-dark] modus-wc-collapse .modus-wc-collapse.modus-wc-collapse-arrow.modus-wc-collapse-open .modus-wc-collapse-title{color:var(--modus-wc-color-base-inverted)}";

const ModusWcCollapse = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.expandedChange = index.createEvent(this, "expandedChange", 7);
        this.inheritedAttributes = {};
        /** When true, renders a border-bottom on the collapse component. */
        this.bordered = false;
        /** Controls chevron placement. */
        this.chevronPosition = 'right';
        /** Custom CSS class to apply to the outer div. */
        this.customClass = '';
        /** Controls whether the collapse is expanded or not. */
        this.expanded = false;
        this.handleToggle = (event) => {
            const detailsElement = event.currentTarget;
            const isOpen = detailsElement.open;
            if (this.expanded !== isOpen) {
                this.expanded = isOpen;
                this.expandedChange.emit({ expanded: isOpen });
            }
        };
    }
    expandedChanged(newValue) {
        if (this.detailsRef && this.detailsRef.open !== newValue) {
            this.detailsRef.open = newValue;
        }
    }
    componentWillLoad() {
        // Auto-inject CSS if component is used inside user's shadow DOM
        baseComponent.handleShadowDOMStyles(this.el);
        if (!this.collapseId) {
            this.collapseId = utils.generateRandomId();
        }
        this.inheritedAttributes = utils.inheritAriaAttributes(this.el);
    }
    getOuterDivClasses() {
        var _a, _b;
        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);
        classList.push(`modus-wc-chevron-${this.chevronPosition}`);
        if (!((_a = this.options) === null || _a === void 0 ? void 0 : _a.startIcon) && this.chevronPosition !== 'left') {
            classList.push('no-leading-icons');
        }
        if (((_b = this.options) === null || _b === void 0 ? void 0 : _b.startIcon) && this.chevronPosition === 'left') {
            classList.push('has-start-icon');
        }
        if (this.customClass)
            classList.push(this.customClass);
        return classList.join(' ');
    }
    // istanbul ignore next
    getTitleClasses() {
        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-title-main-row 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() {
        var _a;
        const baseId = this.collapseId;
        const titleId = `${baseId}-title`;
        const contentId = `${baseId}-content`;
        return (index.h(index.Host, { key: '066210e7a999faf40422efe7bc50281975585fad' }, index.h("details", Object.assign({ key: '6ea85a85f00b3328dc744a2ba4b58abfd64ce534', class: this.getOuterDivClasses(), open: this.expanded, onToggle: this.handleToggle, ref: (el) => (this.detailsRef = el) }, this.inheritedAttributes), index.h("summary", { key: 'e5f2f7edbbbbc4e2b520ade5cd5eddc9e9fcb5bd', class: this.getTitleClasses(), id: titleId }, this.options ? (index.h("div", { class: "modus-wc-summary-main-content" }, this.options.startIcon && (index.h("modus-wc-icon", { "aria-label": this.options.startIconAriaLabel, class: "title-start-icon", decorative: !this.options.startIconAriaLabel, name: this.options.startIcon, size: this.options.size })), index.h("div", { class: "modus-wc-title-main-content" }, index.h("div", { class: this.getTitleChildDivClasses() }, this.options.icon && (index.h("modus-wc-icon", { "aria-label": this.options.iconAriaLabel, decorative: !this.options.iconAriaLabel, name: this.options.icon, size: this.options.size })), this.options.title)), this.options.endIcon && (index.h("div", { class: "modus-wc-title-end-content" }, index.h("modus-wc-icon", { "aria-label": this.options.endIconAriaLabel, class: "title-end-icon", decorative: !this.options.endIconAriaLabel, name: this.options.endIcon, size: this.options.size }))))) : (index.h("slot", { name: "header" }))), this.expanded && ((_a = this.options) === null || _a === void 0 ? void 0 : _a.description) && (index.h("div", { key: 'b13862fde0e208df6598d1bfd54977e8d3fd6b6d', class: `modus-wc-collapse-description ${this.getDescriptionDivClasses()}` }, this.options.description)), index.h("div", { key: '40538c27af9f30b527e52ae40d4ac6c5a65b366a', "aria-labelledby": titleId, class: "modus-wc-collapse-content modus-wc-cursor-default", id: contentId }, index.h("slot", { key: 'c0563a96763e89fe916748a9155590d6074cadbc', name: "content" })))));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "expanded": ["expandedChanged"]
    }; }
};
ModusWcCollapse.style = modusWcCollapseCss;

exports.modus_wc_collapse = ModusWcCollapse;