diff --git a/demos/bs5-accordion/src/ts/components/bs5-accordion-example/bs5-accordion-example.component.tsx b/demos/bs5-accordion/src/ts/components/bs5-accordion-example/bs5-accordion-example.component.tsx index 79b4eeeee..12d8ffc37 100644 --- a/demos/bs5-accordion/src/ts/components/bs5-accordion-example/bs5-accordion-example.component.tsx +++ b/demos/bs5-accordion/src/ts/components/bs5-accordion-example/bs5-accordion-example.component.tsx @@ -6,7 +6,7 @@ interface Scope { items2: AccordionItem[]; } -export class As5accordionExampleComponent extends Component { +export class Bs5AccordionExampleComponent extends Component { public static tagName = "bs5-accordion-example"; protected autobind = true; @@ -33,7 +33,7 @@ export class As5accordionExampleComponent extends Component { protected connectedCallback() { super.connectedCallback(); - super.init(As5accordionExampleComponent.observedAttributes); + super.init(Bs5AccordionExampleComponent.observedAttributes); } protected requiredAttributes(): string[] { diff --git a/demos/bs5-accordion/src/ts/components/index.ts b/demos/bs5-accordion/src/ts/components/index.ts index 4aaa2e43e..f0d32e4e8 100644 --- a/demos/bs5-accordion/src/ts/components/index.ts +++ b/demos/bs5-accordion/src/ts/components/index.ts @@ -1 +1 @@ -export { As5accordionExampleComponent } from "./bs5-accordion-example/bs5-accordion-example.component.js"; +export { Bs5AccordionExampleComponent } from "./bs5-accordion-example/bs5-accordion-example.component.js"; diff --git a/packages/bs5/src/components/bs5-accordion/bs5-accordion.component.ts b/packages/bs5/src/components/bs5-accordion/bs5-accordion.component.ts index 095ecf1c1..7cfd9b310 100644 --- a/packages/bs5/src/components/bs5-accordion/bs5-accordion.component.ts +++ b/packages/bs5/src/components/bs5-accordion/bs5-accordion.component.ts @@ -12,6 +12,8 @@ import { AccordionItem, } from "../../types/index.js"; +import template from "./bs5-accordion.component.html?raw"; + const handleize = handleizeFormatter.read as FormatterFn; interface Scope extends ScopeBase { @@ -28,6 +30,7 @@ export class Bs5AccordionComponent extends TemplatesComponent { public static tagName = "bs5-accordion"; protected autobind = true; + public _debug = true; protected templateAttributes = [ { @@ -55,19 +58,24 @@ export class Bs5AccordionComponent extends TemplatesComponent { ]; } + protected connectedCallback() { + super.connectedCallback(); + this.init(Bs5AccordionComponent.observedAttributes); + } + + protected requiredAttributes(): string[] { + return []; + } + public scope: Scope = { items: [], - toggle: this.toggle, - show: this.show, - hide: this.hide, + toggle: this.toggle.bind(this), + show: this.show.bind(this), + hide: this.hide.bind(this), collapseIconSize: 16, showOnlyOne: true, }; - constructor() { - super(); - } - public hide(item: AccordionItem, index: number) { const target = this.querySelector(`[data-index="${index}"]`); if (target) { @@ -182,54 +190,9 @@ export class Bs5AccordionComponent extends TemplatesComponent { }, 200); } - protected connectedCallback() { - super.connectedCallback(); - this.init(Bs5AccordionComponent.observedAttributes); - } - - protected async init(observedAttributes: string[]) { - return super.init(observedAttributes).then((view) => { - return view; - }); - } - - protected async beforeBind() { - return await super.beforeBind(); - } - - protected async afterBind() { - return await super.afterBind(); - } - - protected requiredAttributes(): string[] { - return []; - } - - protected parsedAttributeChangedCallback( - attributeName: string, - oldValue: any, - newValue: any, - namespace: string | null - ) { - super.parsedAttributeChangedCallback( - attributeName, - oldValue, - newValue, - namespace - ); - } - - // deconstruction - protected disconnectedCallback() { - super.disconnectedCallback(); - } - protected async template() { // Only set the component template if there no childs or the childs are templates if (!hasChildNodesTrim(this) || this.hasOnlyTemplateChilds()) { - const { default: template } = await import( - "./bs5-accordion.component.html?raw" - ); return template; } else { return null;