diff --git a/packages/openbridge-webcomponents/__vis__/linux/__baselines__/components/keyboard-full/keyboard-full.stories.ts/password-auto.png b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/components/keyboard-full/keyboard-full.stories.ts/password-auto.png new file mode 100644 index 000000000..ed516fa25 Binary files /dev/null and b/packages/openbridge-webcomponents/__vis__/linux/__baselines__/components/keyboard-full/keyboard-full.stories.ts/password-auto.png differ diff --git a/packages/openbridge-webcomponents/src/components/keyboard-full/keyboard-full.stories.ts b/packages/openbridge-webcomponents/src/components/keyboard-full/keyboard-full.stories.ts index 778ccbb8a..c206c4ce8 100644 --- a/packages/openbridge-webcomponents/src/components/keyboard-full/keyboard-full.stories.ts +++ b/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 = { @@ -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; @@ -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, diff --git a/packages/openbridge-webcomponents/src/components/keyboard-full/keyboard-full.ts b/packages/openbridge-webcomponents/src/components/keyboard-full/keyboard-full.ts index 0706eaac4..ccf5f1619 100644 --- a/packages/openbridge-webcomponents/src/components/keyboard-full/keyboard-full.ts +++ b/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 { * * ``` * - * **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 *