@processpuzzle/widgets 0.0.1 → 0.0.3

package/README.md

@@ -2,7 +2,41 @@
 ![Build and Test](https://github.com/ZsZs/processpuzzle/actions/workflows/build-widgets.yml/badge.svg)
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=processpuzzle_widgets&metric=alert_status)](https://sonarcloud.io/summary?id=processpuzzle_widgets)
 [![Node version](https://img.shields.io/npm/v/%40processpuzzle%2Fwidgets?style=flat)](https://www.npmjs.com/package/@processpuzzle/widgets)
+
 This library provides a range of small widgets that can be built into an Angular application. These widgets primarily define UI elements 
 but also domain classes or signal stores. Some of them are even persistent, so they need appropriate configuration to access the backend.
 
+## Language Selector Component
+The **LanguageSelector** is an Angular component designed to allow users to select their preferred language in an application. It integrates seamlessly with the Transloco library for internationalization and supports dynamic updates of the application's language.
+
+### Features
+- **Language Selection**: Allows switching between predefined languages.
+- **Integration with Transloco**: Updates active language using `TranslocoService`.
+- **Dynamic Label Translation**: Displays localized language names.
+- **Single Selection**: Users can select only one language at a time.
+- **Customizable Options**: Easily configure available languages and their labels.
+### Setup and Usage
+#### Installation
+Ensure that you have the required dependencies for Angular Material and Transloco installed:
+```
+npm install @angular/material @jsverse/transloco
+```
+### Template Example
+Add the `LanguageSelector` component to your application:
+```xhtml
+<pp-language-selector [languages]="languages" [selectedLanguage]="selectedLanguage"></pp-language-selector>
+```
+### Component Configuration
+#### Input Properties
+
+| Input | Type | Description |
+| --- | --- | --- |
+| `languages` | `Array` | An array of available language objects. Each object should include `code`, `label`, and `flag`. |
+| `selectedLanguage` | `string` | The current active language code. This value indicates which language is selected by default. |
+Example Language Configuration:
+
+## Like Button Component
+
+## Navigate Back Button Component
 
+## Share Button Component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processpuzzle/widgets",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "publishConfig": {
     "access": "public"
   },
@@ -17,10 +17,8 @@
   "dependencies": {
     "tslib": "^2.8.1"
   },
-  "sideEffects": false,
-  "module": "fesm2022/processpuzzle-widgets.mjs",
-  "typings": "index.d.ts",
   "exports": {
+    "./i18n/*": "./i18n/pp-widgets/*",
     "./package.json": {
       "default": "./package.json"
     },
@@ -28,5 +26,12 @@
       "types": "./index.d.ts",
       "default": "./fesm2022/processpuzzle-widgets.mjs"
     }
-  }
+  },
+  "files": [
+    "dist/libs/widgets/",
+    "i18n/"
+  ],
+  "sideEffects": false,
+  "module": "fesm2022/processpuzzle-widgets.mjs",
+  "typings": "index.d.ts"
 }

package/fesm2022/processpuzzle-widgets.mjs

@@ -1,85 +0,0 @@
-import * as i0 from '@angular/core';
-import { Injectable, inject, Component } from '@angular/core';
-import { Stack } from '@processpuzzle/util';
-import * as i1 from '@angular/router';
-import { NavigationEnd } from '@angular/router';
-import { MatIcon } from '@angular/material/icon';
-import { MatIconButton } from '@angular/material/button';
-
-class NavigateBackService {
-    router;
-    routeHistory = new Stack();
-    constructor(router) {
-        this.router = router;
-        this.router.events.subscribe((event) => {
-            if (event instanceof NavigationEnd) {
-                this.addRouteToStack(event.urlAfterRedirects); // Add the current route to the stack
-            }
-        });
-    }
-    // region public accessor methods
-    goBack() {
-        if (this.routeHistory.size() > 1) {
-            this.routeHistory.pop(); // Remove current route
-            const previousRoute = this.routeHistory.pop(); // Get the previous route
-            if (previousRoute) {
-                this.router.navigateByUrl(previousRoute); // Navigate to the previous route
-            }
-        }
-        else {
-            console.warn('No previous routes to navigate back to.');
-        }
-    }
-    getRouteStack() {
-        return this.routeHistory;
-    }
-    clearHistory() {
-        this.routeHistory.clear();
-    }
-    // endregion
-    // protected, private helper methods
-    addRouteToStack(route) {
-        if (this.routeHistory.size() === 0 || this.routeHistory.peek() !== route) {
-            this.routeHistory.push(route);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: NavigateBackService, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: NavigateBackService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: NavigateBackService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.Router }] });
-
-class NavigateBackComponent {
-    service = inject(NavigateBackService);
-    // region event handling methods
-    onNavigateBack() {
-        this.service.goBack(); // Call the service to handle navigation
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: NavigateBackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.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]", exportAs: ["matButton"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.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()">
-      <mat-icon class="material-symbols-outlined fat-back-arrow">arrow_back</mat-icon>
-    </button>
-  `, styles: [".fat-back-arrow{font-size:24px;font-variation-settings:\"wght\" 1200;color:#000}\n"] }]
-        }] });
-
-/*
- * Public API Surface of @processpuzzle/widgets
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { NavigateBackComponent };
-//# sourceMappingURL=processpuzzle-widgets.mjs.map

package/fesm2022/processpuzzle-widgets.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"processpuzzle-widgets.mjs","sources":["../../../../libs/widgets/src/lib/navigate-back/navigate-back.service.ts","../../../../libs/widgets/src/lib/navigate-back/navigate-back.component.ts","../../../../libs/widgets/src/public-api.ts","../../../../libs/widgets/src/processpuzzle-widgets.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { Stack } from '@processpuzzle/util';\nimport { NavigationEnd, Router } from '@angular/router';\n\n@Injectable({ providedIn: 'root' })\nexport class NavigateBackService {\n  private routeHistory = new Stack<string>();\n\n  constructor(private router: Router) {\n    this.router.events.subscribe((event) => {\n      if (event instanceof NavigationEnd) {\n        this.addRouteToStack(event.urlAfterRedirects); // Add the current route to the stack\n      }\n    });\n  }\n\n  // region public accessor methods\n  public goBack(): void {\n    if (this.routeHistory.size() > 1) {\n      this.routeHistory.pop(); // Remove current route\n      const previousRoute = this.routeHistory.pop(); // Get the previous route\n      if (previousRoute) {\n        this.router.navigateByUrl(previousRoute); // Navigate to the previous route\n      }\n    } else {\n      console.warn('No previous routes to navigate back to.');\n    }\n  }\n\n  public getRouteStack(): Stack<string> {\n    return this.routeHistory;\n  }\n\n  public clearHistory(): void {\n    this.routeHistory.clear();\n  }\n\n  // endregion\n\n  // protected, private helper methods\n  private addRouteToStack(route: string): void {\n    if (this.routeHistory.size() === 0 || this.routeHistory.peek() !== route) {\n      this.routeHistory.push(route);\n    }\n  }\n\n  // endregion\n}\n","import { Component, inject } from '@angular/core';\nimport { NavigateBackService } from './navigate-back.service';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatIconButton } from '@angular/material/button';\n\n@Component({\n  selector: 'pp-navigate-back',\n  imports: [MatIcon, MatIconButton],\n  template: `\n    <button mat-icon-button aria-label=\"Go back\" (click)=\"onNavigateBack()\">\n      <mat-icon class=\"material-symbols-outlined fat-back-arrow\">arrow_back</mat-icon>\n    </button>\n  `,\n  styles: [\n    `\n      .fat-back-arrow {\n        font-size: 24px; /* Größerer und fetterer Pfeil */\n        font-variation-settings: 'wght' 1200; /* Fettigkeitsgrad (700 = fett) */\n        color: #000; /* Schwarz als Farbe */\n      }\n    `,\n  ],\n})\nexport class NavigateBackComponent {\n  readonly service = inject(NavigateBackService);\n\n  // region event handling methods\n  onNavigateBack(): void {\n    this.service.goBack(); // Call the service to handle navigation\n  }\n\n  // endregion\n}\n","/*\n * Public API Surface of @processpuzzle/widgets\n */\n\nexport { NavigateBackComponent } from './lib/navigate-back/navigate-back.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -1,5 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@processpuzzle/widgets" />
-export * from './public-api';

package/lib/navigate-back/navigate-back.component.d.ts

@@ -1,8 +0,0 @@
-import { NavigateBackService } from './navigate-back.service';
-import * as i0 from "@angular/core";
-export declare class NavigateBackComponent {
-    readonly service: NavigateBackService;
-    onNavigateBack(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NavigateBackComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NavigateBackComponent, "pp-navigate-back", never, {}, {}, never, never, true, never>;
-}

package/lib/navigate-back/navigate-back.service.d.ts

@@ -1,14 +0,0 @@
-import { Stack } from '@processpuzzle/util';
-import { Router } from '@angular/router';
-import * as i0 from "@angular/core";
-export declare class NavigateBackService {
-    private router;
-    private routeHistory;
-    constructor(router: Router);
-    goBack(): void;
-    getRouteStack(): Stack<string>;
-    clearHistory(): void;
-    private addRouteToStack;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NavigateBackService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<NavigateBackService>;
-}

package/public-api.d.ts

@@ -1 +0,0 @@
-export { NavigateBackComponent } from './lib/navigate-back/navigate-back.component';