@pure-ds/core 0.7.26 → 0.7.28

package/public/assets/pds/components/pds-omnibox.js

@@ -1,3 +1,21 @@
+/**
+ * @typedef {Object} PdsOmniboxCategoryOptions
+ * @property {(options?: Object) => boolean} [trigger] - Determines whether the category is active for the current query
+ * @property {(options?: Object) => Promise<Array<Object>>|Array<Object>} [getItems] - Returns result items for this category
+ * @property {(item?: Object) => any} [action] - Called when a result item is selected
+ * @property {boolean} [useIconForInput] - Uses first result icon in the input field when enabled
+ * @property {number} [sortIndex] - Category ordering hint (higher values appear first)
+ */
+
+/**
+ * @typedef {Object} PdsOmniboxSettings
+ * @property {boolean} [hideCategory] - Hides category labels in suggestions
+ * @property {string} [itemGrid] - CSS grid-template-columns used for result rows
+ * @property {(item?: Object) => (string|null)} [iconHandler] - Custom renderer for item icons
+ * @property {boolean} [useIconForInput] - Global fallback for using an item icon in the input
+ * @property {Object<string, PdsOmniboxCategoryOptions>} categories - Category map keyed by category name
+ */
+
 /**
  * Omnibox search input with PDS styling and form-associated behavior.
  *
@@ -11,7 +29,7 @@
  * @attr {boolean} required - Mark the input as required
  * @attr {string} autocomplete - Native autocomplete attribute (default: off)
  *
- * @property {Object} settings - AutoComplete settings object (required by consumer)
+ * @property {PdsOmniboxSettings} settings - AutoComplete settings object (required by consumer)
  */
 import { PDS } from "#pds";
 
@@ -43,6 +61,7 @@ export class PdsOmnibox extends HTMLElement {
   #autoCompleteResizeHandler;
   #autoCompleteScrollHandler;
   #autoCompleteViewportHandler;
+  #autoCompleteFocusTimer;
   #lengthProbe;
   #suggestionsUpdatedHandler;
   #suggestionsObserver;
@@ -71,6 +90,10 @@ export class PdsOmnibox extends HTMLElement {
   }
 
   disconnectedCallback() {
+    if (this.#autoCompleteFocusTimer) {
+      clearTimeout(this.#autoCompleteFocusTimer);
+      this.#autoCompleteFocusTimer = null;
+    }
     this.#teardownAutoCompleteSizing();
     this.#teardownSuggestionsObserver();
     const autoComplete = this.#input?._autoComplete;
@@ -601,8 +624,19 @@ export class PdsOmnibox extends HTMLElement {
       }
 
       this.#wrapAutoCompleteResultsHandler(this.#input._autoComplete);
-      setTimeout(() => {
-        this.#input._autoComplete.focusHandler(e);
+      this.#wrapAutoCompleteController(this.#input._autoComplete);
+      if (this.#autoCompleteFocusTimer) {
+        clearTimeout(this.#autoCompleteFocusTimer);
+      }
+      const input = this.#input;
+      this.#autoCompleteFocusTimer = setTimeout(() => {
+        this.#autoCompleteFocusTimer = null;
+        if (!this.isConnected || !input || this.#input !== input) return;
+        const autoComplete = input._autoComplete;
+        if (!autoComplete || typeof autoComplete.focusHandler !== "function") {
+          return;
+        }
+        autoComplete.focusHandler({ target: input });
         this.#setupAutoCompleteSizing();
         this.#updateSuggestionMaxHeight();
         this.#setupSuggestionsObserver();
@@ -669,6 +703,39 @@ export class PdsOmnibox extends HTMLElement {
     };
   }
 
+  #wrapAutoCompleteController(autoComplete) {
+    if (!autoComplete || autoComplete.__pdsControllerWrapped) return;
+    const originalController = autoComplete.controller?.bind(autoComplete);
+    if (typeof originalController !== "function") return;
+
+    autoComplete.__pdsControllerWrapped = true;
+    autoComplete.controller = () => {
+      const controller = originalController();
+      if (!controller || typeof controller !== "object") return controller;
+
+      return {
+        ...controller,
+        clear: (reason, ...args) => {
+          const reasonText = String(reason ?? "").toLowerCase();
+          if (reasonText === "blurred" && this.#isInputFocused()) {
+            return;
+          }
+          if (typeof controller.clear === "function") {
+            return controller.clear.call(controller, reason, ...args);
+          }
+          return undefined;
+        },
+      };
+    };
+  }
+
+  #isInputFocused() {
+    if (!this.#input) return false;
+    const activeInShadow = this.#root?.activeElement === this.#input;
+    const activeInDocument = document.activeElement === this.#input;
+    return activeInShadow || activeInDocument;
+  }
+
   #setupAutoCompleteSizing() {
     if (this.#autoCompleteResizeHandler) return;
     this.#autoCompleteResizeHandler = () => this.#updateSuggestionMaxHeight();

package/public/assets/pds/components/pds-tags.js

@@ -1,22 +1,45 @@
 import { PDS } from "#pds";
+import "./pds-omnibox.js";
+
+const DEFAULT_OMNIBOX_OPTIONS = {
+	hideCategory: true,
+	itemGrid: "0 1fr 0",
+	iconHandler: () => "",
+};
 
 /**
- * Multi-select tags control built on top of pds-omnibox.
+ * Form-associated multi-select tags control built on top of `pds-omnibox`.
+ *
+ * Users select suggestions from the omnibox and each selection is rendered as a removable
+ * chip. The component keeps selection state synchronized across:
+ * - the `value` attribute (comma-separated ids)
+ * - the `value` property (`string[]`)
+ * - form value via ElementInternals
+ *
+ * The `options` object uses the same structure as `pds-omnibox.settings`.
+ * See `pds-omnibox` JSDoc for the full options schema.
+ * Before applying it, the component deep-merges internal defaults:
+ * - `hideCategory: true`
+ * - `itemGrid: "0 1fr 0"`
+ * - `iconHandler: () => ""`
+ *
+ * When `required` is set, at least one selected value is required for validity.
  *
  * @element pds-tags
  * @formAssociated
  *
- * @attr {string} name - Form field name used for submitted values
- * @attr {string} placeholder - Search placeholder for the omnibox
+ * @attr {string} name - Form field name; selected values are submitted under this name
+ * @attr {string} placeholder - Placeholder shown in omnibox input (default: "Search tags...")
  * @attr {string} value - Comma-separated selected item ids
- * @attr {string} options - JSON array of options (string[] or object[])
- * @attr {string} settings - JSON omnibox settings (optional)
- * @attr {boolean} disabled - Disables interaction
- * @attr {boolean} required - Requires at least one selected value
+ * @attr {string} options - JSON object with the same shape as `pds-omnibox.settings`
+ * @attr {boolean} disabled - Disables omnibox interaction and chip remove actions
+ * @attr {boolean} required - Requires at least one selected value for validity
+ *
+ * @property {PdsOmniboxSettings|null} options - Omnibox options object (see `pds-omnibox.js` typedef)
+ * @property {string[]} value - Selected option ids (array form)
  *
- * @property {Array<string|Object>} options - Option source for omnibox suggestions
- * @property {Object} settings - Omnibox-compatible settings source
- * @property {string[]} value - Selected option ids
+ * @fires {Event} input - Fired whenever selection changes
+ * @fires {Event} change - Fired whenever selection changes
  */
 class PdsTags extends HTMLElement {
 	static formAssociated = true;
@@ -26,7 +49,6 @@ class PdsTags extends HTMLElement {
 		"placeholder",
 		"value",
 		"options",
-		"settings",
 		"disabled",
 		"required",
 	];
@@ -63,7 +85,6 @@ class PdsTags extends HTMLElement {
 		this.#upgradeProperty("value");
 		this.#upgradeProperty("name");
 		this.#upgradeProperty("placeholder");
-		this.#upgradeProperty("settings");
 		this.#upgradeProperty("disabled");
 		this.#upgradeProperty("required");
 
@@ -135,26 +156,21 @@ class PdsTags extends HTMLElement {
 		if (name === "value") {
 			if (this.#syncingValueAttribute) return;
 			this.#selectedIds = new Set(this.#parseValueList(newValue));
+			this.#reconcileSelection();
 			this.#renderChips();
+			void this.#hydrateSelectedItemsFromSource();
 			this.#syncFormValue();
 			return;
 		}
 
 		if (name === "options") {
-			this.#items = this.#normalizeItems(this.#parseOptionsAttribute(newValue));
-			this.#syncSelectedItemsFromItems();
+			this.#sourceSettings = this.#parseOptionsAttribute(newValue);
 			this.#reconcileSelection();
 			this.#renderChips();
-			if (!this.#sourceSettings) this.#settingsInitialized = false;
-			this.#applyOmniboxSettings();
-			this.#syncFormValue();
-			return;
-		}
-
-		if (name === "settings") {
-			this.#sourceSettings = this.#parseSettingsAttribute(newValue);
+			void this.#hydrateSelectedItemsFromSource();
 			this.#settingsInitialized = false;
 			this.#applyOmniboxSettings();
+			this.#syncFormValue();
 			return;
 		}
 
@@ -184,38 +200,23 @@ class PdsTags extends HTMLElement {
 	}
 
 	get options() {
-		return this.#items.slice();
+		return this.#sourceSettings;
 	}
 
 	set options(value) {
 		this.#debug("set options", {
 			receivedType: value == null ? String(value) : Array.isArray(value) ? "array" : typeof value,
-			receivedLength: Array.isArray(value) ? value.length : undefined,
+			hasCategories: Boolean(value?.categories),
 		});
-		if (value == null) return;
-		const nextItems = this.#normalizeItems(Array.isArray(value) ? value : []);
-		this.#items = nextItems;
-		this.#syncSelectedItemsFromItems();
-		this.#debug("set options:normalized", { itemsCount: this.#items.length });
+		this.#sourceSettings = value && typeof value === "object" && !Array.isArray(value)
+			? value
+			: null;
 		this.#reconcileSelection();
 		this.#renderChips();
-		if (!this.#sourceSettings) this.#settingsInitialized = false;
-		this.#applyOmniboxSettings();
-		this.#syncFormValue();
-	}
-
-	get settings() {
-		return this.#sourceSettings;
-	}
-
-	set settings(value) {
-		this.#debug("set settings", {
-			receivedType: value == null ? String(value) : typeof value,
-			hasCategories: Boolean(value?.categories),
-		});
-		this.#sourceSettings = value && typeof value === "object" ? value : null;
+		void this.#hydrateSelectedItemsFromSource();
 		this.#settingsInitialized = false;
 		this.#applyOmniboxSettings();
+		this.#syncFormValue();
 	}
 
 	get value() {
@@ -228,10 +229,10 @@ class PdsTags extends HTMLElement {
 			? value.map((item) => String(item))
 			: this.#parseValueList(String(value ?? ""));
 		this.#selectedIds = new Set(incoming);
-		this.#syncSelectedItemsFromItems();
 		this.#debug("set value:parsed", { selected: Array.from(this.#selectedIds) });
 		this.#reconcileSelection();
 		this.#renderChips();
+		void this.#hydrateSelectedItemsFromSource();
 		this.#applyOmniboxSettings();
 		this.#syncFormValue();
 	}
@@ -297,6 +298,7 @@ class PdsTags extends HTMLElement {
 
 		this.#syncAttributes();
 		this.#applyOmniboxSettings();
+		await this.#hydrateSelectedItemsFromSource();
 		this.#renderChips();
 		this.#syncFormValue();
 		this.#debug("ensureOmnibox:end", {
@@ -326,17 +328,10 @@ class PdsTags extends HTMLElement {
 			hasValueAttr: this.hasAttribute("value"),
 		});
 		if (this.hasAttribute("options")) {
-			this.#items = this.#normalizeItems(
-				this.#parseOptionsAttribute(this.getAttribute("options")),
-			);
-			this.#syncSelectedItemsFromItems();
-			this.#debug("hydrateFromAttributes:options", { itemsCount: this.#items.length });
-		}
-
-		if (this.hasAttribute("settings")) {
-			this.#sourceSettings = this.#parseSettingsAttribute(this.getAttribute("settings"));
-			this.#debug("hydrateFromAttributes:settings", {
-				hasSettings: Boolean(this.#sourceSettings),
+			this.#sourceSettings = this.#parseOptionsAttribute(this.getAttribute("options"));
+			this.#items = [];
+			this.#debug("hydrateFromAttributes:options", {
+				hasOptions: Boolean(this.#sourceSettings),
 				hasCategories: Boolean(this.#sourceSettings?.categories),
 			});
 		}
@@ -348,14 +343,71 @@ class PdsTags extends HTMLElement {
 
 		this.#reconcileSelection();
 		this.#syncAttributes();
-		this.#renderChips();
+		if (!this.#selectedIds.size || !this.#sourceSettings?.categories) {
+			this.#renderChips();
+		}
 		this.#syncFormValue();
 		this.#debug("hydrateFromAttributes:end", {
-			itemsCount: this.#items.length,
+			knownItemsCount: this.#items.length,
 			selected: Array.from(this.#selectedIds),
 		});
 	}
 
+	async #hydrateSelectedItemsFromSource() {
+		if (!this.#selectedIds.size) return;
+		const sourceCategories = this.#sourceSettings?.categories;
+		if (!sourceCategories || typeof sourceCategories !== "object") return;
+
+		const knownIds = new Set(this.#items.map((item) => item.id));
+		const unresolved = new Set(
+			Array.from(this.#selectedIds).filter((id) => !this.#selectedItems.has(id) && !knownIds.has(id)),
+		);
+		if (!unresolved.size) return;
+
+		this.#debug("hydrateSelectedItemsFromSource:start", {
+			selected: Array.from(this.#selectedIds),
+			unresolved: Array.from(unresolved),
+			categoryCount: Object.keys(sourceCategories).length,
+		});
+
+		for (const [categoryName, categoryConfig] of Object.entries(sourceCategories)) {
+			if (!unresolved.size) break;
+			const sourceGetItems = categoryConfig?.getItems;
+			if (typeof sourceGetItems !== "function") continue;
+
+			try {
+				const incoming = await sourceGetItems({ search: "" });
+				const normalized = this.#normalizeResultItems(incoming);
+				if (!normalized.length) continue;
+
+				this.#rememberKnownItems(normalized);
+				for (const item of normalized) {
+					if (!unresolved.has(item.id)) continue;
+					this.#selectedItems.set(item.id, item);
+					unresolved.delete(item.id);
+				}
+
+				this.#debug("hydrateSelectedItemsFromSource:category", {
+					categoryName,
+					resolvedCount: normalized.length,
+					remaining: Array.from(unresolved),
+				});
+			} catch (error) {
+				this.#debug("hydrateSelectedItemsFromSource:error", {
+					categoryName,
+					error: String(error),
+				});
+			}
+		}
+
+		this.#reconcileSelection();
+		if (this.#selectedIds.size) this.#renderChips();
+		this.#debug("hydrateSelectedItemsFromSource:end", {
+			remaining: Array.from(unresolved),
+			selectedItemsCount: this.#selectedItems.size,
+		});
+	}
+
 	#syncAttributes() {
 		this.#debug("syncAttributes:start", {
 			hasOmnibox: Boolean(this.#omnibox),
@@ -427,6 +479,7 @@ class PdsTags extends HTMLElement {
 						: [];
 
 					const normalized = this.#normalizeResultItems(incoming);
+					this.#rememberKnownItems(normalized);
 					for (const item of normalized) {
 						this.#selectedItems.set(item.id, item);
 					}
@@ -462,14 +515,12 @@ class PdsTags extends HTMLElement {
 		});
 
 		const { categories: _ignoredCategories, ...sourceSettingsWithoutCategories } = sourceSettings;
-
-		return {
+		const normalizedSettings = {
 			...sourceSettingsWithoutCategories,
 			categories,
-			hideCategory: true,
-			itemGrid: "0 1fr 0",
-			iconHandler: () => "",
 		};
+
+		return this.#deepMergeOptions(DEFAULT_OMNIBOX_OPTIONS, normalizedSettings);
 	}
 
 	#matchesQuery(item, query) {
@@ -601,30 +652,19 @@ class PdsTags extends HTMLElement {
 
 	#parseOptionsAttribute(value) {
 		this.#debug("parseOptionsAttribute:start", { hasValue: Boolean(value), rawType: typeof value });
-		if (!value) return [];
-		try {
-			const parsed = JSON.parse(value);
-			this.#debug("parseOptionsAttribute:parsed", { isArray: Array.isArray(parsed), length: Array.isArray(parsed) ? parsed.length : undefined });
-			return Array.isArray(parsed) ? parsed : [];
-		} catch {
-			this.#debug("parseOptionsAttribute:error", { value });
-			return [];
-		}
-	}
-
-	#parseSettingsAttribute(value) {
-		this.#debug("parseSettingsAttribute:start", { hasValue: Boolean(value), rawType: typeof value });
 		if (!value) return null;
 		try {
 			const parsed = JSON.parse(value);
-			const valid = parsed && typeof parsed === "object" ? parsed : null;
-			this.#debug("parseSettingsAttribute:parsed", {
+			const valid = parsed && typeof parsed === "object" && !Array.isArray(parsed)
+				? parsed
+				: null;
+			this.#debug("parseOptionsAttribute:parsed", {
 				valid: Boolean(valid),
 				hasCategories: Boolean(valid?.categories),
 			});
 			return valid;
 		} catch {
-			this.#debug("parseSettingsAttribute:error", { value });
+			this.#debug("parseOptionsAttribute:error", { value });
 			return null;
 		}
 	}
@@ -709,11 +749,12 @@ class PdsTags extends HTMLElement {
 
 	#reconcileSelection() {
 		this.#debug("reconcileSelection:start", { selectedBefore: Array.from(this.#selectedIds) });
-		if (!this.#selectedIds.size) return;
-		const available = new Set(this.#items.map((item) => item.id));
-		this.#selectedIds = new Set(
-			Array.from(this.#selectedIds).filter((id) => available.has(id)),
-		);
+		if (!this.#selectedIds.size) {
+			for (const id of Array.from(this.#selectedItems.keys())) {
+				this.#selectedItems.delete(id);
+			}
+			return;
+		}
 		for (const id of Array.from(this.#selectedItems.keys())) {
 			if (!this.#selectedIds.has(id)) this.#selectedItems.delete(id);
 		}
@@ -721,52 +762,49 @@ class PdsTags extends HTMLElement {
 	}
 
 	#resolveSourceSettings() {
-		if (this.#sourceSettings) return this.#sourceSettings;
-		if (!Array.isArray(this.#items) || this.#items.length === 0) return null;
-		return this.#buildOptionsSettings();
+		if (this.#sourceSettings && typeof this.#sourceSettings === "object") {
+			return this.#sourceSettings;
+		}
+		return null;
 	}
 
-	#buildOptionsSettings() {
-		const categoryMap = new Map();
-		for (const item of this.#items) {
-			const categoryName = this.#normalizeCategory(item.category);
-			if (!categoryMap.has(categoryName)) categoryMap.set(categoryName, []);
-			categoryMap.get(categoryName).push(item);
+	#rememberKnownItems(items = []) {
+		if (!Array.isArray(items) || items.length === 0) return;
+		const byId = new Map(this.#items.map((item) => [item.id, item]));
+		for (const item of items) {
+			if (!item?.id) continue;
+			byId.set(item.id, item);
 		}
+		this.#items = Array.from(byId.values());
+	}
 
-		const categories = {};
-		for (const [categoryName, entries] of categoryMap.entries()) {
-			categories[categoryName] = {
-				trigger: () => true,
-				getItems: async (options) => {
-					const query = String(options?.search || "").trim().toLowerCase();
-					return entries
-						.filter((item) => this.#matchesQuery(item, query))
-						.map((item) => ({
-							id: item.id,
-							text: item.text,
-							icon: item.icon,
-							description: item.description,
-						}));
-				},
-			};
+	#deepMergeOptions(base = {}, override = {}) {
+		const output = this.#clonePlainObject(base);
+		for (const [key, value] of Object.entries(override || {})) {
+			if (
+				this.#isPlainObject(value)
+				&& this.#isPlainObject(output[key])
+			) {
+				output[key] = this.#deepMergeOptions(output[key], value);
+				continue;
+			}
+			output[key] = value;
 		}
+		return output;
+	}
 
-		return {
-			hideCategory: true,
-			itemGrid: "0 1fr 0",
-			iconHandler: () => "",
-			categories,
-		};
+	#clonePlainObject(value) {
+		if (!this.#isPlainObject(value)) return value;
+		return Object.fromEntries(
+			Object.entries(value).map(([key, entry]) => [
+				key,
+				this.#isPlainObject(entry) ? this.#clonePlainObject(entry) : entry,
+			]),
+		);
 	}
 
-	#syncSelectedItemsFromItems() {
-		if (!this.#selectedIds.size || !this.#items.length) return;
-		for (const item of this.#items) {
-			if (this.#selectedIds.has(item.id)) {
-				this.#selectedItems.set(item.id, item);
-			}
-		}
+	#isPlainObject(value) {
+		return Boolean(value) && typeof value === "object" && !Array.isArray(value);
 	}
 
 	#resetOmniboxSearchState(reason = "unknown") {

package/public/assets/pds/core/pds-ask.js

@@ -1,16 +1,16 @@
-function g(o){let e=Array.isArray(o?.strings)?o.strings:[],d=Array.isArray(o?.values)?o.values:[],m=new Set,f=[],p=/(\s)(\.[\w-]+)=\s*$/;for(let t=0;t<e.length;t+=1){let s=e[t]??"",c=s.match(p);if(c&&t<d.length){let u=c[2].slice(1),y=`pds-val-${t}`;s=s.replace(p,`$1data-pds-prop="${u}:${y}"`),m.add(t)}f.push(s),t<d.length&&!m.has(t)&&f.push(`<!--pds-val-${t}-->`)}let n=document.createElement("template");n.innerHTML=f.join("");let a=(t,s)=>{let c=t.parentNode;if(!c)return;if(s==null){c.removeChild(t);return}let h=u=>{if(u!=null){if(u instanceof Node){c.insertBefore(u,t);return}if(Array.isArray(u)){u.forEach(y=>h(y));return}c.insertBefore(document.createTextNode(String(u)),t)}};h(s),c.removeChild(t)},l=document.createTreeWalker(n.content,NodeFilter.SHOW_COMMENT),r=[];for(;l.nextNode();){let t=l.currentNode;t?.nodeValue?.startsWith("pds-val-")&&r.push(t)}return r.forEach(t=>{let s=Number(t.nodeValue.replace("pds-val-",""));a(t,d[s])}),n.content.querySelectorAll("*").forEach(t=>{let s=t.getAttribute("data-pds-prop");if(!s)return;let[c,h]=s.split(":"),u=Number(String(h).replace("pds-val-",""));c&&Number.isInteger(u)&&(t[c]=d[u]),t.removeAttribute("data-pds-prop")}),n.content}function b(o,e){if(e==null)return;if(typeof e=="object"&&Array.isArray(e.strings)&&Array.isArray(e.values)){o.appendChild(g(e));return}if(e instanceof Node){o.appendChild(e);return}if(Array.isArray(e)){e.forEach(m=>b(o,m));return}let d=typeof e=="string"?e:String(e);o.appendChild(document.createTextNode(d))}function A(o){if(!o)return!0;let e=!0,d=a=>{if(!a||typeof a!="object")return"<unknown>";let l=a.tagName?String(a.tagName).toLowerCase():"node",r=a.id?`#${a.id}`:"",i=typeof a.getAttribute=="function"?a.getAttribute("name"):null,t=i?`[name="${i}"]`:"";return`${l}${r}${t}`},m=(a,l)=>{if(!a||typeof a.querySelectorAll!="function")return;let r=Array.from(a.querySelectorAll(":invalid"));if(!r.length)return;let i=r.map(t=>{let s=typeof t.validationMessage=="string"?t.validationMessage:"";return`${d(t)}${s?` \u2014 ${s}`:""}`});console.warn(`ask.validateDialogFormTree: invalid controls in ${l}:`,i)},f=(a,l)=>{try{let r=typeof a.reportValidity=="function"?a.reportValidity():a.checkValidity?.()??!0;return r||m(a,l),r}catch(r){return console.error(`ask.validateDialogFormTree: validation threw in ${l}`,r),!1}};e=f(o,"host dialog form")&&e;let p=Array.from(o.querySelectorAll("form"));for(let a of p){if(a===o)continue;e=f(a,`nested light DOM form ${d(a)}`)&&e}let n=Array.from(o.querySelectorAll("*"));for(let a of n){let l=a?.shadowRoot;if(!l)continue;let r=Array.from(l.querySelectorAll("form"));for(let i of r)e=f(i,`shadow form under ${d(a)}`)&&e}return e}function v(){let o=navigator.userAgent,e=/Safari/i.test(o),d=/(Chrome|Chromium|CriOS|FxiOS|EdgiOS|OPiOS|Opera)/i.test(o);return e&&!d}function $(o){if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;let e=window.matchMedia?.("(max-width: 639px)").matches,d=o.classList.contains("dialog-no-scale-animation")?"pds-dialog-fade-enter":e?"pds-dialog-enter-mobile":"pds-dialog-enter";o.style.animation="none",o.offsetWidth,o.style.animation=`${d} var(--transition-normal) ease`,o.addEventListener("animationend",()=>{o.style.animation=""},{once:!0})}function C(o={}){return o?.liquidGlassEffects===!0}async function S(o,e={}){return e={...{title:"Confirm",type:"confirm",buttons:{ok:{name:"OK",primary:!0},cancel:{name:"Cancel",cancel:!0}}},...e},new Promise(m=>{let f=!1,p=(r,i)=>{f||(f=!0,i.close(),m(r))},n=document.createElement("dialog");v()&&n.classList.add("dialog-no-scale-animation"),C(e)&&n.classList.add("liquid-glass"),e.size&&n.classList.add(`dialog-${e.size}`),e.type&&n.classList.add(`dialog-${e.type}`),e.class&&(Array.isArray(e.class)?n.classList.add(...e.class):n.classList.add(e.class)),e.maxHeight&&n.style.setProperty("--dialog-max-height",e.maxHeight);let a=Object.entries(e.buttons).map(([r,i])=>{let t=i.primary?"btn-primary btn-sm":"btn-outline btn-sm",s=i.cancel?"button":"submit",c=i.formNoValidate?" formnovalidate":"";return`<button type="${s}" class="${t}" value="${r}"${c}>${i.name}</button>`});if(e.useForm){let r=document.createElement("div");b(r,o);let i=r.querySelector("form");if(i){n.innerHTML=`
+function E(i){let e=Array.isArray(i?.strings)?i.strings:[],c=Array.isArray(i?.values)?i.values:[],p=new Set,h=[],g=/(\s)(\.[\w-]+)=\s*$/;for(let o=0;o<e.length;o+=1){let t=e[o]??"",d=t.match(g);if(d&&o<c.length){let r=d[2].slice(1),a=`pds-val-${o}`;t=t.replace(g,`$1data-pds-prop="${r}:${a}"`),p.add(o)}h.push(t),o<c.length&&!p.has(o)&&h.push(`<!--pds-val-${o}-->`)}let s=document.createElement("template");s.innerHTML=h.join("");let n=(o,t)=>{let d=o.parentNode;if(!d)return;if(t==null){d.removeChild(o);return}let b=r=>{if(r!=null){if(r instanceof Node){d.insertBefore(r,o);return}if(Array.isArray(r)){r.forEach(a=>b(a));return}d.insertBefore(document.createTextNode(String(r)),o)}};b(t),d.removeChild(o)},l=document.createTreeWalker(s.content,NodeFilter.SHOW_COMMENT),u=[];for(;l.nextNode();){let o=l.currentNode;o?.nodeValue?.startsWith("pds-val-")&&u.push(o)}return u.forEach(o=>{let t=Number(o.nodeValue.replace("pds-val-",""));n(o,c[t])}),s.content.querySelectorAll("*").forEach(o=>{let t=o.getAttribute("data-pds-prop");if(!t)return;let[d,b]=t.split(":"),r=Number(String(b).replace("pds-val-",""));d&&Number.isInteger(r)&&(o[d]=c[r]),o.removeAttribute("data-pds-prop")}),s.content}function S(i,e){if(e==null)return;if(typeof e=="object"&&Array.isArray(e.strings)&&Array.isArray(e.values)){i.appendChild(E(e));return}if(e instanceof Node){i.appendChild(e);return}if(Array.isArray(e)){e.forEach(p=>S(i,p));return}let c=typeof e=="string"?e:String(e);i.appendChild(document.createTextNode(c))}function q(i){if(!i)return!0;let e=!0,c=n=>{if(!n||typeof n!="object")return"<unknown>";let l=n.tagName?String(n.tagName).toLowerCase():"node",u=n.id?`#${n.id}`:"",y=typeof n.getAttribute=="function"?n.getAttribute("name"):null,o=y?`[name="${y}"]`:"";return`${l}${u}${o}`},p=(n,l)=>{if(!n||typeof n.querySelectorAll!="function")return;let u=Array.from(n.querySelectorAll(":invalid"));if(!u.length)return;let y=u.map(o=>{let t=typeof o.validationMessage=="string"?o.validationMessage:"";return`${c(o)}${t?` \u2014 ${t}`:""}`});console.warn(`ask.validateDialogFormTree: invalid controls in ${l}:`,y)},h=(n,l)=>{try{let u=typeof n.reportValidity=="function"?n.reportValidity():n.checkValidity?.()??!0;return u||p(n,l),u}catch(u){return console.error(`ask.validateDialogFormTree: validation threw in ${l}`,u),!1}};e=h(i,"host dialog form")&&e;let g=Array.from(i.querySelectorAll("form"));for(let n of g){if(n===i)continue;e=h(n,`nested light DOM form ${c(n)}`)&&e}let s=Array.from(i.querySelectorAll("*"));for(let n of s){let l=n?.shadowRoot;if(!l)continue;let u=Array.from(l.querySelectorAll("form"));for(let y of u)e=h(y,`shadow form under ${c(n)}`)&&e}return e}function L(){let i=navigator.userAgent,e=/Safari/i.test(i),c=/(Chrome|Chromium|CriOS|FxiOS|EdgiOS|OPiOS|Opera)/i.test(i);return e&&!c}function M(i){if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;let e=window.matchMedia?.("(max-width: 639px)").matches,c=i.classList.contains("dialog-no-scale-animation")?"pds-dialog-fade-enter":e?"pds-dialog-enter-mobile":"pds-dialog-enter";i.style.animation="none",i.offsetWidth,i.style.animation=`${c} var(--transition-normal) ease`,i.addEventListener("animationend",()=>{i.style.animation=""},{once:!0})}function T(i={}){return i?.liquidGlassEffects===!0}async function V(i,e={}){let c={title:"Confirm",type:"confirm",buttons:{ok:{name:"OK",primary:!0},cancel:{name:"Cancel",cancel:!0}}};e={...c,...e};let p=e.buttons&&typeof e.buttons=="object"?e.buttons:c.buttons,h=s=>{if(s==null)return{actionCode:"dismiss",actionKind:"dismiss",button:null};let n=p?.[s]??null,l=s==="ok"?"ok":s==="dismiss"?"dismiss":n?.cancel||s==="cancel"?"cancel":"custom";return{actionCode:s,actionKind:l,button:n}},g=s=>{if(typeof s>"u"||s===null||s===!0)return{allow:!0};if(s===!1)return{allow:!1};if(typeof s=="object"){let n=Object.prototype.hasOwnProperty.call(s,"result")||Object.prototype.hasOwnProperty.call(s,"value");return{allow:s.allow!==!1,hasResult:n,result:Object.prototype.hasOwnProperty.call(s,"result")?s.result:s.value}}return{allow:!!s}};return new Promise(s=>{let n=!1,l=(r,a,{shouldClose:f=!0}={})=>{if(!n&&(n=!0,s(r),!(!f||!a?.open)))try{a.close()}catch(m){console.warn("ask: dialog.close() failed",m)}},u=async r=>{if(r.actionKind!=="ok"||typeof e.beforeClose!="function")return{allow:!0};try{let a=await e.beforeClose(r);return g(a)}catch(a){return console.error("ask.beforeClose: validation failed",a),{allow:!1}}},y=({actionKind:r,form:a})=>r==="ok"?e.useForm&&a?new FormData(a):!0:!1,o=async({actionCode:r,form:a,submitter:f,originalEvent:m,bypassValidation:w=!1,shouldClose:O=!0})=>{if(n)return;let{actionKind:v,button:F}=h(r),A=a||t.querySelector("form")||null;if(e.useForm&&v==="ok"&&A&&!w&&!q(A))return;let C=y({actionKind:v,form:A}),$=await u({actionCode:r,actionKind:v,dialog:t,form:A,formData:e.useForm&&v==="ok"&&A?C:null,submitter:f,originalEvent:m,options:e,button:F,defaultResult:C});if(!$.allow)return;let x=$.hasResult?$.result:C;l(x,t,{shouldClose:O})},t=document.createElement("dialog");L()&&t.classList.add("dialog-no-scale-animation"),T(e)&&t.classList.add("liquid-glass"),e.size&&t.classList.add(`dialog-${e.size}`),e.type&&t.classList.add(`dialog-${e.type}`),e.class&&(Array.isArray(e.class)?t.classList.add(...e.class):t.classList.add(e.class)),e.maxHeight&&t.style.setProperty("--dialog-max-height",e.maxHeight);let d=Object.entries(p).map(([r,a])=>{let f=a.primary?"btn-primary btn-sm":"btn-outline btn-sm",m=a.cancel?"button":"submit",w=a.formNoValidate?" formnovalidate":"";return`<button type="${m}" class="${f}" value="${r}"${w}>${a.name}</button>`});if(e.useForm){let r=document.createElement("div");S(r,i);let a=r.querySelector("form");if(a){t.innerHTML=`
           <header>
             <h2>${e.title}</h2>
           </header>
-        `;let t=document.createElement("article");for(t.className="dialog-body";i.firstChild;)t.appendChild(i.firstChild);i.appendChild(t);let s=document.createElement("footer");s.innerHTML=a.join(""),i.appendChild(s),n.appendChild(i)}else n.innerHTML=`
+        `;let f=document.createElement("article");for(f.className="dialog-body";a.firstChild;)f.appendChild(a.firstChild);a.appendChild(f);let m=document.createElement("footer");m.innerHTML=d.join(""),a.appendChild(m),t.appendChild(a)}else t.innerHTML=`
           <header>
             <h2>${e.title}</h2>
           </header>
           <article id="msg-container"></article>
           <footer>
-            ${a.join("")}
+            ${d.join("")}
           </footer>
-        `,n.querySelector("#msg-container").appendChild(r)}else{n.innerHTML=`
+        `,t.querySelector("#msg-container").appendChild(r)}else{t.innerHTML=`
         <form method="dialog">
           <header>
             <h2>${e.title}</h2>
@@ -19,7 +19,7 @@ function g(o){let e=Array.isArray(o?.strings)?o.strings:[],d=Array.isArray(o?.va
           <article id="msg-container"></article>
           
           <footer>
-            ${a.join("")}
+            ${d.join("")}
           </footer>
         </form>
-      `;let r=n.querySelector("#msg-container");b(r,o)}n.addEventListener("click",r=>{let i=r.target.closest('button[value="ok"]');if(i&&e.useForm){r.preventDefault();let s=n.querySelector("form");if(!s||!!!i.hasAttribute("formnovalidate")&&!A(s))return;let h=new FormData(s);p(h,n);return}r.target.closest('button[value="cancel"]')&&p(!1,n)});let l=()=>{let r=n.querySelector("form");if(r){if(r.dataset.askSubmitBound==="true")return;r.dataset.askSubmitBound="true",r.addEventListener("submit",i=>{i.preventDefault();let t=i.submitter?.value??(e.useForm?"ok":void 0),s=!!i.submitter?.hasAttribute("formnovalidate");if(e.useForm&&t==="ok"&&!s&&!A(r))return;let c;e.useForm&&t==="ok"?c=new FormData(r):c=t==="ok",p(c,n)})}else requestAnimationFrame(l)};n.addEventListener("close",()=>{setTimeout(()=>n.remove(),200)}),document.body.appendChild(n),requestAnimationFrame(l),typeof e.rendered=="function"&&e.rendered(n),n.showModal(),requestAnimationFrame(()=>$(n))})}export{S as ask};
+      `;let r=t.querySelector("#msg-container");S(r,i)}t.addEventListener("click",r=>{let a=r.target.closest('button[value="cancel"]');a&&o({actionCode:"cancel",form:t.querySelector("form"),submitter:a,originalEvent:r})});let b=()=>{let r=t.querySelector("form");if(r){if(r.dataset.askSubmitBound==="true")return;r.dataset.askSubmitBound="true",r.addEventListener("submit",a=>{a.preventDefault();let f=a.submitter?.value??(e.useForm?"ok":void 0),m=!!a.submitter?.hasAttribute("formnovalidate");o({actionCode:f,form:r,submitter:a.submitter,originalEvent:a,bypassValidation:m})})}else requestAnimationFrame(b)};t.addEventListener("cancel",r=>{r.preventDefault(),o({actionCode:"dismiss",form:t.querySelector("form"),originalEvent:r})}),t.addEventListener("close",()=>{n||l(!1,t,{shouldClose:!1}),setTimeout(()=>t.remove(),200)}),document.body.appendChild(t),requestAnimationFrame(b),typeof e.rendered=="function"&&e.rendered(t),t.showModal(),requestAnimationFrame(()=>M(t))})}export{V as ask};