fix(core): update
This commit is contained in:
70
ts_web/elements/dees-label.ts
Normal file
70
ts_web/elements/dees-label.ts
Normal file
@ -0,0 +1,70 @@
|
||||
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``}
|
||||
`;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user