@cbpds/web-components
Version:
Web components for the CBP Design System.
55 lines (49 loc) • 5.42 kB
JavaScript
/*!
* 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 cbpExpandCss = ":root{--cbp-accordion-item-control-font-size:var(--cbp-font-size-heading-sm);--cbp-accordion-item-control-font-weight:var(--cbp-font-weight-semibold);--cbp-expand-control-gap:var(--cbp-space-1x);--cbp-expand-control-padding:var(--cbp-space-3x);--cbp-expand-content-padding:var(--cbp-space-3x);--cbp-expand-margin-bottom:var(--cbp-space-2x);--cbp-expand-color:var(--cbp-color-text-darkest);--cbp-expand-color-dark:var(--cbp-color-text-lightest);--cbp-expand-button-color-text:var(--cbp-color-text-lightest);--cbp-expand-button-color-text-dark:var(--cbp-color-text-darkest);--cbp-expand-button-color-fill:var(--cbp-color-interactive-secondary-darker);--cbp-expand-button-color-fill-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-expand-button-color-text-hover:var(--cbp-color-text-lightest);--cbp-expand-button-color-text-hover-dark:var(--cbp-color-text-darkest);--cbp-expand-button-color-fill-hover:var(--cbp-color-interactive-secondary-darker);--cbp-expand-button-color-fill-hover-dark:var(--cbp-color-interactive-secondary-lighter)}[data-cbp-theme=light] cbp-expand[context*=dark],[data-cbp-theme=dark] cbp-expand:not([context=dark-inverts]):not([context=light-always]){--cbp-expand-color:var(--cbp-expand-color-dark)}cbp-expand{display:block;margin-bottom:var(--cbp-expand-margin-bottom);color:var(--cbp-expand-color)}cbp-expand[open]{--cbp-expand-rotate-icon:rotate(-180deg)}cbp-expand:not([open]) .cbp-expand--content{display:none}cbp-expand[open] .cbp-expand--control{--cbp-accordion-rotate-icon:rotate(90deg);--cbp-accordion-toggle:expandTo 500ms}cbp-expand .cbp-expand--control{font-size:var(--cbp-expand-control-font-size);cursor:pointer}cbp-expand .cbp-expand--control .cbp-expand--toggle{--cbp-button-padding:0;--cbp-button-border-width:0}cbp-expand .cbp-expand--control .cbp-expand--toggle cbp-icon svg{transition:transform 150ms;transform:var(--cbp-expand-rotate-icon)}cbp-expand .cbp-expand--control:hover .cbp-expand--toggle{--cbp-button-color:var(--cbp-expand-button-color-text);--cbp-button-color-dark:var(--cbp-expand-button-color-text-dark);--cbp-button-color-bg:var(--cbp-expand-button-color-fill);--cbp-button-color-bg-dark:var(--cbp-expand-button-color-fill-dark);--cbp-button-color-hover:var(--cbp-expand-button-color-text-hover);--cbp-button-color-hover-dark:var(--cbp-expand-button-color-text-hover-dark);--cbp-button-color-bg-hover:var(--cbp-expand-button-color-fill-hover);--cbp-button-color-bg-hover-dark:var(--cbp-expand-button-color-fill-hover-dark)}cbp-expand .cbp-expand--content{padding-left:var(--cbp-space-7x)}";
const CbpExpandStyle0 = cbpExpandCss;
const CbpExpand = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.expandClick = index.createEvent(this, "expandClick", 7);
this.headingId = utils.createNamespaceKey('cbp-expand');
this.open = false;
this.label = undefined;
this.headingLevel = 'h4';
this.context = undefined;
this.sx = {};
}
handleClick(e) {
this.open = !this.open;
this.expandClick.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) || {};
}
utils.setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
this.button = this.control.querySelector('button');
}
render() {
return (index.h(index.Host, { key: '41b5f74ecda0e81b6732c35caf09a89b3f9b8f13' }, index.h("cbp-flex", { key: '04ae4bc64f1c84c04fc2ed7582e691c42c6f0a9d', class: "cbp-expand--control", alignItems: "flex-start", gap: "var(--cbp-space-1x)", onClick: e => this.handleClick(e) }, index.h("cbp-flex-item", { key: '8662df48bf7f4465a641aa94f8e4a7fc03b840c9' }, index.h("cbp-button", { key: 'd9ab949a0cbc894d615c5d4dad4c13074668a0a1', class: "cbp-expand--toggle", fill: "ghost", color: "secondary", width: "var(--cbp-space-6x)", height: "var(--cbp-space-6x)", context: this.context, controls: `${this.headingId}-content`, expanded: `${this.open}`, "aria-labelledby": this.headingId, ref: el => (this.control = el) }, index.h("cbp-icon", { key: '9713c5f0e2a653c5d1f7d3606f4605d57cf6bb4c', name: "caret-down", size: "var(--cbp-space-3x)" }))), index.h("cbp-flex-item", { key: 'afb915a26594cf02253d8f80ea0d1a40165ed3ac', id: this.headingId, flexGrow: 1 }, this.host.querySelector('[slot="cbp-expand-label"]')
? index.h("slot", { name: "cbp-expand-label" })
: index.h("cbp-typography", { tag: this.headingLevel, variant: "heading-xs", context: this.context, sx: '{"line-height":"var(--cbp-space-6x)"}' }, this.label))), index.h("div", { key: 'e7dcc5dc7b9a21fa0d0b7e936506dc2531bba110', id: `${this.headingId}-content`, class: "cbp-expand--content" }, index.h("slot", { key: 'cc775526b7a7aa15597d67339b67caf97692e103' }))));
}
get host() { return index.getElement(this); }
};
CbpExpand.style = CbpExpandStyle0;
exports.cbp_expand = CbpExpand;
//# sourceMappingURL=cbp-expand.cjs.entry.js.map