110 lines
4.4 KiB
JavaScript
110 lines
4.4 KiB
JavaScript
'use strict';
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
const index = require('./index-ca0e0765.js');
|
|
|
|
const accordionCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}";
|
|
|
|
const Accordion = class {
|
|
constructor(hostRef) {
|
|
index.registerInstance(this, hostRef);
|
|
this.autoCollapse = false;
|
|
}
|
|
async onItemOpen(event) {
|
|
if (this.autoCollapse) {
|
|
const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));
|
|
for (const item of items) {
|
|
const itemElement = item;
|
|
if (itemElement !== event.target && (await itemElement.open)) {
|
|
itemElement.open = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
render() {
|
|
return (index.h("div", { class: "accordion-wrapper" }, index.h("slot", null)));
|
|
}
|
|
get el() { return index.getElement(this); }
|
|
};
|
|
Accordion.style = accordionCss;
|
|
|
|
const accordionItemCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.accordion-item{border-radius:3px;overflow:hidden;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;max-height:0;overflow:hidden;transition:max-height 0.3s ease-in-out;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:24px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;}.accordion-icon{font-weight:bold;display:inline-block;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}";
|
|
|
|
const IfxAccordionItem = class {
|
|
constructor(hostRef) {
|
|
index.registerInstance(this, hostRef);
|
|
this.ifxItemOpen = index.createEvent(this, "ifxItemOpen", 7);
|
|
this.ifxItemClose = index.createEvent(this, "ifxItemClose", 7);
|
|
this.caption = undefined;
|
|
this.open = false;
|
|
this.initialCollapse = true;
|
|
this.internalOpen = false;
|
|
}
|
|
componentWillLoad() {
|
|
this.internalOpen = this.open;
|
|
if (!this.initialCollapse) {
|
|
this.internalOpen = true;
|
|
}
|
|
}
|
|
componentDidLoad() {
|
|
this.openAccordionItem();
|
|
}
|
|
componentDidUpdate() {
|
|
this.openAccordionItem();
|
|
}
|
|
openChanged(newValue) {
|
|
this.internalOpen = newValue;
|
|
}
|
|
toggleOpen() {
|
|
this.internalOpen = !this.internalOpen;
|
|
this.open = this.internalOpen;
|
|
if (this.internalOpen) {
|
|
this.ifxItemOpen.emit({ isOpen: this.internalOpen });
|
|
}
|
|
else {
|
|
this.ifxItemClose.emit({ isClosed: !this.internalOpen });
|
|
}
|
|
}
|
|
openAccordionItem() {
|
|
if (this.internalOpen) {
|
|
this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;
|
|
}
|
|
else {
|
|
this.contentEl.style.maxHeight = '0';
|
|
}
|
|
}
|
|
handleSlotChange(e) {
|
|
const slotElement = e.target;
|
|
const nodes = slotElement.assignedNodes();
|
|
if (nodes.length > 0) {
|
|
nodes.forEach(node => {
|
|
const observer = new MutationObserver((mutationsList, _) => {
|
|
for (let mutation of mutationsList) {
|
|
if (mutation.type === 'childList') {
|
|
if (this.internalOpen) {
|
|
this.openAccordionItem();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
observer.observe(node, { attributes: true, childList: true, subtree: true });
|
|
});
|
|
}
|
|
if (this.internalOpen) {
|
|
this.openAccordionItem();
|
|
}
|
|
}
|
|
render() {
|
|
return (index.h("div", { "aria-label": this.caption, class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, index.h("div", { class: "accordion-title", onClick: () => this.toggleOpen() }, index.h("span", { class: "accordion-icon" }, index.h("ifx-icon", { icon: "chevron-down-12" })), index.h("span", { class: "accordion-caption" }, this.caption)), index.h("div", { class: "accordion-content", ref: (el) => (this.contentEl = el) }, index.h("div", { class: "inner-content" }, index.h("slot", { onSlotchange: (e) => this.handleSlotChange(e) })))));
|
|
}
|
|
static get watchers() { return {
|
|
"open": ["openChanged"]
|
|
}; }
|
|
};
|
|
IfxAccordionItem.style = accordionItemCss;
|
|
|
|
exports.ifx_accordion = Accordion;
|
|
exports.ifx_accordion_item = IfxAccordionItem;
|
|
|
|
//# sourceMappingURL=ifx-accordion_2.cjs.entry.js.map
|