@nuralyui/timepicker 0.1.1 → 0.1.3

package/timepicker.component.clean.d.ts

@@ -1,95 +0,0 @@
-import { LitElement, TemplateResult } from 'lit';
-import { TimeValue, TimeFormat, TimePickerConfig, TimePickerPlacement } from './timepicker.types.js';
-export interface TimePickerHost extends LitElement {
-    getCurrentTime(): TimeValue;
-    setTime(time: TimeValue): void;
-    formatTime(time: TimeValue): string;
-    parseTime(timeString: string): TimeValue | null;
-    getConfig(): TimePickerConfig;
-    requestUpdate(): void;
-}
-declare const NrTimePickerElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
-/**
- * A comprehensive time picker component that supports both 12-hour and 24-hour formats,
- * with optional seconds display and extensive customization options.
- *
- * @example
- * ```html
- * <nr-timepicker
- *   value="14:30:00"
- *   format="24h"
- *   show-seconds
- *   placeholder="Select time">
- * </nr-timepicker>
- * ```
- */
-export declare class NrTimePickerElement extends NrTimePickerElement_base implements TimePickerHost {
-    static styles: import("lit").CSSResult[];
-    value: string;
-    name: string;
-    placeholder: string;
-    format: TimeFormat;
-    showSeconds: boolean;
-    disabled: boolean;
-    readonly: boolean;
-    required: boolean;
-    minTime?: string;
-    maxTime?: string;
-    disabledTimes?: string[];
-    enabledTimes?: string[];
-    helperText: string;
-    label: string;
-    size: 'small' | 'medium' | 'large';
-    variant: 'outlined' | 'filled' | 'standard';
-    placement: TimePickerPlacement;
-    private clockOpen;
-    private inputValue;
-    private state;
-    private validationMessage;
-    private selectionController;
-    private validationController;
-    private formattingController;
-    constructor();
-    connectedCallback(): void;
-    updated(changedProperties: Map<string, any>): void;
-    render(): TemplateResult;
-    open(): void;
-    close(): void;
-    clear(): void;
-    setToNow(): void;
-    validate(): boolean;
-    private renderLabel;
-    private renderInput;
-    private renderDropdown;
-    private renderColumnPicker;
-    private renderHourColumn;
-    private renderMinuteColumn;
-    private renderSecondColumn;
-    private renderActions;
-    private renderHelperText;
-    private handleInputChange;
-    private handleInputFocus;
-    private handleInputBlur;
-    private handleTriggerClick;
-    private handleHourSelect;
-    private handleMinuteSelect;
-    private handleSecondSelect;
-    private handleOutsideClick;
-    private shouldUpdateConstraints;
-    private updateConstraints;
-    private setTimeFromValue;
-    private updateInputValue;
-    private validateTime;
-    getCurrentTime(): TimeValue;
-    setTime(time: TimeValue): void;
-    formatTime(time: TimeValue): string;
-    parseTime(timeString: string): TimeValue | null;
-    getConfig(): TimePickerConfig;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'nr-timepicker': NrTimePickerElement;
-    }
-}
-export {};
-//# sourceMappingURL=timepicker.component.clean.d.ts.map

package/timepicker.component.clean.js

@@ -1,471 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, css, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-// Import base mixin and types
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
-import { TimeFormat, TimePickerState, TimePickerPlacement, TimePeriod, EMPTY_TIME_VALUE, } from './timepicker.types.js';
-// Import controllers
-import { TimePickerSelectionController } from './controllers/timepicker-selection.controller.js';
-import { TimePickerValidationController } from './controllers/timepicker-validation.controller.js';
-import { TimePickerFormattingController } from './controllers/timepicker-formatting.controller.js';
-// Import utilities and constants
-import { TimeUtils } from './utils/time.utils.js';
-import { TIME_PICKER_EVENTS } from './constants/timepicker.constants.js';
-// Import styles
-import { timePickerStyles } from './timepicker.style.js';
-/**
- * A comprehensive time picker component that supports both 12-hour and 24-hour formats,
- * with optional seconds display and extensive customization options.
- *
- * @example
- * ```html
- * <nr-timepicker
- *   value="14:30:00"
- *   format="24h"
- *   show-seconds
- *   placeholder="Select time">
- * </nr-timepicker>
- * ```
- */
-let NrTimePickerElement = class NrTimePickerElement extends NuralyUIBaseMixin(LitElement) {
-    constructor() {
-        super();
-        // Properties
-        this.value = '';
-        this.name = '';
-        this.placeholder = 'Select time';
-        this.format = TimeFormat.TwentyFourHour;
-        this.showSeconds = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.required = false;
-        this.helperText = '';
-        this.label = '';
-        this.size = 'medium';
-        this.variant = 'outlined';
-        this.placement = TimePickerPlacement.Bottom;
-        // State
-        this.clockOpen = false;
-        this.inputValue = '';
-        this.state = TimePickerState.Default;
-        this.validationMessage = '';
-        // Controllers
-        this.selectionController = new TimePickerSelectionController(this);
-        this.validationController = new TimePickerValidationController(this);
-        this.formattingController = new TimePickerFormattingController(this);
-        this.addEventListener('click', this.handleOutsideClick.bind(this));
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.updateConstraints();
-        if (this.value) {
-            this.setTimeFromValue(this.value);
-        }
-    }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('value') && this.value !== this.inputValue) {
-            this.setTimeFromValue(this.value);
-        }
-        if (this.shouldUpdateConstraints(changedProperties)) {
-            this.updateConstraints();
-        }
-    }
-    render() {
-        const wrapperClasses = {
-            'time-picker': true,
-            'time-picker--open': this.clockOpen,
-            'time-picker--disabled': this.disabled,
-            'time-picker--readonly': this.readonly,
-            'time-picker--error': this.state === TimePickerState.Error,
-        };
-        return html `
-      <div class="${classMap(wrapperClasses)}" part="wrapper">
-        ${this.renderLabel()}
-        ${this.renderInput()}
-        ${this.renderDropdown()}
-        ${this.renderHelperText()}
-      </div>
-    `;
-    }
-    // Public API methods
-    open() { this.clockOpen = true; }
-    close() { this.clockOpen = false; }
-    clear() {
-        this.value = '';
-        this.inputValue = '';
-        this.selectionController.clearSelection();
-    }
-    setToNow() {
-        const now = TimeUtils.getCurrentTime();
-        this.selectionController.selectTime(now);
-        this.updateInputValue();
-    }
-    validate() {
-        return this.validationController.validate();
-    }
-    // Private methods
-    renderLabel() {
-        if (!this.label)
-            return nothing;
-        return html `
-      <label class="time-picker__label" part="label" for="time-input">
-        ${this.label}
-        ${this.required ? html `<span class="time-picker__required">*</span>` : nothing}
-      </label>
-    `;
-    }
-    renderInput() {
-        const inputClasses = {
-            'time-picker__input': true,
-            'time-picker__input--error': this.state === TimePickerState.Error,
-        };
-        return html `
-      <div class="time-picker__input-wrapper" part="input-wrapper">
-        <input
-          id="time-input"
-          class="${classMap(inputClasses)}"
-          part="input"
-          type="text"
-          .value="${this.inputValue}"
-          placeholder="${this.placeholder}"
-          ?disabled="${this.disabled}"
-          ?readonly="${this.readonly}"
-          ?required="${this.required}"
-          @input="${this.handleInputChange}"
-          @focus="${this.handleInputFocus}"
-          @blur="${this.handleInputBlur}"
-        />
-        <button
-          class="time-picker__trigger"
-          part="trigger"
-          type="button"
-          ?disabled="${this.disabled}"
-          @click="${this.handleTriggerClick}"
-          aria-label="Open time picker"
-        >
-          <slot name="icon">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/>
-              <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
-            </svg>
-          </slot>
-        </button>
-      </div>
-    `;
-    }
-    renderDropdown() {
-        if (!this.clockOpen)
-            return nothing;
-        const dropdownClasses = {
-            'time-picker__dropdown': true,
-            'time-picker__dropdown--open': this.clockOpen,
-            'time-picker__dropdown--top': this.placement === TimePickerPlacement.Top,
-        };
-        return html `
-      <div class="${classMap(dropdownClasses)}" part="dropdown">
-        ${this.renderColumnPicker()}
-        ${this.renderActions()}
-      </div>
-    `;
-    }
-    renderColumnPicker() {
-        const selectedTime = this.selectionController.getSelectedTime() || EMPTY_TIME_VALUE;
-        const config = this.getConfig();
-        return html `
-      <div class="time-picker__columns" part="columns">
-        ${this.renderHourColumn(selectedTime, config)}
-        ${this.renderMinuteColumn(selectedTime)}
-        ${this.showSeconds ? this.renderSecondColumn(selectedTime) : nothing}
-      </div>
-    `;
-    }
-    renderHourColumn(selectedTime, config) {
-        const hours = config.format === TimeFormat.TwelveHour
-            ? Array.from({ length: 12 }, (_, i) => i === 0 ? 12 : i)
-            : Array.from({ length: 24 }, (_, i) => i);
-        const displayHour = config.format === TimeFormat.TwelveHour
-            ? this.formattingController.formatHours(selectedTime.hours)
-            : selectedTime.hours;
-        return html `
-      <div class="time-picker__column" part="hour-column">
-        <div class="time-picker__column-list">
-          ${hours.map(hour => html `
-            <div
-              class="time-picker__column-item ${hour === displayHour ? 'time-picker__column-item--selected' : ''}"
-              @click="${() => this.handleHourSelect(hour, config.format)}"
-            >
-              ${hour.toString().padStart(2, '0')}
-            </div>
-          `)}
-        </div>
-      </div>
-    `;
-    }
-    renderMinuteColumn(selectedTime) {
-        const minutes = Array.from({ length: 60 }, (_, i) => i);
-        return html `
-      <div class="time-picker__column" part="minute-column">
-        <div class="time-picker__column-list">
-          ${minutes.map(minute => html `
-            <div
-              class="time-picker__column-item ${minute === selectedTime.minutes ? 'time-picker__column-item--selected' : ''}"
-              @click="${() => this.handleMinuteSelect(minute)}"
-            >
-              ${minute.toString().padStart(2, '0')}
-            </div>
-          `)}
-        </div>
-      </div>
-    `;
-    }
-    renderSecondColumn(selectedTime) {
-        const seconds = Array.from({ length: 60 }, (_, i) => i);
-        return html `
-      <div class="time-picker__column" part="second-column">
-        <div class="time-picker__column-list">
-          ${seconds.map(second => html `
-            <div
-              class="time-picker__column-item ${second === selectedTime.seconds ? 'time-picker__column-item--selected' : ''}"
-              @click="${() => this.handleSecondSelect(second)}"
-            >
-              ${second.toString().padStart(2, '0')}
-            </div>
-          `)}
-        </div>
-      </div>
-    `;
-    }
-    renderActions() {
-        return html `
-      <div class="time-picker__actions">
-        <button
-          class="time-picker__action-button"
-          @click="${() => this.setToNow()}"
-        >
-          Now
-        </button>
-        <button
-          class="time-picker__action-button time-picker__action-button--primary"
-          @click="${() => this.close()}"
-        >
-          OK
-        </button>
-      </div>
-    `;
-    }
-    renderHelperText() {
-        const text = this.validationMessage || this.helperText;
-        if (!text)
-            return nothing;
-        const isError = this.state === TimePickerState.Error || !!this.validationMessage;
-        return html `
-      <div class="time-picker__helper-text ${isError ? 'time-picker__helper-text--error' : ''}" part="helper-text">
-        ${text}
-      </div>
-    `;
-    }
-    // Event handlers
-    handleInputChange(e) {
-        const target = e.target;
-        const value = target.value;
-        if (this.parseTime(value)) {
-            this.value = value;
-            this.inputValue = value;
-        }
-        else {
-            target.value = this.inputValue;
-        }
-    }
-    handleInputFocus() {
-        this.dispatchEvent(new CustomEvent(TIME_PICKER_EVENTS.FOCUS, {
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    handleInputBlur() {
-        this.dispatchEvent(new CustomEvent(TIME_PICKER_EVENTS.BLUR, {
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    handleTriggerClick() {
-        if (!this.disabled && !this.readonly) {
-            this.clockOpen = !this.clockOpen;
-        }
-    }
-    handleHourSelect(hour, format) {
-        const selectedTime = this.selectionController.getSelectedTime() || TimeUtils.getCurrentTime();
-        let adjustedHour = hour;
-        if (format === TimeFormat.TwelveHour) {
-            const currentPeriod = this.formattingController.getPeriod(selectedTime.hours);
-            if (hour === 12) {
-                adjustedHour = currentPeriod === TimePeriod.AM ? 0 : 12;
-            }
-            else {
-                adjustedHour = currentPeriod === TimePeriod.AM ? hour : hour + 12;
-            }
-        }
-        const updatedTime = Object.assign(Object.assign({}, selectedTime), { hours: adjustedHour });
-        if (this.validateTime(updatedTime)) {
-            this.selectionController.selectTime(updatedTime);
-            this.updateInputValue();
-        }
-    }
-    handleMinuteSelect(minute) {
-        const selectedTime = this.selectionController.getSelectedTime() || TimeUtils.getCurrentTime();
-        const updatedTime = Object.assign(Object.assign({}, selectedTime), { minutes: minute });
-        if (this.validateTime(updatedTime)) {
-            this.selectionController.selectTime(updatedTime);
-            this.updateInputValue();
-        }
-    }
-    handleSecondSelect(second) {
-        const selectedTime = this.selectionController.getSelectedTime() || TimeUtils.getCurrentTime();
-        const updatedTime = Object.assign(Object.assign({}, selectedTime), { seconds: second });
-        if (this.validateTime(updatedTime)) {
-            this.selectionController.selectTime(updatedTime);
-            this.updateInputValue();
-        }
-    }
-    handleOutsideClick(e) {
-        if (!this.contains(e.target)) {
-            this.close();
-        }
-    }
-    // Utility methods
-    shouldUpdateConstraints(changedProperties) {
-        return (changedProperties.has('minTime') ||
-            changedProperties.has('maxTime') ||
-            changedProperties.has('disabledTimes') ||
-            changedProperties.has('enabledTimes'));
-    }
-    updateConstraints() {
-        const constraints = {
-            minTime: this.minTime,
-            maxTime: this.maxTime,
-            disabledTimes: this.disabledTimes || [],
-            enabledTimes: this.enabledTimes,
-        };
-        this.validationController.setConstraints(constraints);
-    }
-    setTimeFromValue(value) {
-        if (this.selectionController.setTimeFromString(value)) {
-            this.inputValue = value;
-            this.requestUpdate();
-        }
-    }
-    updateInputValue() {
-        const selectedTime = this.selectionController.getSelectedTime();
-        if (selectedTime) {
-            const formattedValue = this.formattingController.formatForDisplay(selectedTime);
-            this.inputValue = formattedValue;
-            this.value = formattedValue;
-            this.dispatchEvent(new CustomEvent(TIME_PICKER_EVENTS.CHANGE, {
-                detail: { value: formattedValue, time: selectedTime },
-                bubbles: true,
-                composed: true,
-            }));
-        }
-    }
-    validateTime(time) {
-        return this.validationController.validateTime(time);
-    }
-    // TimePickerHost interface implementation
-    getCurrentTime() {
-        return this.selectionController.getSelectedTime() || EMPTY_TIME_VALUE;
-    }
-    setTime(time) {
-        this.selectionController.selectTime(time);
-        this.updateInputValue();
-    }
-    formatTime(time) {
-        return this.formattingController.formatForDisplay(time);
-    }
-    parseTime(timeString) {
-        return this.formattingController.parseInputValue(timeString);
-    }
-    getConfig() {
-        return {
-            format: this.format,
-            showSeconds: this.showSeconds,
-            disabled: this.disabled,
-            readonly: this.readonly,
-        };
-    }
-};
-NrTimePickerElement.styles = [css `${timePickerStyles}`];
-__decorate([
-    property({ type: String })
-], NrTimePickerElement.prototype, "value", void 0);
-__decorate([
-    property({ type: String })
-], NrTimePickerElement.prototype, "name", void 0);
-__decorate([
-    property({ type: String })
-], NrTimePickerElement.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: String })
-], NrTimePickerElement.prototype, "format", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'show-seconds' })
-], NrTimePickerElement.prototype, "showSeconds", void 0);
-__decorate([
-    property({ type: Boolean })
-], NrTimePickerElement.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean })
-], NrTimePickerElement.prototype, "readonly", void 0);
-__decorate([
-    property({ type: Boolean })
-], NrTimePickerElement.prototype, "required", void 0);
-__decorate([
-    property({ type: String, attribute: 'min-time' })
-], NrTimePickerElement.prototype, "minTime", void 0);
-__decorate([
-    property({ type: String, attribute: 'max-time' })
-], NrTimePickerElement.prototype, "maxTime", void 0);
-__decorate([
-    property({ type: Array, attribute: 'disabled-times' })
-], NrTimePickerElement.prototype, "disabledTimes", void 0);
-__decorate([
-    property({ type: Array, attribute: 'enabled-times' })
-], NrTimePickerElement.prototype, "enabledTimes", void 0);
-__decorate([
-    property({ type: String, attribute: 'helper-text' })
-], NrTimePickerElement.prototype, "helperText", void 0);
-__decorate([
-    property({ type: String })
-], NrTimePickerElement.prototype, "label", void 0);
-__decorate([
-    property({ type: String })
-], NrTimePickerElement.prototype, "size", void 0);
-__decorate([
-    property({ type: String })
-], NrTimePickerElement.prototype, "variant", void 0);
-__decorate([
-    property({ type: String })
-], NrTimePickerElement.prototype, "placement", void 0);
-__decorate([
-    state()
-], NrTimePickerElement.prototype, "clockOpen", void 0);
-__decorate([
-    state()
-], NrTimePickerElement.prototype, "inputValue", void 0);
-__decorate([
-    state()
-], NrTimePickerElement.prototype, "state", void 0);
-__decorate([
-    state()
-], NrTimePickerElement.prototype, "validationMessage", void 0);
-NrTimePickerElement = __decorate([
-    customElement('nr-timepicker')
-], NrTimePickerElement);
-export { NrTimePickerElement };
-//# sourceMappingURL=timepicker.component.clean.js.map