Flag component

Componente que muestra un select con banderas que debe funcionar tanto para

1. Idiomas: un select que muestre la lista de idiomas con su respectiva bandera representativa
2. Prefijo de telefono (calling codes): un select que muestre la lista de prefijo de telefono de cada pais con su respectiva bandera representativa
3. Paises: un select que muestre la lista de paises con su respectiva bandera representativa

Caracteristicas:

1. El componente solo contiene imagenes referenciadas por un codigo de pais. Los textos por ejemplo el idioma se inyecta desde fuera el componente.
2. Como la imagen de la bandera se obtiene de un png, puedes tambien indicar mediante el input "position" la posicion de la bandera
3. El label debe ser proporcionado desde fuera si no se quiere mostrar un label simplemente no enviar o ponerlo vacio

Inputs:

• label: texto del componente
• flags: Lista de codigos del pais a mostrar con su respectivo texto, el texto es opcional si se requiere sobreescribir el texto.
• default: codigo flag que debe mostrarse al cargar el componente. El codigo debe estar declarado en la lista de codigos enviados al componente.
• showDivider: para mostrar el divider. por defecto no se muestra
• show-all: para cuestiones de debug y pruebas del funcionamiento del componente

Eventos y funciones:

• Evento al cambiar el valor
• Funcion para obtener el valor seleccionado
• funcion para seleccionar un idioma enviando el codigo de idioma
• funcion para hacer reset del flag elegido

Ejm: Para prefijo de telefono

<ml-flag-dropdown

flags=”[{ key: ‘PER’, label: ‘+ 51’’}, {key: ‘BOL’, label: ‘+ 591’ }]” default=”PER”

Para observar un ejemplo mas completo, revise el archivo index.html o ejecute el proyecto

Stencil components are just Web Components, so they work in any major framework or with no framework at all.

Getting Started

para ejecutar el proyecto:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Need help? Check out our docs here.

Naming Components

When creating new component tags, we recommend not using stencil in the component name (ex: <stencil-datepicker>). This is because the generated component has little to nothing to do with Stencil; it's just a web component!

Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix ion.

Using this component

Script tag

• Publish to NPM
• Put a script tag similar to this <script src='https://unpkg.com/my-component@0.0.1/dist/mycomponent.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install my-component --save
• Put a script tag similar to this <script src='node_modules/my-component/dist/mycomponent.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install my-component --save
• Add an import to the npm packages import my-component;
• Then you can use the element anywhere in your template, JSX, html etc