First usable version
This commit is contained in:
parent
f5caefd061
commit
768c174815
@ -1,14 +1,14 @@
|
||||
{
|
||||
"name": "@tp/tp-element",
|
||||
"version": "0.0.1",
|
||||
"name": "@tp/tp-time-input",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "tp-element.js",
|
||||
"main": "tp-time-input.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://gitea.codeblob.work/tp-elements/tp-element.git"
|
||||
"url": "https://gitea.codeblob.work/tp-elements/tp-time-input.git"
|
||||
},
|
||||
"author": "trading_peter",
|
||||
"license": "Apache-2.0",
|
||||
|
||||
@ -1,35 +0,0 @@
|
||||
/**
|
||||
@license
|
||||
Copyright (c) 2024 trading_peter
|
||||
This program is available under Apache License Version 2.0
|
||||
*/
|
||||
|
||||
import { LitElement, html, css } from 'lit';
|
||||
|
||||
class TpElement extends LitElement {
|
||||
static get styles() {
|
||||
return [
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
`
|
||||
];
|
||||
}
|
||||
|
||||
render() {
|
||||
const { } = this;
|
||||
|
||||
return html`
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return { };
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
window.customElements.define('tp-element', TpElement);
|
||||
624
tp-time-input.js
Normal file
624
tp-time-input.js
Normal file
@ -0,0 +1,624 @@
|
||||
/**
|
||||
@license
|
||||
Copyright (c) 2025 trading_peter
|
||||
This program is available under Apache License Version 2.0
|
||||
*/
|
||||
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import { FormElement } from '@tp/helpers/form-element.js';
|
||||
|
||||
class TpTimeInput extends FormElement(LitElement) {
|
||||
static get styles() {
|
||||
return [
|
||||
css`
|
||||
:host {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
border: solid 1px #000;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host(:focus-within) {
|
||||
border-color: var(--tp-time-input-focus-color, #007bff);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.time-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding: 4px 5px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 2.5em;
|
||||
text-align: center;
|
||||
padding: 4px 0;
|
||||
-moz-appearance: textfield; /* Firefox */
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
min-width: 0; /** Because of FF **/
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit; /** FF seems to need this **/
|
||||
}
|
||||
|
||||
/* Hide number input arrows for Chrome, Safari, Edge, Opera */
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
span.separator {
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.period-toggle {
|
||||
border-left: 1px solid #ccc;
|
||||
font-size: inherit;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
min-width: 2.5em;
|
||||
padding: 5px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:host([disabled]) .period-toggle {
|
||||
cursor: not-allowed;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.suffix {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.suffix ::slotted([slot="suffix"]) {
|
||||
margin-left: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:host([disabled]) {
|
||||
background: #f5f5f5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
background: transparent;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
input:invalid {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
:host([invalid]) {
|
||||
border-color: var(--tp-time-input-border-color-invalid, #ff0000);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -18px;
|
||||
font-size: 10px;
|
||||
color: var(--tp-time-input-text-color-invalid, #B71C1C);
|
||||
transition: opacity 0.3s;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:host([invalid]) .error-message {
|
||||
opacity: 1;
|
||||
}
|
||||
`
|
||||
];
|
||||
}
|
||||
|
||||
render() {
|
||||
const { selPeriod } = this;
|
||||
|
||||
return html`
|
||||
<div class="wrapper" part="wrapper">
|
||||
<div class="time-container" part="time-container">
|
||||
<input
|
||||
id="hours"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
maxlength="2"
|
||||
.min=${this.useAmPm ? '1' : '0'}
|
||||
.max=${this.useAmPm ? '12' : '23'}
|
||||
.value=${this._formatHours()}
|
||||
?required=${this.required}
|
||||
?disabled=${this.disabled}
|
||||
@input=${this._handleHoursInput}
|
||||
@keydown=${this._handleKeyDown}
|
||||
@focus=${this._handleFocus}
|
||||
@blur=${this._handleBlur}
|
||||
placeholder="HH"
|
||||
part="hours-input">
|
||||
<span class="separator" part="separator">:</span>
|
||||
<input
|
||||
id="minutes"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
maxlength="2"
|
||||
min="0"
|
||||
max="59"
|
||||
.value=${this._formatMinutes()}
|
||||
?required=${this.required}
|
||||
?disabled=${this.disabled}
|
||||
@input=${this._handleMinutesInput}
|
||||
@keydown=${this._handleKeyDown}
|
||||
@focus=${this._handleFocus}
|
||||
@blur=${this._handleBlur}
|
||||
placeholder="MM"
|
||||
part="minutes-input">
|
||||
</div>
|
||||
${this.useAmPm ? html`
|
||||
<div
|
||||
id="period"
|
||||
class="period-toggle"
|
||||
?disabled=${this.disabled}
|
||||
@click=${this._togglePeriod}
|
||||
tabindex="${this.disabled ? -1 : 0}"
|
||||
@keydown=${this._handlePeriodKeyDown}
|
||||
part="period-toggle">
|
||||
${selPeriod || 'AM'}
|
||||
</div>
|
||||
` : ''}
|
||||
<div class="suffix" part="suffix">
|
||||
<slot name="suffix"></slot>
|
||||
</div>
|
||||
</div>
|
||||
${this.errorMessage ? html`
|
||||
<div class="error-message" part="error-message">${this.errorMessage}</div>
|
||||
` : ''}
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
value: { type: String, reflect: true },
|
||||
required: { type: Boolean, reflect: true },
|
||||
disabled: { type: Boolean, reflect: true },
|
||||
name: { type: String, reflect: true },
|
||||
useAmPm: { type: Boolean, reflect: true },
|
||||
invalid: { type: Boolean, reflect: true },
|
||||
errorMessage: { type: String },
|
||||
autoValidate: { type: Boolean },
|
||||
validator: { type: Object },
|
||||
forceInvalid: { type: Boolean },
|
||||
optional: { type: Boolean },
|
||||
selPeriod: { type: String },
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.value = '';
|
||||
this.required = false;
|
||||
this.disabled = false;
|
||||
this.name = '';
|
||||
this.useAmPm = false;
|
||||
this.invalid = false;
|
||||
this.errorMessage = '';
|
||||
this.autoValidate = false;
|
||||
this.forceInvalid = false;
|
||||
this.optional = false;
|
||||
this.selPeriod = 'AM';
|
||||
}
|
||||
|
||||
get hours() {
|
||||
if (!this.value) return '';
|
||||
const hours = parseInt(this.value.split(':')[0]);
|
||||
if (this.useAmPm) {
|
||||
return hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
|
||||
}
|
||||
return hours;
|
||||
}
|
||||
|
||||
get minutes() {
|
||||
return this.value ? parseInt(this.value.split(':')[1]) : '';
|
||||
}
|
||||
|
||||
get period() {
|
||||
if (!this.value || !this.useAmPm) return '';
|
||||
const hours = parseInt(this.value.split(':')[0]);
|
||||
return hours >= 12 ? 'PM' : 'AM';
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
super.firstUpdated();
|
||||
// Initialize validation
|
||||
if (this.autoValidate) {
|
||||
this.validate();
|
||||
}
|
||||
}
|
||||
|
||||
updated(changedProperties) {
|
||||
if (changedProperties.has('forceInvalid')) {
|
||||
this._forceInvalidChanged();
|
||||
}
|
||||
|
||||
if (changedProperties.has('value')) {
|
||||
// When value changes, update selPeriod to match
|
||||
if (this.useAmPm && this.value) {
|
||||
this.selPeriod = this.period;
|
||||
}
|
||||
|
||||
if (this.autoValidate) {
|
||||
this.validate();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_formatHours() {
|
||||
if (this.hours === '') {
|
||||
return '';
|
||||
}
|
||||
return this.hours.toString().padStart(2, '0');
|
||||
}
|
||||
|
||||
_formatMinutes() {
|
||||
if (this.minutes === '') {
|
||||
return '';
|
||||
}
|
||||
return this.minutes.toString().padStart(2, '0');
|
||||
}
|
||||
|
||||
_handleFocus(e) {
|
||||
const input = e.target;
|
||||
|
||||
// Select all text when focused, even if empty
|
||||
setTimeout(() => {
|
||||
if (input && typeof input.select === 'function') {
|
||||
input.select();
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
|
||||
_handleBlur(e) {
|
||||
const input = e.target;
|
||||
|
||||
// Only add padding when the input loses focus and has a value
|
||||
if (input.value !== '') {
|
||||
const value = parseInt(input.value);
|
||||
if (!isNaN(value)) {
|
||||
input.value = value.toString().padStart(2, '0');
|
||||
this._updateValue();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_handleKeyDown(e) {
|
||||
const input = e.target;
|
||||
|
||||
// Submit form if Enter key is pressed
|
||||
if (e.key === 'Enter' && this.parentForm) {
|
||||
this.parentForm.submit();
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
// Arrow key navigation between hours and minutes
|
||||
if (e.key === 'ArrowRight' && input.id === 'hours' && input.selectionStart === input.value.length) {
|
||||
this.shadowRoot.querySelector('#minutes').focus();
|
||||
e.preventDefault();
|
||||
} else if (e.key === 'ArrowLeft' && input.id === 'minutes' && input.selectionStart === 0) {
|
||||
this.shadowRoot.querySelector('#hours').focus();
|
||||
e.preventDefault();
|
||||
} else if (e.key === ':') {
|
||||
// When typing colon, move to minutes
|
||||
if (input.id === 'hours') {
|
||||
this.shadowRoot.querySelector('#minutes').focus();
|
||||
e.preventDefault();
|
||||
}
|
||||
} else if (e.key === 'ArrowRight' && input.id === 'minutes' && input.selectionStart === input.value.length && this.useAmPm) {
|
||||
// Move to period toggle when at end of minutes
|
||||
this.shadowRoot.querySelector('#period').focus();
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
_handlePeriodKeyDown(e) {
|
||||
// Toggle period with space or enter
|
||||
if (e.key === ' ' || e.key === 'Enter') {
|
||||
this._togglePeriod();
|
||||
e.preventDefault();
|
||||
} else if (e.key === 'ArrowLeft') {
|
||||
// Move back to minutes field
|
||||
this.shadowRoot.querySelector('#minutes').focus();
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
_handleHoursInput(e) {
|
||||
const input = e.target;
|
||||
let value = input.value.replace(/\D/g, '');
|
||||
|
||||
// Don't limit length or auto-advance here, allow full input
|
||||
if (value.length > 0) {
|
||||
// For 24-hour format
|
||||
if (!this.useAmPm) {
|
||||
// Only auto-advance after 2 digits or if first digit > 2
|
||||
if ((value.length === 2) || (value.length === 1 && parseInt(value) > 2)) {
|
||||
// Before auto-advancing, check if the value is valid
|
||||
const hours = parseInt(value);
|
||||
if (hours > 23) {
|
||||
input.value = '23';
|
||||
} else {
|
||||
input.value = value;
|
||||
}
|
||||
this._updateValue();
|
||||
this.shadowRoot.querySelector('#minutes').focus();
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
// For 12-hour format
|
||||
// Only auto-advance after 2 digits or if first digit > 1
|
||||
if ((value.length === 2) || (value.length === 1 && parseInt(value) > 1)) {
|
||||
// Before auto-advancing, check if the value is valid
|
||||
const hours = parseInt(value);
|
||||
if (hours > 12) {
|
||||
input.value = '12';
|
||||
} else if (hours < 1) {
|
||||
input.value = '01';
|
||||
} else {
|
||||
input.value = value.padStart(2, '0');
|
||||
}
|
||||
this._updateValue();
|
||||
this.shadowRoot.querySelector('#minutes').focus();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Don't pad while user is typing - just set the raw value
|
||||
input.value = value;
|
||||
|
||||
// Only update the internal value if we have a complete value
|
||||
if (value.length === 2) {
|
||||
this._updateValue();
|
||||
}
|
||||
}
|
||||
|
||||
_handleMinutesInput(e) {
|
||||
const input = e.target;
|
||||
let value = input.value.replace(/\D/g, '');
|
||||
|
||||
// Don't limit length or auto-advance here, allow full input
|
||||
if (value.length > 0) {
|
||||
// Only auto-advance after 2 digits or if first digit > 5
|
||||
if ((value.length === 2) || (value.length === 1 && parseInt(value) > 5)) {
|
||||
// Before auto-advancing, check if the value is valid
|
||||
const minutes = parseInt(value);
|
||||
if (minutes > 59) {
|
||||
input.value = '59';
|
||||
} else {
|
||||
input.value = value.padStart(2, '0');
|
||||
}
|
||||
this._updateValue();
|
||||
if (this.useAmPm) {
|
||||
this.shadowRoot.querySelector('#period').focus();
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Don't pad while user is typing - just set the raw value
|
||||
input.value = value;
|
||||
|
||||
// Only update the internal value if we have a complete value
|
||||
if (value.length === 2) {
|
||||
this._updateValue();
|
||||
}
|
||||
}
|
||||
|
||||
_togglePeriod() {
|
||||
if (this.disabled) return;
|
||||
|
||||
// Toggle between AM and PM
|
||||
const currentPeriod = this.selPeriod || 'AM';
|
||||
this.selPeriod = currentPeriod === 'AM' ? 'PM' : 'AM';
|
||||
|
||||
// Update the value with the new period
|
||||
this._updateValue(this.selPeriod);
|
||||
}
|
||||
|
||||
_updateValue(forcedPeriod = null) {
|
||||
const hoursInput = this.shadowRoot.querySelector('#hours');
|
||||
const minutesInput = this.shadowRoot.querySelector('#minutes');
|
||||
|
||||
if (!hoursInput || !minutesInput) return;
|
||||
|
||||
const hoursValue = hoursInput.value;
|
||||
const minutesValue = minutesInput.value;
|
||||
|
||||
// Only create a value if we have both hours and minutes
|
||||
if (!hoursValue || !minutesValue) {
|
||||
this.value = '';
|
||||
|
||||
if (this.autoValidate) {
|
||||
this.validate();
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
let hours = parseInt(hoursValue) || 0;
|
||||
let minutes = parseInt(minutesValue) || 0;
|
||||
|
||||
// Validate values
|
||||
if (this.useAmPm) {
|
||||
if (hours < 1) hours = 1;
|
||||
if (hours > 12) hours = 12;
|
||||
} else {
|
||||
if (hours < 0) hours = 0;
|
||||
if (hours > 23) hours = 23;
|
||||
}
|
||||
|
||||
if (minutes < 0) minutes = 0;
|
||||
if (minutes > 59) minutes = 59;
|
||||
|
||||
// Always format with padding
|
||||
const formattedHours = hours.toString().padStart(2, '0');
|
||||
const formattedMinutes = minutes.toString().padStart(2, '0');
|
||||
|
||||
// Update the input values to show the padded format
|
||||
hoursInput.value = formattedHours;
|
||||
minutesInput.value = formattedMinutes;
|
||||
|
||||
let newValue = '';
|
||||
let hours24 = hours;
|
||||
|
||||
if (this.useAmPm) {
|
||||
// Use the forced period if provided (for toggle), otherwise use current
|
||||
const period = forcedPeriod || this.period || 'AM';
|
||||
hours24 = this._convertTo24Hour(hours, period);
|
||||
newValue = `${hours24.toString().padStart(2, '0')}:${formattedMinutes}`;
|
||||
} else {
|
||||
newValue = `${formattedHours}:${formattedMinutes}`;
|
||||
}
|
||||
|
||||
if (newValue !== this.value) {
|
||||
this.value = newValue;
|
||||
|
||||
// Create a more detailed event with numeric hour and minute values
|
||||
this.dispatchEvent(new CustomEvent('change', {
|
||||
detail: {
|
||||
value: newValue,
|
||||
hours: hours24, // 24-hour format hour (numeric)
|
||||
minutes: minutes, // minutes (numeric)
|
||||
displayHours: hours, // Display format hour (12 or 24 hour depending on useAmPm)
|
||||
period: this.useAmPm ? (forcedPeriod || this.period || 'AM') : null
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
|
||||
if (this.autoValidate) {
|
||||
this.validate();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_convertTo24Hour(hours, period) {
|
||||
if (hours === 12) {
|
||||
return period === 'AM' ? 0 : 12;
|
||||
}
|
||||
return period === 'PM' ? hours + 12 : hours;
|
||||
}
|
||||
|
||||
_forceInvalidChanged() {
|
||||
if (this.forceInvalid) {
|
||||
this.invalid = true;
|
||||
} else if (this.autoValidate) {
|
||||
this.validate();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate the time input
|
||||
* @returns {boolean} True if valid, false if invalid
|
||||
*/
|
||||
validate() {
|
||||
if (this.forceInvalid) {
|
||||
this.invalid = true;
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check if the value is empty
|
||||
const isEmpty = !this.value;
|
||||
|
||||
// If optional and empty, it's valid
|
||||
if (this.optional && isEmpty) {
|
||||
this.invalid = false;
|
||||
return true;
|
||||
}
|
||||
|
||||
// If required and empty, it's invalid
|
||||
if (this.required && isEmpty) {
|
||||
this.invalid = true;
|
||||
return false;
|
||||
}
|
||||
|
||||
// If we have a value, validate it (must have hours and minutes)
|
||||
let valid = !isEmpty && this.hours !== '' && this.minutes !== '';
|
||||
|
||||
// Call the custom validator if provided
|
||||
if (valid && typeof this.validator === 'function') {
|
||||
valid = this.validator(this, this.value);
|
||||
}
|
||||
|
||||
this.invalid = !valid;
|
||||
return valid;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset the component to its initial state
|
||||
*/
|
||||
reset() {
|
||||
const hoursInput = this.shadowRoot.querySelector('#hours');
|
||||
const minutesInput = this.shadowRoot.querySelector('#minutes');
|
||||
const periodEl = this.shadowRoot.querySelector('#period');
|
||||
|
||||
if (hoursInput) hoursInput.value = '';
|
||||
if (minutesInput) minutesInput.value = '';
|
||||
if (periodEl) periodEl.textContent = 'AM';
|
||||
|
||||
this.value = '';
|
||||
this.invalid = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Focus the hours input
|
||||
*/
|
||||
focus() {
|
||||
const hoursInput = this.shadowRoot.querySelector('#hours');
|
||||
if (hoursInput) {
|
||||
hoursInput.focus();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Blur the currently focused input
|
||||
*/
|
||||
blur() {
|
||||
const activeElement = this.shadowRoot.activeElement;
|
||||
if (activeElement) {
|
||||
activeElement.blur();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tp-time-input', TpTimeInput);
|
||||
341
tp-time-selector.js
Normal file
341
tp-time-selector.js
Normal file
@ -0,0 +1,341 @@
|
||||
/**
|
||||
@license
|
||||
Copyright (c) 2025 trading_peter
|
||||
This program is available under Apache License Version 2.0
|
||||
*/
|
||||
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import { FormElement } from '@tp/helpers/form-element.js';
|
||||
|
||||
class TpTimeSelector extends FormElement(LitElement) {
|
||||
static get styles() {
|
||||
return [
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.columns-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
border-right: 1px solid var(--tp-time-selector-column-border-color, #e0e0e0);
|
||||
}
|
||||
|
||||
.column:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
.column::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--tp-time-selector-item-height, 36px);
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
background-color: var(--tp-time-selector-item-hover-bg, #f5f5f5);
|
||||
}
|
||||
|
||||
.item.selected {
|
||||
background-color: var(--tp-time-selector-item-selected-bg, #e6f7ff);
|
||||
color: var(--tp-time-selector-item-selected-color, #007bff);
|
||||
}
|
||||
|
||||
:host([disabled]) {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
`
|
||||
];
|
||||
}
|
||||
|
||||
render() {
|
||||
const hourFormat = this.useAmPm ? 12 : 24;
|
||||
|
||||
return html`
|
||||
<div class="columns-container" part="columns-container">
|
||||
<!-- Hours column -->
|
||||
<div
|
||||
class="column hours"
|
||||
part="hours-column number-column"
|
||||
id="hoursColumn">
|
||||
${this._generateHours(hourFormat).map(hour => html`
|
||||
<div
|
||||
class="item ${this.selectedHour === hour ? 'selected' : ''}"
|
||||
part="hour-item ${this.selectedHour === hour ? 'hour-item-selected' : ''}"
|
||||
data-value="${hour}"
|
||||
@click=${() => this._selectHour(hour)}>
|
||||
${hour.toString().padStart(2, '0')}
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
|
||||
<!-- Minutes column -->
|
||||
<div
|
||||
class="column minutes"
|
||||
part="minutes-column number-column"
|
||||
id="minutesColumn">
|
||||
${this._generateMinutes().map(minute => html`
|
||||
<div
|
||||
class="item ${this.selectedMinute === minute ? 'selected' : ''}"
|
||||
part="minute-item ${this.selectedMinute === minute ? 'minute-item-selected' : ''}"
|
||||
data-value="${minute}"
|
||||
@click=${() => this._selectMinute(minute)}>
|
||||
${minute.toString().padStart(2, '0')}
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
|
||||
<!-- Period column (AM/PM) -->
|
||||
${this.useAmPm ? html`
|
||||
<div
|
||||
class="column period"
|
||||
part="period-column"
|
||||
id="periodColumn">
|
||||
<div
|
||||
class="item ${this.selectedPeriod === 'AM' ? 'selected' : ''}"
|
||||
part="period-item ${this.selectedPeriod === 'AM' ? 'period-item-selected' : ''}"
|
||||
data-value="AM"
|
||||
@click=${() => this._selectPeriod('AM')}>
|
||||
AM
|
||||
</div>
|
||||
<div
|
||||
class="item ${this.selectedPeriod === 'PM' ? 'selected' : ''}"
|
||||
part="period-item ${this.selectedPeriod === 'PM' ? 'period-item-selected' : ''}"
|
||||
data-value="PM"
|
||||
@click=${() => this._selectPeriod('PM')}>
|
||||
PM
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
value: { type: String, reflect: true },
|
||||
minuteStep: { type: Number },
|
||||
useAmPm: { type: Boolean },
|
||||
selectedHour: { type: Number, state: true },
|
||||
selectedMinute: { type: Number, state: true },
|
||||
selectedPeriod: { type: String, state: true },
|
||||
disabled: { type: Boolean, reflect: true }
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.value = '';
|
||||
this.minuteStep = 1;
|
||||
this.useAmPm = false;
|
||||
this.selectedHour = 0;
|
||||
this.selectedMinute = 0;
|
||||
this.selectedPeriod = 'AM';
|
||||
this.disabled = false;
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
// Ensure initial scroll positions after the component is in the DOM
|
||||
this.updateComplete.then(() => {
|
||||
this._scrollToSelectedItems();
|
||||
});
|
||||
}
|
||||
|
||||
updated(changedProperties) {
|
||||
if (changedProperties.has('value')) {
|
||||
this._parseValue();
|
||||
if (this.isConnected) {
|
||||
this.updateComplete.then(() => {
|
||||
this._scrollToSelectedItems();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_parseValue() {
|
||||
if (!this.value) {
|
||||
this.selectedHour = 0;
|
||||
this.selectedMinute = 0;
|
||||
this.selectedPeriod = 'AM';
|
||||
return;
|
||||
}
|
||||
|
||||
const [hours, minutes] = this.value.split(':');
|
||||
const hoursInt = parseInt(hours, 10);
|
||||
|
||||
if (this.useAmPm) {
|
||||
// Convert 24h to 12h format
|
||||
if (hoursInt === 0) {
|
||||
this.selectedHour = 12;
|
||||
this.selectedPeriod = 'AM';
|
||||
} else if (hoursInt === 12) {
|
||||
this.selectedHour = 12;
|
||||
this.selectedPeriod = 'PM';
|
||||
} else if (hoursInt > 12) {
|
||||
this.selectedHour = hoursInt - 12;
|
||||
this.selectedPeriod = 'PM';
|
||||
} else {
|
||||
this.selectedHour = hoursInt;
|
||||
this.selectedPeriod = 'AM';
|
||||
}
|
||||
} else {
|
||||
this.selectedHour = hoursInt;
|
||||
}
|
||||
|
||||
this.selectedMinute = parseInt(minutes, 10);
|
||||
// Round to nearest step
|
||||
this.selectedMinute = Math.round(this.selectedMinute / this.minuteStep) * this.minuteStep;
|
||||
}
|
||||
|
||||
_generateHours(format) {
|
||||
const hours = [];
|
||||
const start = format === 12 ? 1 : 0;
|
||||
const end = format === 12 ? 12 : 23;
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
hours.push(i);
|
||||
}
|
||||
|
||||
return hours;
|
||||
}
|
||||
|
||||
_generateMinutes() {
|
||||
const minutes = [];
|
||||
for (let i = 0; i < 60; i += this.minuteStep) {
|
||||
minutes.push(i);
|
||||
}
|
||||
return minutes;
|
||||
}
|
||||
|
||||
_selectHour(hour) {
|
||||
this.selectedHour = hour;
|
||||
this._updateValue();
|
||||
}
|
||||
|
||||
_selectMinute(minute) {
|
||||
this.selectedMinute = minute;
|
||||
this._updateValue();
|
||||
}
|
||||
|
||||
_selectPeriod(period) {
|
||||
this.selectedPeriod = period;
|
||||
this._updateValue();
|
||||
}
|
||||
|
||||
_updateValue() {
|
||||
let hours = this.selectedHour;
|
||||
|
||||
// Convert to 24-hour format if using AM/PM
|
||||
if (this.useAmPm) {
|
||||
if (hours === 12) {
|
||||
hours = this.selectedPeriod === 'AM' ? 0 : 12;
|
||||
} else if (this.selectedPeriod === 'PM') {
|
||||
hours += 12;
|
||||
}
|
||||
}
|
||||
|
||||
const formattedHours = hours.toString().padStart(2, '0');
|
||||
const formattedMinutes = this.selectedMinute.toString().padStart(2, '0');
|
||||
|
||||
const newValue = `${formattedHours}:${formattedMinutes}`;
|
||||
|
||||
if (this.value !== newValue) {
|
||||
this.value = newValue;
|
||||
|
||||
this.dispatchEvent(new CustomEvent('change', {
|
||||
detail: {
|
||||
value: newValue,
|
||||
hours: hours,
|
||||
minutes: this.selectedMinute,
|
||||
displayHours: this.selectedHour,
|
||||
period: this.useAmPm ? this.selectedPeriod : null
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
_scrollToSelectedItems() {
|
||||
// Get references to each column
|
||||
const hoursColumn = this.shadowRoot.querySelector('#hoursColumn');
|
||||
const minutesColumn = this.shadowRoot.querySelector('#minutesColumn');
|
||||
const periodColumn = this.useAmPm ? this.shadowRoot.querySelector('#periodColumn') : null;
|
||||
|
||||
if (!hoursColumn || !minutesColumn) return;
|
||||
|
||||
// Find the selected items
|
||||
const hourItem = hoursColumn.querySelector('.item.selected');
|
||||
const minuteItem = minutesColumn.querySelector('.item.selected');
|
||||
|
||||
// Scroll to selected items if they exist
|
||||
if (hourItem) {
|
||||
hourItem.scrollIntoView({ block: 'center' });
|
||||
}
|
||||
|
||||
if (minuteItem) {
|
||||
minuteItem.scrollIntoView({ block: 'center' });
|
||||
}
|
||||
|
||||
if (this.useAmPm && periodColumn) {
|
||||
const periodItem = periodColumn.querySelector('.item.selected');
|
||||
if (periodItem) {
|
||||
periodItem.scrollIntoView({ block: 'center' });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Implement the validate method required by FormElement
|
||||
*/
|
||||
validate() {
|
||||
const isEmpty = !this.value;
|
||||
|
||||
// If it has a value, it's valid (since we control the format)
|
||||
// If it's required, it must have a value
|
||||
const valid = !this.required || !isEmpty;
|
||||
|
||||
this.invalid = !valid;
|
||||
return valid;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset to initial state
|
||||
*/
|
||||
reset() {
|
||||
this.value = '';
|
||||
this.selectedHour = 0;
|
||||
this.selectedMinute = 0;
|
||||
this.selectedPeriod = 'AM';
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tp-time-selector', TpTimeSelector);
|
||||
Loading…
x
Reference in New Issue
Block a user