@trimble-oss/moduswebcomponents/components/p-eB7dh9vG.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-X1tirp06.js';
import { i as inheritAriaAttributes } from './p-VPqXjOQn.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{background-color:var(--modus-wc-color-base-100);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}[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{background-color:var(--modus-wc-color-white);color:var(--modus-wc-color-trimble-gray)}[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{background-color:var(--modus-wc-color-gray-9);color:var(--modus-wc-color-trimble-white)}[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);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-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() {
        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: '25492378050f6c06ed7ea45e3947974356fbb44a' }, h("article", Object.assign({ key: '54fbda5fc406f57ffb2387bc59c79699278f219f', class: this.getClasses(), tabindex: -1 }, this.inheritedAttributes), h("slot", { key: '59b93595ec5a5e8ecd98be2eead691278db6e015', name: "header" }), h("div", { key: '294921b54282742d00dc530c8dba35a2219974d1', class: "modus-wc-card-body" }, h("div", { key: 'c746c0d4ee1765a57c0341d7c70b35424e3bbfa4', class: "modus-wc-card-title" }, h("slot", { key: '0afa213cf7fe78853d90d4f1a6cb817e28f2c965', name: "title" })), h("div", { key: '735d4456083500a288bad9adfd5fc0d96e77d9e3', class: "modus-wc-card-subtitle" }, h("slot", { key: 'c10b6158e14216e436916e021ba9997b6558cc0b', name: "subtitle" })), h("slot", { key: '723148995604d7bc737a4754c9223e6b9c354add' }), " ", h("div", { key: 'aa35be52d458a2121a87fbe0163b22aa0c8c9b15', class: "modus-wc-card-actions" }, h("slot", { key: 'ec852e3e23c7e5ec2e800c40d9ae177a3aad85fa', name: "actions" }))), h("slot", { key: 'd7c87209df38720f913298a14a26d6e641078639', 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 };