71 lines
1.4 KiB
TypeScript
71 lines
1.4 KiB
TypeScript
import * as plugins from './00plugins.js';
|
|
import * as colors from './00colors.js';
|
|
|
|
import {
|
|
customElement,
|
|
html,
|
|
css,
|
|
cssManager,
|
|
DeesElement,
|
|
property,
|
|
unsafeCSS,
|
|
query,
|
|
} from '@design.estate/dees-element';
|
|
|
|
import { demoFunc } from './dees-label.demo.js';
|
|
|
|
@customElement('dees-label')
|
|
export class DeesLabel extends DeesElement {
|
|
public static demo = demoFunc;
|
|
|
|
// INSTANCE
|
|
|
|
@property({
|
|
type: String,
|
|
reflect: true,
|
|
})
|
|
public label = '';
|
|
|
|
@property({
|
|
type: String,
|
|
reflect: true,
|
|
})
|
|
public description: string;
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
.label {
|
|
color: ${cssManager.bdTheme('#333', '#ccc')};
|
|
font-size: 14px;
|
|
margin-bottom: 8px;
|
|
cursor: default;
|
|
user-select: none;
|
|
}
|
|
dees-icon {
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
transform: translateY(1.5px);
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render() {
|
|
return html`
|
|
${this.label
|
|
? html`
|
|
<div class="label">
|
|
${this.label}
|
|
${this.description
|
|
? html`
|
|
<dees-icon .iconFA=${'circleInfo'}></dees-icon>
|
|
<dees-speechbubble .text=${this.description}></dees-speechbubble>
|
|
`
|
|
: html``}
|
|
</div>
|
|
`
|
|
: html``}
|
|
`;
|
|
}
|
|
}
|