@cbpds/web-components
Version:
Web components for the CBP Design System.
52 lines (46 loc) • 14 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-507f2a89.js');
const utils = require('./utils-99c9e716.js');
const cbpAccordionItemCss = ":root{--cbp-accordion-item-color:var(--cbp-color-text-darker);--cbp-accordion-item-color-fill:var(--cbp-color-gray-cool-10);--cbp-accordion-item-color-open:var(--cbp-color-text-lighter);--cbp-accordion-item-color-fill-open:var(--cbp-color-gray-cool-60);--cbp-accordion-item-color-hover:var(--cbp-color-text-darker);--cbp-accordion-item-color-fill-hover:var(--cbp-color-interactive-secondary-light);--cbp-accordion-item-color-open-hover:var(--cbp-color-text-lightest);--cbp-accordion-item-color-fill-open-hover:var(--cbp-color-interactive-secondary-darker);--cbp-accordion-item-color-focus:var(--cbp-color-text-lightest);--cbp-accordion-item-color-fill-focus:var(--cbp-color-interactive-focus-dark);--cbp-accordion-item-color-outline-focus:var(--cbp-color-white);--cbp-accordion-item-color-active:var(--cbp-color-text-lightest);--cbp-accordion-item-color-fill-active:var(--cbp-color-interactive-active-dark);--cbp-accordion-item-border-width:var(--cbp-border-width-xs);--cbp-accordion-item-border-style:solid;--cbp-accordion-item-border-radius:var(--cbp-border-radius-sharp, 0);--cbp-accordion-item-control-font-size:var(--cbp-font-size-heading-sm);--cbp-accordion-item-control-font-weight:var(--cbp-font-weight-semibold);--cbp-accordion-item-control-gap:var(--cbp-space-3x);--cbp-accordion-item-control-padding:var(--cbp-space-3x);--cbp-accordion-item-control-direction:row;--cbp-accordion-item-color-content:var(--cbp-color-text-darkest);--cbp-accordion-item-color-fill-content:var(--cbp-color-white);--cbp-accordion-item-content-font-size:var(--cbp-font-size-md);--cbp-accordion-item-content-font-family:inherit;--cbp-accordion-item-content-font-weight:var(--cbp-font-weight-regular);--cbp-accordion-item-content-padding:var(--cbp-space-3x);--cbp-accordion-item-heading-gap:var(--cbp-space-2x)}cbp-accordion-item{display:flex;flex-direction:column}cbp-accordion-item[open]{--cbp-accordion-item-color:var(--cbp-accordion-item-color-open);--cbp-accordion-item-color-fill:var(--cbp-accordion-item-color-fill-open)}cbp-accordion-item[open] .cbp-accordion-item--control{--cbp-accordion-rotate-icon:rotate(270deg);--cbp-accordion-toggle:expandTo 500ms}cbp-accordion-item[open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active){--cbp-accordion-item-color:var(--cbp-accordion-item-color-open-hover);--cbp-accordion-item-color-fill:var(--cbp-accordion-item-color-fill-open-hover)}cbp-accordion-item[open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active)+.cbp-accordion-item--content{--cbp-accordion-item-color-fill:var(--cbp-accordion-item-color-fill-open-hover)}cbp-accordion-item .cbp-accordion-item--control{display:flex;flex-direction:var(--cbp-accordion-item-control-direction, row);align-items:center;gap:var(--cbp-accordion-item-control-gap);min-height:var(--cbp-space-13x);color:var(--cbp-accordion-item-color);--cbp-button-color:var(--cbp-accordion-item-color);background-color:var(--cbp-accordion-item-color-fill);font-size:var(--cbp-accordion-item-control-font-size);font-weight:var(--cbp-accordion-item-control-font-weight);padding:var(--cbp-accordion-item-control-padding);outline-style:solid;outline-color:var(--cbp-accordion-item-color-outline-focus);outline-width:0;outline-offset:calc(-1 * var(--cbp-space-1x));cursor:pointer}cbp-accordion-item .cbp-accordion-item--control .cbp-accordion-item--heading{display:flex;flex-grow:1;justify-content:space-between}cbp-accordion-item .cbp-accordion-item--control .cbp-accordion-item--heading :first-child{flex-grow:1}cbp-accordion-item .cbp-accordion-item--control .cbp-accordion-item--heading [slot=cbp-accordion-item-label]{display:flex;align-items:center;gap:var(--cbp-accordion-item-heading-gap)}cbp-accordion-item .cbp-accordion-item--control cbp-typography,cbp-accordion-item .cbp-accordion-item--control cbp-typography>*{color:var(--cbp-accordion-item-color)}cbp-accordion-item .cbp-accordion-item--control:hover{--cbp-accordion-item-color:var(--cbp-accordion-item-color-hover);--cbp-accordion-item-color-fill:var(--cbp-accordion-item-color-fill-hover)}cbp-accordion-item .cbp-accordion-item--control:focus-within{--cbp-accordion-item-color:var(--cbp-accordion-item-color-focus);--cbp-accordion-item-color-fill:var(--cbp-accordion-item-color-fill-focus);outline-width:var(--cbp-border-size-md)}cbp-accordion-item .cbp-accordion-item--control:focus-within .cbp-accordion-item--toggle{--cbp-button-color:var(--cbp-accordion-item-color-focus) !important}cbp-accordion-item .cbp-accordion-item--control:focus-within+.cbp-accordion-item--content{--cbp-accordion-item-color-fill:var(--cbp-accordion-item-color-fill-focus)}cbp-accordion-item .cbp-accordion-item--control:active{--cbp-accordion-item-color:var(--cbp-accordion-item-color-active);--cbp-accordion-item-color-fill:var(--cbp-accordion-item-color-fill-active)}cbp-accordion-item .cbp-accordion-item--control:active .cbp-accordion-item--toggle{--cbp-button-color:var(--cbp-accordion-item-color-active) !important}cbp-accordion-item .cbp-accordion-item--control:active+.cbp-accordion-item--content{--cbp-accordion-item-color-fill:var(--cbp-accordion-item-color-fill-active)}cbp-accordion-item .cbp-accordion-item--control .cbp-accordion-item--toggle{--cbp-button-padding:0;--cbp-button-border-width:0;--cbp-button-focus-outline-width:0;--cbp-button-color:var(--cbp-accordion-item-color) !important;--cbp-button-color-hover:var(--cbp-accordion-item-color) !important;--cbp-button-color-focus:var(--cbp-accordion-item-color) !important;--cbp-button-color-active:var(--cbp-accordion-item-color) !important;--cbp-button-color-bg:transparent !important;--cbp-button-color-bg-hover:transparent !important;--cbp-button-color-bg-focus:transparent !important;--cbp-button-color-bg-active:transparent !important}cbp-accordion-item .cbp-accordion-item--control .cbp-accordion-item--toggle cbp-icon svg{transition:transform 150ms;transform:var(--cbp-accordion-rotate-icon)}cbp-accordion-item .cbp-accordion-item--content{color:var(--cbp-accordion-item-color-content);background-color:var(--cbp-accordion-item-color-fill-content);padding:var(--cbp-space-4x) var(--cbp-space-3x);border-width:var(--cbp-border-size-xl);border-style:var(--cbp-accordion-item-border-style);border-color:var(--cbp-accordion-item-color-fill);border-top:0;animation:var(--cbp-accordion-toggle);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 10);animation-iteration-count:revert;animation-fill-mode:forwards;overflow:hidden}cbp-accordion-item:not([open]){--cbp-accordion-rotate-icon:rotate(90deg)}cbp-accordion-item:not([open]) .cbp-accordion-item--content{display:none}cbp-accordion-item[color=danger],cbp-accordion-item[color=danger][open]{--cbp-accordion-item-color:var(--cbp-color-text-lightest);--cbp-accordion-item-color-fill:var(--cbp-color-danger-base)}cbp-accordion-item[color=danger] .cbp-accordion-item--control:hover:not(:focus-within):not(:active),cbp-accordion-item[color=danger][open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active){--cbp-accordion-item-color:var(--cbp-color-text-lightest);--cbp-accordion-item-color-fill:var(--cbp-color-danger-dark)}cbp-accordion-item[color=danger] .cbp-accordion-item--control:hover:not(:focus-within):not(:active)+.cbp-accordion-item--content,cbp-accordion-item[color=danger][open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active)+.cbp-accordion-item--content{--cbp-accordion-item-color-fill:var(--cbp-color-danger-dark)}cbp-accordion-item[color=danger] .cbp-accordion-item--control cbp-typography,cbp-accordion-item[color=danger] .cbp-accordion-item--control cbp-typography>*,cbp-accordion-item[color=danger][open] .cbp-accordion-item--control cbp-typography,cbp-accordion-item[color=danger][open] .cbp-accordion-item--control cbp-typography>*{--cbp-accordion-item-color:var(--cbp-color-white)}[data-cbp-theme=light] cbp-accordion[context*=dark],[data-cbp-theme=dark] cbp-accordion:not([context=dark-inverts]):not([context=light-always]){--cbp-accordion-item-color:var(--cbp-color-text-lightest);--cbp-accordion-item-color-fill:var(--cbp-color-gray-cool-50);--cbp-accordion-item-color-open:var(--cbp-color-text-lightest);--cbp-accordion-item-color-fill-open:var(--cbp-color-gray-cool-60);--cbp-accordion-item-color-hover:var(--cbp-color-text-darkest);--cbp-accordion-item-color-fill-hover:var(--cbp-color-interactive-secondary-lighter);--cbp-accordion-item-color-open-hover:var(--cbp-color-text-darkest);--cbp-accordion-item-color-fill-open-hover:var(--cbp-color-interactive-secondary-light);--cbp-accordion-item-color-focus:var(--cbp-color-text-darkest);--cbp-accordion-item-color-fill-focus:var(--cbp-color-interactive-focus-light);--cbp-accordion-item-color-outline-focus:var(--cbp-color-black);--cbp-accordion-item-color-active:var(--cbp-color-text-darkest);--cbp-accordion-item-color-fill-active:var(--cbp-color-interactive-active-light);--cbp-accordion-item-color-content:var(--cbp-color-text-lightest);--cbp-accordion-item-color-fill-content:var(--cbp-color-gray-cool-90)}[data-cbp-theme=light] cbp-accordion[context*=dark] cbp-accordion-item[color=danger],[data-cbp-theme=light] cbp-accordion[context*=dark] cbp-accordion-item[color=danger][open],[data-cbp-theme=dark] cbp-accordion:not([context=dark-inverts]):not([context=light-always]) cbp-accordion-item[color=danger],[data-cbp-theme=dark] cbp-accordion:not([context=dark-inverts]):not([context=light-always]) cbp-accordion-item[color=danger][open]{--cbp-accordion-item-color:var(--cbp-color-text-darkest);--cbp-accordion-item-color-fill:var(--cbp-color-danger-light)}[data-cbp-theme=light] cbp-accordion[context*=dark] cbp-accordion-item[color=danger] .cbp-accordion-item--control:hover:not(:focus-within):not(:active),[data-cbp-theme=light] cbp-accordion[context*=dark] cbp-accordion-item[color=danger][open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active),[data-cbp-theme=dark] cbp-accordion:not([context=dark-inverts]):not([context=light-always]) cbp-accordion-item[color=danger] .cbp-accordion-item--control:hover:not(:focus-within):not(:active),[data-cbp-theme=dark] cbp-accordion:not([context=dark-inverts]):not([context=light-always]) cbp-accordion-item[color=danger][open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active){--cbp-accordion-item-color:var(--cbp-color-text-darkest);--cbp-accordion-item-color-fill:var(--cbp-color-danger-lighter)}[data-cbp-theme=light] cbp-accordion[context*=dark] cbp-accordion-item[color=danger] .cbp-accordion-item--control:hover:not(:focus-within):not(:active)+.cbp-accordion-item--content,[data-cbp-theme=light] cbp-accordion[context*=dark] cbp-accordion-item[color=danger][open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active)+.cbp-accordion-item--content,[data-cbp-theme=dark] cbp-accordion:not([context=dark-inverts]):not([context=light-always]) cbp-accordion-item[color=danger] .cbp-accordion-item--control:hover:not(:focus-within):not(:active)+.cbp-accordion-item--content,[data-cbp-theme=dark] cbp-accordion:not([context=dark-inverts]):not([context=light-always]) cbp-accordion-item[color=danger][open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active)+.cbp-accordion-item--content{--cbp-accordion-item-color-fill:var(--cbp-color-danger-lighter)}@keyframes expandTo{from{max-height:0px}to{max-height:5000px}}";
const CbpAccordionItemStyle0 = cbpAccordionItemCss;
const CbpAccordionItem = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.accordionItemClick = index.createEvent(this, "accordionItemClick", 7);
this.headingId = utils.createNamespaceKey('cbp-accordion-item');
this.open = false;
this.label = undefined;
this.headingLevel = 'h3';
this.color = undefined;
this.sx = {};
}
handleClick() {
this.open = !this.open;
this.accordionItemClick.emit({
host: this.host,
button: this.button,
open: this.open,
});
this.button.focus();
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
utils.setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
this.button = this.control.querySelector('button');
}
render() {
return (index.h(index.Host, { key: 'b22e32ed8075a5404e502355313367cb444613c1' }, index.h("div", { key: 'b3b759f78de36c1ad4c34530ca0b12c1aed1ca9d', class: "cbp-accordion-item--control", onClick: () => this.handleClick() }, index.h("cbp-button", { key: '687b73f6a80f4617bd3e21fd9fb11e64f8a095bf', type: "button", class: "cbp-accordion-item--toggle", fill: "ghost", color: "secondary", controls: `${this.headingId}-content`, expanded: `${this.open}`, "aria-labelledby": this.headingId, ref: el => (this.control = el) }, index.h("cbp-icon", { key: '869ec234317a8de77d5afcec8caeee36f448423f', name: "chevron-right" })), index.h("div", { key: '5748e02581a156376f2940c7833158aaf5a5ca65', id: this.headingId, class: "cbp-accordion-item--heading" }, index.h("slot", { key: 'acdd74a4b64ab3238fdb94a00fb4d7115568bc23', name: "cbp-accordion-item-label" }), this.label && index.h("cbp-typography", { key: '6dc18abd92d1a675af57510cad7d713da6eebf92', tag: this.headingLevel, variant: "heading-sm" }, this.label))), index.h("div", { key: '94a98497e177bdb19a9d606767e5737903a2bb9b', id: `${this.headingId}-content`, class: "cbp-accordion-item--content" }, index.h("slot", { key: 'f7d8564a6b2e03f1c594c136e7ec84ef4ee1da59' }))));
}
get host() { return index.getElement(this); }
};
CbpAccordionItem.style = CbpAccordionItemStyle0;
exports.cbp_accordion_item = CbpAccordionItem;
//# sourceMappingURL=cbp-accordion-item.cjs.entry.js.map