niris-public-community-components 0.0.2 → 0.0.3

package/dist/map-niris.js

@@ -0,0 +1,200 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { globalStyles } from './styles/globalStyles';
+// 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 {
+    constructor() {
+        super();
+        this.domain = 'https://iris2-backend-demo-iris-community.labs.apsl.io/services/iris/api-public';
+        // TODO property for lat and lon
+        this.street = '';
+        this.streetNumber = '';
+        this.latitude = '';
+        this.longitude = '';
+        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],
+        });
+    }
+    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) => (this.street = event.target.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) => (this.streetNumber = event.target.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) {
+        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);
+        }
+    }
+    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));
+    }
+}
+MapNiris.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;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], MapNiris.prototype, "domain", void 0);
+__decorate([
+    state()
+], MapNiris.prototype, "street", void 0);
+__decorate([
+    state()
+], MapNiris.prototype, "streetNumber", void 0);
+__decorate([
+    state()
+], MapNiris.prototype, "latitude", void 0);
+__decorate([
+    state()
+], MapNiris.prototype, "longitude", void 0);
+customElements.define('map-niris', MapNiris);
+//# sourceMappingURL=map-niris.js.map

package/dist/map-niris.js.map

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

package/dist/styles/globalStyles.d.ts

@@ -0,0 +1,2 @@
+export declare const globalStyles: import("lit").CSSResult;
+//# sourceMappingURL=globalStyles.d.ts.map

package/dist/styles/globalStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"globalStyles.d.ts","sourceRoot":"","sources":["../../src/styles/globalStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAuKxB,CAAC"}

package/dist/styles/globalStyles.js

@@ -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);
+  }
+`;
+//# sourceMappingURL=globalStyles.js.map

package/dist/styles/globalStyles.js.map

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

package/dist/types.d.ts

@@ -0,0 +1,85 @@
+export interface FormDataIncidents {
+    door?: string | undefined;
+    stair?: string | undefined;
+    floor?: string | undefined;
+    longitude?: string | undefined;
+    latitude?: string | undefined;
+    number?: string | undefined;
+    address?: string | undefined;
+    detailId?: number;
+    comments?: string;
+    transaction?: string;
+    device?: number;
+    applicant?: number;
+    nameCitizen?: string;
+    firstSurname?: string;
+    secondSurname?: string;
+    typeDocument?: number;
+    numberDocument?: string;
+    birthYear?: number;
+    sex?: string;
+    socialReason?: string;
+    contactPerson?: string;
+    cif?: string;
+    authorization?: boolean;
+    origin?: string;
+    district?: number;
+    language?: string;
+    email?: string;
+    telephone?: string;
+    characteristics?: CharacteristicElement[];
+    location?: Location;
+    pictures?: Picture[];
+    file?: any[];
+}
+export interface CharacteristicElement {
+    readonly id: number;
+    readonly value: string;
+}
+export interface Location {
+    id?: number;
+    latitude?: string;
+    longitude?: string;
+    geocode?: number;
+    via_type?: string;
+    address?: string;
+    number?: string;
+    stair?: string;
+    floor?: string;
+    door?: string;
+    district?: number;
+}
+export interface Picture {
+    readonly filename: string;
+}
+export declare enum CharacteristicTypeEnum {
+    Number = "Number",
+    Text = "Text",
+    Options = "Options",
+    Date = "Date",
+    Time = "Time"
+}
+export type Characteristic = {
+    readonly id: number;
+    readonly type: CharacteristicTypeEnum;
+    readonly mandatory: boolean;
+    readonly title: string;
+    readonly special: boolean;
+    readonly mask: number;
+    readonly desc_mask: string;
+    readonly options: string[];
+    readonly explanatory_text: string;
+    readonly order: number;
+    readonly codename: string;
+    readonly editable_for_citizen: boolean;
+    readonly options_proxy: any[];
+    readonly description_es: string;
+    readonly description_en: string;
+    readonly description_ca: string;
+    readonly description_gl: string;
+};
+export type Districte = {
+    id: number;
+    name: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/types.js

@@ -0,0 +1,9 @@
+export var CharacteristicTypeEnum;
+(function (CharacteristicTypeEnum) {
+    CharacteristicTypeEnum["Number"] = "Number";
+    CharacteristicTypeEnum["Text"] = "Text";
+    CharacteristicTypeEnum["Options"] = "Options";
+    CharacteristicTypeEnum["Date"] = "Date";
+    CharacteristicTypeEnum["Time"] = "Time";
+})(CharacteristicTypeEnum || (CharacteristicTypeEnum = {}));
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AA0DA,MAAM,CAAN,IAAY,sBAMX;AAND,WAAY,sBAAsB;IAChC,2CAAiB,CAAA;IACjB,uCAAa,CAAA;IACb,6CAAmB,CAAA;IACnB,uCAAa,CAAA;IACb,uCAAa,CAAA;AACf,CAAC,EANW,sBAAsB,KAAtB,sBAAsB,QAMjC","sourcesContent":["export interface FormDataIncidents {\n  door?: string | undefined;\n  stair?: string | undefined;\n  floor?: string | undefined;\n  longitude?: string | undefined;\n  latitude?: string | undefined;\n  number?: string | undefined;\n  address?: string | undefined;\n  detailId?: number;\n  comments?: string;\n  transaction?: string;\n  device?: number;\n  applicant?: number;\n  nameCitizen?: string;\n  firstSurname?: string;\n  secondSurname?: string;\n  typeDocument?: number;\n  numberDocument?: string;\n  birthYear?: number;\n  sex?: string;\n  socialReason?: string;\n  contactPerson?: string;\n  cif?: string;\n  authorization?: boolean;\n  origin?: string;\n  district?: number;\n  language?: string;\n  email?: string;\n  telephone?: string;\n  characteristics?: CharacteristicElement[];\n  location?: Location;\n  pictures?: Picture[];\n  file?: any[];\n}\n\nexport interface CharacteristicElement {\n  readonly id: number;\n  readonly value: string;\n}\n\nexport interface Location {\n  id?: number;\n  latitude?: string;\n  longitude?: string;\n  geocode?: number;\n  via_type?: string;\n  address?: string;\n  number?: string;\n  stair?: string;\n  floor?: string;\n  door?: string;\n  district?: number;\n}\n\nexport interface Picture {\n  readonly filename: string;\n}\n\nexport enum CharacteristicTypeEnum {\n  Number = 'Number',\n  Text = 'Text',\n  Options = 'Options',\n  Date = 'Date',\n  Time = 'Time',\n}\n\nexport type Characteristic = {\n  readonly id: number;\n  readonly type: CharacteristicTypeEnum;\n  readonly mandatory: boolean;\n  readonly title: string;\n  readonly special: boolean;\n  readonly mask: number;\n  readonly desc_mask: string;\n  readonly options: string[];\n  readonly explanatory_text: string;\n  readonly order: number;\n  readonly codename: string;\n  readonly editable_for_citizen: boolean;\n  readonly options_proxy: any[];\n  readonly description_es: string;\n  readonly description_en: string;\n  readonly description_ca: string;\n  readonly description_gl: string;\n};\n\nexport type Districte = {\n  id: number;\n  name: string;\n};\n"]}

package/index.html

@@ -10,8 +10,10 @@
 
     <br />
 
-    <a href="/dev/text-area-niris.html">
-      &lt;textarea-to-iris&gt;&lt;/textarea-to-iris&gt;
-    </a>
+    <a href="/dev/text-area-niris.html"> Component TextAreaNiris </a>
+
+    <br />
+
+    <a href="/dev/form-niris.html"> Component FormNiris </a>
   </body>
 </html>

package/package.json

@@ -1,11 +1,25 @@
 {
   "name": "niris-public-community-components",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "homepage": "https://iris.apsl.net",
   "description": "Web components for the NIRIS project developed with the Lit library",
-  "main": "dist/textarea-to-niris.js",
-  "module": "dist/textarea-to-niris.js",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./dist/textarea-to-niris.js": {
+      "import": "./dist/textarea-to-niris.js",
+      "require": "./dist/textarea-to-niris.js"
+    },
+    "./dist/form-to-niris.js": {
+      "import": "./dist/form-to-niris.js",
+      "require": "./dist/form-to-niris.js"
+    }
+  },
   "type": "module",
   "types": "textarea-to-niris.d.ts",
   "keywords": [
@@ -18,6 +32,9 @@
   "author": "Francisco Fernandez, <francisco.fernandez01@nagarro.com>",
   "license": "BSD-3-Clause",
   "dependencies": {
+    "@lit/localize": "^0.12.1",
+    "@lit/task": "^1.0.1",
+    "leaflet": "^1.9.4",
     "lit": "^3.0.0"
   },
   "repository": {
@@ -48,15 +65,18 @@
     "test:watch": "wtr --watch",
     "test:prod": "MODE=prod wtr",
     "test:prod:watch": "MODE=prod wtr --watch",
-    "checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js"
+    "checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js",
+    "rollup": "rollup -c"
   },
   "devDependencies": {
     "@11ty/eleventy": "^1.0.1",
     "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
     "@custom-elements-manifest/analyzer": "^0.6.3",
+    "@lit/localize-tools": "^0.7.2",
     "@open-wc/testing": "^3.1.5",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^5.0.2",
+    "@types/leaflet": "^1.9.12",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
     "@web/dev-server": "^0.1.31",
@@ -68,7 +88,8 @@
     "lit-analyzer": "^1.2.1",
     "prettier": "^2.6.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.73.0",
+    "rollup": "^2.79.2",
+    "rollup-plugin-minify-html-literals": "^1.2.6",
     "rollup-plugin-summary": "^1.4.3",
     "rollup-plugin-terser": "^7.0.2",
     "typescript": "~5.3.3"

package/rollup.config.js

@@ -10,10 +10,14 @@ import resolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
 
 export default {
-  input: './dist/textarea-to-niris.js',
+  input: {
+    'textarea-to-niris': './dist/textarea-to-niris.js',
+    'form-to-niris': './dist/form-niris.js'
+  },
   output: {
-    file: './dist/textarea-to-niris.bundled.js',
+    entryFileNames: '[name].js',
     format: 'esm',
+    dir: 'dist'
   },
   onwarn(warning) {
     if (warning.code !== 'THIS_IS_UNDEFINED') {