@xplor-education/core-stencil-components 2.0.0

package/dist/components/xplor-time-picker.js

@@ -0,0 +1,349 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorTimePickerCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-time-picker {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-time-picker {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-time-picker {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-time-picker {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-time-picker {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-time-picker {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-time-picker, ul.sc-xplor-time-picker {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-time-picker li.sc-xplor-time-picker, ul.sc-xplor-time-picker li.sc-xplor-time-picker {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-time-picker, ul.mdc-list.sc-xplor-time-picker {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-time-picker li.mdc-list-item.sc-xplor-time-picker, ul.mdc-list.sc-xplor-time-picker li.mdc-list-item.sc-xplor-time-picker {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-time-picker {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-time-picker {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-time-picker {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-time-picker {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-time-picker .mdc-text-field--outlined.sc-xplor-time-picker .mdc-notched-outline__notch.sc-xplor-time-picker {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-time-picker .mdc-notched-outline__notch.sc-xplor-time-picker {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-time-picker .mdc-notched-outline.sc-xplor-time-picker .mdc-notched-outline__notch.sc-xplor-time-picker {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-time-picker {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-time-picker:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-time-picker {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-time-picker-h {\n  display: block;\n  width: 100%;\n}\n\n.time-picker.sc-xplor-time-picker {\n  position: relative;\n  width: 100%;\n}\n.time-picker--disabled.sc-xplor-time-picker {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n.time-picker__label.sc-xplor-time-picker {\n  display: block;\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.time-picker__required.sc-xplor-time-picker {\n  color: #d32f2f;\n  margin-left: 0.25rem;\n}\n.time-picker__field.sc-xplor-time-picker {\n  position: relative;\n  display: flex;\n  align-items: center;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 1rem;\n  transition: border-color 0.2s ease;\n  background: white;\n}\n.time-picker__field.sc-xplor-time-picker:focus-within {\n  border-color: #008480;\n  border-width: 2px;\n}\n.time-picker__field.sc-xplor-time-picker:focus-within .time-picker__input.sc-xplor-time-picker {\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.time-picker--error.sc-xplor-time-picker .time-picker__field.sc-xplor-time-picker {\n  border-color: #d32f2f;\n}\n.time-picker__input.sc-xplor-time-picker {\n  flex: 1;\n  width: 100%;\n  padding: 0.875rem 1rem;\n  font-size: 1rem;\n  font-family: inherit;\n  border: none;\n  border-radius: 1rem;\n  outline: none;\n  background: transparent;\n}\n.time-picker__input.sc-xplor-time-picker::placeholder {\n  color: rgba(0, 0, 0, 0.38);\n}\n.time-picker__input.sc-xplor-time-picker:disabled {\n  cursor: not-allowed;\n}\n.time-picker__actions.sc-xplor-time-picker {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  padding-right: 0.5rem;\n  flex-shrink: 0;\n}\n.time-picker__clear.sc-xplor-time-picker {\n  background: none;\n  border: none;\n  font-size: 1.25rem;\n  cursor: pointer;\n  padding: 0;\n  width: 1.5rem;\n  height: 1.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  border-radius: 50%;\n  transition: background-color 0.2s;\n}\n.time-picker__clear.sc-xplor-time-picker:hover {\n  background-color: #f5f5f5;\n  color: #212121;\n}\n.time-picker__icon-btn.sc-xplor-time-picker {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  border-radius: 50%;\n  transition: background-color 0.2s;\n}\n.time-picker__icon-btn.sc-xplor-time-picker:hover:not(:disabled) {\n  background-color: #f5f5f5;\n  color: #212121;\n}\n.time-picker__icon-btn.sc-xplor-time-picker:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.time-picker__icon-svg.sc-xplor-time-picker {\n  display: block;\n}\n.time-picker__dropdown.sc-xplor-time-picker {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  z-index: 1000;\n  background-color: #fff;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  padding: 1rem;\n}\n.time-picker__columns.sc-xplor-time-picker {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.time-picker__column.sc-xplor-time-picker {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  min-width: 48px;\n}\n.time-picker__column--period.sc-xplor-time-picker {\n  margin-left: 0.5rem;\n}\n.time-picker__separator.sc-xplor-time-picker {\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: #424242;\n  padding: 0 0.125rem;\n  align-self: center;\n}\n.time-picker__spinner-btn.sc-xplor-time-picker {\n  background: none;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  cursor: pointer;\n  padding: 0.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  transition: background-color 0.2s, border-color 0.2s;\n  width: 100%;\n}\n.time-picker__spinner-btn.sc-xplor-time-picker:hover {\n  background-color: #f5f5f5;\n  border-color: #bdbdbd;\n  color: #212121;\n}\n.time-picker__value.sc-xplor-time-picker {\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: #212121;\n  padding: 0.5rem 0;\n  text-align: center;\n  min-width: 48px;\n  font-variant-numeric: tabular-nums;\n}\n.time-picker__value--period.sc-xplor-time-picker {\n  font-size: 1rem;\n  font-weight: 500;\n  color: #008480;\n}\n.time-picker__details.sc-xplor-time-picker {\n  min-height: 1.25rem;\n  padding: 0 1rem;\n  font-size: 0.75rem;\n}\n.time-picker__error-message.sc-xplor-time-picker {\n  color: #d32f2f;\n}";
+
+const XplorTimePicker$1 = /*@__PURE__*/ proxyCustomElement(class XplorTimePicker extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.timeChange = createEvent(this, "timeChange");
+        this.xplorFocus = createEvent(this, "xplorFocus");
+        this.xplorBlur = createEvent(this, "xplorBlur");
+        this.xplorClear = createEvent(this, "xplorClear");
+        /** Time value in HH:mm:ss 24-hour format */
+        this.value = '';
+        this.label = '';
+        this.placeholder = 'Select time';
+        this.clearable = false;
+        /** Auto-fill current time on focus if value is empty */
+        this.prefill = false;
+        this.bgColor = 'white';
+        this.showSeconds = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.error = '';
+        this.hideDetails = 'auto';
+        this.required = false;
+        this.isOpen = false;
+        this.inputText = '';
+        this.hours = 12;
+        this.minutes = 0;
+        this.seconds = 0;
+        this.period = 'AM';
+        this.lastGoodValue = '';
+        this.toggleDropdown = () => {
+            if (this.disabled || this.readonly)
+                return;
+            this.isOpen = !this.isOpen;
+        };
+        this.handleInputFocus = (event) => {
+            this.xplorFocus.emit(event);
+            if (this.prefill && !this.value) {
+                const now = new Date();
+                this.hours = now.getHours() % 12 || 12;
+                this.minutes = now.getMinutes();
+                this.seconds = now.getSeconds();
+                this.period = now.getHours() >= 12 ? 'PM' : 'AM';
+                this.emitChange();
+            }
+        };
+        this.handleInputBlur = (event) => {
+            this.xplorBlur.emit(event);
+            if (this.inputText.trim() === '') {
+                return;
+            }
+            const ok = this.parseInputText(this.inputText);
+            if (ok) {
+                this.emitChange();
+            }
+            else {
+                // Revert to last good value
+                this.inputText = this.lastGoodValue;
+            }
+        };
+        this.handleInputChange = (event) => {
+            const input = event.target;
+            this.inputText = input.value;
+        };
+        this.handleClear = (event) => {
+            event.stopPropagation();
+            this.value = '';
+            this.inputText = '';
+            this.lastGoodValue = '';
+            this.hours = 12;
+            this.minutes = 0;
+            this.seconds = 0;
+            this.period = 'AM';
+            this.timeChange.emit('');
+            this.xplorClear.emit();
+        };
+        this.incrementHours = () => {
+            this.hours = this.hours >= 12 ? 1 : this.hours + 1;
+            this.emitChange();
+        };
+        this.decrementHours = () => {
+            this.hours = this.hours <= 1 ? 12 : this.hours - 1;
+            this.emitChange();
+        };
+        this.incrementMinutes = () => {
+            if (this.minutes >= 59) {
+                this.minutes = 0;
+                this.incrementHours();
+            }
+            else {
+                this.minutes++;
+                this.emitChange();
+            }
+        };
+        this.decrementMinutes = () => {
+            if (this.minutes <= 0) {
+                this.minutes = 59;
+                this.decrementHours();
+            }
+            else {
+                this.minutes--;
+                this.emitChange();
+            }
+        };
+        this.incrementSeconds = () => {
+            if (this.seconds >= 59) {
+                this.seconds = 0;
+                this.incrementMinutes();
+            }
+            else {
+                this.seconds++;
+                this.emitChange();
+            }
+        };
+        this.decrementSeconds = () => {
+            if (this.seconds <= 0) {
+                this.seconds = 59;
+                this.decrementMinutes();
+            }
+            else {
+                this.seconds--;
+                this.emitChange();
+            }
+        };
+        this.togglePeriod = () => {
+            this.period = this.period === 'AM' ? 'PM' : 'AM';
+            this.emitChange();
+        };
+    }
+    componentWillLoad() {
+        if (this.value) {
+            this.parseValueToState(this.value);
+            this.inputText = this.formatDisplayTime();
+            this.lastGoodValue = this.inputText;
+        }
+    }
+    handleDocumentClick(event) {
+        const target = event.target;
+        if (!this.el.contains(target)) {
+            this.isOpen = false;
+        }
+    }
+    /** Parse HH:mm:ss (24h) into component state */
+    parseValueToState(val) {
+        if (!val)
+            return;
+        const parts = val.split(':');
+        let h = parseInt(parts[0], 10) || 0;
+        const m = parseInt(parts[1], 10) || 0;
+        const s = parseInt(parts[2], 10) || 0;
+        this.period = h >= 12 ? 'PM' : 'AM';
+        if (h === 0) {
+            h = 12;
+        }
+        else if (h > 12) {
+            h -= 12;
+        }
+        this.hours = h;
+        this.minutes = m;
+        this.seconds = s;
+    }
+    /** Convert current state to HH:mm:ss (24h) */
+    stateToValue() {
+        let h = this.hours;
+        if (this.period === 'AM' && h === 12)
+            h = 0;
+        else if (this.period === 'PM' && h !== 12)
+            h += 12;
+        const hStr = String(h).padStart(2, '0');
+        const mStr = String(this.minutes).padStart(2, '0');
+        const sStr = String(this.seconds).padStart(2, '0');
+        return `${hStr}:${mStr}:${sStr}`;
+    }
+    /** Format for display: "12:00 PM" or "12:00:00 PM" */
+    formatDisplayTime() {
+        const h = this.hours;
+        const m = String(this.minutes).padStart(2, '0');
+        if (this.showSeconds) {
+            const s = String(this.seconds).padStart(2, '0');
+            return `${h}:${m}:${s} ${this.period}`;
+        }
+        return `${h}:${m} ${this.period}`;
+    }
+    /** Port of Vue handleOnBlur time parsing logic */
+    parseInputText(text) {
+        const raw = text.trim();
+        if (!raw)
+            return false;
+        // Handle bare am/pm
+        if (raw.toLowerCase() === 'am' || raw.toLowerCase() === 'pm') {
+            this.hours = 12;
+            this.minutes = 0;
+            this.seconds = 0;
+            this.period = raw.toLowerCase() === 'pm' ? 'PM' : 'AM';
+            return true;
+        }
+        // Detect AM/PM suffix
+        let suffix = 'am';
+        if (raw.toLowerCase().indexOf('p') !== -1) {
+            suffix = 'pm';
+        }
+        // Strip am/pm text
+        const sanitised = raw.replace(/(\s*)(pm|am|p|a)/gi, '').trim();
+        const withColons = sanitised.replace(/\./g, ':');
+        const splits = withColons.split(':');
+        let hour;
+        let minute = 0;
+        let second = 0;
+        if (splits.length === 1) {
+            // No colons: interpret based on length
+            const num = sanitised.trim();
+            if (num.length === 3) {
+                hour = parseInt(num.substring(0, 1), 10);
+                minute = parseInt(num.substring(1, 3), 10);
+            }
+            else if (num.length === 4) {
+                hour = parseInt(num.substring(0, 2), 10);
+                minute = parseInt(num.substring(2, 4), 10);
+            }
+            else if (num.length === 6) {
+                hour = parseInt(num.substring(0, 2), 10);
+                minute = parseInt(num.substring(2, 4), 10);
+                second = parseInt(num.substring(4, 6), 10);
+            }
+            else {
+                hour = parseInt(num, 10);
+            }
+        }
+        else if (splits.length === 2) {
+            hour = parseInt(splits[0].trim(), 10);
+            minute = parseInt(splits[1].trim(), 10);
+        }
+        else if (splits.length === 3) {
+            hour = parseInt(splits[0].trim(), 10);
+            minute = parseInt(splits[1].trim(), 10);
+            second = parseInt(splits[2].trim(), 10);
+        }
+        else {
+            return false;
+        }
+        if (isNaN(hour) || hour < 0)
+            return false;
+        if (isNaN(minute))
+            minute = 0;
+        if (isNaN(second))
+            second = 0;
+        // Handle minute overflow
+        if (minute >= 60) {
+            hour += Math.floor(minute / 60);
+            minute = minute % 60;
+        }
+        // Normalize hour and determine AM/PM
+        if (hour >= 12) {
+            suffix = 'pm';
+            if (hour >= 24) {
+                hour = hour % 24;
+                suffix = hour >= 12 ? 'pm' : 'am';
+            }
+            if (hour > 12) {
+                hour -= 12;
+            }
+        }
+        if (hour === 0) {
+            hour = 12;
+            suffix = 'am';
+        }
+        // Clamp seconds
+        if (second >= 60)
+            second = 59;
+        this.hours = hour;
+        this.minutes = minute;
+        this.seconds = second;
+        this.period = suffix === 'pm' ? 'PM' : 'AM';
+        return true;
+    }
+    emitChange() {
+        const val = this.stateToValue();
+        this.value = val;
+        this.inputText = this.formatDisplayTime();
+        this.lastGoodValue = this.inputText;
+        this.timeChange.emit(val);
+    }
+    renderChevronUp() {
+        return (h("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "18 15 12 9 6 15" })));
+    }
+    renderChevronDown() {
+        return (h("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "6 9 12 15 18 9" })));
+    }
+    render() {
+        const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);
+        const clockIcon = (h("svg", { key: 'ed28bf3f52630c4da2ad6a8e870bb8c3a4f3d190', class: "time-picker__icon-svg", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { key: '8bc107ea8c5b9762965b64c12393466f4373fd89', cx: "12", cy: "12", r: "10" }), h("polyline", { key: 'ff49c4901b312dc15e6bd09dca83b5413112fb75', points: "12 6 12 12 16 14" })));
+        return (h(Host, { key: 'c096645386cd430139108770b6808647fbaadf70' }, h("div", { key: '64c8c4afd184aef1b2e4ca8b8d4f63363470081a', class: {
+                'time-picker': true,
+                'time-picker--disabled': this.disabled,
+                'time-picker--error': !!this.error,
+                'time-picker--open': this.isOpen,
+            } }, this.label && (h("label", { key: '0e7bcf1942c56009e2396a777288529b6f5f53a1', class: "time-picker__label" }, this.label, this.required && h("span", { key: '034692f862e15e2719759706a2b487d208cf379d', class: "time-picker__required" }, "*"))), h("div", { key: '6cfa2b11f58478a9fc7cdae83408331980a6760d', class: "time-picker__field" }, h("input", { key: '4ac1c82ccc1ab5f7dc0441544495ffca40077045', type: "text", class: "time-picker__input", value: this.inputText, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInputChange, style: { backgroundColor: this.bgColor } }), h("div", { key: '223f64d070ee70d5930bbcf416c5790bb4338adc', class: "time-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (h("button", { key: '41282f7c47134fce27192eb28402a9f2d5cf1c87', type: "button", class: "time-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), h("button", { key: 'd0f1150c1acf001eb6b5861ae4acf2d340f76f95', type: "button", class: "time-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open time picker" }, clockIcon))), showDetails && (h("div", { key: '70610a25a848c840e606f6a1b93558e057aede46', class: "time-picker__details" }, this.error && h("div", { key: 'c7e4ae629d26c606b2c06a4c8998748ce5942a80', class: "time-picker__error-message" }, this.error))), this.isOpen && (h("div", { key: '0a17052ddf4e3af3e1b5f324b817a8db63729484', class: "time-picker__dropdown" }, h("div", { key: '6cfba596b82f570ac55c6fcb4e0b3e5eecf2a107', class: "time-picker__columns" }, h("div", { key: '61c18caf8b91ecd1f0afd11f26183ba371272065', class: "time-picker__column" }, h("button", { key: '96b264a2bd6f40dd39cbca273c7c884b6ec4d6c6', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementHours, "aria-label": "Increase hours" }, this.renderChevronUp()), h("div", { key: '89b079611ff601cec4e247be6a86941333c71857', class: "time-picker__value" }, String(this.hours).padStart(2, '0')), h("button", { key: '332143c42d2cb34039a4b5efb7dae27c1e7b5d90', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementHours, "aria-label": "Decrease hours" }, this.renderChevronDown())), h("div", { key: '852197ee83d55ed901492f9bb124639154f2ae52', class: "time-picker__separator" }, ":"), h("div", { key: 'b5e99a034ccce887449004989d584207bbb3b191', class: "time-picker__column" }, h("button", { key: 'dc19cd280092e3e8f22e3ef9f4c45eda87a0cdef', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementMinutes, "aria-label": "Increase minutes" }, this.renderChevronUp()), h("div", { key: '5f7086f5917eefa76612e0ca083fb62bddf2bb98', class: "time-picker__value" }, String(this.minutes).padStart(2, '0')), h("button", { key: '047266d75f4fb274e9046a1524104bda6786fa24', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementMinutes, "aria-label": "Decrease minutes" }, this.renderChevronDown())), this.showSeconds && [
+            h("div", { key: 'e4d548f5010bc56ca617be43bcd7e7e098909d5d', class: "time-picker__separator" }, ":"),
+            h("div", { key: '20ff897d25fa596d82e4a28e0d9784272e0eecfb', class: "time-picker__column" }, h("button", { key: '0a0f99b92f2b341233b7c51f0a66c2af96e82756', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementSeconds, "aria-label": "Increase seconds" }, this.renderChevronUp()), h("div", { key: '6b8a50efc2fa8417ba5b8b2cdc0463f6fe56a3cb', class: "time-picker__value" }, String(this.seconds).padStart(2, '0')), h("button", { key: '10870c306b1a9491aab977290a1f257bbd72aa63', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementSeconds, "aria-label": "Decrease seconds" }, this.renderChevronDown()))
+        ], h("div", { key: '8c5b9eab81c3710418f051cbde691bed9cfe7f3f', class: "time-picker__column time-picker__column--period" }, h("button", { key: '728512b9552f759f48238c33a99e4bff23c821e8', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronUp()), h("div", { key: 'b7721c167f5bd7c7162eed89ecd47f77979557b6', class: "time-picker__value time-picker__value--period" }, this.period), h("button", { key: 'aa075ac24108e4f29b34574abb68b9b19a8d5a61', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronDown()))))))));
+    }
+    get el() { return this; }
+    static get style() { return xplorTimePickerCss; }
+}, [2, "xplor-time-picker", {
+        "value": [1025],
+        "label": [1],
+        "placeholder": [1],
+        "clearable": [4],
+        "prefill": [4],
+        "bgColor": [1, "bg-color"],
+        "showSeconds": [4, "show-seconds"],
+        "disabled": [4],
+        "readonly": [4],
+        "error": [1],
+        "hideDetails": [8, "hide-details"],
+        "required": [4],
+        "isOpen": [32],
+        "inputText": [32],
+        "hours": [32],
+        "minutes": [32],
+        "seconds": [32],
+        "period": [32],
+        "lastGoodValue": [32]
+    }, [[4, "click", "handleDocumentClick"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-time-picker"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-time-picker":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorTimePicker$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorTimePicker = XplorTimePicker$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorTimePicker, defineCustomElement };
+//# sourceMappingURL=xplor-time-picker.js.map
+
+//# sourceMappingURL=xplor-time-picker.js.map

package/dist/components/xplor-time-picker.js.map

@@ -0,0 +1 @@
+{"file":"xplor-time-picker.js","mappings":"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","names":["XplorTimePicker","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-time-picker/xplor-time-picker.scss?tag=xplor-time-picker&encapsulation=scoped","src/components/xplor-time-picker/xplor-time-picker.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.time-picker {\n  position: relative;\n  width: 100%;\n\n  &--disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  &__label {\n    display: block;\n    font-size: 0.875rem;\n    color: rgba(0, 0, 0, 0.6);\n    margin-bottom: 0.25rem;\n  }\n\n  &__required {\n    color: #d32f2f;\n    margin-left: 0.25rem;\n  }\n\n  &__field {\n    position: relative;\n    display: flex;\n    align-items: center;\n    border: 1px solid rgba(0, 0, 0, 0.23);\n    border-radius: 1rem;\n    transition: border-color 0.2s ease;\n    background: white;\n\n    &:focus-within {\n      border-color: #008480;\n      border-width: 2px;\n\n      .time-picker__input {\n        padding: calc(0.875rem - 1px) calc(1rem - 1px);\n      }\n    }\n  }\n\n  &--error &__field {\n    border-color: #d32f2f;\n  }\n\n  &__input {\n    flex: 1;\n    width: 100%;\n    padding: 0.875rem 1rem;\n    font-size: 1rem;\n    font-family: inherit;\n    border: none;\n    border-radius: 1rem;\n    outline: none;\n    background: transparent;\n\n    &::placeholder {\n      color: rgba(0, 0, 0, 0.38);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  &__actions {\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n    padding-right: 0.5rem;\n    flex-shrink: 0;\n  }\n\n  &__clear {\n    background: none;\n    border: none;\n    font-size: 1.25rem;\n    cursor: pointer;\n    padding: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #757575;\n    border-radius: 50%;\n    transition: background-color 0.2s;\n\n    &:hover {\n      background-color: #f5f5f5;\n      color: #212121;\n    }\n  }\n\n  &__icon-btn {\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 0.25rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #757575;\n    border-radius: 50%;\n    transition: background-color 0.2s;\n\n    &:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      color: #212121;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  }\n\n  &__icon-svg {\n    display: block;\n  }\n\n  &__dropdown {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    z-index: 1000;\n    background-color: #fff;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    padding: 1rem;\n  }\n\n  &__columns {\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n  }\n\n  &__column {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    min-width: 48px;\n\n    &--period {\n      margin-left: 0.5rem;\n    }\n  }\n\n  &__separator {\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #424242;\n    padding: 0 0.125rem;\n    align-self: center;\n  }\n\n  &__spinner-btn {\n    background: none;\n    border: 1px solid #e0e0e0;\n    border-radius: 4px;\n    cursor: pointer;\n    padding: 0.25rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #757575;\n    transition: background-color 0.2s, border-color 0.2s;\n    width: 100%;\n\n    &:hover {\n      background-color: #f5f5f5;\n      border-color: #bdbdbd;\n      color: #212121;\n    }\n  }\n\n  &__value {\n    font-size: 1.5rem;\n    font-weight: 600;\n    color: #212121;\n    padding: 0.5rem 0;\n    text-align: center;\n    min-width: 48px;\n    font-variant-numeric: tabular-nums;\n\n    &--period {\n      font-size: 1rem;\n      font-weight: 500;\n      color: #008480;\n    }\n  }\n\n  &__details {\n    min-height: 1.25rem;\n    padding: 0 1rem;\n    font-size: 0.75rem;\n  }\n\n  &__error-message {\n    color: #d32f2f;\n  }\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-time-picker',\n  styleUrl: 'xplor-time-picker.scss',\n  scoped: true,\n})\nexport class XplorTimePicker {\n  @Element() el: HTMLElement;\n\n  /** Time value in HH:mm:ss 24-hour format */\n  @Prop({ mutable: true }) value: string = '';\n\n  @Prop() label: string = '';\n  @Prop() placeholder: string = 'Select time';\n  @Prop() clearable: boolean = false;\n\n  /** Auto-fill current time on focus if value is empty */\n  @Prop() prefill: boolean = false;\n\n  @Prop() bgColor: string = 'white';\n  @Prop() showSeconds: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() readonly: boolean = false;\n  @Prop() error: string = '';\n  @Prop() hideDetails: boolean | 'auto' = 'auto';\n  @Prop() required: boolean = false;\n\n  @State() isOpen: boolean = false;\n  @State() inputText: string = '';\n  @State() hours: number = 12;\n  @State() minutes: number = 0;\n  @State() seconds: number = 0;\n  @State() period: 'AM' | 'PM' = 'AM';\n  @State() lastGoodValue: string = '';\n\n  @Event() timeChange: EventEmitter<string>;\n  @Event() xplorFocus: EventEmitter<FocusEvent>;\n  @Event() xplorBlur: EventEmitter<FocusEvent>;\n  @Event() xplorClear: EventEmitter<void>;\n\n  componentWillLoad() {\n    if (this.value) {\n      this.parseValueToState(this.value);\n      this.inputText = this.formatDisplayTime();\n      this.lastGoodValue = this.inputText;\n    }\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    const target = event.target as Node;\n    if (!this.el.contains(target)) {\n      this.isOpen = false;\n    }\n  }\n\n  /** Parse HH:mm:ss (24h) into component state */\n  private parseValueToState(val: string) {\n    if (!val) return;\n    const parts = val.split(':');\n    let h = parseInt(parts[0], 10) || 0;\n    const m = parseInt(parts[1], 10) || 0;\n    const s = parseInt(parts[2], 10) || 0;\n\n    this.period = h >= 12 ? 'PM' : 'AM';\n    if (h === 0) {\n      h = 12;\n    } else if (h > 12) {\n      h -= 12;\n    }\n\n    this.hours = h;\n    this.minutes = m;\n    this.seconds = s;\n  }\n\n  /** Convert current state to HH:mm:ss (24h) */\n  private stateToValue(): string {\n    let h = this.hours;\n    if (this.period === 'AM' && h === 12) h = 0;\n    else if (this.period === 'PM' && h !== 12) h += 12;\n\n    const hStr = String(h).padStart(2, '0');\n    const mStr = String(this.minutes).padStart(2, '0');\n    const sStr = String(this.seconds).padStart(2, '0');\n    return `${hStr}:${mStr}:${sStr}`;\n  }\n\n  /** Format for display: \"12:00 PM\" or \"12:00:00 PM\" */\n  private formatDisplayTime(): string {\n    const h = this.hours;\n    const m = String(this.minutes).padStart(2, '0');\n    if (this.showSeconds) {\n      const s = String(this.seconds).padStart(2, '0');\n      return `${h}:${m}:${s} ${this.period}`;\n    }\n    return `${h}:${m} ${this.period}`;\n  }\n\n  /** Port of Vue handleOnBlur time parsing logic */\n  private parseInputText(text: string): boolean {\n    const raw = text.trim();\n    if (!raw) return false;\n\n    // Handle bare am/pm\n    if (raw.toLowerCase() === 'am' || raw.toLowerCase() === 'pm') {\n      this.hours = 12;\n      this.minutes = 0;\n      this.seconds = 0;\n      this.period = raw.toLowerCase() === 'pm' ? 'PM' : 'AM';\n      return true;\n    }\n\n    // Detect AM/PM suffix\n    let suffix: 'am' | 'pm' = 'am';\n    if (raw.toLowerCase().indexOf('p') !== -1) {\n      suffix = 'pm';\n    }\n\n    // Strip am/pm text\n    const sanitised = raw.replace(/(\\s*)(pm|am|p|a)/gi, '').trim();\n    const withColons = sanitised.replace(/\\./g, ':');\n    const splits = withColons.split(':');\n\n    let hour: number;\n    let minute = 0;\n    let second = 0;\n\n    if (splits.length === 1) {\n      // No colons: interpret based on length\n      const num = sanitised.trim();\n      if (num.length === 3) {\n        hour = parseInt(num.substring(0, 1), 10);\n        minute = parseInt(num.substring(1, 3), 10);\n      } else if (num.length === 4) {\n        hour = parseInt(num.substring(0, 2), 10);\n        minute = parseInt(num.substring(2, 4), 10);\n      } else if (num.length === 6) {\n        hour = parseInt(num.substring(0, 2), 10);\n        minute = parseInt(num.substring(2, 4), 10);\n        second = parseInt(num.substring(4, 6), 10);\n      } else {\n        hour = parseInt(num, 10);\n      }\n    } else if (splits.length === 2) {\n      hour = parseInt(splits[0].trim(), 10);\n      minute = parseInt(splits[1].trim(), 10);\n    } else if (splits.length === 3) {\n      hour = parseInt(splits[0].trim(), 10);\n      minute = parseInt(splits[1].trim(), 10);\n      second = parseInt(splits[2].trim(), 10);\n    } else {\n      return false;\n    }\n\n    if (isNaN(hour) || hour < 0) return false;\n    if (isNaN(minute)) minute = 0;\n    if (isNaN(second)) second = 0;\n\n    // Handle minute overflow\n    if (minute >= 60) {\n      hour += Math.floor(minute / 60);\n      minute = minute % 60;\n    }\n\n    // Normalize hour and determine AM/PM\n    if (hour >= 12) {\n      suffix = 'pm';\n      if (hour >= 24) {\n        hour = hour % 24;\n        suffix = hour >= 12 ? 'pm' : 'am';\n      }\n      if (hour > 12) {\n        hour -= 12;\n      }\n    }\n\n    if (hour === 0) {\n      hour = 12;\n      suffix = 'am';\n    }\n\n    // Clamp seconds\n    if (second >= 60) second = 59;\n\n    this.hours = hour;\n    this.minutes = minute;\n    this.seconds = second;\n    this.period = suffix === 'pm' ? 'PM' : 'AM';\n    return true;\n  }\n\n  private emitChange() {\n    const val = this.stateToValue();\n    this.value = val;\n    this.inputText = this.formatDisplayTime();\n    this.lastGoodValue = this.inputText;\n    this.timeChange.emit(val);\n  }\n\n  private toggleDropdown = () => {\n    if (this.disabled || this.readonly) return;\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleInputFocus = (event: FocusEvent) => {\n    this.xplorFocus.emit(event);\n    if (this.prefill && !this.value) {\n      const now = new Date();\n      this.hours = now.getHours() % 12 || 12;\n      this.minutes = now.getMinutes();\n      this.seconds = now.getSeconds();\n      this.period = now.getHours() >= 12 ? 'PM' : 'AM';\n      this.emitChange();\n    }\n  };\n\n  private handleInputBlur = (event: FocusEvent) => {\n    this.xplorBlur.emit(event);\n    if (this.inputText.trim() === '') {\n      return;\n    }\n    const ok = this.parseInputText(this.inputText);\n    if (ok) {\n      this.emitChange();\n    } else {\n      // Revert to last good value\n      this.inputText = this.lastGoodValue;\n    }\n  };\n\n  private handleInputChange = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.inputText = input.value;\n  };\n\n  private handleClear = (event: Event) => {\n    event.stopPropagation();\n    this.value = '';\n    this.inputText = '';\n    this.lastGoodValue = '';\n    this.hours = 12;\n    this.minutes = 0;\n    this.seconds = 0;\n    this.period = 'AM';\n    this.timeChange.emit('');\n    this.xplorClear.emit();\n  };\n\n  private incrementHours = () => {\n    this.hours = this.hours >= 12 ? 1 : this.hours + 1;\n    this.emitChange();\n  };\n\n  private decrementHours = () => {\n    this.hours = this.hours <= 1 ? 12 : this.hours - 1;\n    this.emitChange();\n  };\n\n  private incrementMinutes = () => {\n    if (this.minutes >= 59) {\n      this.minutes = 0;\n      this.incrementHours();\n    } else {\n      this.minutes++;\n      this.emitChange();\n    }\n  };\n\n  private decrementMinutes = () => {\n    if (this.minutes <= 0) {\n      this.minutes = 59;\n      this.decrementHours();\n    } else {\n      this.minutes--;\n      this.emitChange();\n    }\n  };\n\n  private incrementSeconds = () => {\n    if (this.seconds >= 59) {\n      this.seconds = 0;\n      this.incrementMinutes();\n    } else {\n      this.seconds++;\n      this.emitChange();\n    }\n  };\n\n  private decrementSeconds = () => {\n    if (this.seconds <= 0) {\n      this.seconds = 59;\n      this.decrementMinutes();\n    } else {\n      this.seconds--;\n      this.emitChange();\n    }\n  };\n\n  private togglePeriod = () => {\n    this.period = this.period === 'AM' ? 'PM' : 'AM';\n    this.emitChange();\n  };\n\n  private renderChevronUp() {\n    return (\n      <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <polyline points=\"18 15 12 9 6 15\"></polyline>\n      </svg>\n    );\n  }\n\n  private renderChevronDown() {\n    return (\n      <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <polyline points=\"6 9 12 15 18 9\"></polyline>\n      </svg>\n    );\n  }\n\n  render() {\n    const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);\n\n    const clockIcon = (\n      <svg class=\"time-picker__icon-svg\" viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n        <polyline points=\"12 6 12 12 16 14\"></polyline>\n      </svg>\n    );\n\n    return (\n      <Host>\n        <div class={{\n          'time-picker': true,\n          'time-picker--disabled': this.disabled,\n          'time-picker--error': !!this.error,\n          'time-picker--open': this.isOpen,\n        }}>\n          {this.label && (\n            <label class=\"time-picker__label\">\n              {this.label}\n              {this.required && <span class=\"time-picker__required\">*</span>}\n            </label>\n          )}\n\n          <div class=\"time-picker__field\">\n            <input\n              type=\"text\"\n              class=\"time-picker__input\"\n              value={this.inputText}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              onFocus={this.handleInputFocus}\n              onBlur={this.handleInputBlur}\n              onInput={this.handleInputChange}\n              style={{ backgroundColor: this.bgColor }}\n            />\n            <div class=\"time-picker__actions\">\n              {this.clearable && this.value && !this.disabled && !this.readonly && (\n                <button type=\"button\" class=\"time-picker__clear\" onClick={this.handleClear} aria-label=\"Clear\">\n                  ×\n                </button>\n              )}\n              <button type=\"button\" class=\"time-picker__icon-btn\" onClick={this.toggleDropdown} disabled={this.disabled} aria-label=\"Open time picker\">\n                {clockIcon}\n              </button>\n            </div>\n          </div>\n\n          {showDetails && (\n            <div class=\"time-picker__details\">\n              {this.error && <div class=\"time-picker__error-message\">{this.error}</div>}\n            </div>\n          )}\n\n          {this.isOpen && (\n            <div class=\"time-picker__dropdown\">\n              <div class=\"time-picker__columns\">\n                {/* Hours column */}\n                <div class=\"time-picker__column\">\n                  <button type=\"button\" class=\"time-picker__spinner-btn\" onClick={this.incrementHours} aria-label=\"Increase hours\">\n                    {this.renderChevronUp()}\n                  </button>\n                  <div class=\"time-picker__value\">{String(this.hours).padStart(2, '0')}</div>\n                  <button type=\"button\" class=\"time-picker__spinner-btn\" onClick={this.decrementHours} aria-label=\"Decrease hours\">\n                    {this.renderChevronDown()}\n                  </button>\n                </div>\n\n                <div class=\"time-picker__separator\">:</div>\n\n                {/* Minutes column */}\n                <div class=\"time-picker__column\">\n                  <button type=\"button\" class=\"time-picker__spinner-btn\" onClick={this.incrementMinutes} aria-label=\"Increase minutes\">\n                    {this.renderChevronUp()}\n                  </button>\n                  <div class=\"time-picker__value\">{String(this.minutes).padStart(2, '0')}</div>\n                  <button type=\"button\" class=\"time-picker__spinner-btn\" onClick={this.decrementMinutes} aria-label=\"Decrease minutes\">\n                    {this.renderChevronDown()}\n                  </button>\n                </div>\n\n                {this.showSeconds && [\n                  <div class=\"time-picker__separator\">:</div>,\n                  <div class=\"time-picker__column\">\n                    <button type=\"button\" class=\"time-picker__spinner-btn\" onClick={this.incrementSeconds} aria-label=\"Increase seconds\">\n                      {this.renderChevronUp()}\n                    </button>\n                    <div class=\"time-picker__value\">{String(this.seconds).padStart(2, '0')}</div>\n                    <button type=\"button\" class=\"time-picker__spinner-btn\" onClick={this.decrementSeconds} aria-label=\"Decrease seconds\">\n                      {this.renderChevronDown()}\n                    </button>\n                  </div>\n                ]}\n\n                {/* AM/PM column */}\n                <div class=\"time-picker__column time-picker__column--period\">\n                  <button type=\"button\" class=\"time-picker__spinner-btn\" onClick={this.togglePeriod} aria-label=\"Toggle AM/PM\">\n                    {this.renderChevronUp()}\n                  </button>\n                  <div class=\"time-picker__value time-picker__value--period\">{this.period}</div>\n                  <button type=\"button\" class=\"time-picker__spinner-btn\" onClick={this.togglePeriod} aria-label=\"Toggle AM/PM\">\n                    {this.renderChevronDown()}\n                  </button>\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/xplor-tooltip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplorTooltip extends Components.XplorTooltip, HTMLElement {}
+export const XplorTooltip: {
+    prototype: XplorTooltip;
+    new (): XplorTooltip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xplor-tooltip.js

@@ -0,0 +1,9 @@
+import { X as XplorTooltip$1, d as defineCustomElement$1 } from './p-4l9DAhAo.js';
+
+const XplorTooltip = XplorTooltip$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorTooltip, defineCustomElement };
+//# sourceMappingURL=xplor-tooltip.js.map
+
+//# sourceMappingURL=xplor-tooltip.js.map

package/dist/components/xplor-tooltip.js.map

@@ -0,0 +1 @@
+{"file":"xplor-tooltip.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}