@trimble-oss/moduswebcomponents/cjs/modus-wc-card_2.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, 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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        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() {
        baseComponent.handleShadowDOMStyles(this.el, true);
        this.inheritedAttributes = utils.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 (index.h(index.Host, { key: '2bd530d739a71856714ed46e2772a8a85b5c7067' }, index.h("article", Object.assign({ key: 'e351aa543600dff1d6b167ff55d7a58423e4e077', class: this.getClasses(), tabindex: -1 }, this.inheritedAttributes), index.h("slot", { key: 'dae0870810ba669f93dcd51bbc6582a4526fac00', name: "header" }), index.h("div", { key: '6fefc0bfd64b1a5506dae7ba37784a7700960e5d', class: "modus-wc-card-body" }, index.h("div", { key: '29b989e5e957c9c8f12e230fd99f968d9eac58eb', class: "modus-wc-card-title" }, index.h("slot", { key: 'ef72977e5b29a7fee99e8fbd05b635ccba50fffe', name: "title" })), index.h("div", { key: '64091544637258f092240ee28b98e578c2cbd8aa', class: "modus-wc-card-subtitle" }, index.h("slot", { key: '335c5fadc770f622f1cedfd1af75e1ae3be1d598', name: "subtitle" })), index.h("slot", { key: '225b91c2035f2782b9ba65e4b49c985f962ad725' }), " ", index.h("div", { key: 'c154dfacdffb83c09a420d67c02ad15b4073e958', class: "modus-wc-card-actions" }, index.h("slot", { key: '386f07253453a5a9937597344db4d72ff2fda9b1', name: "actions" }))), index.h("slot", { key: '2f64d76f0909c0fd898a1359cdb3fab84dd7c208', name: "footer" }))));
    }
    get el() { return index.getElement(this); }
};
ModusWcCard.style = modusWcCardCss;

const modusWcToolbarCss = ".modus-wc-navbar{background:var(--modus-wc-color-base-page);border-radius:var(--modus-wc-border-radius-box);box-shadow:0 1px 2px -1px color-mix(in sRGB, var(--modus-wc-color-black) 10%, transparent), 0 1px 3px 0 color-mix(in sRGB, var(--modus-wc-color-black) 10%, transparent)}";

const ModusWcToolbar = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.inheritedAttributes = {};
        /** Custom CSS class to apply to the outer div. */
        this.customClass = '';
    }
    componentWillLoad() {
        baseComponent.handleShadowDOMStyles(this.el, true);
        this.inheritedAttributes = utils.inheritAriaAttributes(this.el);
    }
    getClasses() {
        const classList = ['modus-wc-navbar'];
        // The order CSS classes are added matters to CSS specificity
        if (this.customClass)
            classList.push(this.customClass);
        return classList.join(' ');
    }
    render() {
        return (index.h(index.Host, { key: '798345f7a3aeb8ae8480b5c4e541aa5ff24509c7' }, index.h("div", Object.assign({ key: 'bb31895b1b7b4fa6f5a9047dcfaceed9e03f2702', class: this.getClasses() }, this.inheritedAttributes), index.h("div", { key: '881cf82f845566bf104727a60f9b4235f29270e6', class: "modus-wc-navbar-start" }, index.h("slot", { key: 'a4660ea5b728256dfbf60dcb374fdeccea2e4b38', name: "start" })), index.h("div", { key: 'd4cb000b6c8ad5673dd67a3a849db9d295573d97', class: "modus-wc-navbar-center" }, index.h("slot", { key: 'daf3db722d3dca1137de43f5b46d4ad002d88a9f', name: "center" })), index.h("div", { key: 'caa409be3c5f9be14f9659e7be89a21604e7813b', class: "modus-wc-navbar-end" }, index.h("slot", { key: '797a33d202ecaf3d079bf34e513204cf8e8bf3ca', name: "end" })))));
    }
    get el() { return index.getElement(this); }
};
ModusWcToolbar.style = modusWcToolbarCss;

exports.modus_wc_card = ModusWcCard;
exports.modus_wc_toolbar = ModusWcToolbar;