@codeperate/cdp-ui-library
Version:
Codeperate UI Library
80 lines (79 loc) • 2.34 kB
JavaScript
import { Component, Element, h, Host, Prop, State } from '@stencil/core';
import { deepAssign } from '../../../utils/deep-assign';
export class CdpAccordion {
constructor() {
this.props = { display: false };
this.defaultConfig = {
classList: {
content: 'transition-all duration-500 overflow-hidden',
expanded: 'expanded',
},
maxHeight: '100vh',
toggle: true,
};
}
toggle() {
this.props = Object.assign(Object.assign({}, this.props), { display: !this.props.display });
}
componentWillLoad() {
this._config = deepAssign(this.config, this.defaultConfig);
}
render() {
const { classList, maxHeight, toggle } = this._config;
const { display } = this.props;
const hostClass = display ? classList.expanded : '';
return (h(Host, { class: hostClass },
h("div", { onClick: () => (toggle ? this.toggle() : null) },
h("slot", { name: "accordion" })),
h("div", { ref: el => (this.contentEl = el), class: classList.content, style: { maxHeight: display ? maxHeight : '0' } },
h("slot", null))));
}
static get is() { return "cdp-accordion"; }
static get properties() { return {
"props": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "CdpAccordionProps",
"resolved": "CdpAccordionProps",
"references": {
"CdpAccordionProps": {
"location": "import",
"path": "./cdp-accordion.interface"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"defaultValue": "{ display: false }"
},
"config": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "CdpAccordionConfig",
"resolved": "CdpAccordionConfig",
"references": {
"CdpAccordionConfig": {
"location": "import",
"path": "./cdp-accordion.interface"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
}
}; }
static get states() { return {
"_config": {}
}; }
static get elementRef() { return "rootEl"; }
}