@trimble-oss/moduswebcomponents/components/p-58tcHphG.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, a as Host } from './index.js';
import { i as inheritAriaAttributes } from './p-DhcwHZp_.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`;
    }
    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)}[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)}";

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 if the interior padding is compact or not */
        this.padding = 'normal';
    }
    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: 'ca2b66643d841254021b36a02cc009e0287547f9' }, h("article", Object.assign({ key: 'e5cfc8a5cc1d81f0f2924a596c88bb72186b66ad', class: this.getClasses(), tabindex: -1 }, this.inheritedAttributes), h("slot", { key: 'bb24bca92c338faa1d7768d11707f88620f8e9dd', name: "header" }), h("div", { key: '153d844a35591665a67b31e0f9938aa87b855fd0', class: "modus-wc-card-body" }, h("div", { key: '1a32e26e9b06c67ccf2fc067455365d3a8a59f4c', class: "modus-wc-card-title" }, h("slot", { key: 'df11f9713f650008850fe4af85f22b5d0f2da14e', name: "title" })), h("div", { key: 'e9d8c639387b70fab75e482e7a84e8e3078141b9', class: "modus-wc-card-subtitle" }, h("slot", { key: '56bb3d18aad738ed11249c7c3a12fd6aeedee389', name: "subtitle" })), h("slot", { key: '5a0a22778a3c36f4d28eb4d560e35e937e39377e' }), " ", h("div", { key: '671978aedd0cee74ed04c726e2ca4d71b77ea837', class: "modus-wc-card-actions" }, h("slot", { key: '6792bcebe07fbe000521b70ec3dd731976f4c99c', name: "actions" }))), h("slot", { key: 'cfb58923ff84b64540ed6d02e21855844d0fb42e', 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 };