feat(keyboard-full): add inputType prop for password masking

packages/openbridge-webcomponents/src/components/keyboard-full/keyboard-full.stories.ts

@@ -1,7 +1,10 @@
 import type {Meta, StoryObj} from '@storybook/web-components-vite';
 import {html} from 'lit';
 import {ObcKeyboardFull, ObcKeyboardFullType} from './keyboard-full.js';
-import {ObcTextInputFieldSize} from '../text-input-field/text-input-field.js';
+import {
+  HTMLInputTypeAttribute,
+  ObcTextInputFieldSize,
+} from '../text-input-field/text-input-field.js';
 import './keyboard-full.js';
 
 const meta: Meta<typeof ObcKeyboardFull> = {
@@ -87,6 +90,15 @@ Ideal for touch-screen interfaces where a custom keyboard is needed for text ent
         defaultValue: {summary: 'large'},
       },
     },
+    inputType: {
+      control: 'select',
+      options: Object.values(HTMLInputTypeAttribute),
+      description:
+        'Input type forwarded to the field. Use `password` to mask the value.',
+      table: {
+        defaultValue: {summary: 'text'},
+      },
+    },
   },
   args: {
     type: ObcKeyboardFullType.Floating,
@@ -96,6 +108,7 @@ Ideal for touch-screen interfaces where a custom keyboard is needed for text ent
     placeholder: 'Placeholder',
     showNumberRow: false,
     inputSize: ObcTextInputFieldSize.Large,
+    inputType: HTMLInputTypeAttribute.Text,
   },
 } satisfies Meta<ObcKeyboardFull>;
 
@@ -111,6 +124,7 @@ const renderKeyboard = (args: ObcKeyboardFull) => html`
     .placeholder=${args.placeholder}
     .showNumberRow=${args.showNumberRow}
     .inputSize=${args.inputSize}
+    .inputType=${args.inputType}
     @value-change=${(e: CustomEvent) =>
       console.log('value-change:', e.detail.value)}
     @done-click=${(e: CustomEvent) =>
@@ -168,6 +182,26 @@ export const WithNumberRow: Story = {
   },
 };
 
+export const Password: Story = {
+  args: {
+    type: ObcKeyboardFullType.Floating,
+    parameterName: 'Password',
+    placeholder: 'Enter password...',
+    value: 'secret123',
+    showNumberRow: true,
+    inputType: HTMLInputTypeAttribute.Password,
+  },
+  render: renderKeyboard,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Sets `inputType="password"` to mask the entered value. A show/hide toggle appears inside the input field, and the `value-change`/`done-click` events still emit the real (unmasked) string.',
+      },
+    },
+  },
+};
+
 export const WithoutTopBar: Story = {
   args: {
     type: ObcKeyboardFullType.Floating,

packages/openbridge-webcomponents/src/components/keyboard-full/keyboard-full.ts

@@ -11,6 +11,7 @@ import '../../icons/icon-arrow-left-google.js';
 import '../../icons/icon-shift-lock.js';
 import '../text-input-field/text-input-field.js';
 import {
+  HTMLInputTypeAttribute,
   ObcTextInputField,
   ObcTextInputFieldSize,
 } from '../text-input-field/text-input-field.js';
@@ -143,10 +144,16 @@ export enum ObcKeyboardFullMode {
  * </obc-keyboard-full>
  * ```
  *
- * **Flat keyboard with number row for password input:**
+ * **Masked password entry:**
+ *
+ * Set `inputType="password"` to mask the entered value in the input field. A
+ * show/hide toggle appears inside the field so users can reveal what they typed.
+ * The `value-change` and `done-click` events still carry the real (unmasked)
+ * string.
  * ```html
  * <obc-keyboard-full
  *   type="flat"
+ *   inputType="password"
  *   parameterName="Password"
  *   placeholder="Enter password"
  *   showNumberRow
@@ -190,6 +197,13 @@ export class ObcKeyboardFull extends LitElement {
   @property({type: String}) inputSize: ObcTextInputFieldSize =
     ObcTextInputFieldSize.Large;
 
+  /**
+   * Input type forwarded to the embedded input field. Set to `password` to mask
+   * the entered value (a show/hide toggle is then shown inside the field).
+   */
+  @property({type: String}) inputType: HTMLInputTypeAttribute =
+    HTMLInputTypeAttribute.Text;
+
   @state() private mode: ObcKeyboardFullMode = ObcKeyboardFullMode.ABC;
   @state() private capsLock = false;
 
@@ -691,6 +705,7 @@ export class ObcKeyboardFull extends LitElement {
               .value=${this.value}
               .placeholder=${this.placeholder}
               .size=${this.inputSize}
+              .type=${this.inputType}
               @input=${this.onInputFieldValueChanged}
             >
             </obc-text-input-field>