niris-public-community-components 0.0.1 → 0.0.3

package/src/generated/locale-codes.ts

@@ -0,0 +1,25 @@
+// Do not modify this file by hand!
+// Re-generate this file by running lit-localize.
+
+/**
+ * The locale code that templates in this source code are written in.
+ */
+export const sourceLocale = `es`;
+
+/**
+ * The other locale codes that this application is localized into. Sorted
+ * lexicographically.
+ */
+export const targetLocales = [
+  `ca`,
+  `en`,
+] as const;
+
+/**
+ * All valid project locale codes. Sorted lexicographically.
+ */
+export const allLocales = [
+  `ca`,
+  `en`,
+  `es`,
+] as const;

package/src/generated/locales/ca.ts

@@ -0,0 +1,71 @@
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+    
+    
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      's07f7935b16a64e43': `Agraïm que ens hagi fet arribar el seu reconeixement, el qual es farà arribar al departament responsable. Amb aquesta informació, donem per contestada la seva comunicació`,
+'s080ffb79b58c5d88': `Primer cognom`,
+'s0b9a2919aa57a8c5': `CIF`,
+'s10132a1f9423876e': `No implementat`,
+'s108402007fab3ec5': `Anglès`,
+'s1abaad4e0bafba35': `Error carregant el formulari`,
+'s1d7849c1bb306edd': `Català`,
+'s1f26cb0a65a0c36c': `Dades personals`,
+'s22d3debb0fe19771': `Atenció en línia Niris`,
+'s238c3ed6d3ecc66a': `Tancar`,
+'s26432c53ecd144e8': `Escriviu la vostra consulta`,
+'s2b9fde9a5739d2a0': `Nom`,
+'s36e2c319c2d9da17': `NIE`,
+'s4177fe7f5d70fd33': `Tornar`,
+'s4ab9666eac463302': `Porta`,
+'s4d7be50524a42681': `Afegir fitxer`,
+'s54cd3139a4d69fbc': `Ubicació`,
+'s572f5ed1f68bfcbc': `NIF/DNI`,
+'s5b2d32ceb3df3643': `Escala`,
+'s5ea9f272dd7f1da8': `Correu electrònic`,
+'s694b51e10128655f': `Escriviu el vostre telèfon`,
+'s6b344d8147866cc1': `Informació, Consultes, Queixes i Suggeriments:`,
+'s7bc25696aeb11d7f': `Persona de contacte`,
+'s7c953cf010581df3': `Passaport`,
+'s7cf6cfa5cdc725e3': `Acceptats:`,
+'s7fbca09fab401ca5': `Confirma el teu correu`,
+'s889d2b38e8eb16b1': `Escriviu el vostre correu`,
+'s88a1a97d95757131': `Districte`,
+'s9802dd10b2c2f760': `Enviar`,
+'sa6e4de4116073f37': `Confirma el correu`,
+'saac6d40cd7052608': `Núm. Document`,
+'sac8b678ef5500421': `Districte*:`,
+'saddc930eb2efdca6': `Fitxa creada!`,
+'sae3f1a64e8f9c33d': `Cercar`,
+'sb044a1b221567c04': `Tipus de Document`,
+'sb096f7a10f6e5904': `Carrer`,
+'sb1942b92592ac8cf': `Ho sentim. Torni-ho a provar més tard`,
+'sb6cacaf045a2fe90': `Atenció en línia`,
+'sc93268d68f7d69a4': `Número`,
+'sca318e1f09f7800c': `Any de naixement`,
+'scbe4c6673872bda5': `Telèfon`,
+'sd08f47835375b0d2': `Idioma de la resposta`,
+'sd09a1a8863c8ae5b': `Característiques de la petició`,
+'sd1f44f1a8bc20e67': `Correu electrònic`,
+'sd2bd4af48abb3752': `Raó social`,
+'sd901c7baed664633': `Ciutadà`,
+'sd9e5b15f059a59ee': `Segon cognom`,
+'sdd366d6d0fe37812': `Empresa/Entitat`,
+'sdf913cb738108398': `Els correus no coincideixen`,
+'se1674091f5776527': `Confirma el correu electrònic`,
+'se962e919c6552a74': `Planta`,
+'see4f9c33f20ae7e2': `Missatge`,
+'sf2d9bee1ddd749d4': `Escriviu breument el vostre missatge`,
+'sf4533552651212ea': `Els camps marcats amb un (*) són obligatoris.`,
+'sf6686b6b90cc7680': `Carregant formulari`,
+'sf8824fc70d91da9e': `Espanyol`,
+'sf9e6fbadcce256d0': `Ha ocorregut un error`,
+'sfbe83072001704e5': `El codi de seguiment és`,
+    };
+  

package/src/generated/locales/en.ts

@@ -0,0 +1,71 @@
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+    
+    
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      's07f7935b16a64e43': `We appreciate you sending us your recognition, which will be forwarded to the responsible department. With this information, we consider your communication answered`,
+'s080ffb79b58c5d88': `First surname`,
+'s0b9a2919aa57a8c5': `Tax ID`,
+'s10132a1f9423876e': `Not implemented`,
+'s108402007fab3ec5': `English`,
+'s1abaad4e0bafba35': `Error loading the form`,
+'s1d7849c1bb306edd': `Catalan`,
+'s1f26cb0a65a0c36c': `Personal information`,
+'s22d3debb0fe19771': `Niris online support`,
+'s238c3ed6d3ecc66a': `Close`,
+'s26432c53ecd144e8': `Write your query here`,
+'s2b9fde9a5739d2a0': `Name`,
+'s36e2c319c2d9da17': `NIE`,
+'s4177fe7f5d70fd33': `Go back`,
+'s4ab9666eac463302': `Door`,
+'s4d7be50524a42681': `Add file`,
+'s54cd3139a4d69fbc': `Location`,
+'s572f5ed1f68bfcbc': `NIF/DNI`,
+'s5b2d32ceb3df3643': `Staircase`,
+'s5ea9f272dd7f1da8': `Email`,
+'s694b51e10128655f': `Write your phone number`,
+'s6b344d8147866cc1': `Information, Queries, Complaints and Suggestions:`,
+'s7bc25696aeb11d7f': `Contact person`,
+'s7c953cf010581df3': `Passport`,
+'s7cf6cfa5cdc725e3': `Accepted:`,
+'s7fbca09fab401ca5': `Confirm your email`,
+'s889d2b38e8eb16b1': `Write your email`,
+'s88a1a97d95757131': `District`,
+'s9802dd10b2c2f760': `Send`,
+'sa6e4de4116073f37': `Confirm email`,
+'saac6d40cd7052608': `Document Number`,
+'sac8b678ef5500421': `District*:`,
+'saddc930eb2efdca6': `Form created!`,
+'sae3f1a64e8f9c33d': `Search`,
+'sb044a1b221567c04': `Document Type`,
+'sb096f7a10f6e5904': `Street`,
+'sb1942b92592ac8cf': `We apologize for the inconvenience. Please try again later`,
+'sb6cacaf045a2fe90': `Online support`,
+'sc93268d68f7d69a4': `Number`,
+'sca318e1f09f7800c': `Year of birth`,
+'scbe4c6673872bda5': `Phone`,
+'sd08f47835375b0d2': `Response language`,
+'sd09a1a8863c8ae5b': `Request characteristics`,
+'sd1f44f1a8bc20e67': `Email`,
+'sd2bd4af48abb3752': `Company name`,
+'sd901c7baed664633': `Citizen`,
+'sd9e5b15f059a59ee': `Second surname`,
+'sdd366d6d0fe37812': `Company/Entity`,
+'sdf913cb738108398': `Emails do not match`,
+'se1674091f5776527': `Confirm email`,
+'se962e919c6552a74': `Floor`,
+'see4f9c33f20ae7e2': `Message`,
+'sf2d9bee1ddd749d4': `Write your message briefly`,
+'sf4533552651212ea': `Fields marked with (*) are mandatory.`,
+'sf6686b6b90cc7680': `Loading form`,
+'sf8824fc70d91da9e': `Spanish`,
+'sf9e6fbadcce256d0': `An error has occurred`,
+'sfbe83072001704e5': `The tracking code is`,
+    };
+  

package/src/lit-localize.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://raw.githubusercontent.com/lit/lit/main/packages/localize-tools/config.schema.json",
+  "sourceLocale": "es",
+  "targetLocales": ["en", "ca"],
+  "tsConfig": "../tsconfig.json",
+  "output": {
+    "mode": "runtime",
+    "outputDir": "./generated/locales",
+    "localeCodesModule": "./generated/locale-codes.ts"
+  },
+  "interchange": {
+    "format": "xliff",
+    "xliffDir": "./xliff/"
+  }
+}

package/src/map-niris.ts

@@ -0,0 +1,215 @@
+import {html, css, LitElement} from 'lit';
+import {property, state} from 'lit/decorators.js';
+import {globalStyles} from './styles/globalStyles';
+import {Icon, LeafletMouseEvent, Map, Marker} from 'leaflet';
+
+// https://github.com/Leaflet/Leaflet/issues/7055
+// https://github.com/Leaflet/Leaflet/pull/7174
+// https://github.com/Leaflet/Leaflet/pull/6239
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import * as L from 'leaflet/dist/leaflet-src.esm.js';
+
+class MapNiris extends LitElement {
+  private _marker!: Marker | null;
+  private _map!: Map;
+  private _markerIcon!: Icon;
+
+  @property({type: String}) domain: string =
+    'https://iris2-backend-demo-iris-community.labs.apsl.io/services/iris/api-public';
+  // TODO property for lat and lon
+
+  @state()
+  private street: string = '';
+
+  @state()
+  private streetNumber: string = '';
+
+  @state()
+  private latitude: string = '';
+
+  @state()
+  private longitude: string = '';
+
+  constructor() {
+    super();
+    L.Icon.Default.imagePath = `https://unpkg.com/leaflet@${L.version}/dist/images/`;
+    this._markerIcon = new L.Icon({
+      iconUrl:
+        'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-blue.png',
+      shadowUrl:
+        'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
+      iconSize: [25, 41],
+      iconAnchor: [12, 41],
+      popupAnchor: [1, -34],
+      shadowSize: [41, 41],
+    });
+  }
+
+  override render() {
+    return html`
+      <link
+        rel="stylesheet"
+        href="https://cdn.skypack.dev/leaflet/dist/leaflet.css"
+      />
+      <div id="map"></div>
+      <form id="form2">
+        <section class="map-form">
+          <div>
+            <label for="map-address">Calle*:</label>
+            <input
+              id="map-address"
+              required
+              type="text"
+              @keyup="${(event: KeyboardEvent) =>
+                (this.street = (event.target as HTMLInputElement).value)}"
+              .value="${this.street}"
+              name="address"
+            />
+            <input name="location[lat]" hidden .value="${this.latitude}" />
+            <input name="location[lon]" hidden .value="${this.longitude}" />
+          </div>
+
+          <div>
+            <label for="map-number">Número*:</label>
+            <input
+              id="map-number"
+              @keyup="${(event: KeyboardEvent) =>
+                (this.streetNumber = (event.target as HTMLInputElement).value)}"
+              .value="${this.streetNumber}"
+              required
+              type="text"
+              name="location[number]"
+            />
+          </div>
+
+          <div>
+            <button
+              .disabled="${!Boolean(this.street.length)}"
+              @click="${this.searchAddress}"
+            >
+              Buscar
+            </button>
+          </div>
+        </section>
+
+        <section class="map-form-grid">
+          <div>
+            <label for="map-floor">Piso:</label>
+            <input id="map-floor" required type="text" name="location[floor]" />
+          </div>
+
+          <div>
+            <label for="map-stair">Escalera:</label>
+            <input id="map-stair" required type="text" name="location[stair]" />
+          </div>
+
+          <div>
+            <label for="map-door">Puerta:</label>
+            <input id="map-door" required type="text" name="location[door]" />
+          </div>
+        </section>
+      </form>
+    `;
+  }
+
+  async onMapClick(e: LeafletMouseEvent) {
+    if (this._marker) {
+      this._map.removeLayer(this._marker);
+    }
+    this._marker = new L.marker([e.latlng.lat, e.latlng.lng], {
+      icon: this._markerIcon,
+    }).addTo(this._map);
+    try {
+      const response = await fetch(
+        `${this.domain}/geo_proxy/ubication/reverse/?lat=${e.latlng.lat}&lon=${e.latlng.lng}`
+      );
+      if (!response.ok) {
+        throw new Error(response.statusText);
+      } else {
+        debugger;
+        const ubi = await response.json();
+        this.street = ubi.street;
+        this.streetNumber = ubi.street2;
+        this.latitude = ubi.latitude;
+        this.longitude = ubi.longitude;
+      }
+    } catch (error) {
+      console.info(error);
+    }
+  }
+
+  async searchAddress() {
+    try {
+      const response = await fetch(
+        `${this.domain}/geo_proxy/ubication/search/?q=${this.street}, ${this.streetNumber}`
+      );
+      if (this._marker) {
+        this._map.removeLayer(this._marker);
+      }
+      const data = await response.json();
+      this._marker = new L.marker([data[0].lat, data[0].lon]).addTo(this._map);
+      this._map.setView([data[0].lat, data[0].lon], 15);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  override firstUpdated() {
+    const mapEl = this.shadowRoot?.querySelector('#map');
+    this._map = L.map(mapEl, {
+      markerZoomAnimation: false,
+      attributionControl: false,
+    }).setView([39.7189879, 2.8634595], 15);
+
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution:
+        '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    }).addTo(this._map);
+
+    this._map.on('click', (e) => this.onMapClick(e));
+  }
+
+  static override styles = [
+    globalStyles,
+    css`
+      #map {
+        margin-bottom: 2rem;
+        width: 100%;
+        height: 30vh;
+        border: 1px solid #676774;
+      }
+      .map-form {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        gap: 1rem;
+      }
+
+      .map-form div:nth-child(1) {
+        flex-basis: 60%;
+      }
+      .map-form div:nth-child(2) {
+        flex-basis: 30%;
+      }
+      .map-form button {
+        flex-basis: 20%;
+        margin-bottom: 0.5rem;
+      }
+
+      .map-form-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 1rem;
+      }
+    `,
+  ];
+}
+
+customElements.define('map-niris', MapNiris);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'map-niris': MapNiris;
+  }
+}

package/src/styles/globalStyles.ts

@@ -0,0 +1,170 @@
+import {css} from 'lit';
+
+export const globalStyles = css`
+  /* Base */
+  h1 {
+    font-size: 2rem;
+    line-height: 2.5rem;
+    color: var(--primary-color);
+    margin: 2rem 0;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+    line-height: 2rem;
+    margin: 3rem 0;
+    color: var(--primary-color);
+    filter: opacity(80%);
+  }
+
+  h3 {
+    font-size: 1.3rem;
+    line-height: 2rem;
+    margin: 2rem 0;
+    color: var(--primary-color);
+    filter: opacity(70%);
+  }
+
+  * {
+    font-family: 'Brush Script MT', cursive, sans-serif; /* This is fallback font for old browsers */
+    font-family: var(--font-family);
+    box-sizing: border-box;
+    color: #676774;
+  }
+
+  /* Buttons */
+  button,
+  .btn {
+    min-width: 120px;
+    background-color: var(--primary-color);
+    border: none;
+    cursor: pointer;
+    color: var(--color-button);
+    padding: var(--padding);
+    font-size: var(--font-size);
+    border-radius: var(--border-radius);
+    transition: 0.3s;
+  }
+
+  button:hover,
+  .btn:hover {
+    filter: brightness(120%);
+  }
+
+  button:focus-visible {
+    background-color: var(--primary-color);
+    outline: 3px solid var(--primary-color);
+    outline-offset: 2px;
+  }
+
+  button[type='submit'] {
+    margin: 2rem auto;
+    display: block;
+  }
+
+  button:disabled {
+    filter: contrast(50%);
+    cursor: not-allowed;
+  }
+
+  .btn-error {
+    background-color: var(--error-color);
+  }
+
+  .text-error {
+    color: var(--error-color);
+  }
+
+  /* Forms */
+  input,
+  textarea,
+  select {
+    border-radius: var(--border-radius);
+    padding: 0.5rem;
+    border-width: 2px;
+    border-color: rgb(209 213 219 / 1);
+    width: 100%;
+    font-size: 0.875rem;
+    margin: 0.5rem 0;
+    border-style: solid;
+    min-height: 2.5rem;
+  }
+  textarea {
+    resize: none;
+    height: 8rem;
+  }
+
+  input:focus,
+  textarea:focus,
+  select:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: var(--primary-color);
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+      var(--tw-shadow);
+    border-color: var(--primary-color);
+  }
+
+  input::file-selector-button {
+    color: white;
+    background-color: var(--primary-color);
+    border-width: 0px;
+    padding: var(--padding);
+    border-radius: var(--border-radius);
+  }
+  input::file-selector-button:hover {
+    filter: brightness(120%);
+    cursor: pointer;
+  }
+
+  input.invalid,
+  textarea.invalid,
+  select.invalid {
+    border: 1px solid red;
+  }
+
+  input:user-invalid,
+  textarea:user-invalid,
+  select:user-invalid {
+    border: 1px solid red;
+  }
+
+  [multiple]:focus,
+  [type='date']:focus,
+  [type='datetime-local']:focus,
+  [type='email']:focus,
+  [type='month']:focus,
+  [type='number']:focus,
+  [type='password']:focus,
+  [type='search']:focus,
+  [type='tel']:focus,
+  [type='text']:focus,
+  [type='time']:focus,
+  [type='url']:focus,
+  [type='week']:focus,
+  input:where(:not([type])):focus,
+  select:focus,
+  textarea:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    --tw-empty: 1;
+    --tw-ring-inset: var(--tw-empty);
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: var(--primary-color);
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    border-color: var(--primary-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+`;

package/src/textarea-to-niris.ts

@@ -1,14 +1,29 @@
 import {LitElement, html, css} from 'lit';
 import {property} from 'lit/decorators.js';
-
+import {msg, localized } from '@lit/localize';
+import {configureLocalization} from '@lit/localize';
+// Generated via output.localeCodesModule
+import {sourceLocale, targetLocales} from './generated/locale-codes.js';
+
+export const {getLocale, setLocale} = configureLocalization({
+  sourceLocale,
+  targetLocales,
+  loadLocale: (locale) => import(`./generated/locales/${locale}.js`),
+});
+
+@localized()
 export class TextareaToNiris extends LitElement {
   @property({type: String}) formAction: any;
   @property({type: String}) keywords: any;
+  @property({type: String})       locale: string;
+
 
   constructor() {
     super();
     this.formAction = '';
     this.keywords = '';
+    this.locale = 'es'
+    setLocale(this.locale);
   }
 
   updateShownValue(event: Event) {
@@ -24,17 +39,17 @@ export class TextareaToNiris extends LitElement {
     return html`
       <div id="popover-container">
         <button id="button-popover" popovertarget="popover">
-          Atención en línea
+          ${msg('Atención en línea')}
         </button>
 
         <div popover id="popover">
           <header>
-            <h2>Atención en línea Niris</h2>
+            <h2>${msg('Atención en línea Niris')}</h2>
           </header>
-          <body>
-            <form action="${this.formAction}?keywords" =${this.keywords}>
-              <label for="niris-input"
-                >Información, Consultas, Quejas y Sugerencias:
+          <main>
+            <form action="${this.formAction}&keywords=${this.keywords}" method="get">
+              <label for="niris-input">
+              ${msg('Información, Consultas, Quejas y Sugerencias:')}
               </label>
               <textarea
                 id="niris-input"
@@ -42,14 +57,14 @@ export class TextareaToNiris extends LitElement {
                 name="keywords"
                 required
                 minlength="4"
-                placeholder="Escribe tu consulta aquí"
+                placeholder="${msg('Escribe tu consulta aquí')}"
               ></textarea>
-              <button type="submit">Enviar</button>
+              <button type="submit">${msg('Enviar')}</button>
               <button type="button" @click="${this.closePopover}">
-                Cerrar
+                ${msg('Cerrar')}
               </button>
             </form>
-          </body>
+          </main>
         </div>
       </div>
     `;
@@ -57,7 +72,7 @@ export class TextareaToNiris extends LitElement {
 
   static override styles = css`
     :host {
-      --primary-color: #007bff;
+      --primary-color: #03599d;
       --background-color: #d4d4d4;
       --color: #fff;
       --padding: 1rem 1rem;
@@ -216,3 +231,9 @@ export class TextareaToNiris extends LitElement {
 }
 
 customElements.define('textarea-to-niris', TextareaToNiris);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'textarea-to-niris': TextareaToNiris;
+  }
+}