@oscarpalmer/oui 0.39.0 → 0.41.0

package/dist/js/floatable/floatable.embedded.mjs

@@ -1,70 +1,24 @@
+import { FLOATABLE_AREAS, FLOATABLE_ATTRIBUTE, FLOATABLE_ATTRIBUTE_POSITION, FLOATABLE_MESSAGE, FLOATABLE_POSITIONS, FLOATABLE_SYMBOL, floatables } from "./floatable.model.mjs";
 import { getAria } from "@oscarpalmer/toretto/aria";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { on } from "@oscarpalmer/toretto/event";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
-import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { setStyle, setStyles } from "@oscarpalmer/toretto/style";
 //#region src/js/floatable/floatable.embedded.ts
-var OuiFloatable = class {
-	#destroyed = false;
-	#state;
-	/**
-	* Is the floatable open?
-	*/
-	get open() {
-		return this.#state.content.checkVisibility();
-	}
-	/**
-	* Open or close the floatable
-	*/
-	set open(value) {
-		if (value === true) this.show();
-		else if (value === false) this.hide();
-	}
-	constructor(state, standalone) {
-		this.#state = state;
-		this.#initialize(state, standalone);
-	}
-	/**
-	* Destroy the floatable, removing it from the DOM and cleaning up references
-	*/
-	destroy() {
-		if (this.#destroyed) return;
-		this.#destroyed = true;
-		removeFloatable(this.#state.content);
-		this.#state.anchor = null;
-		this.#state.content = null;
-	}
-	/**
-	* Closes the floatable
-	*/
-	hide() {
-		if (!this.#destroyed && this.open) this.#state.content.hidePopover();
-	}
-	/**
-	* Opens the floatable
-	*/
-	show() {
-		if (!this.#destroyed && !this.open) this.#state.content.showPopover();
-	}
-	/**
-	* Update the position of the floatable, with an optional new position
-	*
-	* @param position Optional new position
-	*/
-	update(position) {
-		if (!this.#destroyed) setPosition(this.#state, position);
-	}
-	#initialize(state, standalone) {
-		const { anchor, content } = state;
-		if (standalone) {
-			setAttribute(content, ATTRIBUTE_FLOATABLE, "");
-			content.popover = "manual";
-		} else content.popover ??= "auto";
-		setStyle(anchor, "anchorName", state.name);
-		setStyle(content, "positionAnchor", state.name);
-	}
-};
+function OuiFloatable(state, standalone) {
+	this[FLOATABLE_SYMBOL] = state;
+	initialize(state, standalone);
+}
+OuiFloatable.prototype.destroy = destroyFloatable;
+OuiFloatable.prototype.hide = hideFloatable;
+OuiFloatable.prototype.show = showFloatable;
+OuiFloatable.prototype.update = updateFloatable;
+Object.defineProperties(OuiFloatable.prototype, { open: {
+	enumerable: true,
+	get: getOpen,
+	set: setOpen
+} });
 function getAnchorName(anchor) {
 	let { anchorName } = anchor.style;
 	if (anchorName.length > 0) return anchorName;
@@ -93,74 +47,92 @@ function createFloatable(anchor, content, options) {
 	return floatable;
 }
 function createInstance(anchor, content, options, standalone) {
-	if (!isHTMLOrSVGElement(anchor) || !isHTMLOrSVGElement(content)) throw new TypeError(MESSAGE);
-	let floatable = options.reusable ? void 0 : instances.get(content);
+	if (!isHTMLOrSVGElement(anchor) || !isHTMLOrSVGElement(content)) throw new TypeError(FLOATABLE_MESSAGE);
+	let floatable = options.reusable ? void 0 : floatables.get(content);
 	if (floatable == null) {
 		floatable = new OuiFloatable(getState(anchor, content, options), standalone);
-		if (!options.reusable) instances.set(content, floatable);
+		if (!options.reusable) floatables.set(content, floatable);
 	}
 	return floatable;
 }
+function destroyFloatable() {
+	const state = this[FLOATABLE_SYMBOL];
+	if (state.destroyed) return;
+	state.destroyed = true;
+	removeFloatable(state.content);
+	state.anchor = void 0;
+	state.content = void 0;
+}
 function getOnBeforeToggleListener(element) {
 	return on(element, "beforetoggle", (event) => {
 		const { newState, source } = event;
 		if (newState === "open" && source != null && getAria(source, "disabled") === true) event.preventDefault();
 	}, { passive: false });
 }
+function getOpen() {
+	return this[FLOATABLE_SYMBOL].content.checkVisibility();
+}
 function getOptions(input) {
 	const object = isPlainObject(input) ? input : {};
 	return {
 		open: typeof object.open === "boolean" ? object.open : true,
-		position: object.position != null && object.position in AREAS ? object.position : "below"
+		position: object.position != null && object.position in FLOATABLE_AREAS ? object.position : "below"
 	};
 }
 function getPosition(state, override) {
-	if (override != null && override in AREAS) return override;
+	if (override != null && override in FLOATABLE_AREAS) return override;
 	const { anchor, options } = state;
 	if (options.attribute == null) return options.position;
 	const attribute = getAttribute(anchor, options.attribute);
-	return attribute != null && attribute in AREAS ? attribute : options.position;
+	return attribute != null && attribute in FLOATABLE_AREAS ? attribute : options.position;
 }
 function getState(anchor, content, options) {
 	return {
 		anchor,
 		content,
 		name: getAnchorName(anchor),
-		options
+		options,
+		destroyed: false
 	};
 }
+function hideFloatable() {
+	const { content, destroyed } = this[FLOATABLE_SYMBOL];
+	if (!destroyed && this.open) content.hidePopover();
+}
+function initialize(state, standalone) {
+	const { anchor, content } = state;
+	if (standalone) {
+		setAttribute(content, FLOATABLE_ATTRIBUTE, "");
+		content.popover = "manual";
+	} else content.popover ??= "auto";
+	setStyle(anchor, "anchorName", state.name);
+	setStyle(content, "positionAnchor", state.name);
+}
 function removeFloatable(content) {
-	instances.get(content)?.destroy();
-	instances.delete(content);
+	floatables.get(content)?.destroy();
+	floatables.delete(content);
+}
+function setOpen(value) {
+	if (value === true) this.show();
+	else if (value === false) this.hide();
 }
 function setPosition(state, override) {
 	const position = getPosition(state, override);
-	const area = AREAS[position];
-	setAttribute(state.content, ATTRIBUTE_POSITION, POSITIONS[area]);
+	const area = FLOATABLE_AREAS[position];
+	setAttribute(state.content, FLOATABLE_ATTRIBUTE_POSITION, FLOATABLE_POSITIONS[area]);
 	setStyles(state.content, {
 		positionAnchor: state.name,
 		positionArea: area
 	});
 }
-const AREAS = {
-	above: "block-start",
-	"above-end": "start span-start",
-	"above-start": "start span-end",
-	below: "block-end",
-	"below-end": "end span-start",
-	"below-start": "end span-end",
-	end: "center end",
-	"end-bottom": "span-start end",
-	"end-top": "span-end end",
-	start: "center start",
-	"start-bottom": "span-start start",
-	"start-top": "span-end start"
-};
-const ATTRIBUTE_FLOATABLE = "oui-floatable";
-const ATTRIBUTE_POSITION = "oui-position";
-const MESSAGE = "Anchor and content must be an HTMLElement or SVGElement";
-const POSITIONS = Object.fromEntries(Object.entries(AREAS).map(([position, area]) => [area, position]));
-const instances = /* @__PURE__ */ new WeakMap();
+function showFloatable() {
+	const { content, destroyed } = this[FLOATABLE_SYMBOL];
+	if (!destroyed && !this.open) content.showPopover();
+}
+function updateFloatable(position) {
+	const state = this[FLOATABLE_SYMBOL];
+	if (!state.destroyed) setPosition(state, position);
+}
 let index = 0;
 //#endregion
-export { ATTRIBUTE_FLOATABLE, OuiFloatable, createEmbeddedFloatable, createFloatable, getOnBeforeToggleListener, removeFloatable };
+export { createEmbeddedFloatable, createFloatable, getOnBeforeToggleListener, removeFloatable };

package/dist/js/floatable/floatable.model.d.mts

@@ -0,0 +1,2 @@
+import { a as FLOATABLE_MESSAGE, c as OuiFloatable, d as OuiFloatableState, f as floatables, i as FLOATABLE_ATTRIBUTE_POSITION, l as OuiFloatableOptions, n as FLOATABLE_AREAS, o as FLOATABLE_POSITIONS, r as FLOATABLE_ATTRIBUTE, s as FLOATABLE_SYMBOL, t as CreateOuiFloatableOptions, u as OuiFloatablePosition } from "../floatable.model-DXsQgoU7.mjs";
+export { CreateOuiFloatableOptions, FLOATABLE_AREAS, FLOATABLE_ATTRIBUTE, FLOATABLE_ATTRIBUTE_POSITION, FLOATABLE_MESSAGE, FLOATABLE_POSITIONS, FLOATABLE_SYMBOL, OuiFloatable, OuiFloatableOptions, OuiFloatablePosition, OuiFloatableState, floatables };

package/dist/js/floatable/floatable.model.mjs

@@ -0,0 +1,23 @@
+//#region src/js/floatable/floatable.model.ts
+const FLOATABLE_AREAS = {
+	above: "block-start",
+	"above-end": "start span-start",
+	"above-start": "start span-end",
+	below: "block-end",
+	"below-end": "end span-start",
+	"below-start": "end span-end",
+	end: "center end",
+	"end-bottom": "span-start end",
+	"end-top": "span-end end",
+	start: "center start",
+	"start-bottom": "span-start start",
+	"start-top": "span-end start"
+};
+const FLOATABLE_ATTRIBUTE = "oui-floatable";
+const FLOATABLE_ATTRIBUTE_POSITION = "oui-position";
+const FLOATABLE_MESSAGE = "Anchor and content must be an HTMLElement or SVGElement";
+const FLOATABLE_POSITIONS = Object.fromEntries(Object.entries(FLOATABLE_AREAS).map(([position, area]) => [area, position]));
+const FLOATABLE_SYMBOL = Symbol(FLOATABLE_ATTRIBUTE);
+const floatables = /* @__PURE__ */ new WeakMap();
+//#endregion
+export { FLOATABLE_AREAS, FLOATABLE_ATTRIBUTE, FLOATABLE_ATTRIBUTE_POSITION, FLOATABLE_MESSAGE, FLOATABLE_POSITIONS, FLOATABLE_SYMBOL, floatables };

package/dist/js/floatable/floatable.standalone.d.mts

@@ -1,2 +1,3 @@
-import { a as OuiFloatablePosition, n as CreateOuiFloatableOptions, r as OuiFloatable, s as createFloatable } from "../floatable.embedded-DQYkXt8X.mjs";
+import { c as OuiFloatable, t as CreateOuiFloatableOptions, u as OuiFloatablePosition } from "../floatable.model-DXsQgoU7.mjs";
+import { n as createFloatable } from "../floatable.embedded-ncshL3Sa.mjs";
 export { type CreateOuiFloatableOptions, type OuiFloatable, type OuiFloatablePosition, createFloatable };

package/dist/js/floatable.embedded-ncshL3Sa.d.mts

@@ -0,0 +1,17 @@
+import { c as OuiFloatable, l as OuiFloatableOptions, t as CreateOuiFloatableOptions } from "./floatable.model-DXsQgoU7.mjs";
+import { RemovableEventListener } from "@oscarpalmer/toretto/models";
+//#region src/js/floatable/floatable.embedded.d.ts
+declare function createEmbeddedFloatable(anchor: Element, content: Element, options: OuiFloatableOptions): OuiFloatable;
+/**
+ * Create a _OuiFloatable_ for an anchor and content element
+ *
+ * @param anchor Anchor element
+ * @param content Content element
+ * @param options _OuiFloatable_ options
+ * @returns _OuiFloatable_ instance
+ */
+declare function createFloatable(anchor: Element, content: Element, options?: CreateOuiFloatableOptions): OuiFloatable;
+declare function getOnBeforeToggleListener(element: Element): RemovableEventListener;
+declare function removeFloatable(content: HTMLElement): void;
+//#endregion
+export { removeFloatable as i, createFloatable as n, getOnBeforeToggleListener as r, createEmbeddedFloatable as t };

package/dist/js/{floatable.embedded-DQYkXt8X.d.mts → floatable.model-DXsQgoU7.d.mts}

@@ -1,5 +1,4 @@
-import { RemovableEventListener } from "@oscarpalmer/toretto/models";
-//#region src/js/floatable/floatable.embedded.d.ts
+//#region src/js/floatable/floatable.model.d.ts
 type CreateOuiFloatableOptions = {
   /**
    * Open the floatable when created? _(defaults to `true`)_
@@ -10,8 +9,8 @@ type CreateOuiFloatableOptions = {
    */
   position?: OuiFloatablePosition;
 };
-declare class OuiFloatable {
-  #private;
+type OuiFloatable = {
+  [FLOATABLE_SYMBOL]: OuiFloatableState;
   /**
    * Is the floatable open?
    */
@@ -20,7 +19,6 @@ declare class OuiFloatable {
    * Open or close the floatable
    */
   set open(value: boolean);
-  constructor(state: OuiFloatableState, standalone: boolean);
   /**
    * Destroy the floatable, removing it from the DOM and cleaning up references
    */
@@ -39,7 +37,7 @@ declare class OuiFloatable {
    * @param position Optional new position
    */
   update(position?: OuiFloatablePosition): void;
-}
+};
 type OuiFloatableOptions = {
   attribute?: string;
   position: OuiFloatablePosition;
@@ -49,21 +47,16 @@ type OuiFloatablePosition = "above" | "above-end" | "above-start" | "below" | "b
 type OuiFloatableState = {
   anchor: HTMLElement;
   content: HTMLElement;
+  destroyed: boolean;
   name: string;
   options: OuiFloatableOptions;
 };
-declare function createEmbeddedFloatable(anchor: HTMLElement, content: HTMLElement, options: OuiFloatableOptions): OuiFloatable;
-/**
- * Create a _OuiFloatable_ for an anchor and content element
- *
- * @param anchor Anchor element
- * @param content Content element
- * @param options _OuiFloatable_ options
- * @returns _OuiFloatable_ instance
- */
-declare function createFloatable(anchor: HTMLElement, content: HTMLElement, options?: CreateOuiFloatableOptions): OuiFloatable;
-declare function getOnBeforeToggleListener(element: HTMLElement): RemovableEventListener;
-declare function removeFloatable(content: HTMLElement): void;
-declare const ATTRIBUTE_FLOATABLE = "oui-floatable";
+declare const FLOATABLE_AREAS: Record<OuiFloatablePosition, string>;
+declare const FLOATABLE_ATTRIBUTE = "oui-floatable";
+declare const FLOATABLE_ATTRIBUTE_POSITION = "oui-position";
+declare const FLOATABLE_MESSAGE = "Anchor and content must be an HTMLElement or SVGElement";
+declare const FLOATABLE_POSITIONS: Record<string, OuiFloatablePosition>;
+declare const FLOATABLE_SYMBOL: unique symbol;
+declare const floatables: WeakMap<HTMLElement, OuiFloatable>;
 //#endregion
-export { OuiFloatablePosition as a, getOnBeforeToggleListener as c, OuiFloatableOptions as i, removeFloatable as l, CreateOuiFloatableOptions as n, createEmbeddedFloatable as o, OuiFloatable as r, createFloatable as s, ATTRIBUTE_FLOATABLE as t };
+export { FLOATABLE_MESSAGE as a, OuiFloatable as c, OuiFloatableState as d, floatables as f, FLOATABLE_ATTRIBUTE_POSITION as i, OuiFloatableOptions as l, FLOATABLE_AREAS as n, FLOATABLE_POSITIONS as o, FLOATABLE_ATTRIBUTE as r, FLOATABLE_SYMBOL as s, CreateOuiFloatableOptions as t, OuiFloatablePosition as u };

package/dist/js/focus-trap/focus-trap.embedded.d.mts

@@ -1,2 +1,2 @@
-import { a as OuiFocusTrapOptions, i as OuiFocusTrap, n as ATTRIBUTE_FOCUSTRAP_CONTAIN, o as createFocusTrap, r as ATTRIBUTE_FOCUSTRAP_NOESCAPE, s as removeFocusTrap, t as ATTRIBUTE_FOCUSTRAP } from "../focus-trap.embedded-CjyFQYow.mjs";
-export { ATTRIBUTE_FOCUSTRAP, ATTRIBUTE_FOCUSTRAP_CONTAIN, ATTRIBUTE_FOCUSTRAP_NOESCAPE, OuiFocusTrap, OuiFocusTrapOptions, createFocusTrap, removeFocusTrap };
+import { n as removeFocusTrap, t as createFocusTrap } from "../focus-trap.embedded-DpcPkP7c.mjs";
+export { createFocusTrap, removeFocusTrap };