catalog/ts_web/elements/sio-subwidget-onboardme.ts

64 lines
1.8 KiB
TypeScript
Raw Permalink Normal View History

2024-12-27 01:53:26 +01:00
import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import * as deesCatalog from '@design.estate/dees-catalog';
deesCatalog;
@customElement('sio-subwidget-onboardme')
export class SioSubwidgetOnboardme extends DeesElement {
@property()
public showCombox = false;
public static demo = () => html`
<sio-subwidget-onboardme></sio-subwidget-onboardme>
`;
constructor() {
super();
domtools.DomTools.setupDomTools();
}
public render(): TemplateResult {
return html`
${domtools.elementBasic.styles}
<style>
:host {
display: block;
position: relative;
transition: all 0.1s;
min-height: 200px;
margin: 20px 20px 40px 20px;
background: ${this.goBright ? '#fafafa' : '#111111'};
border-radius: 16px;
border-top: 1px solid rgba(250,250,250,0.1);
box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
padding: 24px 24px 32px 24px;
color: #CCC;
overflow: hidden;
}
:host(:hover) {
}
.brandingbox {
text-align: center;
position: absolute;
width: 100%;
bottom: 0px;
left: 0px;
font-size: 10px;
padding: 3px;
border-top: 1px solid rgba(250,250,250, 0.1);
font-family: 'Dees Code';
background: ${this.goBright ? '#eee' : '#111111'};
color: #666;
}
</style>
Or search through our documentation
<dees-input-text key="searchTerm" label="Search Term:"></dees-input-text>
<dees-button>Search</dees-button>
<div class="brandingbox">last updated: ${new Date().toISOString()}</div>
`;
}
}