@trimble-oss/moduswebcomponents/components/modus-wc-divider.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-BMvVSi6Y.js';
import { i as inheritAriaAttributes } from './p-COxr4v9W.js';

const convertPropsToClasses = ({ color, orientation, position, responsive, }) => {
    let classes = '';
    if (color) {
        switch (color) {
            case 'primary':
                classes = `${classes} modus-wc-divider-primary`;
                break;
            case 'secondary':
                classes = `${classes} modus-wc-divider-secondary`;
                break;
            case 'tertiary':
                classes = `${classes} modus-wc-divider-neutral`;
                break;
            case 'high-contrast':
                classes = `${classes} modus-wc-divider-accent`;
                break;
            case 'success':
                classes = `${classes} modus-wc-divider-success`;
                break;
            case 'warning':
                classes = `${classes} modus-wc-divider-warning`;
                break;
            case 'danger':
                classes = `${classes} modus-wc-divider-error`;
                break;
        }
    }
    if (orientation) {
        switch (orientation) {
            case 'horizontal':
                classes = `${classes} modus-wc-divider-horizontal`;
                break;
            case 'vertical':
                classes = `${classes} modus-wc-divider-vertical`;
                break;
        }
    }
    if (position) {
        switch (position) {
            case 'end':
                classes = `${classes} modus-wc-divider-start`;
                break;
            case 'start':
                classes = `${classes} modus-wc-divider-end`;
                break;
        }
    }
    if (responsive) {
        classes = `${classes} flex-grow place-items-center`;
    }
    return classes.trim();
};

const modusWcDividerCss = "";

const ModusWcDivider$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcDivider extends H {
    constructor() {
        super();
        this.__registerHost();
        this.inheritedAttributes = {};
        /** The color of the divider line. */
        this.color = 'tertiary';
        /** The content to display in the divider. */
        this.content = '';
        /** Custom CSS class to apply to the divider element. */
        this.customClass = '';
        /** The orientation of the divider. This is in reference to how content will be rendered around the divider. */
        this.orientation = 'vertical';
        /** The position of the divider. */
        this.position = 'center';
        /** Whether the divider is responsive or not. */
        this.responsive = true;
    }
    componentWillLoad() {
        if (!this.el.ariaLabel) {
            this.el.ariaLabel = 'Divider';
        }
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    getClasses() {
        const classList = ['modus-wc-divider'];
        const propClasses = convertPropsToClasses({
            color: this.color,
            orientation: this.orientation,
            position: this.position,
            responsive: this.responsive,
        });
        // 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: '28f75e6eb40acd0c88dab5933df532389f0b9855' }, h("div", Object.assign({ key: '46c8002fa2cf556c1c8e69e3e204ac94d4091e45', class: this.getClasses(), role: "separator", tabindex: -1 }, this.inheritedAttributes), this.content)));
    }
    get el() { return this; }
    static get style() { return modusWcDividerCss; }
}, [0, "modus-wc-divider", {
        "color": [1],
        "content": [1],
        "customClass": [1, "custom-class"],
        "orientation": [1],
        "position": [1],
        "responsive": [4]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["modus-wc-divider"];
    components.forEach(tagName => { switch (tagName) {
        case "modus-wc-divider":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ModusWcDivider$1);
            }
            break;
    } });
}

const ModusWcDivider = ModusWcDivider$1;
const defineCustomElement = defineCustomElement$1;

export { ModusWcDivider, defineCustomElement };