34 lines
1.5 KiB
TypeScript
34 lines
1.5 KiB
TypeScript
import { html, type TemplateResult } from '@design.estate/dees-element';
|
|
import type { DeesInputDatepicker } from './component.js';
|
|
|
|
export const renderDatepicker = (component: DeesInputDatepicker): TemplateResult => {
|
|
return html`
|
|
<div class="input-wrapper">
|
|
<dees-label .label=${component.label} .description=${component.description} .required=${component.required}></dees-label>
|
|
<div class="input-container">
|
|
<input
|
|
type="text"
|
|
class="date-input ${component.isOpened ? 'open' : ''}"
|
|
.value=${component.formatDate(component.value)}
|
|
.placeholder=${component.placeholder}
|
|
?disabled=${component.disabled}
|
|
@click=${component.toggleCalendar}
|
|
@keydown=${component.handleKeydown}
|
|
@input=${component.handleManualInput}
|
|
@blur=${component.handleInputBlur}
|
|
style="padding-right: ${component.value ? '64px' : '40px'}"
|
|
/>
|
|
<div class="icon-container">
|
|
${component.value && !component.disabled ? html`
|
|
<button class="clear-button" @click=${component.clearValue} title="Clear">
|
|
<dees-icon icon="lucide:x" iconSize="14"></dees-icon>
|
|
</button>
|
|
` : ''}
|
|
<dees-icon class="calendar-icon" icon="lucide:calendar" iconSize="16"></dees-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
};
|