@nuralyui/timepicker 0.1.1

package/timepicker.component.backup.js

@@ -0,0 +1,890 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+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, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { SharedDropdownController } from '../../shared/controllers/dropdown.controller.js';
+import { styles } from './timepicker.style.js';
+import { TimeFormat, TimePeriod, TimePickerMode, TimePickerSize, TimePickerVariant, TimePickerState, TimePickerPlacement, TIME_PICKER_EVENTS, EMPTY_TIME_VALUE, } from './timepicker.types.js';
+import { TIME_INPUT_FIELD_ID, CLOCK_CONTAINER_CLASS, } from './timepicker.constants.js';
+import { TimePickerSelectionController, TimePickerValidationController, TimePickerFormattingController, } from './controllers/index.js';
+import { TimeUtils } from './utils/time.utils.js';
+/**
+ * NuralyUI Time Picker - A comprehensive time selection component
+ *
+ * @element nr-timepicker
+ *
+ * @fires nr-time-change - Fired when time is selected
+ * @fires nr-clock-open - Fired when clock dropdown is opened
+ * @fires nr-clock-close - Fired when clock dropdown is closed
+ * @fires nr-focus - Fired when component receives focus
+ * @fires nr-blur - Fired when component loses focus
+ * @fires nr-validation - Fired when validation state changes
+ *
+ * @slot label - Label content for the input field
+ * @slot helper-text - Helper text content below the input field
+ * @slot icon - Icon content for the input field trigger
+ *
+ * @csspart input - The input field part
+ * @csspart dropdown - The clock dropdown container part
+ * @csspart clock - The clock face part
+ * @csspart clock-hand - The clock hand part
+ * @csspart time-input - Individual time input parts (hours, minutes, seconds)
+ *
+ * @example Basic usage
+ * ```html
+ * <nr-timepicker
+ *   label="Select Time"
+ *   @nr-time-change="${this.handleTimeChange}">
+ * </nr-timepicker>
+ * ```
+ *
+ * @example 12-hour format with seconds
+ * ```html
+ * <nr-timepicker
+ *   format="12h"
+ *   show-seconds
+ *   label="Meeting Time">
+ * </nr-timepicker>
+ * ```
+ *
+ * @example With time constraints
+ * ```html
+ * <nr-timepicker
+ *   min-time="09:00"
+ *   max-time="17:00"
+ *   label="Business Hours">
+ * </nr-timepicker>
+ * ```
+ */
+let NrTimePickerElement = class NrTimePickerElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        // Controllers following the delegation pattern
+        this.selectionController = new TimePickerSelectionController(this);
+        this.validationController = new TimePickerValidationController(this);
+        this.formattingController = new TimePickerFormattingController(this);
+        this.dropdownController = new SharedDropdownController(this);
+        // Core properties
+        this.name = '';
+        this.value = '';
+        this.defaultValue = '';
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.placeholder = '';
+        // Time picker specific properties
+        this.format = TimeFormat.TwentyFourHour;
+        this.showSeconds = false;
+        this.showClock = true;
+        this.minuteInterval = 1;
+        this.secondInterval = 1;
+        // UI properties
+        this.size = TimePickerSize.Medium;
+        this.variant = TimePickerVariant.Default;
+        this.state = TimePickerState.Default;
+        this.placement = TimePickerPlacement.Auto;
+        this.label = '';
+        this.helperText = '';
+        // Clock display state
+        this.clockOpen = false;
+        this.clockMode = TimePickerMode.Hours;
+        // Internal state
+        this.inputValue = '';
+        this.currentMode = TimePickerMode.Hours;
+        this.validationMessage = '';
+    }
+    firstUpdated() {
+        this.initializeTimePicker();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this.handlePropertyChanges(changedProperties);
+    }
+    /**
+     * Initialize time picker with default values and constraints
+     */
+    initializeTimePicker() {
+        // Set up initial constraints
+        this.updateConstraints();
+        // Set initial value
+        if (this.value) {
+            this.setTimeFromValue(this.value);
+        }
+        else if (this.defaultValue) {
+            this.setTimeFromValue(this.defaultValue);
+        }
+        // Initialize dropdown controller
+        if (this.clockContainer && this.inputElement) {
+            this.dropdownController.setElements(this.clockContainer, this.inputElement);
+        }
+    }
+    /**
+     * Handle property changes
+     */
+    handlePropertyChanges(changedProperties) {
+        if (changedProperties.has('value') && this.value !== this.inputValue) {
+            this.setTimeFromValue(this.value);
+        }
+        if (this.hasConstraintPropertiesChanged(changedProperties)) {
+            this.updateConstraints();
+        }
+        if (changedProperties.has('clockOpen')) {
+            if (this.clockOpen) {
+                this.openClock();
+            }
+            else {
+                this.closeClock();
+            }
+        }
+        if (changedProperties.has('clockMode')) {
+            this.currentMode = this.clockMode;
+        }
+    }
+    /**
+     * Check if constraint properties changed
+     */
+    hasConstraintPropertiesChanged(changedProperties) {
+        return (changedProperties.has('minTime') ||
+            changedProperties.has('maxTime') ||
+            changedProperties.has('disabledTimes') ||
+            changedProperties.has('enabledTimes'));
+    }
+    /**
+     * Update validation constraints
+     */
+    updateConstraints() {
+        const constraints = {
+            minTime: this.minTime,
+            maxTime: this.maxTime,
+            disabledTimes: this.disabledTimes || [],
+            enabledTimes: this.enabledTimes,
+        };
+        this.validationController.setConstraints(constraints);
+    }
+    /**
+     * Set time from string value
+     */
+    setTimeFromValue(value) {
+        if (this.selectionController.setTimeFromString(value)) {
+            this.inputValue = value;
+            this.requestUpdate();
+        }
+    }
+    // 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,
+            use12HourClock: this.format === TimeFormat.TwelveHour,
+            step: {
+                hours: 1,
+                minutes: this.minuteInterval,
+                seconds: this.secondInterval,
+            },
+            minuteInterval: this.minuteInterval,
+            secondInterval: this.secondInterval,
+        };
+    }
+    validateTime(time) {
+        return this.validationController.validateConstraints(time);
+    }
+    // Public API methods
+    /**
+     * Open the clock dropdown
+     */
+    openClock() {
+        if (this.disabled || this.readonly)
+            return;
+        this.clockOpen = true;
+        this.dropdownController.open();
+        this.dispatchEvent(new CustomEvent(TIME_PICKER_EVENTS.CLOCK_OPEN, {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /**
+     * Close the clock dropdown
+     */
+    closeClock() {
+        this.clockOpen = false;
+        this.dropdownController.close();
+        this.dispatchEvent(new CustomEvent(TIME_PICKER_EVENTS.CLOCK_CLOSE, {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /**
+     * Toggle clock dropdown
+     */
+    toggleClock() {
+        if (this.clockOpen) {
+            this.closeClock();
+        }
+        else {
+            this.openClock();
+        }
+    }
+    /**
+     * Clear selected time
+     */
+    clear() {
+        this.selectionController.clearSelection();
+        this.inputValue = '';
+        this.value = '';
+        this.requestUpdate();
+    }
+    /**
+     * Set to current time
+     */
+    setToNow() {
+        this.selectionController.setToCurrentTime();
+        this.updateInputValue();
+    }
+    // Event handlers
+    handleInputChange(event) {
+        const target = event.target;
+        const value = target.value;
+        if (this.selectionController.setTimeFromString(value)) {
+            this.value = value;
+            this.inputValue = value;
+        }
+        else {
+            // Reset to previous valid value
+            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.toggleClock();
+        }
+    }
+    handleTimeSelection(time) {
+        this.selectionController.selectTime(time);
+        this.updateInputValue();
+        if (!this.showClock || this.currentMode === TimePickerMode.Minutes) {
+            this.closeClock();
+        }
+    }
+    handleModeChange(mode) {
+        this.currentMode = mode;
+        this.clockMode = mode;
+    }
+    handleDigitalTimeChange(component, value) {
+        const selectedTime = this.selectionController.getSelectedTime() || TimeUtils.getCurrentTime();
+        const updatedTime = Object.assign(Object.assign({}, selectedTime), { [component]: value });
+        if (this.validateTime(updatedTime)) {
+            this.selectionController.selectTime(updatedTime);
+            this.updateInputValue();
+        }
+    }
+    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();
+        }
+    }
+    handlePeriodToggle(period) {
+        const selectedTime = this.selectionController.getSelectedTime();
+        if (!selectedTime)
+            return;
+        let hours = selectedTime.hours;
+        if (period === TimePeriod.PM && hours < 12) {
+            hours += 12;
+        }
+        else if (period === TimePeriod.AM && hours >= 12) {
+            hours -= 12;
+        }
+        const updatedTime = Object.assign(Object.assign({}, selectedTime), { hours });
+        this.selectionController.selectTime(updatedTime);
+        this.updateInputValue();
+    }
+    updateInputValue() {
+        const selectedTime = this.selectionController.getSelectedTime();
+        if (selectedTime) {
+            this.inputValue = this.formattingController.formatForInput(selectedTime);
+            this.value = this.inputValue;
+            if (this.inputElement) {
+                this.inputElement.value = this.inputValue;
+            }
+        }
+    }
+    render() {
+        return html `
+      <div class="time-picker" part="time-picker">
+        ${this.renderLabel()}
+        ${this.renderInput()}
+        ${this.renderDropdown()}
+        ${this.renderHelperText()}
+      </div>
+    `;
+    }
+    renderLabel() {
+        if (!this.label)
+            return nothing;
+        return html `
+      <label for="${TIME_INPUT_FIELD_ID}" class="time-picker__label" part="label">
+        ${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,
+            'time-picker__input--readonly': this.readonly,
+        };
+        return html `
+      <div class="time-picker__input-container" part="input-container">
+        <input
+          id="${TIME_INPUT_FIELD_ID}"
+          class="${classMap(inputClasses)}"
+          part="input"
+          type="text"
+          name="${ifDefined(this.name || undefined)}"
+          .value="${this.inputValue}"
+          placeholder="${this.placeholder || this.formattingController.getPlaceholder()}"
+          ?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.closeClock()}"
+        >
+          OK
+        </button>
+      </div>
+    `;
+    }
+    setToNow() {
+        const now = TimeUtils.getCurrentTime();
+        this.selectionController.selectTime(now);
+        this.updateInputValue();
+    }
+    renderClockNumbers() {
+        const numbers = this.getClockNumbers();
+        return numbers.map((num, index) => {
+            const angle = (index * 360) / numbers.length - 90;
+            const radius = 110;
+            const x = 50 + radius * Math.cos(angle * Math.PI / 180);
+            const y = 50 + radius * Math.sin(angle * Math.PI / 180);
+            const isSelected = this.isNumberSelected(num);
+            return html `
+        <div
+          class="time-picker__clock-number ${isSelected ? 'time-picker__clock-number--selected' : ''}"
+          style="left: ${x}%; top: ${y}%;"
+          @click="${() => this.handleNumberClick(num)}"
+        >
+          ${num}
+        </div>
+      `;
+        });
+    }
+    renderClockHand() {
+        const selectedValue = this.getSelectedClockValue();
+        const totalValues = this.getClockNumbers().length;
+        const angle = (selectedValue * 360 / totalValues) - 90;
+        return html `
+      <div
+        class="time-picker__clock-hand"
+        part="clock-hand"
+        style="
+          width: 2px;
+          height: 35%;
+          top: 15%;
+          left: calc(50% - 1px);
+          transform: rotate(${angle}deg);
+        "
+      ></div>
+    `;
+    }
+    renderModeButtons() {
+        return html `
+      <div class="time-picker__mode-buttons">
+        <button
+          class="time-picker__mode-button ${this.currentMode === TimePickerMode.Hours ? 'time-picker__mode-button--active' : ''}"
+          @click="${() => this.handleModeChange(TimePickerMode.Hours)}"
+        >
+          Hours
+        </button>
+        <button
+          class="time-picker__mode-button ${this.currentMode === TimePickerMode.Minutes ? 'time-picker__mode-button--active' : ''}"
+          @click="${() => this.handleModeChange(TimePickerMode.Minutes)}"
+        >
+          Minutes
+        </button>
+        ${this.showSeconds ? html `
+          <button
+            class="time-picker__mode-button ${this.currentMode === TimePickerMode.Seconds ? 'time-picker__mode-button--active' : ''}"
+            @click="${() => this.handleModeChange(TimePickerMode.Seconds)}"
+          >
+            Seconds
+          </button>
+        ` : nothing}
+      </div>
+    `;
+    }
+    renderDigitalInputs() {
+        const selectedTime = this.selectionController.getSelectedTime() || EMPTY_TIME_VALUE;
+        const config = this.getConfig();
+        return html `
+      <div class="time-picker__digital-inputs">
+        <input
+          type="number"
+          class="time-picker__time-input"
+          part="time-input"
+          min="${config.format === TimeFormat.TwelveHour ? 1 : 0}"
+          max="${config.format === TimeFormat.TwelveHour ? 12 : 23}"
+          .value="${this.formattingController.formatHours(selectedTime.hours)}"
+          @change="${(e) => this.handleDigitalTimeChange('hours', parseInt(e.target.value))}"
+        />
+        <span class="time-picker__separator">:</span>
+        <input
+          type="number"
+          class="time-picker__time-input"
+          part="time-input"
+          min="0"
+          max="59"
+          .value="${this.formattingController.formatMinutes(selectedTime.minutes)}"
+          @change="${(e) => this.handleDigitalTimeChange('minutes', parseInt(e.target.value))}"
+        />
+        ${this.showSeconds ? html `
+          <span class="time-picker__separator">:</span>
+          <input
+            type="number"
+            class="time-picker__time-input"
+            part="time-input"
+            min="0"
+            max="59"
+            .value="${this.formattingController.formatSeconds(selectedTime.seconds)}"
+            @change="${(e) => this.handleDigitalTimeChange('seconds', parseInt(e.target.value))}"
+          />
+        ` : nothing}
+        ${config.format === TimeFormat.TwelveHour ? this.renderPeriodToggle() : nothing}
+      </div>
+    `;
+    }
+    renderPeriodToggle() {
+        const selectedTime = this.selectionController.getSelectedTime() || EMPTY_TIME_VALUE;
+        const currentPeriod = this.formattingController.getPeriod(selectedTime.hours);
+        return html `
+      <div class="time-picker__period-toggle">
+        <button
+          class="time-picker__period-button ${currentPeriod === TimePeriod.AM ? 'time-picker__period-button--active' : ''}"
+          @click="${() => this.handlePeriodToggle(TimePeriod.AM)}"
+        >
+          AM
+        </button>
+        <button
+          class="time-picker__period-button ${currentPeriod === TimePeriod.PM ? 'time-picker__period-button--active' : ''}"
+          @click="${() => this.handlePeriodToggle(TimePeriod.PM)}"
+        >
+          PM
+        </button>
+      </div>
+    `;
+    }
+    renderActions() {
+        return html `
+      <div class="time-picker__actions">
+        <button
+          class="time-picker__action-button"
+          @click="${() => this.clear()}"
+        >
+          Clear
+        </button>
+        <button
+          class="time-picker__action-button"
+          @click="${() => this.setToNow()}"
+        >
+          Now
+        </button>
+                >
+          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>
+    `;
+    }
+};
+NrTimePickerElement.styles = styles;
+__decorate([
+    property({ type: String })
+], NrTimePickerElement.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], NrTimePickerElement.prototype, "value", void 0);
+__decorate([
+    property({ type: String, attribute: 'default-value' })
+], NrTimePickerElement.prototype, "defaultValue", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrTimePickerElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrTimePickerElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrTimePickerElement.prototype, "required", 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, attribute: 'show-clock' })
+], NrTimePickerElement.prototype, "showClock", void 0);
+__decorate([
+    property({ type: Number, attribute: 'minute-interval' })
+], NrTimePickerElement.prototype, "minuteInterval", void 0);
+__decorate([
+    property({ type: Number, attribute: 'second-interval' })
+], NrTimePickerElement.prototype, "secondInterval", 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, reflect: true })
+], NrTimePickerElement.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NrTimePickerElement.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], NrTimePickerElement.prototype, "state", void 0);
+__decorate([
+    property({ type: String })
+], NrTimePickerElement.prototype, "placement", void 0);
+__decorate([
+    property({ type: String })
+], NrTimePickerElement.prototype, "label", void 0);
+__decorate([
+    property({ type: String, attribute: 'helper-text' })
+], NrTimePickerElement.prototype, "helperText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'clock-open' })
+], NrTimePickerElement.prototype, "clockOpen", void 0);
+__decorate([
+    property({ type: String, attribute: 'clock-mode' })
+], NrTimePickerElement.prototype, "clockMode", void 0);
+__decorate([
+    state()
+], NrTimePickerElement.prototype, "inputValue", void 0);
+__decorate([
+    state()
+], NrTimePickerElement.prototype, "currentMode", void 0);
+__decorate([
+    state()
+], NrTimePickerElement.prototype, "validationMessage", void 0);
+__decorate([
+    query(`#${TIME_INPUT_FIELD_ID}`)
+], NrTimePickerElement.prototype, "inputElement", void 0);
+__decorate([
+    query(`.${CLOCK_CONTAINER_CLASS}`)
+], NrTimePickerElement.prototype, "clockContainer", void 0);
+NrTimePickerElement = __decorate([
+    customElement('nr-timepicker')
+], NrTimePickerElement);
+export { NrTimePickerElement };
+/div> `;
+  }
+
+  private renderHelperText(): TemplateResult | typeof nothing {
+    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> `;
+  }
+
+  // Helper methods for clock display
+  private getClockNumbers(): number[] {
+    switch (this.currentMode) {
+      case TimePickerMode.Hours:
+        return this.format === TimeFormat.TwelveHour 
+          ? Array.from({ length: 12 }, (_, i) => i + 1)
+          : Array.from({ length: 24 }, (_, i) => i);
+      case TimePickerMode.Minutes:
+      case TimePickerMode.Seconds:
+        return Array.from({ length: 12 }, (_, i) => i * 5);
+      default:
+        return [];
+    }
+  }
+
+  private getSelectedClockValue(): number {
+    const selectedTime = this.selectionController.getSelectedTime();
+    if (!selectedTime) return 0;
+
+    switch (this.currentMode) {
+      case TimePickerMode.Hours:
+        return this.format === TimeFormat.TwelveHour 
+          ? (selectedTime.hours % 12) || 12
+          : selectedTime.hours;
+      case TimePickerMode.Minutes:
+        return selectedTime.minutes;
+      case TimePickerMode.Seconds:
+        return selectedTime.seconds;
+      default:
+        return 0;
+    }
+  }
+
+  private isNumberSelected(num: number): boolean {
+    const selectedValue = this.getSelectedClockValue();
+    
+    if (this.currentMode === TimePickerMode.Hours) {
+      return num === selectedValue;
+    } else {
+      return num === Math.floor(selectedValue / 5) * 5;
+    }
+  }
+
+  private handleNumberClick(num: number): void {
+    const selectedTime = this.selectionController.getSelectedTime() || TimeUtils.getCurrentTime();
+    
+    let updatedTime: TimeValue;
+    
+    switch (this.currentMode) {
+      case TimePickerMode.Hours:
+        let hours = num;
+        if (this.format === TimeFormat.TwelveHour) {
+          const currentPeriod = this.formattingController.getPeriod(selectedTime.hours);
+          if (currentPeriod === TimePeriod.PM && num !== 12) {
+            hours += 12;
+          } else if (currentPeriod === TimePeriod.AM && num === 12) {
+            hours = 0;
+          }
+        }
+        updatedTime = { ...selectedTime, hours };
+        break;
+      case TimePickerMode.Minutes:
+        updatedTime = { ...selectedTime, minutes: num };
+        break;
+      case TimePickerMode.Seconds:
+        updatedTime = { ...selectedTime, seconds: num };
+        break;
+      default:
+        return;
+    }
+
+    if (this.validateTime(updatedTime)) {
+      this.selectionController.selectTime(updatedTime);
+      this.updateInputValue();
+    }
+  }
+}
+;
+//# sourceMappingURL=timepicker.component.backup.js.map