@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/password-input/index.d.ts

@@ -0,0 +1,71 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.js";
+import { M as Service, S as EventObject, T as Machine } from "../../index-CFoN0L3C.js";
+import { b as PropTypes, r as DirectionProperty, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.js";
+import "../../index-BdeZuSX6.js";
+//#region src/machines/password-input/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "indicator" | "input" | "label" | "control" | "visibilityTrigger">;
+//#endregion
+//#region src/machines/password-input/types.d.ts
+interface VisibilityChangeDetails {
+  visible: boolean;
+}
+type ElementIds = Partial<{
+  input: string;
+  visibilityTrigger: string;
+}>;
+type IntlTranslations = Partial<{
+  visibilityTrigger: ((visible: boolean) => string) | undefined;
+}>;
+interface PasswordInputProps extends DirectionProperty, CommonProperties {
+  defaultVisible?: boolean | undefined;
+  visible?: boolean | undefined;
+  onVisibilityChange?: ((details: VisibilityChangeDetails) => void) | undefined;
+  ids?: ElementIds | undefined;
+  disabled?: boolean | undefined;
+  invalid?: boolean | undefined;
+  readOnly?: boolean | undefined;
+  required?: boolean | undefined;
+  translations?: IntlTranslations | undefined;
+  ignorePasswordManagers?: boolean | undefined;
+  autoComplete?: "current-password" | "new-password" | undefined;
+  name?: string | undefined;
+}
+interface PasswordInputSchema {
+  state: "idle";
+  props: PasswordInputProps;
+  context: {
+    visible: boolean;
+  };
+  event: EventObject;
+  action: string;
+  guard: string;
+  effect: string;
+}
+type PasswordInputService = Service<PasswordInputSchema>;
+type PasswordInputMachine = Machine<PasswordInputSchema>;
+interface PasswordInputApi<T extends PropTypes = PropTypes> {
+  visible: boolean;
+  disabled: boolean;
+  invalid: boolean;
+  focus: VoidFunction;
+  setVisible: (value: boolean) => void;
+  toggleVisible: VoidFunction;
+  getRootProps: () => T["element"];
+  getLabelProps: () => T["label"];
+  getInputProps: () => T["input"];
+  getVisibilityTriggerProps: () => T["button"];
+  getIndicatorProps: () => T["element"];
+  getControlProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/password-input/connect.d.ts
+declare function connect<T extends PropTypes>(service: PasswordInputService, normalize: NormalizeProps<T>): PasswordInputApi<T>;
+//#endregion
+//#region src/machines/password-input/machine.d.ts
+declare const machine: Machine<PasswordInputSchema>;
+//#endregion
+//#region src/machines/password-input/props.d.ts
+declare const props: (keyof PasswordInputProps)[];
+declare const splitProps: <Props extends Partial<PasswordInputProps>>(props: Props) => [Partial<PasswordInputProps>, Omit<Props, keyof PasswordInputProps>];
+//#endregion
+export { type PasswordInputApi as Api, type ElementIds, type IntlTranslations, type PasswordInputMachine as Machine, type PasswordInputProps as Props, type PasswordInputService as Service, type VisibilityChangeDetails, anatomy, connect, machine, props, splitProps };

package/dist/machines/password-input/index.js

@@ -0,0 +1,219 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { L as ariaAttr, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { m as isLeftClick } from "../../event-bTItRgiw.js";
+import { n as createSplitProps, q as uuid } from "../../utils-Cht5XaHf.js";
+import { r as createMachine } from "../../core-CJ0MZr3D.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/password-input/anatomy.ts
+const anatomy = createAnatomy("password-input").parts("root", "input", "label", "control", "indicator", "visibilityTrigger");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/password-input/dom.ts
+const getInputId = (ctx) => ctx.ids?.input ?? `password-input:${ctx.id}:input`;
+const getInputEl = (ctx) => ctx.getById(getInputId(ctx));
+//#endregion
+//#region src/machines/password-input/connect.ts
+function connect(service, normalize) {
+	const { scope, prop, context } = service;
+	const visible = context.get("visible");
+	const disabled = !!prop("disabled");
+	const invalid = !!prop("invalid");
+	const readOnly = !!prop("readOnly");
+	const required = !!prop("required");
+	const interactive = !(readOnly || disabled);
+	const translations = prop("translations");
+	return {
+		visible,
+		disabled,
+		invalid,
+		focus() {
+			getInputEl(scope)?.focus();
+		},
+		setVisible(value) {
+			service.send({
+				type: "VISIBILITY.SET",
+				value
+			});
+		},
+		toggleVisible() {
+			service.send({
+				type: "VISIBILITY.SET",
+				value: !visible
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(invalid),
+				"data-readonly": dataAttr(readOnly)
+			});
+		},
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs,
+				htmlFor: getInputId(scope),
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(invalid),
+				"data-readonly": dataAttr(readOnly),
+				"data-required": dataAttr(required)
+			});
+		},
+		getInputProps() {
+			return normalize.input({
+				...parts.input.attrs,
+				id: getInputId(scope),
+				autoCapitalize: "off",
+				name: prop("name"),
+				required: prop("required"),
+				autoComplete: prop("autoComplete"),
+				spellCheck: false,
+				readOnly,
+				disabled,
+				type: visible ? "text" : "password",
+				"data-state": visible ? "visible" : "hidden",
+				"aria-invalid": ariaAttr(invalid),
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(invalid),
+				"data-readonly": dataAttr(readOnly),
+				...prop("ignorePasswordManagers") ? passwordManagerProps : {}
+			});
+		},
+		getVisibilityTriggerProps() {
+			return normalize.button({
+				...parts.visibilityTrigger.attrs,
+				type: "button",
+				tabIndex: -1,
+				"aria-controls": getInputId(scope),
+				"aria-expanded": visible,
+				"data-readonly": dataAttr(readOnly),
+				disabled,
+				"data-disabled": dataAttr(disabled),
+				"data-state": visible ? "visible" : "hidden",
+				"aria-label": translations?.visibilityTrigger?.(visible),
+				onPointerDown(event) {
+					if (!isLeftClick(event)) return;
+					if (!interactive) return;
+					event.preventDefault();
+					service.send({ type: "TRIGGER.CLICK" });
+				}
+			});
+		},
+		getIndicatorProps() {
+			return normalize.element({
+				...parts.indicator.attrs,
+				"aria-hidden": true,
+				"data-state": visible ? "visible" : "hidden",
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(invalid),
+				"data-readonly": dataAttr(readOnly)
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(invalid),
+				"data-readonly": dataAttr(readOnly)
+			});
+		}
+	};
+}
+const passwordManagerProps = {
+	"data-1p-ignore": "",
+	"data-lpignore": "true",
+	"data-bwignore": "true",
+	"data-form-type": "other",
+	"data-protonpass-ignore": "true"
+};
+//#endregion
+//#region src/machines/password-input/machine.ts
+const machine = createMachine({
+	props({ props }) {
+		return {
+			id: uuid(),
+			defaultVisible: false,
+			autoComplete: "current-password",
+			ignorePasswordManagers: false,
+			...props,
+			translations: {
+				visibilityTrigger(visible) {
+					return visible ? "Hide password" : "Show password";
+				},
+				...props.translations
+			}
+		};
+	},
+	context({ prop, bindable }) {
+		return { visible: bindable(() => ({
+			value: prop("visible"),
+			defaultValue: prop("defaultVisible"),
+			onChange(value) {
+				prop("onVisibilityChange")?.({ visible: value });
+			}
+		})) };
+	},
+	initialState() {
+		return "idle";
+	},
+	effects: ["trackFormEvents"],
+	states: { idle: { on: {
+		"VISIBILITY.SET": { actions: ["setVisibility"] },
+		"TRIGGER.CLICK": { actions: ["toggleVisibility", "focusInputEl"] }
+	} } },
+	implementations: {
+		actions: {
+			setVisibility({ context, event }) {
+				context.set("visible", event.value);
+			},
+			toggleVisibility({ context }) {
+				context.set("visible", (c) => !c);
+			},
+			focusInputEl({ scope }) {
+				getInputEl(scope)?.focus();
+			}
+		},
+		effects: { trackFormEvents({ scope, send }) {
+			const form = getInputEl(scope)?.form;
+			if (!form) return;
+			const controller = new (scope.getWin()).AbortController();
+			form.addEventListener("reset", (event) => {
+				if (event.defaultPrevented) return;
+				send({
+					type: "VISIBILITY.SET",
+					value: false
+				});
+			}, { signal: controller.signal });
+			form.addEventListener("submit", () => {
+				send({
+					type: "VISIBILITY.SET",
+					value: false
+				});
+			}, { signal: controller.signal });
+			return () => controller.abort();
+		} }
+	}
+});
+//#endregion
+//#region src/machines/password-input/props.ts
+const props = createProps()([
+	"defaultVisible",
+	"dir",
+	"id",
+	"onVisibilityChange",
+	"visible",
+	"ids",
+	"getRootNode",
+	"disabled",
+	"invalid",
+	"required",
+	"readOnly",
+	"translations",
+	"ignorePasswordManagers",
+	"autoComplete",
+	"name"
+]);
+const splitProps = createSplitProps(props);
+//#endregion
+export { anatomy, connect, machine, props, splitProps };