@cbpds/web-components
Version:
Web components for the CBP Design System.
49 lines (45 loc) • 12.7 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-6c11fa0c.js';
import { c as createNamespaceKey, s as setCSSProps } from './utils-475ba472.js';
const cbpAccordionItemCss = ":root{--cbp-accordion-item-color:var(--cbp-color-text-darker);--cbp-accordion-item-color-background:var(--cbp-color-gray-cool-10);--cbp-accordion-item-color-open:var(--cbp-color-text-lighter);--cbp-accordion-item-color-background-open:var(--cbp-color-gray-cool-60);--cbp-accordion-item-color-hover:var(--cbp-color-text-darker);--cbp-accordion-item-color-background-hover:var(--cbp-color-interactive-secondary-light);--cbp-accordion-item-color-open-hover:var(--cbp-color-text-lightest);--cbp-accordion-item-color-background-open-hover:var(--cbp-color-interactive-secondary-darker);--cbp-accordion-item-color-focus:var(--cbp-color-text-lightest);--cbp-accordion-item-color-background-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-background-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-background-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-danger-color:var(--cbp-color-white);--cbp-accordion-item-danger-color-dark:var(--cbp-color-text-darkest);--cbp-accordion-item-danger-color-background:var(--cbp-color-danger-base);--cbp-accordion-item-danger-color-background-dark:var(--cbp-color-danger-light);--cbp-accordion-item-danger-color-background-hover:var(--cbp-color-danger-dark);--cbp-accordion-item-danger-color-background-hover-dark:var(--cbp-color-danger-lighter)}[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-white);--cbp-accordion-item-color-background:var(--cbp-color-gray-cool-50);--cbp-accordion-item-color-open:var(--cbp-color-white);--cbp-accordion-item-color-background-open:var(--cbp-color-gray-cool-60);--cbp-accordion-item-color-hover:var(--cbp-color-text-darkest);--cbp-accordion-item-color-background-hover:var(--cbp-color-interactive-secondary-lighter);--cbp-accordion-item-color-open-hover:var(--cbp-color-text-darkest);--cbp-accordion-item-color-background-open-hover:var(--cbp-color-interactive-secondary-light);--cbp-accordion-item-color-focus:var(--cbp-color-text-darkest);--cbp-accordion-item-color-background-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-background-active:var(--cbp-color-interactive-active-light);--cbp-accordion-item-color-content:var(--cbp-color-text-lightest);--cbp-accordion-item-color-background-content:var(--cbp-color-gray-cool-90);--cbp-accordion-item-danger-color:var(--cbp-accordion-item-danger-color-dark);--cbp-accordion-item-danger-color-background:var(--cbp-accordion-item-danger-color-background-dark);--cbp-accordion-item-danger-color-background-hover:var(--cbp-accordion-item-danger-color-background-hover-dark)}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-background:var(--cbp-accordion-item-color-background-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-background:var(--cbp-accordion-item-color-background-open-hover)}cbp-accordion-item[open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active)+.cbp-accordion-item--content{--cbp-accordion-item-color-background:var(--cbp-accordion-item-color-background-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-background);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-background:var(--cbp-accordion-item-color-background-hover)}cbp-accordion-item .cbp-accordion-item--control:focus-within{--cbp-accordion-item-color:var(--cbp-accordion-item-color-focus);--cbp-accordion-item-color-background:var(--cbp-accordion-item-color-background-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-background:var(--cbp-accordion-item-color-background-focus)}cbp-accordion-item .cbp-accordion-item--control:active{--cbp-accordion-item-color:var(--cbp-accordion-item-color-active);--cbp-accordion-item-color-background:var(--cbp-accordion-item-color-background-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-background:var(--cbp-accordion-item-color-background-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-background-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-background);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}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-accordion-item-danger-color);--cbp-accordion-item-color-background:var(--cbp-accordion-item-danger-color-background)}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-accordion-item-danger-color);--cbp-accordion-item-color-background:var(--cbp-accordion-item-danger-color-background-hover)}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-background:var(--cbp-accordion-item-danger-color-background-hover)}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-accordion-item-danger-color)}@keyframes expandTo{from{max-height:0px}to{max-height:5000px}}";
const CbpAccordionItemStyle0 = cbpAccordionItemCss;
const CbpAccordionItem = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.accordionItemClick = createEvent(this, "accordionItemClick", 7);
this.headingId = createNamespaceKey('cbp-accordion-item');
this.open = false;
this.label = undefined;
this.headingLevel = 'h3';
this.color = undefined;
this.sx = {};
}
handleClick(e) {
this.open = !this.open;
this.accordionItemClick.emit({
host: this.host,
button: this.button,
open: this.open,
nativeEvent: e
});
this.button.focus();
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
this.button = this.control.querySelector('button');
}
render() {
return (h(Host, { key: 'b096acb167e5faa340acdc6be01e233cc05d9cff' }, h("div", { key: '42537e04ef0f2df62cb75d6f1de43276b1162b60', class: "cbp-accordion-item--control", onClick: (e) => this.handleClick(e) }, h("cbp-button", { key: '7d5cc484131af94b00c6100afaaf599a789bd9e1', 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) }, h("cbp-icon", { key: '178c2e3620626f99ad3f6bb74db6b53f844b596d', name: "chevron-right" })), h("div", { key: 'dcd615b44414e3930e6dddec4c44180d9685cdbc', id: this.headingId, class: "cbp-accordion-item--heading" }, h("slot", { key: 'faabb763a16fc31cc3880e3e73b14e9026b6dcda', name: "cbp-accordion-item-label" }), this.label && h("cbp-typography", { key: 'ce781aaf9b0bedb0f47fc1368dc6d79421c76d1a', tag: this.headingLevel, variant: "heading-sm" }, this.label))), h("div", { key: 'ab51dc59fd2d148354a4eecbb41170ccd59999bf', id: `${this.headingId}-content`, class: "cbp-accordion-item--content" }, h("slot", { key: 'cd6c38d9d15fb8afa099a02d3b5bccc820eefb2b' }))));
}
get host() { return getElement(this); }
};
CbpAccordionItem.style = CbpAccordionItemStyle0;
export { CbpAccordionItem as cbp_accordion_item };
//# sourceMappingURL=cbp-accordion-item.entry.js.map