@xlabs-store/core 0.0.1

package/dist/collection/components/x-time-picker/time-picker-dropdown-content/time-picker-dropdown-content.js

@@ -0,0 +1,855 @@
+import { h } from "@stencil/core";
+/**
+ * Time picker dropdown content rendered in a portal layer.
+ */
+export class XTimePickerDropdownContent {
+    /**
+     * Host element reference.
+     */
+    el;
+    // ==================== Props ====================
+    /**
+     * Class map for dropdown wrapper.
+     * @example
+     * <x-time-picker-dropdown-content dropdownClasses={{ 'x-time-dropdown': true }}></x-time-picker-dropdown-content>
+     */
+    dropdownClasses = {};
+    /**
+     * Inline style map for dropdown wrapper.
+     * @example
+     * <x-time-picker-dropdown-content dropdownStyle={{ width: '240px' }}></x-time-picker-dropdown-content>
+     */
+    dropdownStyle = {};
+    /**
+     * Callback to pass dropdown element ref.
+     * @example
+     * <x-time-picker-dropdown-content setDropdownRef={(el) => console.log(el)}></x-time-picker-dropdown-content>
+     */
+    setDropdownRef;
+    /**
+     * Currently selected hour (0-23 or 1-12 for 12-hour mode).
+     * @example
+     * <x-time-picker-dropdown-content selectedHour={10}></x-time-picker-dropdown-content>
+     */
+    selectedHour = 0;
+    /**
+     * Currently selected minute (0-59).
+     * @example
+     * <x-time-picker-dropdown-content selectedMinute={30}></x-time-picker-dropdown-content>
+     */
+    selectedMinute = 0;
+    /**
+     * Currently selected second (0-59).
+     * @example
+     * <x-time-picker-dropdown-content selectedSecond={45}></x-time-picker-dropdown-content>
+     */
+    selectedSecond = 0;
+    /**
+     * Whether to use 12-hour format.
+     * @example
+     * <x-time-picker-dropdown-content use12Hours></x-time-picker-dropdown-content>
+     */
+    use12Hours = false;
+    /**
+     * Whether to show seconds column.
+     * @example
+     * <x-time-picker-dropdown-content showSecond={false}></x-time-picker-dropdown-content>
+     */
+    showSecond = true;
+    /**
+     * Whether to show "Now" button.
+     * @example
+     * <x-time-picker-dropdown-content showNow={false}></x-time-picker-dropdown-content>
+     */
+    showNow = true;
+    /**
+     * Hour step.
+     * @example
+     * <x-time-picker-dropdown-content hourStep={2}></x-time-picker-dropdown-content>
+     */
+    hourStep = 1;
+    /**
+     * Minute step.
+     * @example
+     * <x-time-picker-dropdown-content minuteStep={5}></x-time-picker-dropdown-content>
+     */
+    minuteStep = 1;
+    /**
+     * Second step.
+     * @example
+     * <x-time-picker-dropdown-content secondStep={10}></x-time-picker-dropdown-content>
+     */
+    secondStep = 1;
+    /**
+     * Selected period for 12-hour mode.
+     * @example
+     * <x-time-picker-dropdown-content selectedPeriod="PM"></x-time-picker-dropdown-content>
+     */
+    selectedPeriod = 'AM';
+    /**
+     * Function to get disabled hours.
+     * @example
+     * <x-time-picker-dropdown-content disabledHours={() => [0,1]}></x-time-picker-dropdown-content>
+     */
+    disabledHours;
+    /**
+     * Function to get disabled minutes for a given hour.
+     * @example
+     * <x-time-picker-dropdown-content disabledMinutes={(h) => (h === 10 ? [30] : [])}></x-time-picker-dropdown-content>
+     */
+    disabledMinutes;
+    /**
+     * Function to get disabled seconds for a given hour and minute.
+     * @example
+     * <x-time-picker-dropdown-content disabledSeconds={(h,m) => (m === 0 ? [0] : [])}></x-time-picker-dropdown-content>
+     */
+    disabledSeconds;
+    // ==================== Events ====================
+    /**
+     * Emitted when time selection changes.
+     * @example
+     * <x-time-picker-dropdown-content onXTimeChange={(ev) => console.log(ev.detail)}></x-time-picker-dropdown-content>
+     */
+    xTimeChange;
+    /**
+     * Emitted when "Now" button is clicked.
+     * @example
+     * <x-time-picker-dropdown-content onXNowClick={() => {}}></x-time-picker-dropdown-content>
+     */
+    xNowClick;
+    /**
+     * Emitted when "OK" button is clicked.
+     * @example
+     * <x-time-picker-dropdown-content onXOkClick={() => {}}></x-time-picker-dropdown-content>
+     */
+    xOkClick;
+    // ==================== Refs ====================
+    /**
+     * Dropdown element reference.
+     */
+    dropdownEl = null;
+    // ==================== Lifecycle ====================
+    componentDidLoad() {
+        this.setDropdownRef?.(this.dropdownEl);
+    }
+    disconnectedCallback() {
+        this.setDropdownRef?.(null);
+    }
+    // ==================== Private Methods ====================
+    /**
+     * Capture dropdown ref and forward to callback.
+     * @param el - Dropdown element.
+     * @returns void
+     */
+    setRef = (el) => {
+        this.dropdownEl = el;
+        this.setDropdownRef?.(el);
+    };
+    /**
+     * Format a number with leading zero
+     * @param n - Number to format.
+     * @returns string
+     */
+    formatNumber(n) {
+        return String(n).padStart(2, '0');
+    }
+    /**
+     * Get available hours based on step
+     * @returns number[]
+     */
+    getHours() {
+        const hours = [];
+        const startHour = this.use12Hours ? 1 : 0;
+        const endHour = this.use12Hours ? 12 : 23;
+        for (let i = startHour; i <= endHour; i += this.hourStep) {
+            hours.push(i);
+        }
+        return hours;
+    }
+    /**
+     * Get available minutes based on step
+     * @returns number[]
+     */
+    getMinutes() {
+        const minutes = [];
+        for (let i = 0; i < 60; i += this.minuteStep) {
+            minutes.push(i);
+        }
+        return minutes;
+    }
+    /**
+     * Get available seconds based on step
+     * @returns number[]
+     */
+    getSeconds() {
+        const seconds = [];
+        for (let i = 0; i < 60; i += this.secondStep) {
+            seconds.push(i);
+        }
+        return seconds;
+    }
+    /**
+     * Check if an hour is disabled
+     * @param hour - Hour value.
+     * @returns boolean
+     */
+    isHourDisabled(hour) {
+        if (!this.disabledHours)
+            return false;
+        return this.disabledHours().includes(hour);
+    }
+    /**
+     * Check if a minute is disabled
+     * @param minute - Minute value.
+     * @returns boolean
+     */
+    isMinuteDisabled(minute) {
+        if (!this.disabledMinutes)
+            return false;
+        return this.disabledMinutes(this.selectedHour).includes(minute);
+    }
+    /**
+     * Check if a second is disabled
+     * @param second - Second value.
+     * @returns boolean
+     */
+    isSecondDisabled(second) {
+        if (!this.disabledSeconds)
+            return false;
+        return this.disabledSeconds(this.selectedHour, this.selectedMinute).includes(second);
+    }
+    /**
+     * Handle hour selection
+     * @param hour - Hour value.
+     * @returns void
+     */
+    handleHourClick = (hour) => {
+        if (this.isHourDisabled(hour))
+            return;
+        this.xTimeChange.emit({
+            hour,
+            minute: this.selectedMinute,
+            second: this.selectedSecond,
+            period: this.use12Hours ? this.selectedPeriod : undefined,
+        });
+    };
+    /**
+     * Handle minute selection
+     * @param minute - Minute value.
+     * @returns void
+     */
+    handleMinuteClick = (minute) => {
+        if (this.isMinuteDisabled(minute))
+            return;
+        this.xTimeChange.emit({
+            hour: this.selectedHour,
+            minute,
+            second: this.selectedSecond,
+            period: this.use12Hours ? this.selectedPeriod : undefined,
+        });
+    };
+    /**
+     * Handle second selection
+     * @param second - Second value.
+     * @returns void
+     */
+    handleSecondClick = (second) => {
+        if (this.isSecondDisabled(second))
+            return;
+        this.xTimeChange.emit({
+            hour: this.selectedHour,
+            minute: this.selectedMinute,
+            second,
+            period: this.use12Hours ? this.selectedPeriod : undefined,
+        });
+    };
+    /**
+     * Handle period (AM/PM) selection
+     * @param period - Selected period.
+     * @returns void
+     */
+    handlePeriodClick = (period) => {
+        this.xTimeChange.emit({
+            hour: this.selectedHour,
+            minute: this.selectedMinute,
+            second: this.selectedSecond,
+            period,
+        });
+    };
+    /**
+     * Handle "Now" button click
+     * @returns void
+     */
+    handleNowClick = () => {
+        this.xNowClick.emit();
+    };
+    /**
+     * Handle "OK" button click
+     * @returns void
+     */
+    handleOkClick = () => {
+        this.xOkClick.emit();
+    };
+    // ==================== Render Methods ====================
+    /**
+     * Render the hour column
+     * @returns JSX.Element
+     */
+    renderHourColumn() {
+        const hours = this.getHours();
+        return (h("div", { class: "x-time-picker-column" }, h("ul", { class: "x-time-picker-column-list" }, hours.map(hour => {
+            const isSelected = hour === this.selectedHour;
+            const isDisabled = this.isHourDisabled(hour);
+            const cellClasses = {
+                'x-time-picker-cell': true,
+                'x-time-picker-cell-selected': isSelected,
+                'x-time-picker-cell-disabled': isDisabled,
+            };
+            return (h("li", { class: cellClasses, onClick: () => this.handleHourClick(hour) }, this.formatNumber(hour)));
+        }))));
+    }
+    /**
+     * Render the minute column
+     * @returns JSX.Element
+     */
+    renderMinuteColumn() {
+        const minutes = this.getMinutes();
+        return (h("div", { class: "x-time-picker-column" }, h("ul", { class: "x-time-picker-column-list" }, minutes.map(minute => {
+            const isSelected = minute === this.selectedMinute;
+            const isDisabled = this.isMinuteDisabled(minute);
+            const cellClasses = {
+                'x-time-picker-cell': true,
+                'x-time-picker-cell-selected': isSelected,
+                'x-time-picker-cell-disabled': isDisabled,
+            };
+            return (h("li", { class: cellClasses, onClick: () => this.handleMinuteClick(minute) }, this.formatNumber(minute)));
+        }))));
+    }
+    /**
+     * Render the second column
+     * @returns JSX.Element
+     */
+    renderSecondColumn() {
+        const seconds = this.getSeconds();
+        return (h("div", { class: "x-time-picker-column" }, h("ul", { class: "x-time-picker-column-list" }, seconds.map(second => {
+            const isSelected = second === this.selectedSecond;
+            const isDisabled = this.isSecondDisabled(second);
+            const cellClasses = {
+                'x-time-picker-cell': true,
+                'x-time-picker-cell-selected': isSelected,
+                'x-time-picker-cell-disabled': isDisabled,
+            };
+            return (h("li", { class: cellClasses, onClick: () => this.handleSecondClick(second) }, this.formatNumber(second)));
+        }))));
+    }
+    /**
+     * Render the AM/PM column for 12-hour mode
+     * @returns JSX.Element
+     */
+    renderAmPmColumn() {
+        const periods = ['AM', 'PM'];
+        return (h("div", { class: "x-time-picker-column x-time-picker-column-period" }, h("ul", { class: "x-time-picker-column-list" }, periods.map(period => {
+            const isSelected = period === this.selectedPeriod;
+            const cellClasses = {
+                'x-time-picker-cell': true,
+                'x-time-picker-cell-selected': isSelected,
+            };
+            return (h("li", { class: cellClasses, onClick: () => this.handlePeriodClick(period) }, period));
+        }))));
+    }
+    /**
+     * Render the footer with Now/OK buttons
+     * @returns JSX.Element
+     */
+    renderFooter() {
+        return (h("div", { class: "x-time-picker-footer" }, this.showNow ? (h("x-button", { type: "link", size: "small", class: "x-time-picker-now-btn", onClick: this.handleNowClick }, "Now")) : (h("div", { class: "x-time-picker-footer-spacer" })), h("x-button", { type: "primary", size: "small", class: "x-time-picker-ok-btn", onClick: this.handleOkClick }, "OK")));
+    }
+    // ==================== Main Render ====================
+    /**
+     * Render time picker dropdown panel.
+     * @returns JSX.Element
+     * @example
+     * <x-time-picker-dropdown-content selectedHour={10}></x-time-picker-dropdown-content>
+     */
+    render() {
+        const dropdownClasses = {
+            'x-time-picker-dropdown': true,
+            ...this.dropdownClasses,
+        };
+        return (h("div", { key: '3c4e5876d6d701e948b9fa1ba6944ed225a356d5', class: dropdownClasses, style: this.dropdownStyle, ref: this.setRef }, h("div", { key: '17b6eaf9b968e0fea45aa628f81a97f44c363ac8', class: "x-time-picker-panel-container" }, h("div", { key: '6166ac632d61f8bb6d13620548a1183c634ffcef', class: "x-time-picker-panel" }, h("div", { key: '1f6d4742432bad83f3a79c9305d362d0607511f8', class: "x-time-picker-panel-content" }, this.renderHourColumn(), this.renderMinuteColumn(), this.showSecond && this.renderSecondColumn(), this.use12Hours && this.renderAmPmColumn())), this.renderFooter())));
+    }
+    static get is() { return "x-time-picker-dropdown-content"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["time-picker-dropdown-content.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["time-picker-dropdown-content.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dropdownClasses": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimePickerDropdownClassMap",
+                    "resolved": "TimePickerDropdownClassMap",
+                    "references": {
+                        "TimePickerDropdownClassMap": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-time-picker/time-picker-dropdown-content/types.ts::TimePickerDropdownClassMap",
+                            "referenceLocation": "TimePickerDropdownClassMap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker-dropdown-content dropdownClasses={{ 'x-time-dropdown': true }}></x-time-picker-dropdown-content>"
+                        }],
+                    "text": "Class map for dropdown wrapper."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "dropdownStyle": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimePickerDropdownStyleMap",
+                    "resolved": "TimePickerDropdownStyleMap",
+                    "references": {
+                        "TimePickerDropdownStyleMap": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-time-picker/time-picker-dropdown-content/types.ts::TimePickerDropdownStyleMap",
+                            "referenceLocation": "TimePickerDropdownStyleMap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker-dropdown-content dropdownStyle={{ width: '240px' }}></x-time-picker-dropdown-content>"
+                        }],
+                    "text": "Inline style map for dropdown wrapper."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "setDropdownRef": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimePickerDropdownRefCallback",
+                    "resolved": "(el: HTMLDivElement) => void",
+                    "references": {
+                        "TimePickerDropdownRefCallback": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-time-picker/time-picker-dropdown-content/types.ts::TimePickerDropdownRefCallback",
+                            "referenceLocation": "TimePickerDropdownRefCallback"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker-dropdown-content setDropdownRef={(el) => console.log(el)}></x-time-picker-dropdown-content>"
+                        }],
+                    "text": "Callback to pass dropdown element ref."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "selectedHour": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker-dropdown-content selectedHour={10}></x-time-picker-dropdown-content>"
+                        }],
+                    "text": "Currently selected hour (0-23 or 1-12 for 12-hour mode)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-hour",
+                "defaultValue": "0"
+            },
+            "selectedMinute": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker-dropdown-content selectedMinute={30}></x-time-picker-dropdown-content>"
+                        }],
+                    "text": "Currently selected minute (0-59)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-minute",
+                "defaultValue": "0"
+            },
+            "selectedSecond": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker-dropdown-content selectedSecond={45}></x-time-picker-dropdown-content>"
+                        }],
+                    "text": "Currently selected second (0-59)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-second",
+                "defaultValue": "0"
+            },
+            "use12Hours": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker-dropdown-content use12Hours></x-time-picker-dropdown-content>"
+                        }],
+                    "text": "Whether to use 12-hour format."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-1-2-hours",
+                "defaultValue": "false"
+            },
+            "showSecond": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker-dropdown-content showSecond={false}></x-time-picker-dropdown-content>"
+                        }],
+                    "text": "Whether to show seconds column."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-second",
+                "defaultValue": "true"
+            },
+            "showNow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker-dropdown-content showNow={false}></x-time-picker-dropdown-content>"
+                        }],
+                    "text": "Whether to show \"Now\" button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-now",
+                "defaultValue": "true"
+            },
+            "hourStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker-dropdown-content hourStep={2}></x-time-picker-dropdown-content>"
+                        }],
+                    "text": "Hour step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hour-step",
+                "defaultValue": "1"
+            },
+            "minuteStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker-dropdown-content minuteStep={5}></x-time-picker-dropdown-content>"
+                        }],
+                    "text": "Minute step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "minute-step",
+                "defaultValue": "1"
+            },
+            "secondStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker-dropdown-content secondStep={10}></x-time-picker-dropdown-content>"
+                        }],
+                    "text": "Second step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "second-step",
+                "defaultValue": "1"
+            },
+            "selectedPeriod": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'AM' | 'PM'",
+                    "resolved": "\"AM\" | \"PM\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker-dropdown-content selectedPeriod=\"PM\"></x-time-picker-dropdown-content>"
+                        }],
+                    "text": "Selected period for 12-hour mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-period",
+                "defaultValue": "'AM'"
+            },
+            "disabledHours": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DisabledHoursFn",
+                    "resolved": "() => number[]",
+                    "references": {
+                        "DisabledHoursFn": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-time-picker/time-picker-dropdown-content/types.ts::DisabledHoursFn",
+                            "referenceLocation": "DisabledHoursFn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker-dropdown-content disabledHours={() => [0,1]}></x-time-picker-dropdown-content>"
+                        }],
+                    "text": "Function to get disabled hours."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "disabledMinutes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DisabledMinutesFn",
+                    "resolved": "(hour: number) => number[]",
+                    "references": {
+                        "DisabledMinutesFn": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-time-picker/time-picker-dropdown-content/types.ts::DisabledMinutesFn",
+                            "referenceLocation": "DisabledMinutesFn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker-dropdown-content disabledMinutes={(h) => (h === 10 ? [30] : [])}></x-time-picker-dropdown-content>"
+                        }],
+                    "text": "Function to get disabled minutes for a given hour."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "disabledSeconds": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DisabledSecondsFn",
+                    "resolved": "(hour: number, minute: number) => number[]",
+                    "references": {
+                        "DisabledSecondsFn": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-time-picker/time-picker-dropdown-content/types.ts::DisabledSecondsFn",
+                            "referenceLocation": "DisabledSecondsFn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker-dropdown-content disabledSeconds={(h,m) => (m === 0 ? [0] : [])}></x-time-picker-dropdown-content>"
+                        }],
+                    "text": "Function to get disabled seconds for a given hour and minute."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xTimeChange",
+                "name": "xTimeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker-dropdown-content onXTimeChange={(ev) => console.log(ev.detail)}></x-time-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when time selection changes."
+                },
+                "complexType": {
+                    "original": "TimeChangeDetail",
+                    "resolved": "TimeChangeDetail",
+                    "references": {
+                        "TimeChangeDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-time-picker/time-picker-dropdown-content/types.ts::TimeChangeDetail",
+                            "referenceLocation": "TimeChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xNowClick",
+                "name": "xNowClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker-dropdown-content onXNowClick={() => {}}></x-time-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when \"Now\" button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "xOkClick",
+                "name": "xOkClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker-dropdown-content onXOkClick={() => {}}></x-time-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when \"OK\" button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}