Demo version

entities still not functional, otherwise major features are functional

package.json

@@ -11,7 +11,8 @@
     "ng": "ng",
     "start": "gulp watch:locale | ng serve --host 0.0.0.0 --port 4202 --proxy-config proxy.conf.json",
     "start-pwa": "ng build --configuration pwa --output-path ./dist/pwa && npm run serve.pwa",
-    "build": "ng build",
+    "build": "ng build --output-hashing=none --configuration production",
+    "package":"cat dist/igo2-quebec/{runtime,polyfills,main}.js > elements/igo2-qc-element.js",
     "lint": "ng lint",
     "lint.fix": "ng lint --fix",
     "e2e": "ng e2e --port 4300",
@@ -51,6 +52,7 @@
     "@angular/common": "^14.3.0",
     "@angular/compiler": "^14.3.0",
     "@angular/core": "^14.3.0",
+    "@angular/elements": "^16.1.3",
     "@angular/forms": "^14.3.0",
     "@angular/material": "^14.2.7",
     "@angular/platform-browser": "^14.3.0",
@@ -104,9 +106,9 @@
     "@angular-eslint/eslint-plugin-template": "14.1.2",
     "@angular-eslint/schematics": "14.1.2",
     "@angular-eslint/template-parser": "14.1.2",
-    "@angular/platform-browser-dynamic": "^14.3.0",
     "@angular/cli": "^14.2.10",
     "@angular/compiler-cli": "^14.3.0",
+    "@angular/platform-browser-dynamic": "^14.3.0",
     "@babel/core": "^7.18.10",
     "@babel/preset-env": "^7.18.10",
     "@compodoc/compodoc": "^1.1.19",

src/app/app.component.html

@@ -4,4 +4,8 @@
 
 <app-menu *ngIf="hasMenu"></app-menu>
 
+<!-- <h2>Hello world</h2>
+
+<my-element></my-element> -->
+
 <app-portal *ngIf="!hasMenu" [ngClass]="hasHeader? 'portal-hasHeader': 'portal'"></app-portal>

src/app/app.component.scss

@@ -72,3 +72,10 @@ spinner-with-legend-dialog {
     z-index: 100;
   }
 }
+
+//temporary for angular element web component
+.web-component {
+  display: block;
+  width: 100%;
+  height: 50%;
+}

src/app/app.module.ts

@@ -1,5 +1,6 @@
+import { createCustomElement } from '@angular/elements';
 import { BrowserModule, HammerModule } from '@angular/platform-browser';
-import { APP_INITIALIZER, ApplicationRef, Injector, NgModule } from '@angular/core';
+import { APP_INITIALIZER, ApplicationRef, Injector, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HeaderModule } from './pages/header/header.module';
@@ -46,6 +47,7 @@ export const defaultTooltipOptions: MatTooltipDefaultOptions = {
 };
 
 @NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [AppComponent],
   imports: [
     CommonModule,
@@ -96,7 +98,14 @@ export const defaultTooltipOptions: MatTooltipDefaultOptions = {
   ],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+  constructor(injector: Injector) {
+    const el = createCustomElement(AppComponent, {injector});
+    customElements.define("igo2-quebec-integrable", el);
+  }
+
+  ngDoBootstrap() { }
+}
 
 function appInitializerFactory(
   injector: Injector,

src/app/pages/filters/filterServices/filters-active-filters.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { Option } from '../simple-filters.interface';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FiltersActiveFiltersService {
+
+  private eventSubject = new Subject<Map<string, Option[]>>();
+
+  emitEvent(activeFilters: Map<string, Option[]>) {
+    this.eventSubject.next(activeFilters);
+  }
+
+  onEvent() {
+    return this.eventSubject.asObservable();
+  }
+}

src/app/pages/filters/filterServices/filters-additional-types.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FiltersAdditionalTypesService {
+
+  private eventSubject = new Subject<Array<string>>();
+
+  emitEvent(types: Array<string>) {
+    this.eventSubject.next(types);
+  }
+
+  onEvent() {
+    return this.eventSubject.asObservable();
+  }
+}

src/app/pages/filters/filterServices/filters-shared-methods.service.ts

@@ -13,7 +13,7 @@ export class FiltersSharedMethodsService {
 
   public terrAPIBaseURL: string = "https://geoegl.msp.gouv.qc.ca/apis/terrapi/"; // base URL of the terrAPI API
 
-  async getMunicipalityFromTerrAPI(locationType: string, coordinates: string): Promise<FeatureCollection> {
+  async getLocationDataFromTerrAPI(locationType: string, coordinates: string): Promise<FeatureCollection> {
     const url: string = this.terrAPIBaseURL + "locate?type=" + locationType + "&loc=" + coordinates;
 
     let response: FeatureCollection;

src/app/pages/filters/simple-filters.component.html

@@ -27,11 +27,12 @@
               [matAutocomplete]="auto"
               [placeholder]="'simpleFilters.placeholder' | translate">
             <mat-autocomplete class="fixed-dropdown-autocomplete" #auto="matAutocomplete" [displayWith]="displayName" (optionSelected)="onSelection($event.option.value)">
-              <mat-option *ngFor="let option of getOptions(control.key)" [value]="option">
+              <mat-option *ngFor="let option of getOptions(control.key)" [value]="option"
+              [ngClass]="option.count === 0 ? 'disabled' : 'enabled'">
                 <mat-checkbox
                   [checked]="option.selected">
-                  {{ option.nom }}
-                  <!-- {{ option.nom + " count: " + option.count }} -->
+                  <!-- {{ option.nom }} -->
+                  {{ option.nom + " (" + option.count + ")"}}
                 </mat-checkbox>
                 <!-- <mat-checkbox *ngIf="!option.nom">
                   {{ option }}
@@ -53,7 +54,6 @@
       </form>
     </div>
   </div>
-  <br>
 </div>
 
 
@@ -77,21 +77,23 @@
             <span class="filter-description">{{ getLabel(control.key) }}</span>
             <span *ngIf="getSelectionCount(control.key) == 1" class="filter-info"> 1 {{ 'simpleFilters.selected' | translate}} </span>
             <span *ngIf="getSelectionCount(control.key) > 1" class="filter-info"> {{getSelectionCount(control.key)}} {{ 'simpleFilters.selecteds' | translate}} </span>
-          </div>          <mat-form-field
+          </div>
+          <mat-form-field
             class="filter-field"
             appearance="outline"
             floatLabel="auto">
-            <mat-label>{{ getLabel(control.key) }}</mat-label>
             <input
               matInput
               type="text"
               [formControlName]="control.key"
-              [matAutocomplete]="auto">
+              [matAutocomplete]="auto"
+              [placeholder]="'simpleFilters.placeholder' | translate">
             <mat-autocomplete class="fixed-dropdown-autocomplete" #auto="matAutocomplete" [displayWith]="displayName" (optionSelected)="onSelection($event.option.value)">
-              <mat-option *ngFor="let option of getOptions(control.key)" [value]="option">
+              <mat-option *ngFor="let option of getOptions(control.key)" [value]="option"
+              [ngClass]="option.count === 0 ? 'disabled' : 'enabled'">
                 <mat-checkbox
                   [checked]="option.selected">
-                  {{ option.nom }}
+                  {{ option.nom + " (" + option.count + ")"}}
                 </mat-checkbox>
               </mat-option>
             </mat-autocomplete>
@@ -110,5 +112,4 @@
       </form>
     </div>
   </div>
-  <br>
 </div>

src/app/pages/filters/simple-filters.component.scss

@@ -43,9 +43,9 @@
 
 .filter-description {
 	font-family: "Open Sans", sans-serif;
-	font-weight: bold;
-	color: #095797;
+	font-weight: 600;
 	font-size: 16px;
+	cursor: text;
 }
 
 ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
@@ -135,6 +135,19 @@
 	justify-content: space-between;
 }
 
+.disabled {
+	color: gray;
+}
+
+.filter-info {
+	font-size: 14.4px;
+	cursor: text;
+}
+
+mat-divider {
+	margin: 0px 16px;
+}
+
 // ::ng-deep .mat-form-field-wrapper {
 // 	padding-bottom: 24px !important;
 // }