438 lines
13 KiB
TypeScript
438 lines
13 KiB
TypeScript
import * as colors from '../../00colors.js';
|
|
import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
|
|
import { demoFunc } from './dees-input-text.demo.js';
|
|
import { cssGeistFontFamily, cssMonoFontFamily } from '../../00fonts.js';
|
|
|
|
import {
|
|
customElement,
|
|
type TemplateResult,
|
|
property,
|
|
state,
|
|
html,
|
|
cssManager,
|
|
css,
|
|
} from '@design.estate/dees-element';
|
|
import { themeDefaultStyles } from '../../00theme.js';
|
|
import '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'dees-input-text': DeesInputText;
|
|
}
|
|
}
|
|
|
|
@customElement('dees-input-text')
|
|
export class DeesInputText extends DeesInputBase {
|
|
public static demo = demoFunc;
|
|
public static demoGroups = ['Input'];
|
|
|
|
// INSTANCE
|
|
@property({
|
|
type: String,
|
|
reflect: true,
|
|
})
|
|
accessor value: string = '';
|
|
|
|
@property({
|
|
type: Boolean,
|
|
reflect: true,
|
|
})
|
|
accessor isPasswordBool = false;
|
|
|
|
@property({
|
|
type: Boolean,
|
|
reflect: true,
|
|
})
|
|
accessor showPasswordBool = false;
|
|
|
|
@property({
|
|
type: String,
|
|
reflect: true,
|
|
})
|
|
accessor validationState!: 'valid' | 'warn' | 'invalid';
|
|
|
|
@property({
|
|
reflect: true,
|
|
})
|
|
accessor validationText: string = '';
|
|
|
|
@property({ attribute: false })
|
|
accessor validationFunction!: (value: string) => { valid: boolean; message?: string };
|
|
|
|
@property({
|
|
type: Boolean,
|
|
reflect: true,
|
|
})
|
|
accessor vintegrated: boolean = false;
|
|
|
|
@property({ attribute: false })
|
|
accessor validConfirmed: boolean = false;
|
|
|
|
private validTimeout: ReturnType<typeof setTimeout> | undefined;
|
|
|
|
public static styles = [
|
|
themeDefaultStyles,
|
|
...DeesInputBase.baseStyles,
|
|
cssManager.defaultStyles,
|
|
css`
|
|
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:host {
|
|
position: relative;
|
|
z-index: auto;
|
|
font-family: ${cssGeistFontFamily};
|
|
}
|
|
|
|
.maincontainer {
|
|
position: relative;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
|
|
}
|
|
|
|
input {
|
|
display: flex;
|
|
height: 40px;
|
|
width: 100%;
|
|
padding: 0 12px;
|
|
font-size: 14px;
|
|
line-height: 40px;
|
|
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
|
|
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
|
border-radius: 6px;
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
outline: none;
|
|
cursor: text;
|
|
font-family: inherit;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
|
|
}
|
|
|
|
input::placeholder {
|
|
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
|
|
}
|
|
|
|
input:hover:not(:disabled):not(:focus) {
|
|
border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
|
|
}
|
|
|
|
input:focus {
|
|
outline: none;
|
|
border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
|
|
box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 9% / 0.05)', 'hsl(0 0% 98% / 0.05)')};
|
|
}
|
|
|
|
input:disabled {
|
|
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
|
|
border-color: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
|
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Password toggle button */
|
|
.showPassword {
|
|
position: absolute;
|
|
right: 1px;
|
|
top: 20px;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 38px;
|
|
height: 38px;
|
|
cursor: pointer;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
|
|
transition: all 0.15s ease;
|
|
border-radius: 0 5px 5px 0;
|
|
}
|
|
|
|
.showPassword:hover {
|
|
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
|
|
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
|
|
}
|
|
|
|
/* Valid checkmark icon */
|
|
.validIcon {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 20px;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
pointer-events: none;
|
|
color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
|
|
}
|
|
|
|
.validIcon.show {
|
|
opacity: 1;
|
|
}
|
|
|
|
.validIcon dees-icon {
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* Validation styles */
|
|
.validationContainer {
|
|
margin-top: 4px;
|
|
padding: 4px 8px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
border-radius: 4px;
|
|
transition: all 0.2s ease;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.validationContainer.invalid {
|
|
background: ${cssManager.bdTheme('hsl(0 84.2% 60.2% / 0.1)', 'hsl(0 72.2% 50.6% / 0.1)')};
|
|
color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
|
|
}
|
|
|
|
.validationContainer.warn {
|
|
background: ${cssManager.bdTheme('hsl(25 95% 53% / 0.1)', 'hsl(25 95% 63% / 0.1)')};
|
|
color: ${cssManager.bdTheme('hsl(25 95% 53%)', 'hsl(25 95% 63%)')};
|
|
}
|
|
|
|
.validationContainer.valid {
|
|
background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.1)', 'hsl(142.1 70.6% 45.3% / 0.1)')};
|
|
color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
|
|
}
|
|
|
|
/* Error state for input */
|
|
:host([validationstate="invalid"]) input {
|
|
border-color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
|
|
}
|
|
|
|
:host([validationstate="invalid"]) input:focus {
|
|
border-color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
|
|
box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 84.2% 60.2% / 0.05)', 'hsl(0 72.2% 50.6% / 0.05)')};
|
|
}
|
|
|
|
/* Warning state for input */
|
|
:host([validationstate="warn"]) input {
|
|
border-color: ${cssManager.bdTheme('hsl(25 95% 53%)', 'hsl(25 95% 63%)')};
|
|
}
|
|
|
|
:host([validationstate="warn"]) input:focus {
|
|
border-color: ${cssManager.bdTheme('hsl(25 95% 53%)', 'hsl(25 95% 63%)')};
|
|
box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(25 95% 53% / 0.05)', 'hsl(25 95% 63% / 0.05)')};
|
|
}
|
|
|
|
/* Valid state for input */
|
|
:host([validationstate="valid"]) input {
|
|
border-color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
|
|
}
|
|
|
|
:host([validationstate="valid"]) input:focus {
|
|
border-color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
|
|
box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.05)', 'hsl(142.1 70.6% 45.3% / 0.05)')};
|
|
}
|
|
|
|
/* Visually integrated mode: shed chrome to blend into a host component
|
|
(e.g. a dees-table cell in edit mode). */
|
|
:host([vintegrated]) dees-label,
|
|
:host([vintegrated]) .validationContainer {
|
|
display: none;
|
|
}
|
|
:host([vintegrated]) .maincontainer {
|
|
height: 40px;
|
|
}
|
|
:host([vintegrated]) input {
|
|
height: 40px;
|
|
line-height: 24px;
|
|
padding: 0 16px;
|
|
font-size: 13px;
|
|
border: none;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
transition: none;
|
|
}
|
|
:host([vintegrated]) input:hover:not(:disabled):not(:focus),
|
|
:host([vintegrated]) input:focus {
|
|
border: none;
|
|
box-shadow: none;
|
|
background: transparent;
|
|
}
|
|
:host([vintegrated]) .showPassword {
|
|
display: none;
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<style>
|
|
input {
|
|
font-family: ${this.isPasswordBool ? cssMonoFontFamily : 'inherit'};
|
|
letter-spacing: ${this.isPasswordBool ? '0.5px' : 'normal'};
|
|
padding-right: ${this.isPasswordBool ? '48px' : this.validConfirmed ? '40px' : '12px'};
|
|
}
|
|
${this.validationText && !this.validConfirmed
|
|
? css`
|
|
.validationContainer {
|
|
height: auto;
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
`
|
|
: css`
|
|
.validationContainer {
|
|
height: 0;
|
|
padding: 0 !important;
|
|
opacity: 0;
|
|
transform: translateY(-4px);
|
|
}
|
|
`}
|
|
</style>
|
|
<div class="input-wrapper">
|
|
<dees-label .label=${this.label} .infoText=${this.infoText} .required=${this.required}></dees-label>
|
|
<div class="maincontainer">
|
|
<input
|
|
type="${this.isPasswordBool && !this.showPasswordBool ? 'password' : 'text'}"
|
|
.value=${this.value}
|
|
@input="${this.updateValue}"
|
|
.disabled=${this.disabled}
|
|
placeholder="${this.label ? '' : 'Enter text...'}"
|
|
/>
|
|
${this.isPasswordBool
|
|
? html`
|
|
<div class="showPassword" @click=${this.togglePasswordView}>
|
|
<dees-icon .icon=${this.showPasswordBool ? 'lucide:Eye' : 'lucide:EyeOff'}></dees-icon>
|
|
</div>
|
|
`
|
|
: html``}
|
|
<div class="validIcon ${this.validConfirmed ? 'show' : ''}">
|
|
<dees-icon .icon=${'lucide:Check'}></dees-icon>
|
|
</div>
|
|
${this.validationText
|
|
? html`
|
|
<div class="validationContainer ${this.validationState || 'invalid'}">
|
|
${this.validationText}
|
|
</div>
|
|
`
|
|
: html`<div class="validationContainer"></div>`}
|
|
${this.renderDescription()}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
firstUpdated() {
|
|
if (this.validationFunction && this.value) {
|
|
const result = this.validationFunction(this.value);
|
|
this.validationState = result.valid ? 'valid' : 'invalid';
|
|
this.validationText = result.message || '';
|
|
if (result.valid) {
|
|
this.validConfirmed = false;
|
|
this.validTimeout = setTimeout(() => {
|
|
this.validConfirmed = true;
|
|
this.validationState = undefined as any;
|
|
}, 500);
|
|
}
|
|
}
|
|
}
|
|
|
|
public async updateValue(eventArg: Event) {
|
|
const target: any = eventArg.target;
|
|
this.value = target.value;
|
|
if (this.validationFunction) {
|
|
const result = this.validationFunction(this.value);
|
|
this.validationState = result.valid ? 'valid' : 'invalid';
|
|
this.validationText = result.message || '';
|
|
if (result.valid) {
|
|
this.validConfirmed = false;
|
|
clearTimeout(this.validTimeout);
|
|
this.validTimeout = setTimeout(() => {
|
|
this.validConfirmed = true;
|
|
this.validationState = undefined as any;
|
|
}, 500);
|
|
} else {
|
|
clearTimeout(this.validTimeout);
|
|
this.validConfirmed = false;
|
|
}
|
|
}
|
|
this.changeSubject.next(this);
|
|
}
|
|
|
|
public getContextMenuItems() {
|
|
const input = this.shadowRoot!.querySelector('input')!;
|
|
const hasSelection = input.selectionStart !== input.selectionEnd;
|
|
return [
|
|
{
|
|
name: 'Cut',
|
|
iconName: 'lucide:Scissors',
|
|
shortcut: 'Cmd+X',
|
|
disabled: !hasSelection,
|
|
action: async () => {
|
|
const selected = this.value.substring(input.selectionStart!, input.selectionEnd!);
|
|
await navigator.clipboard.writeText(selected);
|
|
const start = input.selectionStart!;
|
|
this.value = this.value.substring(0, start) + this.value.substring(input.selectionEnd!);
|
|
input.value = this.value;
|
|
input.setSelectionRange(start, start);
|
|
this.changeSubject.next(this);
|
|
},
|
|
},
|
|
{
|
|
name: 'Copy',
|
|
iconName: 'lucide:Copy',
|
|
shortcut: 'Cmd+C',
|
|
disabled: !hasSelection,
|
|
action: async () => {
|
|
const selected = this.value.substring(input.selectionStart!, input.selectionEnd!);
|
|
await navigator.clipboard.writeText(selected);
|
|
},
|
|
},
|
|
{
|
|
name: 'Paste',
|
|
iconName: 'lucide:ClipboardPaste',
|
|
shortcut: 'Cmd+V',
|
|
action: async () => {
|
|
const text = await navigator.clipboard.readText();
|
|
const start = input.selectionStart!;
|
|
const end = input.selectionEnd!;
|
|
this.value = this.value.substring(0, start) + text + this.value.substring(end);
|
|
input.value = this.value;
|
|
input.setSelectionRange(start + text.length, start + text.length);
|
|
this.changeSubject.next(this);
|
|
},
|
|
},
|
|
{ divider: true },
|
|
{
|
|
name: 'Select All',
|
|
iconName: 'lucide:TextCursorInput',
|
|
shortcut: 'Cmd+A',
|
|
action: async () => {
|
|
input.select();
|
|
},
|
|
},
|
|
];
|
|
}
|
|
|
|
public getValue(): string {
|
|
return this.value;
|
|
}
|
|
|
|
public setValue(value: string): void {
|
|
this.value = value;
|
|
}
|
|
|
|
public async togglePasswordView() {
|
|
this.showPasswordBool = !this.showPasswordBool;
|
|
}
|
|
|
|
public async focus() {
|
|
const textInput = this.shadowRoot!.querySelector('input');
|
|
textInput!.focus();
|
|
}
|
|
|
|
public async blur() {
|
|
const textInput = this.shadowRoot!.querySelector('input');
|
|
textInput!.blur();
|
|
}
|
|
}
|