@salla.sa/twilight-components
Version:
Salla Web Component
64 lines (57 loc) • 3.08 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
'use strict';
var index = require('./index-uoA36zqH.js');
var minus = require('./minus-CCryh1qf.js');
const sallaAccordionBodyCss = "";
const SallaAccordionBody = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
render() {
return (index.h(index.Host, { key: '298d42a5bf1bcefdb181ec35060220cf749b56ed', class: "s-accordion-body-wrapper" }, index.h("slot", { key: '6ab081e8b71b5dc69fb66fbdec82b4725ab53b0d' })));
}
};
SallaAccordionBody.style = sallaAccordionBodyCss;
const sallaAccordionHeadCss = "";
const SallaAccordionHead = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.accordionToggle = index.createEvent(this, "accordionToggle");
/** Should the accordion be collapsible or not. */
this.collapsible = false;
/** Current collapsed state */
this.collapsed = true;
}
emitCollapsePanel() {
this.accordionToggle.emit({
payload: {
collapsed: this.collapsed,
},
});
}
toggleCollapse() {
if (!this.collapsible)
return;
this.collapsed = !this.collapsed;
this.host.parentElement?.setAttribute('data-collapsed', this.collapsed.toString());
this.host.parentElement
?.querySelector('salla-accordion-body')
?.setAttribute('data-collapsed', this.collapsed.toString());
this.emitCollapsePanel();
}
render() {
return (index.h(index.Host, { key: '9d88d243306cdf451c20d7068fbb9f48807b22e9', "data-collapsed": this.collapsed.toString(), onClick: () => this.toggleCollapse(), class: "s-accordion-head-wrapper" }, index.h("div", { key: 'bad4c5a913ce1c4581b09c0b6d96fcbdb4236638', class: "s-accordion-head-wrapper-start" }, index.h("slot", { key: 'acb83cec8cbca5771a9f84e81c0b955c3edad731', name: "title" }), index.h("slot", { key: 'a4ad42ea6fad4f452c4c218a9ee02dca0adb4a67', name: "progress" }), index.h("slot", { key: '96ab95d413dc906ac299079f4008816f01881990', name: "html" })), (this.collapsible || this.host.querySelector('[slot="note"]')) && (index.h("div", { key: '8f9666a5038cd7b1ac6e357c6920ea26d31c5f03', class: "s-accordion-head-wrapper-end" }, index.h("slot", { key: '14895e8c1385e91c14f046c9ae38ce5e4a4c9a60', name: "note" }), this.collapsible && (index.h("button", { key: '97dc7fabbb207fcc8b68ebf0a86f6c8a980dca13', class: {
's-accordion-head-wrapper-toggle': true,
active: !this.collapsed,
}, onClick: e => {
e.stopPropagation();
this.toggleCollapse();
} }, index.h("span", { key: '3b24faf71dcd332663a354310b2ce09f7879eddc', class: "s-accordion-head-wrapper-toggle-icon", innerHTML: this.collapsed ? minus.plusIcon : minus.minusIcon })))))));
}
get host() { return index.getElement(this); }
};
SallaAccordionHead.style = sallaAccordionHeadCss;
exports.salla_accordion_body = SallaAccordionBody;
exports.salla_accordion_head = SallaAccordionHead;