60 lines
1.2 KiB
TypeScript
60 lines
1.2 KiB
TypeScript
|
import {
|
||
|
|
DeesElement,
|
||
|
|
customElement,
|
||
|
|
html,
|
||
|
|
property,
|
||
|
|
css,
|
||
|
|
} from '@design.estate/dees-element';
|
||
|
|
|
||
|
|
@customElement('test-input-text')
|
||
|
|
export class TestInputText extends DeesElement {
|
||
|
|
// Different group - "Inputs"
|
||
|
|
public static demoGroup = 'Inputs';
|
||
|
|
|
||
|
|
public static demo = () => html`
|
||
|
|
<test-input-text placeholder="Enter text..."></test-input-text>
|
||
|
|
`;
|
||
|
|
|
||
|
|
@property({ type: String })
|
||
|
|
accessor placeholder: string = '';
|
||
|
|
|
||
|
|
@property({ type: String })
|
||
|
|
accessor value: string = '';
|
||
|
|
|
||
|
|
public static styles = [
|
||
|
|
css`
|
||
|
|
:host {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
input {
|
||
|
|
background: #1a1a1a;
|
||
|
|
color: #e5e5e5;
|
||
|
|
border: 1px solid #333;
|
||
|
|
padding: 10px 14px;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 14px;
|
||
|
|
outline: none;
|
||
|
|
transition: border-color 0.2s;
|
||
|
|
min-width: 200px;
|
||
|
|
}
|
||
|
|
input:focus {
|
||
|
|
border-color: #3b82f6;
|
||
|
|
}
|
||
|
|
input::placeholder {
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
];
|
||
|
|
|
||
|
|
public render() {
|
||
|
|
return html`
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
.placeholder=${this.placeholder}
|
||
|
|
.value=${this.value}
|
||
|
|
@input=${(e: Event) => this.value = (e.target as HTMLInputElement).value}
|
||
|
|
/>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|