Content 01. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Content 02. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Content 03. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Content 04. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
No accordion data available.
';
return;
}
// Use a unique base ID for this accordion instance
const baseId = L4AccordionCard.generateUniqueId(this.#componentName, '');
// Classes for the root container
let classListArr = ['l4', 'accordion', 'card', 'accordion-card', 'component'];
if (this.schema && this.schema.displaySchema && this.schema.displaySchema.properties && this.schema.displaySchema.properties.class && Array.isArray(this.schema.displaySchema.properties.class.const)) {
classListArr = this.schema.displaySchema.properties.class.const;
}
const classList = classListArr.join(' ');
// Build the accordion HTML from the data array
let itemsHTML = '';
this.data.forEach((item, idx) => {
const itemId = `${baseId}-item${idx}`;
const collapseId = `${itemId}-collapse`;
const expanded = idx === 0 ? 'true' : 'false';
const showClass = idx === 0 ? 'show' : '';
const collapsedClass = idx === 0 ? '' : 'collapsed';
itemsHTML += `
`;
});
// Only wrap if not already wrapped (avoid recursion)
if (this.parentElement && this.parentElement.tagName.toLowerCase() === 'l4-accordion-card') {
// Already wrapped, just render the accordion inner HTML
this.innerHTML = `
${itemsHTML}
`;
} else {
// Wrap in l4-accordion-card tag
this.innerHTML = `
${itemsHTML}
`;
}
}
}
// Inline validation (simple, covers required fields and types)
static validateData(data, schema) {
if (!Array.isArray(data)) return false;
for (const item of data) {
for (const key of schema.required) {
if (!(key in item)) return false;
if (typeof item[key] !== schema.properties[key].type) return false;
if (schema.properties[key].minLength && item[key].length < schema.properties[key].minLength) return false;
}
if (!schema.additionalProperties) {
for (const key of Object.keys(item)) {
if (!schema.properties[key]) return false;
}
}
}
return true;
}
// Inline unique ID generator (mimics previous utility)
static generateUniqueId(componentName, title) {
// Use component name, kebab-case title, and a timestamp
const safeTitle = title ? title.toLowerCase().replace(/[^a-z0-9]+/g, '-') : 'item';
const ts = Date.now().toString().slice(-12);
return `${componentName}_${safeTitle}_${ts}`;
}
}
customElements.define('l4-accordion-card', L4AccordionCard);
export default L4AccordionCard;
