feat(demo): add DeesDemoWrapper component for enhanced demo element handling
This commit is contained in:
@ -0,0 +1,41 @@
|
||||
import { DeesElement, customElement, html, css, property, type TemplateResult } from '@design.estate/dees-element';
|
||||
|
||||
@customElement('dees-demowrapper')
|
||||
export class DeesDemoWrapper extends DeesElement {
|
||||
@property({ attribute: false })
|
||||
public runAfterRender: (element: HTMLElement) => void | Promise<void>;
|
||||
|
||||
public static styles = [
|
||||
css`
|
||||
:host {
|
||||
display: contents;
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<slot></slot>
|
||||
`;
|
||||
}
|
||||
|
||||
public async firstUpdated() {
|
||||
await this.updateComplete;
|
||||
|
||||
// Wait a bit for slotted content to render
|
||||
await new Promise(resolve => setTimeout(resolve, 50));
|
||||
|
||||
// Find the first element child (excluding text nodes)
|
||||
const slottedElements = this.children;
|
||||
if (slottedElements.length > 0 && this.runAfterRender) {
|
||||
const firstElement = slottedElements[0] as HTMLElement;
|
||||
|
||||
// Call the runAfterRender function with the element
|
||||
try {
|
||||
await this.runAfterRender(firstElement);
|
||||
} catch (error) {
|
||||
console.error('Error in runAfterRender:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1 @@
|
||||
export * from './demotools.js';
|
@ -1 +1,5 @@
|
||||
import {} from '@design.estate/dees-element';
|
||||
import * as deesElement from '@design.estate/dees-element';
|
||||
|
||||
export {
|
||||
deesElement
|
||||
};
|
3
ts_demotools/tspublish.json
Normal file
3
ts_demotools/tspublish.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"order": 2
|
||||
}
|
Reference in New Issue
Block a user