/*!
 * Built by ShiftSoftware
 * Copyright (c)
 */
import { h } from "@stencil/core";
import cn from "../../global/lib/cn";
export const MaterialCard = (props, children = []) => {
    var _a;
    const wrapperStyle = {
        flex: '1',
        display: 'flex',
        width: props.width,
        flexDirection: 'column',
        minWidth: props.minWidth,
        maxWidth: props.maxWidth,
    };
    const titleStyle = {
        padding: '10px 0',
        fontWeight: 'bold',
        marginBottom: '8px',
        borderBottom: '1px solid gray',
    };
    return (h("div", { style: wrapperStyle, class: props.class }, h("strong", { style: titleStyle }, props.title), h("flexible-container", null, !children.length ? h(MaterialCardChildren, { hidden: '' === ((_a = props === null || props === void 0 ? void 0 : props.desc) === null || _a === void 0 ? void 0 : _a.trim()) }, props.desc || h("p", null, "\u00A0")) : children)));
};
export const MaterialCardChildren = (props, children) => {
    const wrapperStyles = {
        width: '100%',
    };
    const contentStyles = {
        'transition-duration': '0ms !important',
        'opacity': props.hidden ? '0' : '1',
    };
    return (h("div", { style: wrapperStyles, class: cn('shift-skeleton', props.class) }, h("div", { style: contentStyles }, children)));
};
