@financial-times/o3-form 0.7.1 → 0.7.2

package/cjs/PasswordInput.js

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _jsxruntime = require('react/jsx-runtime');
 var _outils = require('@financial-times/o-utils');
 var _FormField = require('./fieldComponents/FormField');
-var _PasswordInputjs = require('../js/PasswordInput.js');
+var _PasswordInputToggle = require('./PasswordInputToggle');
 var _react = require('react');
 const uniqueId = _outils.uidBuilder.call(void 0, "o3-form-password-input");
 const PasswordInput = ({
@@ -17,9 +17,7 @@ const PasswordInput = ({
   const id = inputId || uniqueId("_");
   let inputRef = _react.useRef.call(void 0, null);
   let buttonRef = _react.useRef.call(void 0, null);
-  let toggleRef = _react.useRef.call(void 0, 
-    null
-  );
+  let toggleRef = _react.useRef.call(void 0, null);
   const inputClasses = [
     "o3-form",
     "o3-form-text-input",
@@ -32,7 +30,7 @@ const PasswordInput = ({
     const inputEl = inputRef.current;
     const btnEl = buttonRef.current;
     if (!inputEl || !btnEl) return;
-    toggleRef.current = new (0, _PasswordInputjs.PasswordInput)(inputEl, {
+    toggleRef.current = new (0, _PasswordInputToggle.PasswordInputToggle)(inputEl, {
       toggleButtonId: btnEl.id
     });
     return () => {

package/cjs/PasswordInputToggle.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @typedef {Object} PasswordInputOptions
+ * @property {string} [toggleButtonId]
+ */
+/**
+ * @export
+ */
+declare class PasswordInputToggle {
+    _toggleButtonId: string;
+    _input: HTMLInputElement;
+    _toggleState: boolean;
+    _toggleButton: HTMLElement | null;
+    /**
+     * Class constructor.
+     *
+     * @param {HTMLElement} [element] - An input element in the DOM
+     * @param {PasswordInputToggleOptions} [options] - An options object for configuring the password input
+     */
+    constructor(element: HTMLInputElement, options?: {
+        toggleButtonId: string;
+    });
+    _setAttributes(): void;
+    /** @returns {void} */
+    toggle(): void;
+}
+
+export { PasswordInputToggle };

package/cjs/PasswordInputToggle.js

@@ -0,0 +1,46 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});class PasswordInputToggle {
+  /**
+   * Class constructor.
+   *
+   * @param {HTMLElement} [element] - An input element in the DOM
+   * @param {PasswordInputToggleOptions} [options] - An options object for configuring the password input
+   */
+  constructor(element, options = { toggleButtonId: "o3-form-password-input-toggle" }) {
+    this._toggleButtonId = options.toggleButtonId;
+    this._input = element;
+    this._toggleState = false;
+    this._toggleButton = document.getElementById(options.toggleButtonId);
+    this._setAttributes();
+  }
+  _setAttributes() {
+    const buttonLabel = this._toggleState ? "Hide password" : "Show password";
+    this._input.type = this._toggleState ? "text" : "password";
+    if (this._toggleButton) {
+      this._toggleButton.setAttribute(
+        "aria-pressed",
+        this._toggleState.toString()
+      );
+      this._toggleButton.setAttribute("aria-label", buttonLabel);
+      this._toggleButton.setAttribute("title", buttonLabel);
+      this._toggleButton.classList.remove(
+        this._toggleState ? "o3-password-input__show-password-toggle--show" : "o3-password-input__show-password-toggle--hide"
+      );
+      this._toggleButton.classList.add(
+        this._toggleState ? "o3-password-input__show-password-toggle--hide" : "o3-password-input__show-password-toggle--show"
+      );
+    }
+  }
+  /** @returns {void} */
+  toggle() {
+    if (!this._toggleButton) {
+      throw new Error(
+        `Toggle button for password field not found using id ${this._toggleButtonId}`
+      );
+    }
+    this._toggleState = !this._toggleState;
+    this._setAttributes();
+  }
+}
+
+
+exports.PasswordInputToggle = PasswordInputToggle;

package/esm/PasswordInput.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { uidBuilder } from "@financial-times/o-utils";
 import { LabeledFormField } from "./fieldComponents/FormField";
-import { PasswordInput as PasswordInputController } from "../js/PasswordInput.js";
+import { PasswordInputToggle as PasswordInputToggleController } from "./PasswordInputToggle";
 import { useEffect, useRef } from "react";
 const uniqueId = uidBuilder("o3-form-password-input");
 const PasswordInput = ({
@@ -17,9 +17,7 @@ const PasswordInput = ({
   const id = inputId || uniqueId("_");
   let inputRef = useRef(null);
   let buttonRef = useRef(null);
-  let toggleRef = useRef(
-    null
-  );
+  let toggleRef = useRef(null);
   const inputClasses = [
     "o3-form",
     "o3-form-text-input",
@@ -32,7 +30,7 @@ const PasswordInput = ({
     const inputEl = inputRef.current;
     const btnEl = buttonRef.current;
     if (!inputEl || !btnEl) return;
-    toggleRef.current = new PasswordInputController(inputEl, {
+    toggleRef.current = new PasswordInputToggleController(inputEl, {
       toggleButtonId: btnEl.id
     });
     return () => {

package/esm/PasswordInputToggle.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @typedef {Object} PasswordInputOptions
+ * @property {string} [toggleButtonId]
+ */
+/**
+ * @export
+ */
+declare class PasswordInputToggle {
+    _toggleButtonId: string;
+    _input: HTMLInputElement;
+    _toggleState: boolean;
+    _toggleButton: HTMLElement | null;
+    /**
+     * Class constructor.
+     *
+     * @param {HTMLElement} [element] - An input element in the DOM
+     * @param {PasswordInputToggleOptions} [options] - An options object for configuring the password input
+     */
+    constructor(element: HTMLInputElement, options?: {
+        toggleButtonId: string;
+    });
+    _setAttributes(): void;
+    /** @returns {void} */
+    toggle(): void;
+}
+
+export { PasswordInputToggle };

package/esm/PasswordInputToggle.js

@@ -0,0 +1,46 @@
+class PasswordInputToggle {
+  /**
+   * Class constructor.
+   *
+   * @param {HTMLElement} [element] - An input element in the DOM
+   * @param {PasswordInputToggleOptions} [options] - An options object for configuring the password input
+   */
+  constructor(element, options = { toggleButtonId: "o3-form-password-input-toggle" }) {
+    this._toggleButtonId = options.toggleButtonId;
+    this._input = element;
+    this._toggleState = false;
+    this._toggleButton = document.getElementById(options.toggleButtonId);
+    this._setAttributes();
+  }
+  _setAttributes() {
+    const buttonLabel = this._toggleState ? "Hide password" : "Show password";
+    this._input.type = this._toggleState ? "text" : "password";
+    if (this._toggleButton) {
+      this._toggleButton.setAttribute(
+        "aria-pressed",
+        this._toggleState.toString()
+      );
+      this._toggleButton.setAttribute("aria-label", buttonLabel);
+      this._toggleButton.setAttribute("title", buttonLabel);
+      this._toggleButton.classList.remove(
+        this._toggleState ? "o3-password-input__show-password-toggle--show" : "o3-password-input__show-password-toggle--hide"
+      );
+      this._toggleButton.classList.add(
+        this._toggleState ? "o3-password-input__show-password-toggle--hide" : "o3-password-input__show-password-toggle--show"
+      );
+    }
+  }
+  /** @returns {void} */
+  toggle() {
+    if (!this._toggleButton) {
+      throw new Error(
+        `Toggle button for password field not found using id ${this._toggleButtonId}`
+      );
+    }
+    this._toggleState = !this._toggleState;
+    this._setAttributes();
+  }
+}
+export {
+  PasswordInputToggle
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@financial-times/o3-form",
-	"version": "0.7.1",
+	"version": "0.7.2",
 	"description": "Provides a viewport-aware tooltip for annotating or or highlighting other aspects of a product's UI",
 	"keywords": [
 		"form",