furo-ui5-password-input

furo-ui5-password-input #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-password-input.js';
exports FuroUi5PasswordInput js
mixes FieldNodeAdapter

Summary: data password input field

Description #

The ‘furo-ui5-password-input’ component allows the user to enter and edit password with data binding. It supports all features from the SAP ui5 Input element.

You can bind any string type, like furo.fat.String type or the google.protobuf.StringValue type.

1
2
3

 <furo-ui5-password-input
    fn-bind-data="--dao(FIELDNODE)"
 ></furo-ui5-password-input>

Specificity #

  1. Attributes which are set in the html source will have the highest specificity and will never get overwritten by metas or fat.
  2. Attributes set in meta will have the lowest specificity and will be overwritten by attributes from fat.

** meta < fat < html **

supported FAT attributes #

  • “readonly”:“true” set the element to readonly
  • “required”:“true” set the element to required
  • “disabled”:“true” set the element to disabled
  • “icon”:“home” set the icon
  • “placeholder”:“string” set the placeholder for the element
  • “max”:“number” set the maximum number of characters available in the input field.

supported meta and constraints #

  • readonly: true , set the element to readonly
  • placeholder:“some string” set the placeholder for the element
  • max:“number” set the maximum number of characters available in the input field.

The constraint required will mark the element as required

Methods #

bind-data(fieldNode) Bind a entity field. You can use the entity even when no data was received.

When you use at-object-ready from a furo-data-object which emits a EntityNode, just bind the field with –entity(*.fields.fieldname)

Example # 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<furo-form-layouter four>
  <furo-ui5-password-input
    fn-bind-data="--doExp(*.furo_data_password_input)"
  ></furo-ui5-password-input>
  <furo-ui5-password-input
    readonly
    fn-bind-data="--doExp(*.furo_data_password_input)"
  ></furo-ui5-password-input>
  <furo-ui5-password-input
    disabled
    fn-bind-data="--doExp(*.furo_data_password_input)"
  ></furo-ui5-password-input>
  <furo-ui5-password-input
    value-state="Success"
    placeholder="Placeholder"
    fn-bind-data="--doExp(*.furo_data_password_input)"
  ></furo-ui5-password-input>
</furo-form-layouter>

Attributes and Properties #

nativeInputAttributes #



type #

default: 'Password'



_previousValueState #

default: { state: 'None', message: '' }



_attributesFromFNA #

default: { readonly: undefined, placeholder: undefined, }



_constraintsFromFNA #

default: { required: undefined, max: undefined, // maps to maxlength }



_labelsFromFAT #

default: { readonly: undefined, disabled: undefined, required: undefined, hidden: undefined, }



_attributesFromFAT #

default: { placeholder: undefined, max: undefined, // maps to maxlength icon: undefined, // updates the icon }



_privilegedAttributes #

default: { readonly: null, placeholder: null, required: null, disabled: null, icon: null, maxlength: null, }



Events #

change #

at-change → text

Fired when the input operation has finished by pressing Enter or on focusout.

input #

at-input → ``

Fired when the value of the ui5-input changes at each keystroke, and when a suggestion item has been selected.

furo-value-changed #

at-furo-value-changed → String

Fires the field value when it changes.

icon-clicked #

at-icon-clicked → MouseEvent

Fired when icon is clicked

password-showed #

at-password-showed → void

Fired when the password is showed, after calling the show method.

password-hidden #

at-password-hidden → void

Fired when the password is hidden, after calling the hide() method.

Methods #

bindData #

bindData(fieldNode FieldNode ) ⟹ void

FieldNode → fn-bind-data

Binds a FieldNode to the component.

Supported types: string, google.protobuf.StringValue, furo.fat.String

  • fieldNode

readAttributes #

readAttributes() ⟹ void

* → fn-read-attributes

Reads the attributes which are set on the component dom. those attributes can be set. value-state, value-state-message, icon, placeholder, required,readonly,disabled Use this after manual or scripted update of the attributes.



onFnaFieldStateChanged #

onFnaFieldStateChanged(state `` ) ⟹ void

`` → fn-on-fna-field-state-changed

set the value state

  • state

show #

show() ⟹ void

* → fn-show

show password



hide #

hide() ⟹ void

* → fn-hide

hide password



toggleVisibility #

toggleVisibility() ⟹ void

* → fn-toggle-visibility

toggle visibility of the password. (show/hide) password