@cbpds/web-components/dist/cjs/cbp-structured-list.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 cbpStructuredListCss = ":root{--cbp-structured-list-item-padding:var(--cbp-space-4x);--cbp-structured-list-color-background:var(--cbp-color-white);--cbp-structured-list-color-background-dark:var(--cbp-color-gray-cool-80);--cbp-structured-list-color-striped-background:var(--cbp-color-gray-cool-4);--cbp-structured-list-color-striped-background-dark:var(--cbp-color-gray-cool-90);--cbp-structured-list-color-background-hover:var(--cbp-color-gray-cool-10);--cbp-structured-list-color-background-hover-dark:var(--cbp-color-black);--cbp-structured-list-color:var(--cbp-color-text-darkest);--cbp-structured-list-color-dark:var(--cbp-color-text-lightest);--cbp-structured-list-border-color:var(--cbp-color-gray-cool-30);--cbp-structured-list-border-color-dark:var(--cbp-color-gray-cool-50);--cbp-structured-list-header-color-background:var(--cbp-color-gray-cool-30);--cbp-structured-list-header-color-background-dark:var(--cbp-color-gray-cool-60);--cbp-structured-list-header-color:var(--cbp-color-text-darkest);--cbp-structured-list-header-color-dark:var(--cbp-color-text-lightest);--cbp-structured-list-footer-color-background:var(--cbp-color-gray-cool-70);--cbp-structured-list-footer-color-background-dark:var(--cbp-color-gray-cool-5);--cbp-structured-list-footer-color:var(--cbp-color-text-lightest);--cbp-structured-list-footer-color-dark:var(--cbp-color-text-darkest);--cbp-structured-list-item-padding:var(--cbp-space-4x);--cbp-structured-list-item-color-background-danger:var(--cbp-color-danger-lighter);--cbp-structured-list-item-color-background-danger-dark:var(--cbp-color-danger-darker);--cbp-structured-list-item-color-background-selected:var(--cbp-color-interactive-selected-light);--cbp-structured-list-item-color-background-selected-dark:var(--cbp-color-interactive-selected-dark);--cbp-structured-list-margin-bottom:var(--cbp-space-4x)}[data-cbp-theme=light] cbp-structured-list[context*=dark]:not([context=light-always]),[data-cbp-theme=dark] cbp-structured-list:not([context=dark-inverts]):not([context=light-always]){--cbp-structured-list-color-background:var(--cbp-structured-list-color-background-dark);--cbp-structured-list-color-striped-background:var(--cbp-structured-list-color-striped-background-dark);--cbp-structured-list-color-background-hover:var(--cbp-structured-list-color-background-hover-dark);--cbp-structured-list-color:var(--cbp-structured-list-color-dark);--cbp-structured-list-border-color:var(--cbp-structured-list-border-color-dark);--cbp-structured-list-header-color-background:var(--cbp-structured-list-header-color-background-dark);--cbp-structured-list-header-color:var(--cbp-structured-list-header-color-dark);--cbp-structured-list-footer-color-background:var(--cbp-structured-list-footer-color-background-dark);--cbp-structured-list-footer-color:var(--cbp-structured-list-footer-color-dark);--cbp-structured-list-item-color-background-danger:var(--cbp-structured-list-item-color-background-danger-dark);--cbp-structured-list-item-color-background-selected:var(--cbp-structured-list-item-color-background-selected-dark)}cbp-structured-list{display:block;background-color:var(--cbp-structured-list-color-background);color:var(--cbp-structured-list-color);margin-bottom:var(--cbp-structured-list-margin-bottom);}cbp-structured-list [slot=cbp-structured-list-header]{color:var(--cbp-structured-list-header-color);background-color:var(--cbp-structured-list-header-color-background);font-style:italic;display:flex;align-items:center;padding:var(--cbp-space-3x);min-height:var(--cbp-space-13x);font-weight:var(--cbp-font-weight-bold)}cbp-structured-list [slot=cbp-structured-list-header] *:only-child{flex-basis:100%}cbp-structured-list[striped] [role=list]>*:nth-child(even){background-color:var(--cbp-structured-list-color-striped-background)}cbp-structured-list div[role=list]>*{display:block;padding:var(--cbp-structured-list-item-padding);border-bottom-style:solid;border-bottom-width:var(--cbp-border-size-md);border-bottom-color:var(--cbp-structured-list-border-color)}cbp-structured-list div[role=list]>*:hover{background-color:var(--cbp-structured-list-color-background-hover) !important}cbp-structured-list div[role=list]:only-child>*:first-child{border-top:var(--cbp-border-size-md) solid var(--cbp-structured-list-border-color)}cbp-structured-list[selectable] [slot=cbp-structured-list-header]{gap:var(--cbp-space-4x)}cbp-structured-list[selectable] cbp-structured-list-item{display:flex;flex-direction:row;align-items:center;gap:var(--cbp-space-4x)}cbp-structured-list cbp-structured-list-item[selected]{--cbp-structured-list-color-background:var(--cbp-color-interactive-selected-light);--cbp-structured-list-border-color:var(--cbp-color-gray-cool-30);--cbp-structured-list-color-background-dark:var(--cbp-color-interactive-selected-dark);--cbp-structured-list-border-color-dark:var(--cbp-color-gray-cool-50)}cbp-structured-list cbp-structured-list-item[selected]:hover{--cbp-structured-list-color-background:var(--cbp-color-gray-cool-10);--cbp-structured-list-border-color:var(--cbp-color-gray-cool-30);--cbp-structured-list-color-background-dark:var(--cbp-color-gray-cool-90);--cbp-structured-list-border-color-dark:var(--cbp-color-gray-cool-50)}cbp-structured-list cbp-structured-list-item{display:block}cbp-structured-list cbp-structured-list-item[color=danger]:not([selected]){background-color:var(--cbp-structured-list-item-color-background-danger)}cbp-structured-list cbp-structured-list-item[selected]{background-color:var(--cbp-structured-list-item-color-background-selected)}";
const CbpStructuredListStyle0 = cbpStructuredListCss;

const CbpStructuredList = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.accessibilityText = undefined;
        this.headerId = undefined;
        this.striped = undefined;
        this.selectable = 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: 'e7c67efb217c2056cd9d70a78b81905976e10c28' }, index.h("slot", { key: '48cc480750b5f69258f779768bc5541e4281a98d', name: "cbp-structured-list-header" }), index.h("div", { key: '7e4f919c6430ba5d4b1096202036666d36752caa', role: "list", "aria-label": this.accessibilityText, "aria-describedby": this.headerId }, index.h("slot", { key: '09977dada8930c7d20b1291a9ab7d50a11b5308c' })), index.h("slot", { key: '7355b61a31039971fcfa4461732fb65a3f4c8efc', name: "cbp-structured-list-footer" })));
    }
    get host() { return index.getElement(this); }
};
CbpStructuredList.style = CbpStructuredListStyle0;

exports.cbp_structured_list = CbpStructuredList;

//# sourceMappingURL=cbp-structured-list.cjs.entry.js.map