102 lines
2.6 KiB
TypeScript
102 lines
2.6 KiB
TypeScript
|
import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
|
||
|
|
import { idpElementStyles } from './tokens.js';
|
||
|
|
|
||
|
|
declare global {
|
||
|
|
interface HTMLElementTagNameMap {
|
||
|
|
'idp-input': IdpInput;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@customElement('idp-input')
|
||
|
|
export class IdpInput extends DeesElement {
|
||
|
|
public static demo = () => html`<idp-input label="Email" placeholder="user@example.com"></idp-input>`;
|
||
|
|
public static demoGroups = ['idp.global v3 primitives'];
|
||
|
|
|
||
|
|
@property({ type: String })
|
||
|
|
public accessor label = '';
|
||
|
|
|
||
|
|
@property({ type: String })
|
||
|
|
public accessor hint = '';
|
||
|
|
|
||
|
|
@property({ type: String })
|
||
|
|
public accessor value = '';
|
||
|
|
|
||
|
|
@property({ type: String })
|
||
|
|
public accessor placeholder = '';
|
||
|
|
|
||
|
|
@property({ type: String })
|
||
|
|
public accessor type = 'text';
|
||
|
|
|
||
|
|
@property({ type: Boolean, reflect: true })
|
||
|
|
public accessor disabled = false;
|
||
|
|
|
||
|
|
public static styles = [
|
||
|
|
...idpElementStyles,
|
||
|
|
css`
|
||
|
|
:host {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
label {
|
||
|
|
display: grid;
|
||
|
|
gap: 6px;
|
||
|
|
}
|
||
|
|
.label {
|
||
|
|
color: var(--idp-fg);
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
input {
|
||
|
|
width: 100%;
|
||
|
|
height: 36px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 0 10px;
|
||
|
|
border: 1px solid var(--idp-border);
|
||
|
|
border-radius: 8px;
|
||
|
|
outline: none;
|
||
|
|
background: var(--idp-card);
|
||
|
|
color: var(--idp-fg);
|
||
|
|
font-family: var(--idp-font);
|
||
|
|
font-size: 13px;
|
||
|
|
transition: border-color 120ms ease, box-shadow 120ms ease;
|
||
|
|
}
|
||
|
|
input:focus {
|
||
|
|
border-color: var(--idp-accent);
|
||
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--idp-accent), transparent 86%);
|
||
|
|
}
|
||
|
|
input:disabled {
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
.hint {
|
||
|
|
color: var(--idp-muted-fg);
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 1.4;
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
];
|
||
|
|
|
||
|
|
private handleInput(eventArg: Event) {
|
||
|
|
this.value = (eventArg.target as HTMLInputElement).value;
|
||
|
|
this.dispatchEvent(new CustomEvent('idp-input-change', {
|
||
|
|
detail: { value: this.value },
|
||
|
|
bubbles: true,
|
||
|
|
composed: true,
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
|
||
|
|
public render(): TemplateResult {
|
||
|
|
return html`
|
||
|
|
<label>
|
||
|
|
${this.label ? html`<span class="label">${this.label}</span>` : html``}
|
||
|
|
<input
|
||
|
|
.value=${this.value}
|
||
|
|
type=${this.type}
|
||
|
|
placeholder=${this.placeholder}
|
||
|
|
?disabled=${this.disabled}
|
||
|
|
@input=${this.handleInput}
|
||
|
|
/>
|
||
|
|
${this.hint ? html`<span class="hint">${this.hint}</span>` : html``}
|
||
|
|
</label>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|