@aqua-ds/web-components
Version:
AquaDS Web Components
224 lines (219 loc) • 7.15 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { E as Events } from './Events.js';
const aqCollapseCss = ".aq-collapse{-webkit-transition:margin 200ms ease-out;transition:margin 200ms ease-out}.aq-collapse--border{border:var(--spacing-size-basic) solid var(--color-paper-light);border-radius:var(--spacing-size-minor)}";
const AqCollapse$1 = /*@__PURE__*/ proxyCustomElement(class AqCollapse extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.open = createEvent(this, "open", 7);
this.close = createEvent(this, "close", 7);
this.idCollapse = '';
this.value = false;
this.showBorder = true;
this.showDivider = true;
this.visible = false;
this.headerVisible = false;
this.header = null;
this.content = null;
this.showDividerGroup = true;
this.individualDivider = true;
this.localShowBorder = true;
this.eventOpenCollapse = (data) => {
if (data.value === this.idCollapse) {
this.show();
}
};
this.eventCloseCollapse = (data) => {
if (data.value === this.idCollapse || data.noId) {
this.hide();
}
};
this.eventToggleCollapse = (data) => {
if (data.value === this.idCollapse) {
this.toggle();
}
};
}
onValueChange(newVal) {
this.onValueChanged(newVal);
}
onHeaderChange(newVal) {
this.headerVisible = newVal;
}
onVisibleChange() {
this.setActive();
}
onShowBorderChange(newVal) {
this.localShowBorder = newVal;
}
get getBorder() {
return ((!!this.header || (!!this.content && this.visible)) && this.collapseGroup?.showBorder) || (this.showBorder && !this.collapseGroup);
}
get getCollapseStyles() {
return {
'aq-collapse': true,
'aq-collapse--border': this.getBorder,
'aq-collapse--active': this.visible,
};
}
async getIndividualDivider() {
return this.individualDivider;
}
async getGroupDivider() {
return this.showDividerGroup;
}
async toggle() {
if (this.visible) {
this.hide();
}
else {
this.show();
}
}
async show() {
if (!this.visible) {
this.showOnParent();
this.visible = true;
this.open.emit();
}
}
async hide() {
if (this.visible) {
this.visible = false;
this.close.emit();
}
}
async registerHeader(vm) {
this.header = vm;
}
async registerContent(vm) {
this.content = vm;
}
async getCollapseContext() {
return this;
}
showOnParent() {
if (this.collapseGroup) {
this.collapseGroup.show(this);
}
}
validateHeader() {
this.headerVisible = !!this.header;
}
onValueChanged(newVal) {
if (newVal) {
this.show();
}
else {
this.hide();
}
}
setActive() {
if (this.content) {
this.content.updateActive(this.visible);
}
if (this.header) {
this.header.updateActive(this.visible);
}
}
initWatchers() {
this.onVisibleChange();
this.onValueChange(this.value);
this.onHeaderChange(this.header);
}
initElements() {
this.validateHeader();
this.eventsOn();
this.setActive();
}
initCollapseGroupConfig() {
this.collapseGroup = this.collapse.closest('aq-collapse-group');
if (this.collapseGroup) {
this.collapseGroup.registerCollapse(this);
this.localShowBorder = this.collapseGroup?.showBorder;
}
}
async configDividers() {
this.showDividerGroup = this.collapseGroup?.showDividerGroup;
this.individualDivider = typeof this.showDividerGroup === 'undefined' && this.showDivider;
}
componentWillLoad() {
this.initCollapseGroupConfig();
this.initWatchers();
this.initElements();
this.configDividers();
this.onValueChanged(this.value);
}
disconnectedCallback() {
this.eventsOff();
if (this.collapseGroup) {
this.collapseGroup.unregisterCollapse(this);
}
}
eventsOn() {
window.addEventListener(Events.EVENT_NAME_OPEN_GLOBAL_COLLAPSE, this.eventOpenCollapse);
window.addEventListener(Events.EVENT_NAME_HIDE_GLOBAL_COLLAPSE, this.eventCloseCollapse);
window.addEventListener(Events.EVENT_NAME_TOGGLE_GLOBAL_COLLAPSE, this.eventToggleCollapse);
}
eventsOff() {
window.removeEventListener(Events.EVENT_NAME_OPEN_GLOBAL_COLLAPSE, this.eventOpenCollapse);
window.removeEventListener(Events.EVENT_NAME_HIDE_GLOBAL_COLLAPSE, this.eventCloseCollapse);
window.removeEventListener(Events.EVENT_NAME_TOGGLE_GLOBAL_COLLAPSE, this.eventToggleCollapse);
}
render() {
const collapseStyles = this.getCollapseStyles;
return (h("div", { key: '6d98adf36c8101a3987263c7bd364383c830ed5f', class: collapseStyles, id: this.idCollapse }, h("slot", { key: '89047e3c9483f8e6a6c973f696a676f51c108964' })));
}
get collapse() { return this; }
static get watchers() { return {
"value": ["onValueChange"],
"header": ["onHeaderChange"],
"visible": ["onVisibleChange"],
"showBorder": ["onShowBorderChange"]
}; }
static get style() { return aqCollapseCss; }
}, [260, "aq-collapse", {
"idCollapse": [1, "id-collapse"],
"value": [516],
"showBorder": [516, "show-border"],
"showDivider": [516, "show-divider"],
"visible": [32],
"headerVisible": [32],
"header": [32],
"content": [32],
"showDividerGroup": [32],
"collapseGroup": [32],
"individualDivider": [32],
"localShowBorder": [32],
"getIndividualDivider": [64],
"getGroupDivider": [64],
"toggle": [64],
"show": [64],
"hide": [64],
"registerHeader": [64],
"registerContent": [64],
"getCollapseContext": [64]
}, undefined, {
"value": ["onValueChange"],
"header": ["onHeaderChange"],
"visible": ["onVisibleChange"],
"showBorder": ["onShowBorderChange"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-collapse"];
components.forEach(tagName => { switch (tagName) {
case "aq-collapse":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqCollapse$1);
}
break;
} });
}
const AqCollapse = AqCollapse$1;
const defineCustomElement = defineCustomElement$1;
export { AqCollapse, defineCustomElement };