furo-ui5-money-input

furo-ui5-money-input #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-money-input.js';
exports FuroUi5MoneyInput js
exports <furo-ui5-money-input> custom-element-definition
superclass LitElement
mixes FBP
mixes FieldNodeAdapter

Summary: Binds a entityObject field google.type.Money to a number-input and currency dropdown fields

Description #

The furo-ui5-money-input is a input element composition for FieldNodes of type google.type.Money. It consists of

  • ui5-input of type Number
  • furo-ui5-text-input

You can set currencies dropdown with options in meta or set options attribute as json in element or set currencies as string in element. the three ways have priority : currencies > options as attribute > options in meta.

1
2
3

 <furo-ui5-money-input fn-bind-data="--dao(google.type.Money)" options='{"list": [ "CHF","EUR","USD" ]}'></furo-ui5-money-input>
 <furo-ui5-money-input fn-bind-data="--dao(google.type.Money)" options='{"list": [ {"id":"CHF","label":"Schweiz"},{"id":"EUR","label":"Europa", "selected": true}'></furo-ui5-money-input>
 <furo-ui5-money-input fn-bind-data="--dao(google.type.Money)" currencies="CHF,EUR,USD"></furo-ui5-money-input>

supported meta and constraints #

  • readonly: true , set the element to readonly
  • required: true , set the element to required

Tags: money input

Example # 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<furo-form-layouter four>
  
  <furo-ui5-money-input
    fn-bind-data="--doExp(*.furo_data_money_input)"
  ></furo-ui5-money-input>
  <furo-ui5-money-input
      value-state="Success"
      text="Override"
      fn-bind-data="--doExp(*.furo_data_money_input)"
   ></furo-ui5-money-input>
</furo-form-layouter>

Attributes and Properties #

disabled #

disabled Boolean

A Boolean attribute which, if present, means this field cannot be edited by the user.

readonly #

readonly Boolean

A Boolean attribute which, if present, means this field is readonly.

Events #

furo-value-changed #

at-furo-value-changed → Money

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

Methods #

bindData #

bindData(fieldNode FieldNode ) ⟹ void

FieldNode → fn-bind-data

Binds a fieldNode.

Supported types: google.type.Money

  • fieldNode of type google.type.Money

readAttributes #

readAttributes() ⟹ void

* → fn-read-attributes

Reads the attributes which are set on the component dom. Attributes that can be se are required,readonly,disabled , Use this after manual or scripted update of the attributes.



onFnaOptionsChanged #

onFnaOptionsChanged(options `` ) ⟹ void

`` → fn-on-fna-options-changed

Checks if options.flags has an entry currency_list In this case the option list is applied to the currency field as suggestion items.

If you use a static option definition in the type specification (furo), you can define the list as follows:

options:
  flags:
      - currency_list
  list:
      - '@type': type.googleapis.com/furo.Optionitem
        display_name: Swiss francs (CHF)
        id: CHF
        selected: false
      - '@type': type.googleapis.com/furo.Optionitem
        display_name: Euro (EUR)
        id: EUR
        selected: false
      - '@type': type.googleapis.com/furo.Optionitem
        display_name: US Dollar (USD)
        id: USD
        selected: false
  • options

_convertDataToMoneyObj #

_convertDataToMoneyObj(currency *amount* obj `` ) ⟹ void

`` → fn–convert-data-to-money-obj

  • currency
  • amount
  • obj

onFnaFieldStateChanged #

onFnaFieldStateChanged(state `` ) ⟹ void

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

set the value state

  • state