111 lines
3.0 KiB
TypeScript
111 lines
3.0 KiB
TypeScript
import {
|
|
DeesElement,
|
|
customElement,
|
|
type TemplateResult,
|
|
html,
|
|
property,
|
|
css,
|
|
} from '@design.estate/dees-element';
|
|
|
|
// Import from local demotools
|
|
import '../../ts_demotools/demotools.js';
|
|
|
|
@customElement('test-withwrapper')
|
|
export class TestWithWrapper extends DeesElement {
|
|
public static demo = () => html`
|
|
<dees-demowrapper .runAfterRender=${async (wrapper) => {
|
|
console.log('DemoWrapper: Found wrapper element', wrapper);
|
|
|
|
const testElement = wrapper.querySelector('test-withwrapper');
|
|
if (testElement) {
|
|
console.log('DemoWrapper: Found test-withwrapper element');
|
|
testElement.dynamicValue = 'Set by demo wrapper!';
|
|
testElement.counter = 100;
|
|
|
|
// Test querySelector functionality
|
|
const innerDiv = wrapper.querySelector('.inner-content');
|
|
console.log('DemoWrapper: Found inner div:', innerDiv);
|
|
|
|
// Test querySelectorAll
|
|
const allButtons = wrapper.querySelectorAll('button');
|
|
console.log(`DemoWrapper: Found ${allButtons.length} buttons`);
|
|
}
|
|
}}>
|
|
<test-withwrapper></test-withwrapper>
|
|
<div style="margin-top: 10px; padding: 10px; background: #e0e0e0;">
|
|
This div is also inside the wrapper
|
|
</div>
|
|
</dees-demowrapper>
|
|
`;
|
|
|
|
@property({ type: String })
|
|
public dynamicValue: string = 'Initial value';
|
|
|
|
@property({ type: Number })
|
|
public counter: number = 0;
|
|
|
|
@property({ type: Boolean })
|
|
public isActive: boolean = false;
|
|
|
|
public static styles = [
|
|
css`
|
|
:host {
|
|
display: block;
|
|
padding: 20px;
|
|
background: #e8f5e9;
|
|
border: 2px solid #4caf50;
|
|
border-radius: 8px;
|
|
}
|
|
.wrapper-info {
|
|
background: #c8e6c9;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.inner-content {
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
margin: 10px 0;
|
|
}
|
|
button {
|
|
background: #4caf50;
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin-right: 10px;
|
|
}
|
|
button:hover {
|
|
background: #45a049;
|
|
}
|
|
.status {
|
|
margin-top: 10px;
|
|
font-family: monospace;
|
|
}
|
|
`
|
|
];
|
|
|
|
public render() {
|
|
return html`
|
|
<div class="wrapper-info">
|
|
This element is wrapped with dees-demowrapper in its demo
|
|
</div>
|
|
|
|
<div class="inner-content">
|
|
<h3>Dynamic Value: ${this.dynamicValue}</h3>
|
|
<p>Counter: ${this.counter}</p>
|
|
<p>Active: ${this.isActive ? 'Yes' : 'No'}</p>
|
|
|
|
<button @click=${() => this.counter++}>Increment</button>
|
|
<button @click=${() => this.isActive = !this.isActive}>Toggle Active</button>
|
|
<button @click=${() => this.dynamicValue = 'Clicked!'}>Change Value</button>
|
|
</div>
|
|
|
|
<div class="status">
|
|
Properties panel should detect this element inside the wrapper
|
|
</div>
|
|
`;
|
|
}
|
|
} |