93 lines
2.2 KiB
TypeScript
93 lines
2.2 KiB
TypeScript
import {
|
|
DeesElement,
|
|
customElement,
|
|
html,
|
|
css,
|
|
cssManager,
|
|
property,
|
|
type TemplateResult,
|
|
} from '@design.estate/dees-element';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'sz-config-overview': SzConfigOverview;
|
|
}
|
|
}
|
|
|
|
@customElement('sz-config-overview')
|
|
export class SzConfigOverview extends DeesElement {
|
|
public static demo = () => html`<sz-config-overview
|
|
heading="Configuration"
|
|
infoText="This is a read-only view of the current running configuration."
|
|
>
|
|
<div style="padding: 20px; text-align: center; color: #71717a; font-size: 14px;">
|
|
Place <sz-config-section> elements here
|
|
</div>
|
|
</sz-config-overview>`;
|
|
|
|
public static demoGroups = ['Configuration'];
|
|
|
|
@property({ type: String })
|
|
public accessor heading: string = '';
|
|
|
|
@property({ type: String })
|
|
public accessor infoText: string = '';
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
.heading {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.info-banner {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 14px 18px;
|
|
margin-bottom: 20px;
|
|
border-radius: 8px;
|
|
background: ${cssManager.bdTheme('#eff6ff', 'rgba(59,130,246,0.08)')};
|
|
border: 1px solid ${cssManager.bdTheme('#bfdbfe', 'rgba(59,130,246,0.2)')};
|
|
color: ${cssManager.bdTheme('#1e40af', '#93c5fd')};
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.info-banner dees-icon {
|
|
flex-shrink: 0;
|
|
font-size: 18px;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
::slotted(sz-config-section) {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
::slotted(sz-config-section:last-child) {
|
|
margin-bottom: 0;
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
${this.heading ? html`<div class="heading">${this.heading}</div>` : ''}
|
|
${this.infoText ? html`
|
|
<div class="info-banner">
|
|
<dees-icon .icon=${'lucide:info'}></dees-icon>
|
|
<span>${this.infoText}</span>
|
|
</div>
|
|
` : ''}
|
|
<slot></slot>
|
|
`;
|
|
}
|
|
}
|