monobill-mintui 0.6.612 → 0.6.613

package/dist/components/select/Select.d.ts

@@ -1,37 +1 @@
-import '../icon/index';
-declare class MintSelect extends HTMLElement {
-    static get observedAttributes(): string[];
-    private static _lightDomOptionHideStylesInjected;
-    private static _ensureLightDomOptionHideStyles;
-    private _select;
-    private _wrapper;
-    private _caretUpIcon;
-    private _caretDownIcon;
-    private _changeHandler;
-    private _optionObserver;
-    private _childrenObserver;
-    private _hostOptionsObserverRaf;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    isLoading(): boolean;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    getName(): string;
-    getValue(): string;
-    setValue(value: any): void;
-    get value(): string;
-    set value(newValue: any);
-    isDisabled(): boolean;
-    isMultiple(): boolean;
-    hasError(): boolean;
-    getErrorMessage(): string;
-    getId(): string;
-    getLabel(): string;
-    getInfo(): string;
-    getSelectClasses(): string;
-    render(): void;
-    private _renderSkeleton;
-    private _renderErrorState;
-}
-export default MintSelect;
-//# sourceMappingURL=Select.d.ts.map
+export { MintSelect as default, MintSelect } from '../../mintui-elements'

package/dist/components/select/Select.d.ts.map

@@ -1 +1,10 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.ts"],"names":[],"mappings":"AAEA,OAAO,eAAe,CAAA;AAItB,cAAM,UAAW,SAAQ,WAAW;IAClC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,MAAM,CAAC,iCAAiC,CAAQ;IAExD,OAAO,CAAC,MAAM,CAAC,+BAA+B;IAgB9C,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,QAAQ,CAA2B;IAC3C,OAAO,CAAC,YAAY,CAA2B;IAC/C,OAAO,CAAC,cAAc,CAA2B;IACjD,OAAO,CAAC,cAAc,CAAoC;IAC1D,OAAO,CAAC,eAAe,CAAgC;IACvD,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,uBAAuB,CAAsB;;IAOrD,iBAAiB,IAAI,IAAI;IAmEzB,oBAAoB,IAAI,IAAI;IAqB5B,SAAS,IAAI,OAAO;IAKpB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IA6C9F,OAAO,IAAI,MAAM;IAIjB,QAAQ,IAAI,MAAM;IAalB,QAAQ,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IA0B1B,IAAI,KAAK,IAAI,MAAM,CAMlB;IAED,IAAI,KAAK,CAAC,QAAQ,EAAE,GAAG,EAgCtB;IAED,UAAU,IAAI,OAAO;IAKrB,UAAU,IAAI,OAAO;IAKrB,QAAQ,IAAI,OAAO;IAKnB,eAAe,IAAI,MAAM;IAIzB,KAAK,IAAI,MAAM;IAIf,QAAQ,IAAI,MAAM;IAIlB,OAAO,IAAI,MAAM;IAIjB,gBAAgB,IAAI,MAAM;IA2C1B,MAAM,IAAI,IAAI;IA6Pd,OAAO,CAAC,eAAe;IAyDvB,OAAO,CAAC,iBAAiB;CAmB1B;AAOD,eAAe,UAAU,CAAA"}
+{
+  "version": 3,
+  "file": "Select.d.ts",
+  "sourceRoot": "",
+  "sources": [
+    "Select.d.ts"
+  ],
+  "names": [],
+  "mappings": "AAAA"
+}

package/dist/components/select/browser.js

@@ -0,0 +1,285 @@
+
+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('icon', '../../icon.css')
+__mintLoadStyle('select', '../../select.css')
+import "../chunks/icon-gQAtsERy.js";
+import { t as e } from "../chunks/register-element-BFYmIynH.js";
+import "../chunks/icon-C0OLmjDY.js";
+import "../chunks/caret-up-D_6oa7o1.js";
+import "../chunks/caret-down-Ch6IfR7r.js";
+//#region src/components/select/Select.ts
+var t = "data-mint-select-part", n = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"name",
+			"value",
+			"disabled",
+			"id",
+			"required",
+			"label",
+			"info",
+			"error",
+			"error-message",
+			"multiple",
+			"loading",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby"
+		];
+	}
+	constructor() {
+		super(), this._select = null, this._wrapper = null, this._caretUpIcon = null, this._caretDownIcon = null, this._changeHandler = null, this._optionObserver = null, this._childrenObserver = null, this._hostOptionsObserverRaf = null, this._generatedControlId = `mint-select-${Math.random().toString(36).slice(2, 10)}`;
+	}
+	connectedCallback() {
+		this.classList.add("mint-select-host"), this.getLabel() || console.error("mint-select: The \"label\" attribute is required. Please provide a label for the select."), this.render(), this._childrenObserver && this._childrenObserver.disconnect(), this._childrenObserver = new MutationObserver((e) => {
+			if (e.some((e) => {
+				let t = e.target;
+				if (this._select && (t === this._select || this._select.contains(t))) return !1;
+				let n = Array.from(e.addedNodes).some((e) => e.nodeType === Node.ELEMENT_NODE && (e.tagName === "OPTION" || e.tagName === "OPTGROUP")) || Array.from(e.removedNodes).some((e) => e.nodeType === Node.ELEMENT_NODE && (e.tagName === "OPTION" || e.tagName === "OPTGROUP")), r = e.type === "attributes" && e.target.nodeType === Node.ELEMENT_NODE && (e.target.tagName === "OPTION" || e.target.tagName === "OPTGROUP");
+				return n || r;
+			})) {
+				if (this._hostOptionsObserverRaf !== null) return;
+				this._hostOptionsObserverRaf = requestAnimationFrame(() => {
+					this._hostOptionsObserverRaf = null, this.isConnected && this.render();
+				});
+			}
+		}), this._childrenObserver.observe(this, {
+			childList: !0,
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: [
+				"value",
+				"selected",
+				"disabled"
+			]
+		});
+	}
+	disconnectedCallback() {
+		this._select && this._changeHandler && (this._select.removeEventListener("change", this._changeHandler), this._changeHandler = null), this._optionObserver &&= (this._optionObserver.disconnect(), null), this._childrenObserver &&= (this._childrenObserver.disconnect(), null), this._hostOptionsObserverRaf !== null && (cancelAnimationFrame(this._hostOptionsObserverRaf), this._hostOptionsObserverRaf = null);
+	}
+	isLoading() {
+		let e = this.getAttribute("loading");
+		return e !== null && e !== "false";
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) {
+			if (e === "error" || e === "error-message") {
+				this._renderErrorState(), this._select && (this._select.className = this.getSelectClasses(), this._select.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), this._syncSelectAccessibility());
+				return;
+			}
+			if (e === "loading") {
+				this.render();
+				return;
+			}
+			if (e === "value") {
+				if (this._select) if (this.isMultiple()) {
+					let e = [];
+					try {
+						let t = n ? JSON.parse(n) : [];
+						e = Array.isArray(t) ? t.map((e) => String(e)) : [];
+					} catch {
+						e = n ? [String(n)] : [];
+					}
+					Array.from(this._select.options).forEach((t) => {
+						t.selected = e.includes(t.value);
+					});
+				} else this._select.value = n || "";
+				return;
+			}
+			this.render();
+		}
+	}
+	getName() {
+		return this.getAttribute("name") || "";
+	}
+	getValue() {
+		if (this.isMultiple() && this._select) {
+			let e = Array.from(this._select.selectedOptions).map((e) => e.value);
+			return JSON.stringify(e);
+		}
+		return this.hasAttribute("value") ? this.getAttribute("value") || "" : this._select ? this._select.value : "";
+	}
+	setValue(e) {
+		if (this.isMultiple()) {
+			let t = Array.isArray(e) ? e.map((e) => String(e)) : e == null || e === "" ? [] : [String(e)];
+			this.setAttribute("value", JSON.stringify(t)), this._select && Array.from(this._select.options).forEach((e) => {
+				e.selected = t.includes(e.value);
+			});
+			return;
+		}
+		let t = e == null ? "" : String(e);
+		this.setAttribute("value", t), this._select && (this._select.value = t);
+	}
+	get value() {
+		try {
+			return this.getValue() || "";
+		} catch {
+			return "";
+		}
+	}
+	set value(e) {
+		try {
+			if (this.isMultiple()) {
+				this.setValue(e);
+				return;
+			}
+			let t = e || "";
+			(this.getAttribute("value") || "") !== t && this.setAttribute("value", t), this._select && requestAnimationFrame(() => {
+				this._select && (t === "" || Array.from(this._select.options).some((e) => e.value === t)) && this._select.value !== t && (this._select.value = t);
+			});
+		} catch {}
+	}
+	isDisabled() {
+		let e = this.getAttribute("disabled");
+		return e !== null && e !== "false";
+	}
+	isMultiple() {
+		let e = this.getAttribute("multiple");
+		return e !== null && e !== "false";
+	}
+	isRequired() {
+		let e = this.getAttribute("required");
+		return e !== null && e !== "false";
+	}
+	hasError() {
+		return this.getAttribute("error") === "true";
+	}
+	getErrorMessage() {
+		return this.getAttribute("error-message") || "";
+	}
+	getId() {
+		return this.getAttribute("id") || "";
+	}
+	getLabel() {
+		return this.getAttribute("label") || "";
+	}
+	getInfo() {
+		return this.getAttribute("info") || "";
+	}
+	getSelectClasses() {
+		return [
+			"mint-select-control",
+			this.isMultiple() ? "is-multiple" : "",
+			this.hasError() ? "has-error" : ""
+		].filter(Boolean).join(" ");
+	}
+	render() {
+		this._hostOptionsObserverRaf !== null && (cancelAnimationFrame(this._hostOptionsObserverRaf), this._hostOptionsObserverRaf = null);
+		let e = this.isLoading(), n = this.isMultiple(), r = this.getValue(), i = [];
+		this._select && Array.from(this._select.children).forEach((e) => {
+			(e.tagName === "OPTION" || e.tagName === "OPTGROUP") && i.push(e.cloneNode(!0));
+		}), Array.from(this.children).forEach((e) => {
+			e instanceof HTMLElement && e.hasAttribute(t) && e.remove();
+		}), this._wrapper = null, this._select = null;
+		let a = Array.from(this.children).filter((e) => e.tagName === "OPTION" || e.tagName === "OPTGROUP").map((e) => e.cloneNode(!0)), o = this.getLabel(), s = this.getInfo(), c = this.getId() || this._generatedControlId, l = this.getName(), u = this.isDisabled(), d = this.hasError();
+		if (o) {
+			let e = document.createElement("label");
+			e.setAttribute(t, "label"), e.className = "mint-select-label", c && e.setAttribute("for", c);
+			let n = document.createTextNode(o);
+			e.appendChild(n), this.appendChild(e);
+		}
+		this._wrapper = document.createElement("div"), this._wrapper.setAttribute(t, "wrapper"), this._wrapper.className = "mint-select-control-wrap", this.appendChild(this._wrapper), this._select = document.createElement("select"), this._select.className = this.getSelectClasses(), c && (this._select.id = c), l && (this._select.name = l), u && (this._select.disabled = !0), this._select.required = this.isRequired(), n && (this._select.multiple = !0), this._select.setAttribute("aria-invalid", d ? "true" : "false");
+		let f = this.getAttribute("aria-label")?.trim(), p = this.getAttribute("aria-labelledby")?.trim();
+		p ? this._select.setAttribute("aria-labelledby", p) : o ? this._select.removeAttribute("aria-label") : this._select.setAttribute("aria-label", f || "Select an option");
+		let m = a.length > 0 ? a : i;
+		if (m.length > 0 && m.forEach((e) => {
+			this._select.appendChild(e);
+		}), this._select.options.length === 0) {
+			let e = document.createElement("option");
+			e.value = "", e.textContent = "Select an option", e.disabled = !0, e.selected = !0, this._select.appendChild(e);
+		}
+		if (n) {
+			let e = [];
+			try {
+				let t = r ? JSON.parse(r) : [];
+				e = Array.isArray(t) ? t.map((e) => String(e)) : [];
+			} catch {
+				e = r ? [String(r)] : [];
+			}
+			Array.from(this._select.options).forEach((t) => {
+				t.selected = e.includes(t.value);
+			});
+		} else this._select.value = r || "";
+		if (this._changeHandler && this._select && this._select.removeEventListener("change", this._changeHandler), this._changeHandler = (e) => {
+			let t = e.target, r = n ? Array.from(t.selectedOptions).map((e) => e.value) : t.value, i = n ? JSON.stringify(r) : String(r || "");
+			(this.getAttribute("value") || "") !== i && (i ? this.setAttribute("value", i) : this.removeAttribute("value"));
+			let a = new Event("input", {
+				bubbles: !0,
+				cancelable: !0,
+				composed: !0
+			});
+			this.dispatchEvent(a), this.dispatchEvent(new CustomEvent("input", {
+				detail: { value: r },
+				bubbles: !0,
+				cancelable: !0,
+				composed: !0
+			})), this.dispatchEvent(new CustomEvent("change", {
+				detail: { value: r },
+				bubbles: !0,
+				cancelable: !0,
+				composed: !0
+			}));
+		}, this._select.addEventListener("change", this._changeHandler), this._optionObserver && this._optionObserver.disconnect(), this._optionObserver = new MutationObserver(() => {
+			let e = this.getAttribute("value") || this.value || "";
+			this._select && e && requestAnimationFrame(() => {
+				if (this._select) if (n) {
+					let t = [];
+					try {
+						let n = JSON.parse(e);
+						t = Array.isArray(n) ? n.map((e) => String(e)) : [];
+					} catch {
+						t = [String(e)];
+					}
+					Array.from(this._select.options).forEach((e) => {
+						e.selected = t.includes(e.value);
+					});
+				} else Array.from(this._select.options).some((t) => t.value === e) && this._select.value !== e && (this._select.value = e);
+			});
+		}), this._optionObserver.observe(this._select, {
+			childList: !0,
+			subtree: !0
+		}), this._wrapper.appendChild(this._select), n) this._caretUpIcon = null, this._caretDownIcon = null;
+		else {
+			let e = document.createElement("div");
+			e.className = "mint-select-caret", this._caretUpIcon = document.createElement("mint-icon"), this._caretUpIcon.setAttribute("name", "caret-up"), this._caretUpIcon.className = "mint-select-caret-up", this._caretUpIcon.setAttribute("aria-hidden", "true"), e.appendChild(this._caretUpIcon), this._caretDownIcon = document.createElement("mint-icon"), this._caretDownIcon.setAttribute("name", "caret-down"), this._caretDownIcon.className = "mint-select-caret-down", this._caretDownIcon.setAttribute("aria-hidden", "true"), e.appendChild(this._caretDownIcon), this._wrapper.appendChild(e);
+		}
+		if (s) {
+			let e = document.createElement("div");
+			e.setAttribute(t, "info"), e.className = "mint-select-info", e.textContent = s, this.appendChild(e);
+		}
+		this._renderErrorState(), this._syncSelectAccessibility(), this._renderSkeleton(e);
+	}
+	_renderSkeleton(e) {
+		let t = this.querySelector(".mint-select-skeleton-container"), n = this._wrapper;
+		if (e) {
+			t || (t = document.createElement("div"), t.className = "mint-select-skeleton-container", t.setAttribute("aria-hidden", "true"), n ? n.appendChild(t) : this.appendChild(t));
+			let e = t.querySelector(".mint-select-skeleton");
+			e || (e = document.createElement("div"), t.appendChild(e));
+			let r = this.isMultiple();
+			e.classList.toggle("is-multiple", r), e.style.height = r ? "5rem" : "2rem", t.style.display = "block", this._select && (this._select.style.opacity = "0", this._select.style.pointerEvents = "none", this._select.setAttribute("aria-busy", "true"));
+		} else t && (t.style.display = "none"), this._select && (this._select.style.opacity = "1", this._select.style.pointerEvents = "auto", this._select.removeAttribute("aria-busy"));
+	}
+	_renderErrorState() {
+		let e = this.hasError(), n = this.getErrorMessage(), r = this.querySelector(".mint-select-error");
+		e && n ? (r ? r.hasAttribute(t) || r.setAttribute(t, "error") : (r = document.createElement("div"), r.setAttribute(t, "error"), r.className = "mint-select-error", this.appendChild(r)), r.textContent = n) : r && r.remove();
+	}
+	_syncSelectAccessibility() {
+		if (!this._select) return;
+		let e = this._select.id || this._generatedControlId, n = (this.getAttribute("aria-describedby") || "").split(/\s+/).filter(Boolean), r = this.querySelector(`[${t}="info"]`), i = this.querySelector(".mint-select-error");
+		r && (r.id = `${e}-info`, n.push(r.id)), i && (i.id = `${e}-error`, n.push(i.id)), n.length ? this._select.setAttribute("aria-describedby", Array.from(new Set(n)).join(" ")) : this._select.removeAttribute("aria-describedby");
+	}
+};
+customElements.get("mint-select") || e("mint-select", n);
+//#endregion
+export { n as default };

package/dist/components/select/index.cjs

@@ -0,0 +1 @@
+require(`../chunks/icon-dG8sLTBn.js`);const e=require(`../chunks/register-element-tCL_F1YI.js`);require(`../chunks/icon-CyzR9aVl.js`),require(`../chunks/caret-up-3XCuTXSE.js`),require(`../chunks/caret-down-BN9cl4o4.js`);var t=`data-mint-select-part`,n=class extends HTMLElement{static get observedAttributes(){return[`name`,`value`,`disabled`,`id`,`required`,`label`,`info`,`error`,`error-message`,`multiple`,`loading`,`aria-label`,`aria-labelledby`,`aria-describedby`]}constructor(){super(),this._select=null,this._wrapper=null,this._caretUpIcon=null,this._caretDownIcon=null,this._changeHandler=null,this._optionObserver=null,this._childrenObserver=null,this._hostOptionsObserverRaf=null,this._generatedControlId=`mint-select-${Math.random().toString(36).slice(2,10)}`}connectedCallback(){this.classList.add(`mint-select-host`),this.getLabel()||console.error(`mint-select: The "label" attribute is required. Please provide a label for the select.`),this.render(),this._childrenObserver&&this._childrenObserver.disconnect(),this._childrenObserver=new MutationObserver(e=>{if(e.some(e=>{let t=e.target;if(this._select&&(t===this._select||this._select.contains(t)))return!1;let n=Array.from(e.addedNodes).some(e=>e.nodeType===Node.ELEMENT_NODE&&(e.tagName===`OPTION`||e.tagName===`OPTGROUP`))||Array.from(e.removedNodes).some(e=>e.nodeType===Node.ELEMENT_NODE&&(e.tagName===`OPTION`||e.tagName===`OPTGROUP`)),r=e.type===`attributes`&&e.target.nodeType===Node.ELEMENT_NODE&&(e.target.tagName===`OPTION`||e.target.tagName===`OPTGROUP`);return n||r})){if(this._hostOptionsObserverRaf!==null)return;this._hostOptionsObserverRaf=requestAnimationFrame(()=>{this._hostOptionsObserverRaf=null,this.isConnected&&this.render()})}}),this._childrenObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[`value`,`selected`,`disabled`]})}disconnectedCallback(){this._select&&this._changeHandler&&(this._select.removeEventListener(`change`,this._changeHandler),this._changeHandler=null),this._optionObserver&&=(this._optionObserver.disconnect(),null),this._childrenObserver&&=(this._childrenObserver.disconnect(),null),this._hostOptionsObserverRaf!==null&&(cancelAnimationFrame(this._hostOptionsObserverRaf),this._hostOptionsObserverRaf=null)}isLoading(){let e=this.getAttribute(`loading`);return e!==null&&e!==`false`}attributeChangedCallback(e,t,n){if(t!==n){if(e===`error`||e===`error-message`){this._renderErrorState(),this._select&&(this._select.className=this.getSelectClasses(),this._select.setAttribute(`aria-invalid`,this.hasError()?`true`:`false`),this._syncSelectAccessibility());return}if(e===`loading`){this.render();return}if(e===`value`){if(this._select)if(this.isMultiple()){let e=[];try{let t=n?JSON.parse(n):[];e=Array.isArray(t)?t.map(e=>String(e)):[]}catch{e=n?[String(n)]:[]}Array.from(this._select.options).forEach(t=>{t.selected=e.includes(t.value)})}else this._select.value=n||``;return}this.render()}}getName(){return this.getAttribute(`name`)||``}getValue(){if(this.isMultiple()&&this._select){let e=Array.from(this._select.selectedOptions).map(e=>e.value);return JSON.stringify(e)}return this.hasAttribute(`value`)?this.getAttribute(`value`)||``:this._select?this._select.value:``}setValue(e){if(this.isMultiple()){let t=Array.isArray(e)?e.map(e=>String(e)):e==null||e===``?[]:[String(e)];this.setAttribute(`value`,JSON.stringify(t)),this._select&&Array.from(this._select.options).forEach(e=>{e.selected=t.includes(e.value)});return}let t=e==null?``:String(e);this.setAttribute(`value`,t),this._select&&(this._select.value=t)}get value(){try{return this.getValue()||``}catch{return``}}set value(e){try{if(this.isMultiple()){this.setValue(e);return}let t=e||``;(this.getAttribute(`value`)||``)!==t&&this.setAttribute(`value`,t),this._select&&requestAnimationFrame(()=>{this._select&&(t===``||Array.from(this._select.options).some(e=>e.value===t))&&this._select.value!==t&&(this._select.value=t)})}catch{}}isDisabled(){let e=this.getAttribute(`disabled`);return e!==null&&e!==`false`}isMultiple(){let e=this.getAttribute(`multiple`);return e!==null&&e!==`false`}isRequired(){let e=this.getAttribute(`required`);return e!==null&&e!==`false`}hasError(){return this.getAttribute(`error`)===`true`}getErrorMessage(){return this.getAttribute(`error-message`)||``}getId(){return this.getAttribute(`id`)||``}getLabel(){return this.getAttribute(`label`)||``}getInfo(){return this.getAttribute(`info`)||``}getSelectClasses(){return[`mint-select-control`,this.isMultiple()?`is-multiple`:``,this.hasError()?`has-error`:``].filter(Boolean).join(` `)}render(){this._hostOptionsObserverRaf!==null&&(cancelAnimationFrame(this._hostOptionsObserverRaf),this._hostOptionsObserverRaf=null);let e=this.isLoading(),n=this.isMultiple(),r=this.getValue(),i=[];this._select&&Array.from(this._select.children).forEach(e=>{(e.tagName===`OPTION`||e.tagName===`OPTGROUP`)&&i.push(e.cloneNode(!0))}),Array.from(this.children).forEach(e=>{e instanceof HTMLElement&&e.hasAttribute(t)&&e.remove()}),this._wrapper=null,this._select=null;let a=Array.from(this.children).filter(e=>e.tagName===`OPTION`||e.tagName===`OPTGROUP`).map(e=>e.cloneNode(!0)),o=this.getLabel(),s=this.getInfo(),c=this.getId()||this._generatedControlId,l=this.getName(),u=this.isDisabled(),d=this.hasError();if(o){let e=document.createElement(`label`);e.setAttribute(t,`label`),e.className=`mint-select-label`,c&&e.setAttribute(`for`,c);let n=document.createTextNode(o);e.appendChild(n),this.appendChild(e)}this._wrapper=document.createElement(`div`),this._wrapper.setAttribute(t,`wrapper`),this._wrapper.className=`mint-select-control-wrap`,this.appendChild(this._wrapper),this._select=document.createElement(`select`),this._select.className=this.getSelectClasses(),c&&(this._select.id=c),l&&(this._select.name=l),u&&(this._select.disabled=!0),this._select.required=this.isRequired(),n&&(this._select.multiple=!0),this._select.setAttribute(`aria-invalid`,d?`true`:`false`);let f=this.getAttribute(`aria-label`)?.trim(),p=this.getAttribute(`aria-labelledby`)?.trim();p?this._select.setAttribute(`aria-labelledby`,p):o?this._select.removeAttribute(`aria-label`):this._select.setAttribute(`aria-label`,f||`Select an option`);let m=a.length>0?a:i;if(m.length>0&&m.forEach(e=>{this._select.appendChild(e)}),this._select.options.length===0){let e=document.createElement(`option`);e.value=``,e.textContent=`Select an option`,e.disabled=!0,e.selected=!0,this._select.appendChild(e)}if(n){let e=[];try{let t=r?JSON.parse(r):[];e=Array.isArray(t)?t.map(e=>String(e)):[]}catch{e=r?[String(r)]:[]}Array.from(this._select.options).forEach(t=>{t.selected=e.includes(t.value)})}else this._select.value=r||``;if(this._changeHandler&&this._select&&this._select.removeEventListener(`change`,this._changeHandler),this._changeHandler=e=>{let t=e.target,r=n?Array.from(t.selectedOptions).map(e=>e.value):t.value,i=n?JSON.stringify(r):String(r||``);(this.getAttribute(`value`)||``)!==i&&(i?this.setAttribute(`value`,i):this.removeAttribute(`value`));let a=new Event(`input`,{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(a),this.dispatchEvent(new CustomEvent(`input`,{detail:{value:r},bubbles:!0,cancelable:!0,composed:!0})),this.dispatchEvent(new CustomEvent(`change`,{detail:{value:r},bubbles:!0,cancelable:!0,composed:!0}))},this._select.addEventListener(`change`,this._changeHandler),this._optionObserver&&this._optionObserver.disconnect(),this._optionObserver=new MutationObserver(()=>{let e=this.getAttribute(`value`)||this.value||``;this._select&&e&&requestAnimationFrame(()=>{if(this._select)if(n){let t=[];try{let n=JSON.parse(e);t=Array.isArray(n)?n.map(e=>String(e)):[]}catch{t=[String(e)]}Array.from(this._select.options).forEach(e=>{e.selected=t.includes(e.value)})}else Array.from(this._select.options).some(t=>t.value===e)&&this._select.value!==e&&(this._select.value=e)})}),this._optionObserver.observe(this._select,{childList:!0,subtree:!0}),this._wrapper.appendChild(this._select),n)this._caretUpIcon=null,this._caretDownIcon=null;else{let e=document.createElement(`div`);e.className=`mint-select-caret`,this._caretUpIcon=document.createElement(`mint-icon`),this._caretUpIcon.setAttribute(`name`,`caret-up`),this._caretUpIcon.className=`mint-select-caret-up`,this._caretUpIcon.setAttribute(`aria-hidden`,`true`),e.appendChild(this._caretUpIcon),this._caretDownIcon=document.createElement(`mint-icon`),this._caretDownIcon.setAttribute(`name`,`caret-down`),this._caretDownIcon.className=`mint-select-caret-down`,this._caretDownIcon.setAttribute(`aria-hidden`,`true`),e.appendChild(this._caretDownIcon),this._wrapper.appendChild(e)}if(s){let e=document.createElement(`div`);e.setAttribute(t,`info`),e.className=`mint-select-info`,e.textContent=s,this.appendChild(e)}this._renderErrorState(),this._syncSelectAccessibility(),this._renderSkeleton(e)}_renderSkeleton(e){let t=this.querySelector(`.mint-select-skeleton-container`),n=this._wrapper;if(e){t||(t=document.createElement(`div`),t.className=`mint-select-skeleton-container`,t.setAttribute(`aria-hidden`,`true`),n?n.appendChild(t):this.appendChild(t));let e=t.querySelector(`.mint-select-skeleton`);e||(e=document.createElement(`div`),t.appendChild(e));let r=this.isMultiple();e.classList.toggle(`is-multiple`,r),e.style.height=r?`5rem`:`2rem`,t.style.display=`block`,this._select&&(this._select.style.opacity=`0`,this._select.style.pointerEvents=`none`,this._select.setAttribute(`aria-busy`,`true`))}else t&&(t.style.display=`none`),this._select&&(this._select.style.opacity=`1`,this._select.style.pointerEvents=`auto`,this._select.removeAttribute(`aria-busy`))}_renderErrorState(){let e=this.hasError(),n=this.getErrorMessage(),r=this.querySelector(`.mint-select-error`);e&&n?(r?r.hasAttribute(t)||r.setAttribute(t,`error`):(r=document.createElement(`div`),r.setAttribute(t,`error`),r.className=`mint-select-error`,this.appendChild(r)),r.textContent=n):r&&r.remove()}_syncSelectAccessibility(){if(!this._select)return;let e=this._select.id||this._generatedControlId,n=(this.getAttribute(`aria-describedby`)||``).split(/\s+/).filter(Boolean),r=this.querySelector(`[${t}="info"]`),i=this.querySelector(`.mint-select-error`);r&&(r.id=`${e}-info`,n.push(r.id)),i&&(i.id=`${e}-error`,n.push(i.id)),n.length?this._select.setAttribute(`aria-describedby`,Array.from(new Set(n)).join(` `)):this._select.removeAttribute(`aria-describedby`)}};customElements.get(`mint-select`)||e.t(`mint-select`,n),module.exports=n;

package/dist/components/select/index.d.ts

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

package/dist/components/select/index.d.ts.map

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

package/dist/components/select/index.js

@@ -0,0 +1,273 @@
+import '../../theme.css'
+import '../../icon.css'
+import '../../select.css'
+import "../chunks/icon-gQAtsERy.js";
+import { t as e } from "../chunks/register-element-BFYmIynH.js";
+import "../chunks/icon-C0OLmjDY.js";
+import "../chunks/caret-up-D_6oa7o1.js";
+import "../chunks/caret-down-Ch6IfR7r.js";
+//#region src/components/select/Select.ts
+var t = "data-mint-select-part", n = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"name",
+			"value",
+			"disabled",
+			"id",
+			"required",
+			"label",
+			"info",
+			"error",
+			"error-message",
+			"multiple",
+			"loading",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby"
+		];
+	}
+	constructor() {
+		super(), this._select = null, this._wrapper = null, this._caretUpIcon = null, this._caretDownIcon = null, this._changeHandler = null, this._optionObserver = null, this._childrenObserver = null, this._hostOptionsObserverRaf = null, this._generatedControlId = `mint-select-${Math.random().toString(36).slice(2, 10)}`;
+	}
+	connectedCallback() {
+		this.classList.add("mint-select-host"), this.getLabel() || console.error("mint-select: The \"label\" attribute is required. Please provide a label for the select."), this.render(), this._childrenObserver && this._childrenObserver.disconnect(), this._childrenObserver = new MutationObserver((e) => {
+			if (e.some((e) => {
+				let t = e.target;
+				if (this._select && (t === this._select || this._select.contains(t))) return !1;
+				let n = Array.from(e.addedNodes).some((e) => e.nodeType === Node.ELEMENT_NODE && (e.tagName === "OPTION" || e.tagName === "OPTGROUP")) || Array.from(e.removedNodes).some((e) => e.nodeType === Node.ELEMENT_NODE && (e.tagName === "OPTION" || e.tagName === "OPTGROUP")), r = e.type === "attributes" && e.target.nodeType === Node.ELEMENT_NODE && (e.target.tagName === "OPTION" || e.target.tagName === "OPTGROUP");
+				return n || r;
+			})) {
+				if (this._hostOptionsObserverRaf !== null) return;
+				this._hostOptionsObserverRaf = requestAnimationFrame(() => {
+					this._hostOptionsObserverRaf = null, this.isConnected && this.render();
+				});
+			}
+		}), this._childrenObserver.observe(this, {
+			childList: !0,
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: [
+				"value",
+				"selected",
+				"disabled"
+			]
+		});
+	}
+	disconnectedCallback() {
+		this._select && this._changeHandler && (this._select.removeEventListener("change", this._changeHandler), this._changeHandler = null), this._optionObserver &&= (this._optionObserver.disconnect(), null), this._childrenObserver &&= (this._childrenObserver.disconnect(), null), this._hostOptionsObserverRaf !== null && (cancelAnimationFrame(this._hostOptionsObserverRaf), this._hostOptionsObserverRaf = null);
+	}
+	isLoading() {
+		let e = this.getAttribute("loading");
+		return e !== null && e !== "false";
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) {
+			if (e === "error" || e === "error-message") {
+				this._renderErrorState(), this._select && (this._select.className = this.getSelectClasses(), this._select.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), this._syncSelectAccessibility());
+				return;
+			}
+			if (e === "loading") {
+				this.render();
+				return;
+			}
+			if (e === "value") {
+				if (this._select) if (this.isMultiple()) {
+					let e = [];
+					try {
+						let t = n ? JSON.parse(n) : [];
+						e = Array.isArray(t) ? t.map((e) => String(e)) : [];
+					} catch {
+						e = n ? [String(n)] : [];
+					}
+					Array.from(this._select.options).forEach((t) => {
+						t.selected = e.includes(t.value);
+					});
+				} else this._select.value = n || "";
+				return;
+			}
+			this.render();
+		}
+	}
+	getName() {
+		return this.getAttribute("name") || "";
+	}
+	getValue() {
+		if (this.isMultiple() && this._select) {
+			let e = Array.from(this._select.selectedOptions).map((e) => e.value);
+			return JSON.stringify(e);
+		}
+		return this.hasAttribute("value") ? this.getAttribute("value") || "" : this._select ? this._select.value : "";
+	}
+	setValue(e) {
+		if (this.isMultiple()) {
+			let t = Array.isArray(e) ? e.map((e) => String(e)) : e == null || e === "" ? [] : [String(e)];
+			this.setAttribute("value", JSON.stringify(t)), this._select && Array.from(this._select.options).forEach((e) => {
+				e.selected = t.includes(e.value);
+			});
+			return;
+		}
+		let t = e == null ? "" : String(e);
+		this.setAttribute("value", t), this._select && (this._select.value = t);
+	}
+	get value() {
+		try {
+			return this.getValue() || "";
+		} catch {
+			return "";
+		}
+	}
+	set value(e) {
+		try {
+			if (this.isMultiple()) {
+				this.setValue(e);
+				return;
+			}
+			let t = e || "";
+			(this.getAttribute("value") || "") !== t && this.setAttribute("value", t), this._select && requestAnimationFrame(() => {
+				this._select && (t === "" || Array.from(this._select.options).some((e) => e.value === t)) && this._select.value !== t && (this._select.value = t);
+			});
+		} catch {}
+	}
+	isDisabled() {
+		let e = this.getAttribute("disabled");
+		return e !== null && e !== "false";
+	}
+	isMultiple() {
+		let e = this.getAttribute("multiple");
+		return e !== null && e !== "false";
+	}
+	isRequired() {
+		let e = this.getAttribute("required");
+		return e !== null && e !== "false";
+	}
+	hasError() {
+		return this.getAttribute("error") === "true";
+	}
+	getErrorMessage() {
+		return this.getAttribute("error-message") || "";
+	}
+	getId() {
+		return this.getAttribute("id") || "";
+	}
+	getLabel() {
+		return this.getAttribute("label") || "";
+	}
+	getInfo() {
+		return this.getAttribute("info") || "";
+	}
+	getSelectClasses() {
+		return [
+			"mint-select-control",
+			this.isMultiple() ? "is-multiple" : "",
+			this.hasError() ? "has-error" : ""
+		].filter(Boolean).join(" ");
+	}
+	render() {
+		this._hostOptionsObserverRaf !== null && (cancelAnimationFrame(this._hostOptionsObserverRaf), this._hostOptionsObserverRaf = null);
+		let e = this.isLoading(), n = this.isMultiple(), r = this.getValue(), i = [];
+		this._select && Array.from(this._select.children).forEach((e) => {
+			(e.tagName === "OPTION" || e.tagName === "OPTGROUP") && i.push(e.cloneNode(!0));
+		}), Array.from(this.children).forEach((e) => {
+			e instanceof HTMLElement && e.hasAttribute(t) && e.remove();
+		}), this._wrapper = null, this._select = null;
+		let a = Array.from(this.children).filter((e) => e.tagName === "OPTION" || e.tagName === "OPTGROUP").map((e) => e.cloneNode(!0)), o = this.getLabel(), s = this.getInfo(), c = this.getId() || this._generatedControlId, l = this.getName(), u = this.isDisabled(), d = this.hasError();
+		if (o) {
+			let e = document.createElement("label");
+			e.setAttribute(t, "label"), e.className = "mint-select-label", c && e.setAttribute("for", c);
+			let n = document.createTextNode(o);
+			e.appendChild(n), this.appendChild(e);
+		}
+		this._wrapper = document.createElement("div"), this._wrapper.setAttribute(t, "wrapper"), this._wrapper.className = "mint-select-control-wrap", this.appendChild(this._wrapper), this._select = document.createElement("select"), this._select.className = this.getSelectClasses(), c && (this._select.id = c), l && (this._select.name = l), u && (this._select.disabled = !0), this._select.required = this.isRequired(), n && (this._select.multiple = !0), this._select.setAttribute("aria-invalid", d ? "true" : "false");
+		let f = this.getAttribute("aria-label")?.trim(), p = this.getAttribute("aria-labelledby")?.trim();
+		p ? this._select.setAttribute("aria-labelledby", p) : o ? this._select.removeAttribute("aria-label") : this._select.setAttribute("aria-label", f || "Select an option");
+		let m = a.length > 0 ? a : i;
+		if (m.length > 0 && m.forEach((e) => {
+			this._select.appendChild(e);
+		}), this._select.options.length === 0) {
+			let e = document.createElement("option");
+			e.value = "", e.textContent = "Select an option", e.disabled = !0, e.selected = !0, this._select.appendChild(e);
+		}
+		if (n) {
+			let e = [];
+			try {
+				let t = r ? JSON.parse(r) : [];
+				e = Array.isArray(t) ? t.map((e) => String(e)) : [];
+			} catch {
+				e = r ? [String(r)] : [];
+			}
+			Array.from(this._select.options).forEach((t) => {
+				t.selected = e.includes(t.value);
+			});
+		} else this._select.value = r || "";
+		if (this._changeHandler && this._select && this._select.removeEventListener("change", this._changeHandler), this._changeHandler = (e) => {
+			let t = e.target, r = n ? Array.from(t.selectedOptions).map((e) => e.value) : t.value, i = n ? JSON.stringify(r) : String(r || "");
+			(this.getAttribute("value") || "") !== i && (i ? this.setAttribute("value", i) : this.removeAttribute("value"));
+			let a = new Event("input", {
+				bubbles: !0,
+				cancelable: !0,
+				composed: !0
+			});
+			this.dispatchEvent(a), this.dispatchEvent(new CustomEvent("input", {
+				detail: { value: r },
+				bubbles: !0,
+				cancelable: !0,
+				composed: !0
+			})), this.dispatchEvent(new CustomEvent("change", {
+				detail: { value: r },
+				bubbles: !0,
+				cancelable: !0,
+				composed: !0
+			}));
+		}, this._select.addEventListener("change", this._changeHandler), this._optionObserver && this._optionObserver.disconnect(), this._optionObserver = new MutationObserver(() => {
+			let e = this.getAttribute("value") || this.value || "";
+			this._select && e && requestAnimationFrame(() => {
+				if (this._select) if (n) {
+					let t = [];
+					try {
+						let n = JSON.parse(e);
+						t = Array.isArray(n) ? n.map((e) => String(e)) : [];
+					} catch {
+						t = [String(e)];
+					}
+					Array.from(this._select.options).forEach((e) => {
+						e.selected = t.includes(e.value);
+					});
+				} else Array.from(this._select.options).some((t) => t.value === e) && this._select.value !== e && (this._select.value = e);
+			});
+		}), this._optionObserver.observe(this._select, {
+			childList: !0,
+			subtree: !0
+		}), this._wrapper.appendChild(this._select), n) this._caretUpIcon = null, this._caretDownIcon = null;
+		else {
+			let e = document.createElement("div");
+			e.className = "mint-select-caret", this._caretUpIcon = document.createElement("mint-icon"), this._caretUpIcon.setAttribute("name", "caret-up"), this._caretUpIcon.className = "mint-select-caret-up", this._caretUpIcon.setAttribute("aria-hidden", "true"), e.appendChild(this._caretUpIcon), this._caretDownIcon = document.createElement("mint-icon"), this._caretDownIcon.setAttribute("name", "caret-down"), this._caretDownIcon.className = "mint-select-caret-down", this._caretDownIcon.setAttribute("aria-hidden", "true"), e.appendChild(this._caretDownIcon), this._wrapper.appendChild(e);
+		}
+		if (s) {
+			let e = document.createElement("div");
+			e.setAttribute(t, "info"), e.className = "mint-select-info", e.textContent = s, this.appendChild(e);
+		}
+		this._renderErrorState(), this._syncSelectAccessibility(), this._renderSkeleton(e);
+	}
+	_renderSkeleton(e) {
+		let t = this.querySelector(".mint-select-skeleton-container"), n = this._wrapper;
+		if (e) {
+			t || (t = document.createElement("div"), t.className = "mint-select-skeleton-container", t.setAttribute("aria-hidden", "true"), n ? n.appendChild(t) : this.appendChild(t));
+			let e = t.querySelector(".mint-select-skeleton");
+			e || (e = document.createElement("div"), t.appendChild(e));
+			let r = this.isMultiple();
+			e.classList.toggle("is-multiple", r), e.style.height = r ? "5rem" : "2rem", t.style.display = "block", this._select && (this._select.style.opacity = "0", this._select.style.pointerEvents = "none", this._select.setAttribute("aria-busy", "true"));
+		} else t && (t.style.display = "none"), this._select && (this._select.style.opacity = "1", this._select.style.pointerEvents = "auto", this._select.removeAttribute("aria-busy"));
+	}
+	_renderErrorState() {
+		let e = this.hasError(), n = this.getErrorMessage(), r = this.querySelector(".mint-select-error");
+		e && n ? (r ? r.hasAttribute(t) || r.setAttribute(t, "error") : (r = document.createElement("div"), r.setAttribute(t, "error"), r.className = "mint-select-error", this.appendChild(r)), r.textContent = n) : r && r.remove();
+	}
+	_syncSelectAccessibility() {
+		if (!this._select) return;
+		let e = this._select.id || this._generatedControlId, n = (this.getAttribute("aria-describedby") || "").split(/\s+/).filter(Boolean), r = this.querySelector(`[${t}="info"]`), i = this.querySelector(".mint-select-error");
+		r && (r.id = `${e}-info`, n.push(r.id)), i && (i.id = `${e}-error`, n.push(i.id)), n.length ? this._select.setAttribute("aria-describedby", Array.from(new Set(n)).join(" ")) : this._select.removeAttribute("aria-describedby");
+	}
+};
+customElements.get("mint-select") || e("mint-select", n);
+//#endregion
+export { n as default };