@cbpds/web-components/dist/cjs/cbp-tag.cjs.entry.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-cd71cbd5.js');
const utils = require('./utils-99c9e716.js');

const cbpTagCss = ":root{--cbp-tag-color:var(--cbp-color-info-lighter);--cbp-tag-color-dark:var(--cbp-color-info-darker);--cbp-tag-color-background:var(--cbp-color-info-dark);--cbp-tag-color-background-dark:var(--cbp-color-info-light)}[data-cbp-theme=light] cbp-tag[context*=dark]:not([context=light-always]),[data-cbp-theme=dark] cbp-tag:not([context=dark-inverts]):not([context=light-always]){--cbp-tag-color:var(--cbp-tag-color-dark);--cbp-tag-color-background:var(--cbp-tag-color-background-dark)}cbp-tag{display:inline-flex;gap:var(--cbp-space-1x);align-items:center;color:var(--cbp-tag-color);background-color:var(--cbp-tag-color-background);border-radius:var(--cbp-border-radius-pill);cursor:default;padding:0 var(--cbp-space-3x);text-align:center;font-weight:var(--cbp-font-weight-medium);font-size:var(--cbp-font-size-subhead);line-height:var(--cbp-space-7x);width:fit-content;max-width:100%;overflow:hidden;white-space:nowrap}cbp-tag[color=warning]{--cbp-tag-color:var(--cbp-color-text-darker);--cbp-tag-color-dark:var(--cbp-color-text-darker);--cbp-tag-color-background:var(--cbp-color-warning-base);--cbp-tag-color-background-dark:var(--cbp-color-warning-light)}cbp-tag[color=success]{--cbp-tag-color:var(--cbp-color-success-lighter);--cbp-tag-color-dark:var(--cbp-color-success-dark);--cbp-tag-color-background:var(--cbp-color-success-dark);--cbp-tag-color-background-dark:var(--cbp-color-success-lighter)}cbp-tag[color=danger]{--cbp-tag-color:var(--cbp-color-text-lightest);--cbp-tag-color-dark:var(--cbp-color-text-darkest);--cbp-tag-color-background:var(--cbp-color-danger-dark);--cbp-tag-color-background-dark:var(--cbp-color-danger-light)}";
const CbpTagStyle0 = cbpTagCss;

const CbpTag = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.color = undefined;
        this.context = undefined;
        this.sx = {};
    }
    componentWillLoad() {
        if (typeof this.sx == 'string') {
            this.sx = JSON.parse(this.sx) || {};
        }
        utils.setCSSProps(this.host, Object.assign({}, this.sx));
    }
    render() {
        return (index.h(index.Host, { key: '87f03a70287d13d0eca4763cef18674288e1f4fc' }, index.h("slot", { key: '681d1e6cce44a05a6a12ea6e640ac0ff54c054d6' })));
    }
    get host() { return index.getElement(this); }
};
CbpTag.style = CbpTagStyle0;

exports.cbp_tag = CbpTag;

//# sourceMappingURL=cbp-tag.cjs.entry.js.map