monobill-mintui 0.6.612 → 0.6.613

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

@@ -0,0 +1,366 @@
+
+const __mintLoadStyle = (key, url) => {
+  if (typeof document === 'undefined') return
+  const href = new URL(url, import.meta.url).href
+  if ([...document.querySelectorAll('link[rel="stylesheet"]')].some(link => link.href === href)) return
+  if (document.querySelector('style[data-mint-ui-style="' + key + '"]') || document.querySelector('link[data-mint-ui-style="' + key + '"]')) return
+  const link = document.createElement('link')
+  link.rel = 'stylesheet'
+  link.href = href
+  link.dataset.mintUiStyle = key
+  document.head.append(link)
+}
+__mintLoadStyle('theme', '../../theme.css')
+__mintLoadStyle('input', '../../input.css')
+__mintLoadStyle('icon', '../../icon.css')
+__mintLoadStyle('popover', '../../popover.css')
+__mintLoadStyle('stack', '../../stack.css')
+__mintLoadStyle('text', '../../text.css')
+__mintLoadStyle('time-picker', '../../time-picker.css')
+import "../chunks/icon-gQAtsERy.js";
+import { t as e } from "../chunks/register-element-BFYmIynH.js";
+import "../chunks/text-BHkEs8U5.js";
+import "../chunks/input-8bbXzpa5.js";
+import "../chunks/popover-gviDCspV.js";
+//#region src/components/time-picker/TimePicker.ts
+var t = class extends HTMLElement {
+	constructor(...e) {
+		super(...e), this._triggerId = `mint-time-picker-trigger-${Math.random().toString(36).slice(2, 10)}`, this._popover = null, this._popoverObserver = null, this._inputEl = null, this._hiddenInput = null, this._single = {
+			hour: 9,
+			minute: 0,
+			second: 0,
+			meridiem: "AM"
+		}, this._rangeStart = {
+			hour: 9,
+			minute: 0,
+			second: 0,
+			meridiem: "AM"
+		}, this._rangeEnd = {
+			hour: 5,
+			minute: 0,
+			second: 0,
+			meridiem: "PM"
+		}, this._invalidFromInput = !1;
+	}
+	static get observedAttributes() {
+		return [
+			"value",
+			"label",
+			"info",
+			"disabled",
+			"id",
+			"name",
+			"required",
+			"readonly",
+			"range",
+			"hours",
+			"minutes",
+			"seconds",
+			"error",
+			"error-message"
+		];
+	}
+	connectedCallback() {
+		this.classList.add("mint-time-picker-host"), this._parseAndApplyValue(this.getAttribute("value") || ""), this.render();
+	}
+	disconnectedCallback() {
+		this._popoverObserver &&= (this._popoverObserver.disconnect(), null);
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) {
+			if (e === "value") {
+				if (this._parseAndApplyValue(n || ""), this._syncHiddenInput(), this._syncInputValue(), this._popover) {
+					let e = this._popover.querySelector("[data-mint-time-picker-body=\"true\"]");
+					e && this._buildPopoverContent(e);
+				}
+				return;
+			}
+			e !== "error" && e !== "error-message" && (this._invalidFromInput = !1), this.render();
+		}
+	}
+	get value() {
+		return this.getValue();
+	}
+	set value(e) {
+		this.setValue(e || "");
+	}
+	getValue() {
+		return this.getAttribute("value") || "";
+	}
+	setValue(e) {
+		e ? this.setAttribute("value", e) : this.removeAttribute("value"), this._parseAndApplyValue(e || ""), this._syncHiddenInput(), this._syncInputValue();
+	}
+	isRange() {
+		return this.getAttribute("range") === "true";
+	}
+	isHoursEnabled() {
+		let e = this.getAttribute("hours");
+		return e === null ? !0 : e !== "false";
+	}
+	isMinutesEnabled() {
+		let e = this.getAttribute("minutes");
+		return e === null ? !0 : e !== "false";
+	}
+	isSecondsEnabled() {
+		let e = this.getAttribute("seconds");
+		return e === null ? !1 : e !== "false";
+	}
+	isDisabled() {
+		return this.getAttribute("disabled") === "true";
+	}
+	isReadonly() {
+		return this.getAttribute("readonly") === "true";
+	}
+	isRequired() {
+		return this.getAttribute("required") === "true";
+	}
+	hasExternalError() {
+		return this.getAttribute("error") === "true";
+	}
+	getExternalErrorMessage() {
+		return this.getAttribute("error-message") || "";
+	}
+	getLabel() {
+		return this.getAttribute("label") || "";
+	}
+	getInfo() {
+		return this.getAttribute("info") || "";
+	}
+	getName() {
+		return this.getAttribute("name") || "";
+	}
+	_getEffectiveError() {
+		return {
+			hasError: this.hasExternalError(),
+			message: this.getExternalErrorMessage()
+		};
+	}
+	_formatParts(e) {
+		let t = this.isHoursEnabled(), n = this.isMinutesEnabled(), r = this.isSecondsEnabled(), i = [];
+		return t && i.push(e.hour.toString()), n && i.push(e.minute.toString().padStart(2, "0")), r && i.push(e.second.toString().padStart(2, "0")), t ? `${i.join(":")} ${e.meridiem.toLowerCase()}` : i.join(":");
+	}
+	_to24Hour(e) {
+		let t = e.hour % 12;
+		return e.meridiem === "PM" && (t += 12), {
+			hour: t,
+			minute: e.minute,
+			second: e.second
+		};
+	}
+	_formatParts24(e) {
+		let t = this.isHoursEnabled(), n = this.isMinutesEnabled(), r = this.isSecondsEnabled(), i = this._to24Hour(e), a = [];
+		return t && a.push(i.hour.toString().padStart(2, "0")), n && a.push(i.minute.toString().padStart(2, "0")), r && a.push(i.second.toString().padStart(2, "0")), a.join(":");
+	}
+	_getDisplayValue() {
+		return this.isRange() ? `${this._formatParts(this._rangeStart)} - ${this._formatParts(this._rangeEnd)}` : this._formatParts(this._single);
+	}
+	_getOutputValue() {
+		return this.isRange() ? `${this._formatParts24(this._rangeStart)} - ${this._formatParts24(this._rangeEnd)}` : this._formatParts24(this._single);
+	}
+	_getExpectedFormat() {
+		let e = this.isHoursEnabled(), t = this.isMinutesEnabled(), n = this.isSecondsEnabled(), r = [];
+		e && r.push("h"), t && r.push("mm"), n && r.push("ss");
+		let i = e ? `${r.join(":")} am/pm` : r.join(":");
+		return this.isRange() ? `${i} - ${i}` : i;
+	}
+	_syncHiddenInput() {
+		this._hiddenInput && (this._hiddenInput.value = this.getValue() || this._getOutputValue());
+	}
+	_syncInputValue() {
+		this._inputEl && (this._inputEl.value = this._getDisplayValue(), typeof this._inputEl.render == "function" && this._inputEl.render());
+	}
+	_emitChangeFromPicker() {
+		let e = this._getOutputValue();
+		this._invalidFromInput = !1, this.setAttribute("value", e), this._syncHiddenInput(), this._syncInputValue(), this.dispatchEvent(new Event("input", {
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+	}
+	_parseSingle(e) {
+		let t = this.isHoursEnabled(), n = this.isMinutesEnabled(), r = this.isSecondsEnabled(), i = e.trim();
+		if (t) {
+			let e = i.match(/^(\d{1,2})(?::(\d{2}))?(?::(\d{2}))?\s*(am|pm)$/i);
+			if (!e) return null;
+			let t = Number(e[1]), a = Number(e[2] ?? 0), o = Number(e[3] ?? 0), s = e[4].toUpperCase();
+			return t < 1 || t > 12 || n && (a < 0 || a > 59) || r && (o < 0 || o > 59) ? null : {
+				hour: t,
+				minute: a,
+				second: o,
+				meridiem: s
+			};
+		}
+		let a = i.match(/^(\d{2})(?::(\d{2}))?$/);
+		if (!a) return null;
+		let o = Number(a[1]), s = Number(a[2] ?? 0);
+		return n && (o < 0 || o > 59) || r && (s < 0 || s > 59) ? null : {
+			hour: 12,
+			minute: o,
+			second: s,
+			meridiem: "AM"
+		};
+	}
+	_parseSingleOutput24(e) {
+		let t = this.isHoursEnabled(), n = this.isMinutesEnabled(), r = this.isSecondsEnabled(), i = e.trim();
+		if (t) {
+			let e = i.match(/^(\d{2})(?::(\d{2}))?(?::(\d{2}))?$/);
+			if (!e) return null;
+			let t = Number(e[1]), a = Number(e[2] ?? 0), o = Number(e[3] ?? 0);
+			if (t < 0 || t > 23 || n && (a < 0 || a > 59) || r && (o < 0 || o > 59)) return null;
+			let s = t >= 12 ? "PM" : "AM";
+			return {
+				hour: t % 12 == 0 ? 12 : t % 12,
+				minute: a,
+				second: o,
+				meridiem: s
+			};
+		}
+		let a = i.match(/^(\d{2})(?::(\d{2}))?$/);
+		if (!a) return null;
+		let o = Number(a[1]), s = Number(a[2] ?? 0);
+		return n && (o < 0 || o > 59) || r && (s < 0 || s > 59) ? null : {
+			hour: 12,
+			minute: o,
+			second: s,
+			meridiem: "AM"
+		};
+	}
+	_parseAndApplyValue(e) {
+		if (!e) return !1;
+		if (this.isRange()) {
+			let [t, n] = e.split("-").map((e) => e.trim()), r = this._parseSingleOutput24(t || ""), i = this._parseSingleOutput24(n || "");
+			return !r || !i ? !1 : (this._rangeStart = r, this._rangeEnd = i, !0);
+		}
+		let t = this._parseSingleOutput24(e);
+		return t ? (this._single = t, !0) : !1;
+	}
+	_parseAndApplyDisplayValue(e) {
+		if (!e) return !1;
+		if (this.isRange()) {
+			let [t, n] = e.split("-").map((e) => e.trim()), r = this._parseSingle(t || ""), i = this._parseSingle(n || "");
+			return !r || !i ? !1 : (this._rangeStart = r, this._rangeEnd = i, !0);
+		}
+		let t = this._parseSingle(e);
+		return t ? (this._single = t, !0) : !1;
+	}
+	_handleTypedValue(e) {
+		let t = e.trim();
+		if (!t) {
+			this._invalidFromInput = !1, this.removeAttribute("value"), this._syncHiddenInput(), this._syncInputValue();
+			return;
+		}
+		if (!this._parseAndApplyDisplayValue(t)) {
+			this._invalidFromInput = !0, this.removeAttribute("value"), this._inputEl && (this._inputEl.value = ""), this._syncHiddenInput(), this.render(), this.dispatchEvent(new Event("input", {
+				bubbles: !0,
+				composed: !0
+			})), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+			return;
+		}
+		this._invalidFromInput = !1;
+		let n = this._getOutputValue();
+		this.setAttribute("value", n), this._syncHiddenInput(), this._syncInputValue(), this.dispatchEvent(new Event("input", {
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+	}
+	_buildColumn(e, t, n, r = !0, i = "standard", a = "Time") {
+		let o = document.createElement("div");
+		return o.className = `mint-time-picker-column mint-time-picker-column-${i}${r ? " mint-time-picker-column-divider" : ""}`, o.setAttribute("role", "group"), o.setAttribute("aria-label", a), e.forEach((e) => {
+			let r = document.createElement("button");
+			r.type = "button";
+			let i = e === t;
+			r.className = `mint-time-picker-option${i ? " is-selected" : ""}`, r.dataset.selected = i ? "true" : "false", r.setAttribute("aria-pressed", String(i)), r.setAttribute("aria-label", `${a}: ${e}`), r.textContent = e, r.addEventListener("click", () => n(e)), o.appendChild(r);
+		}), o;
+	}
+	_centerSelectedInColumn(e, t = 0) {
+		let n = e.querySelector("button[data-selected=\"true\"]");
+		if (!n) return;
+		let r = n.offsetTop - (e.clientHeight / 2 - n.clientHeight / 2) - t;
+		e.scrollTop = Math.max(0, r);
+	}
+	_centerAllColumnsInPopoverBody() {
+		if (!this._popover) return;
+		let e = this._popover.querySelector("[data-mint-time-picker-body=\"true\"]");
+		if (!e) return;
+		let t = Array.from(e.querySelectorAll(".mint-time-picker-column")), n = this.isRange() ? 20 : 0;
+		t.forEach((e) => this._centerSelectedInColumn(e, n));
+	}
+	_setupPopoverOpenObserver() {
+		this._popover && (this._popoverObserver &&= (this._popoverObserver.disconnect(), null), this._popoverObserver = new MutationObserver(() => {
+			this._popover?.getAttribute("open") === "true" && requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					this._centerAllColumnsInPopoverBody();
+				});
+			});
+		}), this._popoverObserver.observe(this._popover, {
+			attributes: !0,
+			attributeFilter: ["open"]
+		}));
+	}
+	_buildPickerSet(e, t, n) {
+		let r = this.isHoursEnabled(), i = this.isMinutesEnabled(), a = this.isSecondsEnabled(), o = document.createElement("div"), s = (r ? 1 : 0) + (i ? 1 : 0) + (a ? 1 : 0) + (r ? 1 : 0);
+		o.className = "mint-time-picker-wheel", o.style.gridTemplateColumns = `repeat(${Math.max(s, 1)}, minmax(0, 1fr))`;
+		let c = Array.from({ length: 12 }, (e, t) => (t + 1).toString().padStart(2, "0")), l = Array.from({ length: 60 }, (e, t) => t.toString().padStart(2, "0")), u = Array.from({ length: 60 }, (e, t) => t.toString().padStart(2, "0")), d = ["AM", "PM"], f = [];
+		r && f.push(this._buildColumn(c, t.hour.toString().padStart(2, "0"), (e) => {
+			n({
+				...t,
+				hour: Number(e)
+			});
+		}, !0, "tall", "Hour")), i && f.push(this._buildColumn(l, t.minute.toString().padStart(2, "0"), (e) => {
+			n({
+				...t,
+				minute: Number(e)
+			});
+		}, !0, "tall", "Minute")), a && f.push(this._buildColumn(u, t.second.toString().padStart(2, "0"), (e) => {
+			n({
+				...t,
+				second: Number(e)
+			});
+		}, !0, "tall", "Second")), r && f.push(this._buildColumn(d, t.meridiem, (e) => {
+			n({
+				...t,
+				meridiem: e
+			});
+		}, !0, "compact", "Meridiem")), f.forEach((e, t) => {
+			t === f.length - 1 && e.classList.remove("mint-time-picker-column-divider"), o.appendChild(e);
+		}), e.appendChild(o);
+	}
+	_buildPopoverContent(e) {
+		if (e.innerHTML = "", !this.isRange()) {
+			this._buildPickerSet(e, this._single, (t) => {
+				this._single = t, this._emitChangeFromPicker(), this._buildPopoverContent(e);
+			});
+			return;
+		}
+		let t = document.createElement("div");
+		t.className = "mint-time-picker-range";
+		let n = document.createElement("div"), r = document.createElement("mint-text");
+		r.setAttribute("variant", "muted"), r.className = "mint-time-picker-range-label", r.textContent = "Start", n.appendChild(r), this._buildPickerSet(n, this._rangeStart, (t) => {
+			this._rangeStart = t, this._emitChangeFromPicker(), this._buildPopoverContent(e);
+		});
+		let i = document.createElement("div"), a = document.createElement("mint-text");
+		a.setAttribute("variant", "muted"), a.className = "mint-time-picker-range-label", a.textContent = "End", i.appendChild(a), this._buildPickerSet(i, this._rangeEnd, (t) => {
+			this._rangeEnd = t, this._emitChangeFromPicker(), this._buildPopoverContent(e);
+		}), t.appendChild(n), t.appendChild(i), e.appendChild(t), requestAnimationFrame(() => {
+			this._centerAllColumnsInPopoverBody();
+		});
+	}
+	render() {
+		let e = this.isDisabled(), t = this.isReadonly(), n = this._getEffectiveError();
+		this.innerHTML = "";
+		let r = document.createElement("div");
+		r.className = "mint-time-picker-control", this._inputEl = document.createElement("mint-input"), this._inputEl.id = this._triggerId, this._inputEl.classList.add("mint-time-picker-trigger"), this._inputEl.setAttribute("type", "text"), this._inputEl.setAttribute("icon", "clock"), this._inputEl.setAttribute("placeholder", this._getExpectedFormat()), this._inputEl.setAttribute("label", this.getLabel()), this._inputEl.setAttribute("info", this.getInfo()), this._inputEl.setAttribute("value", this._getDisplayValue()), this._inputEl.setAttribute("error", n.hasError ? "true" : "false"), this._inputEl.setAttribute("error-message", n.message || ""), e && this._inputEl.setAttribute("disabled", "true"), t && this._inputEl.setAttribute("readonly", "true"), this._inputEl.addEventListener("change", (n) => {
+			if (e || t) return;
+			let r = n.target;
+			this._handleTypedValue((r?.value || "").toString());
+		}), this._inputEl.addEventListener("blur", (n) => {
+			if (e || t) return;
+			let r = n.target;
+			this._handleTypedValue((r?.value || "").toString());
+		}, !0), r.appendChild(this._inputEl), this._hiddenInput = document.createElement("input"), this._hiddenInput.type = "hidden", this._hiddenInput.name = this.getName(), this._hiddenInput.required = this.isRequired(), r.appendChild(this._hiddenInput), this._syncHiddenInput(), this._popover = document.createElement("mint-popover"), this._popover.setAttribute("trigger-id", this._triggerId), this._popover.setAttribute("direction", "down"), this._popover.setAttribute("padding", "0"), this._popover.setAttribute("distance", "6px"), (e || t) && this._popover.setAttribute("open", "false");
+		let i = document.createElement("div");
+		i.setAttribute("data-mint-time-picker-body", "true"), i.className = "mint-time-picker-popover", this._buildPopoverContent(i), this._popover.appendChild(i), r.appendChild(this._popover), this._setupPopoverOpenObserver(), this.appendChild(r);
+	}
+};
+customElements.get("mint-time-picker") || e("mint-time-picker", t);
+//#endregion
+export { t as default };

package/dist/components/time-picker/index.cjs

@@ -0,0 +1 @@
+require(`../chunks/icon-dG8sLTBn.js`);const e=require(`../chunks/register-element-tCL_F1YI.js`);require(`../chunks/text-BmHZbBMo.js`),require(`../chunks/input-BoiREc6Y.js`),require(`../chunks/popover-BeaGf_JC.js`);var t=class extends HTMLElement{constructor(...e){super(...e),this._triggerId=`mint-time-picker-trigger-${Math.random().toString(36).slice(2,10)}`,this._popover=null,this._popoverObserver=null,this._inputEl=null,this._hiddenInput=null,this._single={hour:9,minute:0,second:0,meridiem:`AM`},this._rangeStart={hour:9,minute:0,second:0,meridiem:`AM`},this._rangeEnd={hour:5,minute:0,second:0,meridiem:`PM`},this._invalidFromInput=!1}static get observedAttributes(){return[`value`,`label`,`info`,`disabled`,`id`,`name`,`required`,`readonly`,`range`,`hours`,`minutes`,`seconds`,`error`,`error-message`]}connectedCallback(){this.classList.add(`mint-time-picker-host`),this._parseAndApplyValue(this.getAttribute(`value`)||``),this.render()}disconnectedCallback(){this._popoverObserver&&=(this._popoverObserver.disconnect(),null)}attributeChangedCallback(e,t,n){if(t!==n){if(e===`value`){if(this._parseAndApplyValue(n||``),this._syncHiddenInput(),this._syncInputValue(),this._popover){let e=this._popover.querySelector(`[data-mint-time-picker-body="true"]`);e&&this._buildPopoverContent(e)}return}e!==`error`&&e!==`error-message`&&(this._invalidFromInput=!1),this.render()}}get value(){return this.getValue()}set value(e){this.setValue(e||``)}getValue(){return this.getAttribute(`value`)||``}setValue(e){e?this.setAttribute(`value`,e):this.removeAttribute(`value`),this._parseAndApplyValue(e||``),this._syncHiddenInput(),this._syncInputValue()}isRange(){return this.getAttribute(`range`)===`true`}isHoursEnabled(){let e=this.getAttribute(`hours`);return e===null?!0:e!==`false`}isMinutesEnabled(){let e=this.getAttribute(`minutes`);return e===null?!0:e!==`false`}isSecondsEnabled(){let e=this.getAttribute(`seconds`);return e===null?!1:e!==`false`}isDisabled(){return this.getAttribute(`disabled`)===`true`}isReadonly(){return this.getAttribute(`readonly`)===`true`}isRequired(){return this.getAttribute(`required`)===`true`}hasExternalError(){return this.getAttribute(`error`)===`true`}getExternalErrorMessage(){return this.getAttribute(`error-message`)||``}getLabel(){return this.getAttribute(`label`)||``}getInfo(){return this.getAttribute(`info`)||``}getName(){return this.getAttribute(`name`)||``}_getEffectiveError(){return{hasError:this.hasExternalError(),message:this.getExternalErrorMessage()}}_formatParts(e){let t=this.isHoursEnabled(),n=this.isMinutesEnabled(),r=this.isSecondsEnabled(),i=[];return t&&i.push(e.hour.toString()),n&&i.push(e.minute.toString().padStart(2,`0`)),r&&i.push(e.second.toString().padStart(2,`0`)),t?`${i.join(`:`)} ${e.meridiem.toLowerCase()}`:i.join(`:`)}_to24Hour(e){let t=e.hour%12;return e.meridiem===`PM`&&(t+=12),{hour:t,minute:e.minute,second:e.second}}_formatParts24(e){let t=this.isHoursEnabled(),n=this.isMinutesEnabled(),r=this.isSecondsEnabled(),i=this._to24Hour(e),a=[];return t&&a.push(i.hour.toString().padStart(2,`0`)),n&&a.push(i.minute.toString().padStart(2,`0`)),r&&a.push(i.second.toString().padStart(2,`0`)),a.join(`:`)}_getDisplayValue(){return this.isRange()?`${this._formatParts(this._rangeStart)} - ${this._formatParts(this._rangeEnd)}`:this._formatParts(this._single)}_getOutputValue(){return this.isRange()?`${this._formatParts24(this._rangeStart)} - ${this._formatParts24(this._rangeEnd)}`:this._formatParts24(this._single)}_getExpectedFormat(){let e=this.isHoursEnabled(),t=this.isMinutesEnabled(),n=this.isSecondsEnabled(),r=[];e&&r.push(`h`),t&&r.push(`mm`),n&&r.push(`ss`);let i=e?`${r.join(`:`)} am/pm`:r.join(`:`);return this.isRange()?`${i} - ${i}`:i}_syncHiddenInput(){this._hiddenInput&&(this._hiddenInput.value=this.getValue()||this._getOutputValue())}_syncInputValue(){this._inputEl&&(this._inputEl.value=this._getDisplayValue(),typeof this._inputEl.render==`function`&&this._inputEl.render())}_emitChangeFromPicker(){let e=this._getOutputValue();this._invalidFromInput=!1,this.setAttribute(`value`,e),this._syncHiddenInput(),this._syncInputValue(),this.dispatchEvent(new Event(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_parseSingle(e){let t=this.isHoursEnabled(),n=this.isMinutesEnabled(),r=this.isSecondsEnabled(),i=e.trim();if(t){let e=i.match(/^(\d{1,2})(?::(\d{2}))?(?::(\d{2}))?\s*(am|pm)$/i);if(!e)return null;let t=Number(e[1]),a=Number(e[2]??0),o=Number(e[3]??0),s=e[4].toUpperCase();return t<1||t>12||n&&(a<0||a>59)||r&&(o<0||o>59)?null:{hour:t,minute:a,second:o,meridiem:s}}let a=i.match(/^(\d{2})(?::(\d{2}))?$/);if(!a)return null;let o=Number(a[1]),s=Number(a[2]??0);return n&&(o<0||o>59)||r&&(s<0||s>59)?null:{hour:12,minute:o,second:s,meridiem:`AM`}}_parseSingleOutput24(e){let t=this.isHoursEnabled(),n=this.isMinutesEnabled(),r=this.isSecondsEnabled(),i=e.trim();if(t){let e=i.match(/^(\d{2})(?::(\d{2}))?(?::(\d{2}))?$/);if(!e)return null;let t=Number(e[1]),a=Number(e[2]??0),o=Number(e[3]??0);if(t<0||t>23||n&&(a<0||a>59)||r&&(o<0||o>59))return null;let s=t>=12?`PM`:`AM`;return{hour:t%12==0?12:t%12,minute:a,second:o,meridiem:s}}let a=i.match(/^(\d{2})(?::(\d{2}))?$/);if(!a)return null;let o=Number(a[1]),s=Number(a[2]??0);return n&&(o<0||o>59)||r&&(s<0||s>59)?null:{hour:12,minute:o,second:s,meridiem:`AM`}}_parseAndApplyValue(e){if(!e)return!1;if(this.isRange()){let[t,n]=e.split(`-`).map(e=>e.trim()),r=this._parseSingleOutput24(t||``),i=this._parseSingleOutput24(n||``);return!r||!i?!1:(this._rangeStart=r,this._rangeEnd=i,!0)}let t=this._parseSingleOutput24(e);return t?(this._single=t,!0):!1}_parseAndApplyDisplayValue(e){if(!e)return!1;if(this.isRange()){let[t,n]=e.split(`-`).map(e=>e.trim()),r=this._parseSingle(t||``),i=this._parseSingle(n||``);return!r||!i?!1:(this._rangeStart=r,this._rangeEnd=i,!0)}let t=this._parseSingle(e);return t?(this._single=t,!0):!1}_handleTypedValue(e){let t=e.trim();if(!t){this._invalidFromInput=!1,this.removeAttribute(`value`),this._syncHiddenInput(),this._syncInputValue();return}if(!this._parseAndApplyDisplayValue(t)){this._invalidFromInput=!0,this.removeAttribute(`value`),this._inputEl&&(this._inputEl.value=``),this._syncHiddenInput(),this.render(),this.dispatchEvent(new Event(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}));return}this._invalidFromInput=!1;let n=this._getOutputValue();this.setAttribute(`value`,n),this._syncHiddenInput(),this._syncInputValue(),this.dispatchEvent(new Event(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_buildColumn(e,t,n,r=!0,i=`standard`,a=`Time`){let o=document.createElement(`div`);return o.className=`mint-time-picker-column mint-time-picker-column-${i}${r?` mint-time-picker-column-divider`:``}`,o.setAttribute(`role`,`group`),o.setAttribute(`aria-label`,a),e.forEach(e=>{let r=document.createElement(`button`);r.type=`button`;let i=e===t;r.className=`mint-time-picker-option${i?` is-selected`:``}`,r.dataset.selected=i?`true`:`false`,r.setAttribute(`aria-pressed`,String(i)),r.setAttribute(`aria-label`,`${a}: ${e}`),r.textContent=e,r.addEventListener(`click`,()=>n(e)),o.appendChild(r)}),o}_centerSelectedInColumn(e,t=0){let n=e.querySelector(`button[data-selected="true"]`);if(!n)return;let r=n.offsetTop-(e.clientHeight/2-n.clientHeight/2)-t;e.scrollTop=Math.max(0,r)}_centerAllColumnsInPopoverBody(){if(!this._popover)return;let e=this._popover.querySelector(`[data-mint-time-picker-body="true"]`);if(!e)return;let t=Array.from(e.querySelectorAll(`.mint-time-picker-column`)),n=this.isRange()?20:0;t.forEach(e=>this._centerSelectedInColumn(e,n))}_setupPopoverOpenObserver(){this._popover&&(this._popoverObserver&&=(this._popoverObserver.disconnect(),null),this._popoverObserver=new MutationObserver(()=>{this._popover?.getAttribute(`open`)===`true`&&requestAnimationFrame(()=>{requestAnimationFrame(()=>{this._centerAllColumnsInPopoverBody()})})}),this._popoverObserver.observe(this._popover,{attributes:!0,attributeFilter:[`open`]}))}_buildPickerSet(e,t,n){let r=this.isHoursEnabled(),i=this.isMinutesEnabled(),a=this.isSecondsEnabled(),o=document.createElement(`div`),s=(r?1:0)+(i?1:0)+(a?1:0)+(r?1:0);o.className=`mint-time-picker-wheel`,o.style.gridTemplateColumns=`repeat(${Math.max(s,1)}, minmax(0, 1fr))`;let c=Array.from({length:12},(e,t)=>(t+1).toString().padStart(2,`0`)),l=Array.from({length:60},(e,t)=>t.toString().padStart(2,`0`)),u=Array.from({length:60},(e,t)=>t.toString().padStart(2,`0`)),d=[`AM`,`PM`],f=[];r&&f.push(this._buildColumn(c,t.hour.toString().padStart(2,`0`),e=>{n({...t,hour:Number(e)})},!0,`tall`,`Hour`)),i&&f.push(this._buildColumn(l,t.minute.toString().padStart(2,`0`),e=>{n({...t,minute:Number(e)})},!0,`tall`,`Minute`)),a&&f.push(this._buildColumn(u,t.second.toString().padStart(2,`0`),e=>{n({...t,second:Number(e)})},!0,`tall`,`Second`)),r&&f.push(this._buildColumn(d,t.meridiem,e=>{n({...t,meridiem:e})},!0,`compact`,`Meridiem`)),f.forEach((e,t)=>{t===f.length-1&&e.classList.remove(`mint-time-picker-column-divider`),o.appendChild(e)}),e.appendChild(o)}_buildPopoverContent(e){if(e.innerHTML=``,!this.isRange()){this._buildPickerSet(e,this._single,t=>{this._single=t,this._emitChangeFromPicker(),this._buildPopoverContent(e)});return}let t=document.createElement(`div`);t.className=`mint-time-picker-range`;let n=document.createElement(`div`),r=document.createElement(`mint-text`);r.setAttribute(`variant`,`muted`),r.className=`mint-time-picker-range-label`,r.textContent=`Start`,n.appendChild(r),this._buildPickerSet(n,this._rangeStart,t=>{this._rangeStart=t,this._emitChangeFromPicker(),this._buildPopoverContent(e)});let i=document.createElement(`div`),a=document.createElement(`mint-text`);a.setAttribute(`variant`,`muted`),a.className=`mint-time-picker-range-label`,a.textContent=`End`,i.appendChild(a),this._buildPickerSet(i,this._rangeEnd,t=>{this._rangeEnd=t,this._emitChangeFromPicker(),this._buildPopoverContent(e)}),t.appendChild(n),t.appendChild(i),e.appendChild(t),requestAnimationFrame(()=>{this._centerAllColumnsInPopoverBody()})}render(){let e=this.isDisabled(),t=this.isReadonly(),n=this._getEffectiveError();this.innerHTML=``;let r=document.createElement(`div`);r.className=`mint-time-picker-control`,this._inputEl=document.createElement(`mint-input`),this._inputEl.id=this._triggerId,this._inputEl.classList.add(`mint-time-picker-trigger`),this._inputEl.setAttribute(`type`,`text`),this._inputEl.setAttribute(`icon`,`clock`),this._inputEl.setAttribute(`placeholder`,this._getExpectedFormat()),this._inputEl.setAttribute(`label`,this.getLabel()),this._inputEl.setAttribute(`info`,this.getInfo()),this._inputEl.setAttribute(`value`,this._getDisplayValue()),this._inputEl.setAttribute(`error`,n.hasError?`true`:`false`),this._inputEl.setAttribute(`error-message`,n.message||``),e&&this._inputEl.setAttribute(`disabled`,`true`),t&&this._inputEl.setAttribute(`readonly`,`true`),this._inputEl.addEventListener(`change`,n=>{if(e||t)return;let r=n.target;this._handleTypedValue((r?.value||``).toString())}),this._inputEl.addEventListener(`blur`,n=>{if(e||t)return;let r=n.target;this._handleTypedValue((r?.value||``).toString())},!0),r.appendChild(this._inputEl),this._hiddenInput=document.createElement(`input`),this._hiddenInput.type=`hidden`,this._hiddenInput.name=this.getName(),this._hiddenInput.required=this.isRequired(),r.appendChild(this._hiddenInput),this._syncHiddenInput(),this._popover=document.createElement(`mint-popover`),this._popover.setAttribute(`trigger-id`,this._triggerId),this._popover.setAttribute(`direction`,`down`),this._popover.setAttribute(`padding`,`0`),this._popover.setAttribute(`distance`,`6px`),(e||t)&&this._popover.setAttribute(`open`,`false`);let i=document.createElement(`div`);i.setAttribute(`data-mint-time-picker-body`,`true`),i.className=`mint-time-picker-popover`,this._buildPopoverContent(i),this._popover.appendChild(i),r.appendChild(this._popover),this._setupPopoverOpenObserver(),this.appendChild(r)}};customElements.get(`mint-time-picker`)||e.t(`mint-time-picker`,t),module.exports=t;

package/dist/components/time-picker/index.d.ts

@@ -1,3 +1 @@
-import './TimePicker';
-export { default } from './TimePicker';
-//# sourceMappingURL=index.d.ts.map
+export { default, MintTimePicker } from './TimePicker'

package/dist/components/time-picker/index.d.ts.map

@@ -1 +1,10 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/time-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA"}
+{
+  "version": 3,
+  "file": "index.d.ts",
+  "sourceRoot": "",
+  "sources": [
+    "index.d.ts"
+  ],
+  "names": [],
+  "mappings": "AAAA"
+}