@processpuzzle/widgets 0.1.2 → 0.2.0

package/fesm2022/processpuzzle-widgets-mat-cards-grid.mjs

@@ -15,8 +15,8 @@ class MatCardsGridComponent {
     hasValue(textValue) {
         return textValue.length > 0;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatCardsGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: MatCardsGridComponent, isStandalone: true, selector: "mat-cards-grid", inputs: { cards: "cards" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MatCardsGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MatCardsGridComponent, isStandalone: true, selector: "mat-cards-grid", inputs: { cards: "cards" }, ngImport: i0, template: `
     <div [ngClass]="layoutService.layoutClass()">
       @for (card of cards; track $index) {
         <ng-container *transloco="let t; prefix: card.translocoPrefix">
@@ -58,7 +58,7 @@ class MatCardsGridComponent {
     </div>
   `, isInline: true, styles: [".web-layout{display:grid;grid-template-columns:repeat(3,minmax(min(200px,100%),1fr));column-gap:10px;row-gap:10px}.tablet-layout{display:grid;grid-template-columns:repeat(2,minmax(min(200px,100%),1fr));column-gap:10px;row-gap:10px}.handset-layout{display:grid;grid-template-columns:repeat(1,minmax(min(200px,100%),1fr));column-gap:10px;row-gap:10px}.default-mat-card{display:flex;flex-direction:column;background-color:#99d9eb}mat-card-title{font-family:Winky Sans,sans-serif}mat-card-content{flex-grow:1;overflow:auto;font-family:cursive;font-size:medium;text-align:left;padding-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatCardsGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MatCardsGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mat-cards-grid', standalone: true, imports: [MatCardModule, MatButtonModule, RouterLink, TranslocoDirective, NgClass], template: `
     <div [ngClass]="layoutService.layoutClass()">

package/fesm2022/processpuzzle-widgets-mat-cards-grid.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"processpuzzle-widgets-mat-cards-grid.mjs","sources":["../../../../libs/widgets/mat-cards-grid/src/mat-cards-grid.component.ts","../../../../libs/widgets/mat-cards-grid/processpuzzle-widgets-mat-cards-grid.ts"],"sourcesContent":["import { Component, inject, Input } from '@angular/core';\nimport { MatCardModule } from '@angular/material/card';\nimport { MatButtonModule } from '@angular/material/button';\nimport { NgClass } from '@angular/common';\nimport { RouterLink } from '@angular/router';\nimport { TranslocoDirective } from '@jsverse/transloco';\nimport { CardsGridSpec } from './cards-spec';\nimport { LayoutService } from '@processpuzzle/util';\n\n@Component({\n  selector: 'mat-cards-grid',\n  standalone: true,\n  imports: [MatCardModule, MatButtonModule, RouterLink, TranslocoDirective, NgClass],\n  template: `\n    <div [ngClass]=\"layoutService.layoutClass()\">\n      @for (card of cards; track $index) {\n        <ng-container *transloco=\"let t; prefix: card.translocoPrefix\">\n          <mat-card class=\"default-mat-card\">\n            <mat-card-header>\n              @if (hasValue(card.title)) {\n                <mat-card-title>{{ t(card.title) }}</mat-card-title>\n              }\n              @if (hasValue(card.subtitle)) {\n                <mat-card-subtitle>{{ t(card.subtitle) }}</mat-card-subtitle>\n              }\n            </mat-card-header>\n            @if (hasValue(card.content)) {\n              <mat-card-content>\n                <div>\n                  {{ t(card.content[0]) }}\n                  @if (card.content.length > 1) {\n                    <ul>\n                      @for (item of card.content.slice(1); track $index) {\n                        <li>{{ t(item) }}</li>\n                      }\n                    </ul>\n                  }\n                </div>\n              </mat-card-content>\n            }\n            @if (card.actions && card.actions.length > 0) {\n              <mat-card-actions>\n                @for (action of card.actions; track $index) {\n                  <ng-container>\n                    <button [matButton]=\"action.buttonType ?? 'elevated'\" [routerLink]=\"action.link\">{{ t(action.caption) }}</button>\n                  </ng-container>\n                }\n              </mat-card-actions>\n            }\n          </mat-card>\n        </ng-container>\n      }\n    </div>\n  `,\n  styleUrls: ['./mat-cards-grid.component.css'],\n})\nexport class MatCardsGridComponent {\n  @Input() cards: CardsGridSpec[] = [];\n  readonly layoutService = inject(LayoutService);\n\n  hasValue(textValue: string | Array<string>) {\n    return textValue.length > 0;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;MAwDa,qBAAqB,CAAA;IACvB,KAAK,GAAoB,EAAE;AAC3B,IAAA,aAAa,GAAG,MAAM,CAAC,aAAa,CAAC;AAE9C,IAAA,QAAQ,CAAC,SAAiC,EAAA;AACxC,QAAA,OAAO,SAAS,CAAC,MAAM,GAAG,CAAC;;uGALlB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EA3CtB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCT,EAzCS,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,olBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,aAAa,yoBAAE,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,iOAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,UAAU,EAAE,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,kBAAkB,gMAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FA4CtE,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBA/CjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EACd,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,aAAa,EAAE,eAAe,EAAE,UAAU,EAAE,kBAAkB,EAAE,OAAO,CAAC,EACxE,QAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,olBAAA,CAAA,EAAA;8BAIQ,KAAK,EAAA,CAAA;sBAAb;;;ACzDH;;AAEG;;;;"}
+{"version":3,"file":"processpuzzle-widgets-mat-cards-grid.mjs","sources":["../../../../libs/widgets/mat-cards-grid/src/mat-cards-grid.component.ts","../../../../libs/widgets/mat-cards-grid/processpuzzle-widgets-mat-cards-grid.ts"],"sourcesContent":["import { Component, inject, Input } from '@angular/core';\nimport { MatCardModule } from '@angular/material/card';\nimport { MatButtonModule } from '@angular/material/button';\nimport { NgClass } from '@angular/common';\nimport { RouterLink } from '@angular/router';\nimport { TranslocoDirective } from '@jsverse/transloco';\nimport { CardsGridSpec } from './cards-spec';\nimport { LayoutService } from '@processpuzzle/util';\n\n@Component({\n  selector: 'mat-cards-grid',\n  standalone: true,\n  imports: [MatCardModule, MatButtonModule, RouterLink, TranslocoDirective, NgClass],\n  template: `\n    <div [ngClass]=\"layoutService.layoutClass()\">\n      @for (card of cards; track $index) {\n        <ng-container *transloco=\"let t; prefix: card.translocoPrefix\">\n          <mat-card class=\"default-mat-card\">\n            <mat-card-header>\n              @if (hasValue(card.title)) {\n                <mat-card-title>{{ t(card.title) }}</mat-card-title>\n              }\n              @if (hasValue(card.subtitle)) {\n                <mat-card-subtitle>{{ t(card.subtitle) }}</mat-card-subtitle>\n              }\n            </mat-card-header>\n            @if (hasValue(card.content)) {\n              <mat-card-content>\n                <div>\n                  {{ t(card.content[0]) }}\n                  @if (card.content.length > 1) {\n                    <ul>\n                      @for (item of card.content.slice(1); track $index) {\n                        <li>{{ t(item) }}</li>\n                      }\n                    </ul>\n                  }\n                </div>\n              </mat-card-content>\n            }\n            @if (card.actions && card.actions.length > 0) {\n              <mat-card-actions>\n                @for (action of card.actions; track $index) {\n                  <ng-container>\n                    <button [matButton]=\"action.buttonType ?? 'elevated'\" [routerLink]=\"action.link\">{{ t(action.caption) }}</button>\n                  </ng-container>\n                }\n              </mat-card-actions>\n            }\n          </mat-card>\n        </ng-container>\n      }\n    </div>\n  `,\n  styleUrls: ['./mat-cards-grid.component.css'],\n})\nexport class MatCardsGridComponent {\n  @Input() cards: CardsGridSpec[] = [];\n  readonly layoutService = inject(LayoutService);\n\n  hasValue(textValue: string | Array<string>) {\n    return textValue.length > 0;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;MAwDa,qBAAqB,CAAA;IACvB,KAAK,GAAoB,EAAE;AAC3B,IAAA,aAAa,GAAG,MAAM,CAAC,aAAa,CAAC;AAE9C,IAAA,QAAQ,CAAC,SAAiC,EAAA;AACxC,QAAA,OAAO,SAAS,CAAC,MAAM,GAAG,CAAC;IAC7B;uGANW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA3CtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCT,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,olBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAzCS,aAAa,yoBAAE,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,iOAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,kBAAkB,gMAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FA4CtE,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBA/CjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,UAAA,EACd,IAAI,EAAA,OAAA,EACP,CAAC,aAAa,EAAE,eAAe,EAAE,UAAU,EAAE,kBAAkB,EAAE,OAAO,CAAC,EAAA,QAAA,EACxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,olBAAA,CAAA,EAAA;;sBAIA;;;ACzDH;;AAEG;;;;"}

package/fesm2022/processpuzzle-widgets.mjs

@@ -5,18 +5,19 @@ import * as i0 from '@angular/core';
 import { inject, output, Component, computed, effect, Injectable, EnvironmentInjector, NgModule, isDevMode } from '@angular/core';
 import { MatIcon } from '@angular/material/icon';
 import { MatIconButton } from '@angular/material/button';
-import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { RUNTIME_CONFIGURATION, Stack } from '@processpuzzle/util';
 import { TranslocoService, TranslocoDirective, provideTranslocoScope, TranslocoModule, provideTransloco } from '@jsverse/transloco';
-import { NgClass, NgForOf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { MatListOption, MatSelectionList } from '@angular/material/list';
-import * as i1 from '@angular/material/snack-bar';
-import * as i1$1 from '@angular/router';
-import { NavigationEnd } from '@angular/router';
+import { MatMenuTrigger, MatMenu } from '@angular/material/menu';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router, NavigationEnd } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { ShareButtons } from 'ngx-sharebuttons/buttons';
 import { provideShareButtonsOptions } from 'ngx-sharebuttons';
 import { shareIcons } from 'ngx-sharebuttons/icons';
-import * as i1$2 from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 
 class ApplicationProperty {
     id;
@@ -52,114 +53,108 @@ const ApplicationPropertyStore = signalStore({ providedIn: 'root' }, BaseEntityS
 class LanguageSelectorListComponent {
     translocoService = inject(TranslocoService);
     runtimeConfiguration = inject(RUNTIME_CONFIGURATION);
-    languages = this.runtimeConfiguration.AVAILABLE_LANGUAGES;
+    languages = this.runtimeConfiguration.LANGUAGE_CONFIGURATION.AVAILABLE_LANGUAGES;
     languageSelected = output();
-    selectedLanguage = this.translocoService.getActiveLang();
+    _selectedLanguage;
+    constructor() {
+        this._selectedLanguage = this.translocoService.getActiveLang();
+    }
+    get selectedLanguage() {
+        return this._selectedLanguage ?? this.translocoService.getActiveLang();
+    }
     // region event handling methods
     onSelectionChange(event) {
         const selectedOption = event.source;
         const selectedValue = selectedOption.selectedOptions.selected[0]?.value;
         if (this.selectedLanguage !== selectedValue) {
             this.translocoService.setActiveLang(selectedValue);
-            this.selectedLanguage = selectedValue;
+            this._selectedLanguage = selectedValue;
             this.languageSelected.emit();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: LanguageSelectorListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: LanguageSelectorListComponent, isStandalone: true, selector: "pp-language-selector-list", outputs: { languageSelected: "languageSelected" }, providers: [provideTranslocoScope('widgets')], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LanguageSelectorListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: LanguageSelectorListComponent, isStandalone: true, selector: "pp-language-selector-list", outputs: { languageSelected: "languageSelected" }, providers: [provideTranslocoScope({ scope: 'widgets' })], ngImport: i0, template: `
     <ng-container *transloco="let t">
       <div class="language-selector">
         <mat-selection-list #selectionList (selectionChange)="onSelectionChange($event)" [multiple]="false">
-          <mat-list-option
-            *ngFor="let language of languages"
-            [value]="language.code"
-            [selected]="selectedLanguage === language.code"
-            tabindex="0"
-            role="option"
-            [attr.aria-selected]="selectedLanguage === language.code ? 'true' : 'false'"
-          >
-            <span [ngClass]="language.flag">&nbsp;-&nbsp;</span>
-            <span>{{ t('widgets.' + language.label) }}</span>
-          </mat-list-option>
+          @for (language of languages; track language.code) {
+            <mat-list-option
+              [value]="language.code"
+              [selected]="selectedLanguage === language.code"
+              tabindex="0"
+              role="option"
+              [attr.aria-selected]="selectedLanguage === language.code ? 'true' : 'false'"
+            >
+              <span [ngClass]="language.flag">&nbsp;-&nbsp;</span>
+              <span class="language-label">{{ t('widgets.' + language.label) }}</span>
+            </mat-list-option>
+          }
         </mat-selection-list>
       </div>
     </ng-container>
-  `, isInline: true, styles: [".flag-icon{width:24px;height:16px;border-radius:2px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }] });
+  `, isInline: true, styles: [".flag-icon{width:24px;height:16px;border-radius:2px}.language-label{margin-left:10px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: LanguageSelectorListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LanguageSelectorListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pp-language-selector-list', template: `
     <ng-container *transloco="let t">
       <div class="language-selector">
         <mat-selection-list #selectionList (selectionChange)="onSelectionChange($event)" [multiple]="false">
-          <mat-list-option
-            *ngFor="let language of languages"
-            [value]="language.code"
-            [selected]="selectedLanguage === language.code"
-            tabindex="0"
-            role="option"
-            [attr.aria-selected]="selectedLanguage === language.code ? 'true' : 'false'"
-          >
-            <span [ngClass]="language.flag">&nbsp;-&nbsp;</span>
-            <span>{{ t('widgets.' + language.label) }}</span>
-          </mat-list-option>
+          @for (language of languages; track language.code) {
+            <mat-list-option
+              [value]="language.code"
+              [selected]="selectedLanguage === language.code"
+              tabindex="0"
+              role="option"
+              [attr.aria-selected]="selectedLanguage === language.code ? 'true' : 'false'"
+            >
+              <span [ngClass]="language.flag">&nbsp;-&nbsp;</span>
+              <span class="language-label">{{ t('widgets.' + language.label) }}</span>
+            </mat-list-option>
+          }
         </mat-selection-list>
       </div>
     </ng-container>
-  `, imports: [NgClass, NgForOf, TranslocoDirective, MatListOption, MatSelectionList], providers: [provideTranslocoScope('widgets')], styles: [".flag-icon{width:24px;height:16px;border-radius:2px}\n"] }]
-        }] });
+  `, imports: [NgClass, TranslocoDirective, MatListOption, MatSelectionList], providers: [provideTranslocoScope({ scope: 'widgets' })], styles: [".flag-icon{width:24px;height:16px;border-radius:2px}.language-label{margin-left:10px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { languageSelected: [{ type: i0.Output, args: ["languageSelected"] }] } });
 
 class LanguageSelectorComponent {
-    isOpen = false;
-    // region Event handler methods
-    onClose() {
-        this.isOpen = false;
-    }
-    onSelectLanguage() {
-        this.toggleIsOpen();
-    }
-    // endregion
-    // region protected, private helper methods
-    toggleIsOpen() {
-        this.isOpen = !this.isOpen;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: LanguageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: LanguageSelectorComponent, isStandalone: true, selector: "pp-language-selector", providers: [provideTranslocoScope({ scope: 'widgets' })], ngImport: i0, template: `
-    <div>
-      <button mat-icon-button (click)="onSelectLanguage()" cdkOverlayOrigin #trigger="cdkOverlayOrigin" aria-label="Select Language Button">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LanguageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: LanguageSelectorComponent, isStandalone: true, selector: "pp-language-selector", providers: [provideTranslocoScope({ scope: 'widgets' })], ngImport: i0, template: `
+    <div class="language-selector-container">
+      <button mat-icon-button [matMenuTriggerFor]="langMenu" aria-label="Select Language Button">
         <mat-icon>language</mat-icon>
       </button>
+      <mat-menu #langMenu="matMenu">
+        <ng-container (click)="$event.stopPropagation()">
+          <pp-language-selector-list (languageSelected)="langMenu.closed.emit()" />
+        </ng-container>
+      </mat-menu>
     </div>
-    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger" [cdkConnectedOverlayOpen]="isOpen" [cdkConnectedOverlayHasBackdrop]="true" (backdropClick)="onClose()">
-      <div class="language-selector-container">
-        <pp-language-selector-list (languageSelected)="onClose()" />
-      </div>
-    </ng-template>
-  `, isInline: true, styles: [".language-selector-container{display:flex;background:#eee}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: LanguageSelectorListComponent, selector: "pp-language-selector-list", outputs: ["languageSelected"] }] });
+  `, isInline: true, styles: [".language-dropdown{position:absolute;top:100%;right:0;z-index:1000;background:#fff;border-radius:8px;box-shadow:0 4px 16px #00000026;min-width:200px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: LanguageSelectorListComponent, selector: "pp-language-selector-list", outputs: ["languageSelected"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: LanguageSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LanguageSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pp-language-selector', template: `
-    <div>
-      <button mat-icon-button (click)="onSelectLanguage()" cdkOverlayOrigin #trigger="cdkOverlayOrigin" aria-label="Select Language Button">
+    <div class="language-selector-container">
+      <button mat-icon-button [matMenuTriggerFor]="langMenu" aria-label="Select Language Button">
         <mat-icon>language</mat-icon>
       </button>
+      <mat-menu #langMenu="matMenu">
+        <ng-container (click)="$event.stopPropagation()">
+          <pp-language-selector-list (languageSelected)="langMenu.closed.emit()" />
+        </ng-container>
+      </mat-menu>
     </div>
-    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger" [cdkConnectedOverlayOpen]="isOpen" [cdkConnectedOverlayHasBackdrop]="true" (backdropClick)="onClose()">
-      <div class="language-selector-container">
-        <pp-language-selector-list (languageSelected)="onClose()" />
-      </div>
-    </ng-template>
-  `, imports: [CdkOverlayOrigin, CdkConnectedOverlay, MatIcon, MatIconButton, LanguageSelectorListComponent], providers: [provideTranslocoScope({ scope: 'widgets' })], styles: [".language-selector-container{display:flex;background:#eee}\n"] }]
+  `, imports: [MatIcon, MatIconButton, LanguageSelectorListComponent, MatMenuTrigger, MatMenu], providers: [provideTranslocoScope({ scope: 'widgets' })], styles: [".language-dropdown{position:absolute;top:100%;right:0;z-index:1000;background:#fff;border-radius:8px;box-shadow:0 4px 16px #00000026;min-width:200px}\n"] }]
         }] });
 
 class LikeButtonComponent {
-    snackBar;
     LIKES_PROPERTY = 'likes';
-    likesCount = computed(() => this.store.entities().find((property) => property.name === this.LIKES_PROPERTY));
+    snackBar = inject(MatSnackBar);
+    likesCount = computed(() => this.store.entities().find((property) => property.name === this.LIKES_PROPERTY), ...(ngDevMode ? [{ debugName: "likesCount" }] : /* istanbul ignore next */ []));
     store = inject(ApplicationPropertyStore);
-    constructor(snackBar) {
-        this.snackBar = snackBar;
+    constructor() {
         this.configureEffects();
     }
     // region event handling methods
@@ -190,8 +185,8 @@ class LikeButtonComponent {
             panelClass: ['error-snackbar'],
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: LikeButtonComponent, deps: [{ token: i1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: LikeButtonComponent, isStandalone: true, selector: "pp-like-button", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LikeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: LikeButtonComponent, isStandalone: true, selector: "pp-like-button", ngImport: i0, template: `
     <div class="like-button">
       <button mat-icon-button (click)="onLike()" aria-label="Like Button">
         <mat-icon>favorite</mat-icon>
@@ -200,7 +195,7 @@ class LikeButtonComponent {
     </div>
   `, isInline: true, styles: [".like-button{position:relative;display:inline-block}.like-button span{position:absolute;bottom:0;right:5px;font-size:10px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: LikeButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LikeButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pp-like-button', template: `
     <div class="like-button">
@@ -210,13 +205,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       <span>{{ likesCount()?.value }}</span>
     </div>
   `, imports: [MatIcon, MatIconButton], styles: [".like-button{position:relative;display:inline-block}.like-button span{position:absolute;bottom:0;right:5px;font-size:10px}\n"] }]
-        }], ctorParameters: () => [{ type: i1.MatSnackBar }] });
+        }], ctorParameters: () => [] });
 
 class NavigateBackService {
-    router;
+    noRouteAvailable = new BehaviorSubject('');
     routeHistory = new Stack();
-    constructor(router) {
-        this.router = router;
+    router = inject(Router);
+    constructor() {
         this.router.events.subscribe((event) => {
             if (event instanceof NavigationEnd) {
                 this.addRouteToStack(event.urlAfterRedirects); // Add the current route to the stack
@@ -234,6 +229,7 @@ class NavigateBackService {
         }
         else {
             console.log('No previous routes to navigate back to.');
+            this.noRouteAvailable.next('No previous routes to navigate back to.');
         }
     }
     getRouteStack() {
@@ -249,13 +245,13 @@ class NavigateBackService {
             this.routeHistory.push(route);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NavigateBackService, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NavigateBackService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigateBackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigateBackService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NavigateBackService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigateBackService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.Router }] });
+        }], ctorParameters: () => [] });
 
 class NavigateBackComponent {
     service = inject(NavigateBackService);
@@ -263,14 +259,14 @@ class NavigateBackComponent {
     onNavigateBack() {
         this.service.goBack(); // Call the service to handle navigation
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NavigateBackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: NavigateBackComponent, isStandalone: true, selector: "pp-navigate-back", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigateBackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: NavigateBackComponent, isStandalone: true, selector: "pp-navigate-back", ngImport: i0, template: `
     <button mat-icon-button aria-label="Go back" (click)="onNavigateBack()">
       <mat-icon class="material-symbols-outlined fat-back-arrow">arrow_back</mat-icon>
     </button>
   `, isInline: true, styles: [".fat-back-arrow{font-size:24px;font-variation-settings:\"wght\" 1200;color:#000}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NavigateBackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavigateBackComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pp-navigate-back', imports: [MatIcon, MatIconButton], template: `
     <button mat-icon-button aria-label="Go back" (click)="onNavigateBack()">
@@ -311,8 +307,8 @@ class ShareButtonComponent {
     toggleIsOpen() {
         this.isOpen = !this.isOpen;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ShareButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ShareButtonComponent, isStandalone: true, selector: "pp-share-button", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ShareButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: ShareButtonComponent, isStandalone: true, selector: "pp-share-button", ngImport: i0, template: `
     <div>
       <button mat-icon-button (click)="onShare()" cdkOverlayOrigin #trigger="cdkOverlayOrigin" aria-label="Share Button">
         <mat-icon>share</mat-icon>
@@ -323,9 +319,9 @@ class ShareButtonComponent {
         <share-buttons />
       </div>
     </ng-template>
-  `, isInline: true, styles: [".share-buttons-container{display:flex;background:#eee}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ShareButtons, selector: "share-buttons", inputs: ["show", "include", "exclude", "expanded", "theme", "url", "title", "description", "image", "tags", "redirectUrl", "showIcon", "showText", "disabled"], outputs: ["expandedChange", "opened"] }] });
+  `, isInline: true, styles: [".share-buttons-container{display:flex;background:#eee}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ShareButtons, selector: "share-buttons", inputs: ["show", "include", "exclude", "expanded", "theme", "url", "title", "description", "image", "tags", "redirectUrl", "showIcon", "showText", "disabled"], outputs: ["expandedChange", "opened"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ShareButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ShareButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pp-share-button', template: `
     <div>
@@ -342,11 +338,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }] });
 
 class ShareButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ShareButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: ShareButtonModule });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ShareButtonModule, providers: [provideShareButtonsOptions(shareIcons())] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ShareButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: ShareButtonModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ShareButtonModule, providers: [provideShareButtonsOptions(shareIcons())] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ShareButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ShareButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -356,27 +352,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }] });
 
 class TranslocoHttpLoader {
-    http;
-    constructor(http) {
-        this.http = http;
-    }
+    http = inject(HttpClient);
     getTranslation(lang) {
         const path = `/assets/i18n/${lang}.json`;
         console.log(`Loading translations from: ${path}`);
         return this.http.get(path);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TranslocoHttpLoader, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TranslocoHttpLoader, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TranslocoHttpLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TranslocoHttpLoader, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TranslocoHttpLoader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TranslocoHttpLoader, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }] });
+        }] });
 
 class WidgetsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: WidgetsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: WidgetsModule, imports: [TranslocoModule], exports: [TranslocoModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: WidgetsModule, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: WidgetsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: WidgetsModule, imports: [TranslocoModule], exports: [TranslocoModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: WidgetsModule, providers: [
             provideShareButtonsOptions(shareIcons()),
             //    provideI18Configuration(),
             provideTransloco({
@@ -391,7 +384,7 @@ class WidgetsModule {
             }),
         ], imports: [TranslocoModule, TranslocoModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: WidgetsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: WidgetsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [TranslocoModule],
@@ -413,7 +406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 }]
         }] });
 
-const widgetsRoutes = [{ path: 'anything', component: LanguageSelectorComponent }];
+const widgetsRoutes = [{ path: 'anything', component: LanguageSelectorComponent, providers: [provideTranslocoScope('widgets')] }];
 
 /*
  * Public API Surface of @processpuzzle/widgets