@trimble-oss/moduswebcomponents/components/p-CvGVe-_t.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

import { p as proxyCustomElement, H, h, c as Host } from './p-Blhe_h6i.js';
import { h as handleShadowDOMStyles } from './p-tWS3Egrk.js';
import { i as inheritAriaAttributes } from './p-DUWn6PrQ.js';

const convertPropsToClasses = ({ bordered, fullImage, layout, padding, }) => {
    let classes = '';
    if (bordered) {
        classes = `${classes} modus-wc-card-bordered`;
    }
    if (fullImage) {
        classes = `${classes} modus-wc-image-full`;
    }
    if (layout === 'horizontal') {
        classes = `${classes} modus-wc-card-side`;
    }
    if (padding === 'compact') {
        classes = `${classes} modus-wc-card-compact`;
    }
    if (padding === 'comfortable') {
        classes = `${classes} modus-wc-card-comfortable`;
    }
    return classes.trim();
};

const modusWcCardCss = "modus-wc-card .modus-wc-card:not(.modus-wc-card-bordered){background-color:var(--modus-wc-color-base-100)}modus-wc-card .modus-wc-card .modus-wc-card-title{margin-bottom:0}modus-wc-card .modus-wc-card.modus-wc-card-bordered{background-color:var(--modus-wc-color-base-page)}modus-wc-card .modus-wc-card{color:var(--modus-wc-color-base-content)}modus-wc-card .modus-wc-card figure{margin-bottom:unset}modus-wc-card .modus-wc-card .modus-wc-card-body{gap:unset}modus-wc-card .modus-wc-card .modus-wc-card-actions{margin-bottom:var(--modus-wc-spacing-xs)}modus-wc-card .modus-wc-card>modus-wc-collapse .modus-wc-collapse{background-color:var(--modus-wc-color-base-page)}[data-theme=modus-classic-light] modus-wc-card .modus-wc-card,[data-theme=modus-classic-dark] modus-wc-card .modus-wc-card{--rounded-box:0.5rem;box-shadow:0 0 2px 0 rgba(54, 53, 69, 0.3)}[data-theme=modus-classic-light] modus-wc-card .modus-wc-card:hover,[data-theme=modus-classic-dark] modus-wc-card .modus-wc-card:hover{box-shadow:0 0 8px 0 rgba(54, 53, 69, 0.3)}[data-theme=modus-classic-light] modus-wc-card .modus-wc-card .modus-wc-card-subtitle,[data-theme=modus-classic-dark] modus-wc-card .modus-wc-card .modus-wc-card-subtitle{font-weight:var(--modus-wc-font-weight-bold)}[data-theme=modus-classic-light] modus-wc-card .modus-wc-card .modus-wc-card-title{--fallback-bc:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-light] modus-wc-card .modus-wc-card .modus-wc-card-subtitle{color:var(--modus-wc-color-gray-8)}[data-theme=modus-classic-dark] modus-wc-card .modus-wc-card .modus-wc-card-title{--fallback-bc:var(--modus-wc-color-white)}[data-theme=modus-classic-dark] modus-wc-card .modus-wc-card .modus-wc-card-subtitle{color:var(--modus-wc-color-gray-1)}[data-theme=connect-light] modus-wc-card .modus-wc-card,[data-theme=connect-dark] modus-wc-card .modus-wc-card{box-shadow:0 0 0.25rem var(--modus-wc-color-base-200)}[data-theme=connect-light] modus-wc-card .modus-wc-card:hover,[data-theme=connect-dark] modus-wc-card .modus-wc-card:hover{background-color:var(--modus-wc-color-base-100);color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-card .modus-wc-card:focus,[data-theme=connect-dark] modus-wc-card .modus-wc-card:focus{background-color:var(--modus-wc-color-base-200);color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-card .modus-wc-card:active,[data-theme=connect-dark] modus-wc-card .modus-wc-card:active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-card .modus-wc-card-selected,[data-theme=connect-dark] modus-wc-card .modus-wc-card-selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-card .modus-wc-card-active,[data-theme=connect-dark] modus-wc-card .modus-wc-card-active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-card .modus-wc-card-open,[data-theme=connect-dark] modus-wc-card .modus-wc-card-open{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-card .modus-wc-card.selected,[data-theme=connect-dark] modus-wc-card .modus-wc-card.selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-card .modus-wc-card.active,[data-theme=connect-dark] modus-wc-card .modus-wc-card.active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-card .modus-wc-card-disabled:hover,[data-theme=connect-dark] modus-wc-card .modus-wc-card-disabled:hover{background-color:inherit}[data-theme=connect-light] modus-wc-card .modus-wc-card--active,[data-theme=connect-dark] modus-wc-card .modus-wc-card--active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-card .modus-wc-card--selected,[data-theme=connect-dark] modus-wc-card .modus-wc-card--selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-card .modus-wc-card:checked,[data-theme=connect-dark] modus-wc-card .modus-wc-card:checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}[data-theme=connect-light] modus-wc-card .modus-wc-card.checked,[data-theme=connect-dark] modus-wc-card .modus-wc-card.checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}[data-theme=connect-light] modus-wc-card .modus-wc-card-checked,[data-theme=connect-dark] modus-wc-card .modus-wc-card-checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}[data-theme=connect-light] modus-wc-card .modus-wc-card.pressed,[data-theme=connect-dark] modus-wc-card .modus-wc-card.pressed{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}[data-theme=connect-light] modus-wc-card .modus-wc-card-pressed,[data-theme=connect-dark] modus-wc-card .modus-wc-card-pressed{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}[data-theme=connect-light] modus-wc-card .modus-wc-card[aria-pressed=true],[data-theme=connect-dark] modus-wc-card .modus-wc-card[aria-pressed=true]{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}[data-theme=connect-light] modus-wc-card .modus-wc-card:hover,[data-theme=connect-dark] modus-wc-card .modus-wc-card:hover{box-shadow:0 0 0.375rem var(--modus-wc-color-base-100)}";

const ModusWcCard = /*@__PURE__*/ proxyCustomElement(class ModusWcCard extends H {
    constructor() {
        super();
        this.__registerHost();
        this.inheritedAttributes = {};
        /** Makes any \<figure> in the 'header' slot cover the background */
        this.backgroundFigure = false;
        /** Adds a hard border to the card */
        this.bordered = false;
        /** Custom CSS class to apply */
        this.customClass = '';
        /** Determines how the card is laid out */
        this.layout = 'vertical';
        /** Determines the interior padding size */
        this.padding = 'compact';
    }
    componentWillLoad() {
        handleShadowDOMStyles(this.el, true);
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    getClasses() {
        const classList = ['modus-wc-card modus-wc-rounded-card'];
        const propClasses = convertPropsToClasses({
            bordered: this.bordered,
            fullImage: this.backgroundFigure,
            layout: this.layout,
            padding: this.padding,
        });
        // 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: '2bd530d739a71856714ed46e2772a8a85b5c7067' }, h("article", Object.assign({ key: 'e351aa543600dff1d6b167ff55d7a58423e4e077', class: this.getClasses(), tabindex: -1 }, this.inheritedAttributes), h("slot", { key: 'dae0870810ba669f93dcd51bbc6582a4526fac00', name: "header" }), h("div", { key: '6fefc0bfd64b1a5506dae7ba37784a7700960e5d', class: "modus-wc-card-body" }, h("div", { key: '29b989e5e957c9c8f12e230fd99f968d9eac58eb', class: "modus-wc-card-title" }, h("slot", { key: 'ef72977e5b29a7fee99e8fbd05b635ccba50fffe', name: "title" })), h("div", { key: '64091544637258f092240ee28b98e578c2cbd8aa', class: "modus-wc-card-subtitle" }, h("slot", { key: '335c5fadc770f622f1cedfd1af75e1ae3be1d598', name: "subtitle" })), h("slot", { key: '225b91c2035f2782b9ba65e4b49c985f962ad725' }), " ", h("div", { key: 'c154dfacdffb83c09a420d67c02ad15b4073e958', class: "modus-wc-card-actions" }, h("slot", { key: '386f07253453a5a9937597344db4d72ff2fda9b1', name: "actions" }))), h("slot", { key: '2f64d76f0909c0fd898a1359cdb3fab84dd7c208', name: "footer" }))));
    }
    get el() { return this; }
    static get style() { return modusWcCardCss; }
}, [4, "modus-wc-card", {
        "backgroundFigure": [4, "background-figure"],
        "bordered": [4],
        "customClass": [1, "custom-class"],
        "layout": [1],
        "padding": [1]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["modus-wc-card"];
    components.forEach(tagName => { switch (tagName) {
        case "modus-wc-card":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ModusWcCard);
            }
            break;
    } });
}

export { ModusWcCard as M, defineCustomElement as d };