@nuralyui/timepicker 0.1.1 → 0.1.2

package/timepicker.component.backup.js

@@ -1,890 +0,0 @@
-/**
- * @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