95 lines
2.0 KiB
TypeScript
95 lines
2.0 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;
|
|
|
|
@property({
|
|
type: Boolean,
|
|
reflect: true,
|
|
})
|
|
public required: boolean = false;
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
|
}
|
|
|
|
.label {
|
|
display: inline-block;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 1.5;
|
|
margin-bottom: 6px;
|
|
cursor: default;
|
|
user-select: none;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.required {
|
|
color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
|
|
margin-left: 2px;
|
|
}
|
|
|
|
dees-icon {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
transform: translateY(1px);
|
|
margin-left: 4px;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
|
|
cursor: help;
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render() {
|
|
return html`
|
|
${this.label
|
|
? html`
|
|
<div class="label">
|
|
${this.label}
|
|
${this.required ? html`<span class="required">*</span>` : ''}
|
|
${this.description
|
|
? html`
|
|
<dees-icon .iconName=${'lucideInfo'}></dees-icon>
|
|
<dees-speechbubble .text=${this.description}></dees-speechbubble>
|
|
`
|
|
: html``}
|
|
</div>
|
|
`
|
|
: html``}
|
|
`;
|
|
}
|
|
}
|