• 0.3.6 - fix(ui)

• 0.3.2 - fix(ui): simplified percentage format in stepper

• 0.3.1 -

• 0.2.17 - added stepper

• 0.2.16 - fix screen flickering when options loading

• 0.2.15 - style fix

• 0.2.14 - style fix

• 0.2.13 - mask configuration from server first

• 0.2.12 - add showCongratulation property to BinixoFormComponent, by default not shown

• 0.2.11 - added date format configuration 'MM.y'

• 0.2.10 - added validation errors RFC, CLABE and credit score

• 0.2.9 - read min and max field attribute from cronfig

• 0.2.8 - added filter payload data;

• 0.2.7 - added transfrom submit data func, for PH,VN phone mutation

• 0.2.6 - added onStepSubmit event with data ( totalSteps: number; step: number; title: string; shortId: string )

• 0.2.5 - fix bdate field, for old contact

• 0.2.3 - added esp email validator

Postbacks: https://ph.s3.binixocrm.com/api/postback/add/?shortId=v1TxQER&sum=5&ti=testtest_macrob_jeff2&offer=jeff&currency=EUR https://cdn.binixocrm.com/v2/rest/postback/add/?ti=test_uah&offer=TEST&sum=150&status=1&currency=UAH&shortid=_iLgc6E&loc=ua&goal=1

Section 1 - binixo-webcomponent

This project consist web components

Section 2 - Development server

For local development you have to start project by using commands Run ng serve (or run npm run start:app) for a dev server. For prod env use command npm run start:app:prod. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Section 3 - Build as standard browser app

Run ng build (or run npm run build:app) to build the project with dev env. For other envs use npm build:app:${mode}. The build artifacts will be stored in the dist/binixo-app directory.

Section 4 - Build as web-component (example for binixo-credit-form-web-component)

For build web-component you have to find the required web component and run the corresponding command npm run build:${appWebComponentName} (for example npm run build:binixo-credit-form-web-component) - for dev mode. For prod use the same command, but also add mode npm build:binixo-credit-form-web-component:prod". The build artifacts will be stored in the dist/binixo-credit-form-web-component directory.

Section 5 - Rules pass input params into web component (example for binixo-credit-form-web-component)

Angular under the hood all attributes @Input() converts to naming from camel-case to dash case. For example @Input() baseApiUrl after will convert in attribute base-api-url. For web component you can pass this @Input() direct as attribute on tag web component or pass it after web component dom element as

<script>
  const app = document.getElementsByTagName("bx-credit-form-app")[0];
  app.setAttribute("base-api-url", "");
  app.baseApiUrl = "";
</script>

For pass functions better use approach app.function = () => {}. Because in this case we do not need converting it from string to Fn

Section 6 - Rules handle output params for web component (example for binixo-credit-form-web-component)

Angular under the hood all attributes @Output() converts to CustomEvent instance and emit this events from web component outside. The name the same - name used in angular web component and name for registration listeners. For example @Output() changeStep outside you should use also changeStep. For example:

<script>
  const app = document.getElementsByTagName("bx-credit-form-app")[0];
  app.addEventListener("changeStep", handlerFunction);
</script>

Such as changeStep converting to CustomEvent - function handlerFunction will handle object of this instance. Data from @Output() params will consist in field details. And field type will have name of naming @Output.

Section 7 - Example of using web component (example for binixo-credit-form-web-component)

For using web component you should do next steps:

1. Copy all files from directory dist/binixo-credit-form-web-component and paste in your project.
2. Then connect all scripts (main.js, polyfills, runtime) and styles (styles.css) on your html page.
3. In project find module binixo-credit-form-element.module.ts and in this file find field _tagName that define name your custom web-component (in this case the _tagName is bx-credit-form-app).
4. Pass the required parameters to the input bx-credit-form-app.
5. If you need output result - you have to registration it by using addEventListeners

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.787ffb9110adbba4.css" />
  </head>

  <body>
    <bx-credit-form-app language="ro" base-api-url="https://v2.test.binixocrm.com/api/landing/v2" redirect-delay="0" batching-update="true or false or just can use batching-update without" short-id="your sort id"></bx-credit-form-app>
  </body>

  <script>
    const app = document.getElementsByTagName("bx-credit-form-app")[0];
    // Set @Input() after render WC
    app.setAttribute("base-api-url", "");

    // Handle events by using @Output() after render WC
    app.addEventListener("changeStep", handlerFunction);
    app.addEventListener("requestTracking", handlerFunction);
  </script>

  <script src="polyfills.97513df1ca482117.js"></script>
  <script src="runtime.71a164ec17d817ec.js"></script>
  <script src="main.0d5ff975a24193c6.js"></script>
</html>