47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
|
import { html } from '@design.estate/dees-element';
|
||
|
|
|
||
|
|
export const demo = () => html`
|
||
|
|
<style>
|
||
|
|
.demo-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 400px;
|
||
|
|
background: hsl(240 10% 4%);
|
||
|
|
border-radius: 12px;
|
||
|
|
overflow: hidden;
|
||
|
|
padding: 16px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.demo-info {
|
||
|
|
margin-bottom: 16px;
|
||
|
|
padding: 12px;
|
||
|
|
background: hsl(240 6% 12%);
|
||
|
|
border-radius: 8px;
|
||
|
|
color: hsl(0 0% 70%);
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.demo-frame {
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100% - 80px);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div class="demo-container">
|
||
|
|
<div class="demo-info">
|
||
|
|
The provider frame loads external web apps that implement the ecobridge provider protocol.
|
||
|
|
In this demo, no provider URL is set, so it shows the loading state.
|
||
|
|
</div>
|
||
|
|
<div class="demo-frame">
|
||
|
|
<eco-provider-frame
|
||
|
|
providerId="demo-provider"
|
||
|
|
providerName="Demo Provider"
|
||
|
|
providerUrl=""
|
||
|
|
@provider-ready=${(e: CustomEvent) => console.log('Provider ready:', e.detail)}
|
||
|
|
@provider-features-changed=${(e: CustomEvent) => console.log('Features changed:', e.detail)}
|
||
|
|
@provider-response=${(e: CustomEvent) => console.log('Response:', e.detail)}
|
||
|
|
@provider-error=${(e: CustomEvent) => console.log('Error:', e.detail)}
|
||
|
|
></eco-provider-frame>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|