Niris-public-community-components NPM

Niris web components

Niris is an application for the automated management of citizen requests and complaints. It offers solutions tailored to each municipality. Is a product offered by APSL which consists of both a backoffice and a public page where citizens can carry out their procedures through a form. This library offers the possibility of using that form through web components developed with lit.

This library contains two web components:

<textarea-to-iris>: Web component to, when clicking a button, show a textarea and be able to enter the suggestion or complaint there, when submitting, it will redirect us to the public website of Niris (configurable by property)

example

<form-niris>: Replica of the ATE form for sending requests, requests or suggestions.

example

Installation
Attributes
Styling
Versioning
Authors
License

Installation

Install with npm

$ npm install public-community-components

Vue

<script setup>
import { FormNiris } from "niris-public-community-components/dist/form-to-niris.js";
</script>


<template>
  <form-niris
    detailId="15"
    defaultLat="39.8409929"
    defaultLon="3.1173402"
    apiUrl="https://iris2-backend-demos-iris-community.labs.apsl.io/services/iris/api-public"
  />
</template>

vite.config.js:

import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => ['form-niris'].includes(tag),
        },
      },
    }),
  ],
});

JS vainiilla

You need to load lit polyfills support and webcomponentesjs library first

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script src="../node_modules/lit/polyfill-support.js"></script>
    <script src="../node_modules/niris-public-community-components/dist/textarea-to-niris.js"></script>
  </head>

  <body>
    <textarea-to-niris />
  </body>
</html>

More help at how to use a web component

Attributes

TextareaToNiris

formaction: string - This will be the URL to which the form will redirect us. It must be the ATE URL ending with /buscador-tematicas. For example: https://iris-public-community-iris-community.labs.apsl.io/buscador-tematicas

FormNiris

detailId string - ID of the record you want to use. This ID can be seen in the URL of both the backoffice for each record and the ATE.
defaultLat string - Latitude. This will be the default location that will appear on the map. Only for the tabs that require a location.
defaultLon string - Longitude. This will be the default location that will appear on the map. Only for the tabs that require a location.
apiUrl string - Backend endpoint.

Styling

We can override the following styles for each component

TextareaToNiris

textarea-to-niris {
  --primary-color: #007bff;
  --background-color: #d4d4d4;
  --color: #fff;
  --padding: 1rem 1rem;
  --font-size: 1rem;
  --border-radius: 0rem;
  --font-weight: 500;
  --font-family: 'Arial', sans-serif;
}

FormNiris

form-niris {
  --primary-color: #0aa99d;
  --border-radius: 0rem;
  --padding: 0.7rem 0.7rem;
  --font-size: 1rem;
  --border-radius: 0rem;
  --font-weight: 500;
  --font-family: 'Arial', sans-serif;
  --color-button: #fff;
  --error-color: #c23939;
  --tab-secondary-color: #ced1d7;
}