uni-component-tw 1.0.0

package/fesm2022/uni-component-tw-uni-article.mjs

@@ -0,0 +1,116 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, signal, computed, Component, ChangeDetectionStrategy } from '@angular/core';
+import * as i1 from 'devextreme-angular/ui/button';
+import { DxButtonModule } from 'devextreme-angular/ui/button';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+
+class UniArticleComponent {
+    constructor() {
+        /* Inputs */
+        this.color = input.required(); // Colore di base dell'articolo
+        this.title = input(); // Titolo opzionale dell'articolo
+        this.icon = input(); // Icona opzionale per l'intestazione
+        this.setIsOpen = input(); // Stato iniziale di apertura
+        this.headerCloseButton = input(false); // Se mostrare il button per chiudere article
+        /* Variables */
+        this.isOpen = signal(true);
+        this.isHeader = computed(() => this.icon() || this.title() || this.headerCloseButton());
+    }
+    /* ----------------------- Lifecycle Hook --------------------------- */
+    ngOnChanges(changes) {
+        const { setIsOpen } = changes;
+        // Verifica se 'setIsOpen' è cambiato e non è il primo cambiamento
+        if (setIsOpen && !setIsOpen.firstChange && setIsOpen.currentValue !== undefined) {
+            this.isOpen.set(setIsOpen.currentValue);
+        }
+    }
+    /* ----------------------- Metodi --------------------------- */
+    toggleIsOpen() {
+        // Inverte lo stato di apertura/chiusura
+        this.isOpen.update((val) => !val);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: UniArticleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: UniArticleComponent, isStandalone: true, selector: "uni-article", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, setIsOpen: { classPropertyName: "setIsOpen", publicName: "setIsOpen", isSignal: true, isRequired: false, transformFunction: null }, headerCloseButton: { classPropertyName: "headerCloseButton", publicName: "headerCloseButton", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: `
+    <article
+      class="uni_article flex flex-col p-4 border-2 rounded"
+      [style.height]="isOpen() ? '100%' : 'auto'"
+      [style.backgroundColor]="color() + '26'"
+      [style.borderColor]="color() + '33'">
+      <!-- Title -->
+      @if (isHeader()) {
+        <div class="uni_article_header flex items-center gap-4 mb-4">
+          <!-- Icona nella testata, se presente -->
+          @if (icon(); as icon) {
+            <fa-icon class="uni-article-header-icon" [icon]="icon"></fa-icon>
+          }
+
+          <!-- Titolo nella testata, se presente -->
+          @if (title(); as title) {
+            <h5 class="uni_article_header_title uppercase truncate">{{ title }}</h5>
+          }
+
+          <!-- Bottone per aprire/chiudere l'articolo, se presente -->
+          @if (headerCloseButton()) {
+            <dx-button
+              class="uni_article_header_button ml-auto"
+              [icon]="isOpen() ? 'close' : 'expandform'"
+              (onClick)="toggleIsOpen()">
+            </dx-button>
+          }
+        </div>
+      }
+
+      <!-- Contenuto dell'articolo, visibile solo se aperto -->
+      @if (isOpen()) {
+        <ng-content></ng-content>
+      }
+    </article>
+  `, isInline: true, styles: [":host{height:100%;display:block;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DxButtonModule }, { kind: "component", type: i1.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: UniArticleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-article', standalone: true, imports: [CommonModule, DxButtonModule, FaIconComponent], template: `
+    <article
+      class="uni_article flex flex-col p-4 border-2 rounded"
+      [style.height]="isOpen() ? '100%' : 'auto'"
+      [style.backgroundColor]="color() + '26'"
+      [style.borderColor]="color() + '33'">
+      <!-- Title -->
+      @if (isHeader()) {
+        <div class="uni_article_header flex items-center gap-4 mb-4">
+          <!-- Icona nella testata, se presente -->
+          @if (icon(); as icon) {
+            <fa-icon class="uni-article-header-icon" [icon]="icon"></fa-icon>
+          }
+
+          <!-- Titolo nella testata, se presente -->
+          @if (title(); as title) {
+            <h5 class="uni_article_header_title uppercase truncate">{{ title }}</h5>
+          }
+
+          <!-- Bottone per aprire/chiudere l'articolo, se presente -->
+          @if (headerCloseButton()) {
+            <dx-button
+              class="uni_article_header_button ml-auto"
+              [icon]="isOpen() ? 'close' : 'expandform'"
+              (onClick)="toggleIsOpen()">
+            </dx-button>
+          }
+        </div>
+      }
+
+      <!-- Contenuto dell'articolo, visibile solo se aperto -->
+      @if (isOpen()) {
+        <ng-content></ng-content>
+      }
+    </article>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{height:100%;display:block;overflow:hidden}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UniArticleComponent };
+//# sourceMappingURL=uni-component-tw-uni-article.mjs.map

package/fesm2022/uni-component-tw-uni-article.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"uni-component-tw-uni-article.mjs","sources":["../../../projects/uni-component-tw/uni-article/src/uni-article.component.ts","../../../projects/uni-component-tw/uni-article/uni-component-tw-uni-article.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  computed,\r\n  input,\r\n  signal,\r\n  SimpleChanges,\r\n  OnChanges,\r\n} from '@angular/core';\r\nimport { DxButtonModule } from 'devextreme-angular/ui/button';\r\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\r\nimport { IconDefinition } from '@fortawesome/free-solid-svg-icons';\r\n\r\n@Component({\r\n  selector: 'uni-article',\r\n  standalone: true,\r\n  imports: [CommonModule, DxButtonModule, FaIconComponent],\r\n  template: `\r\n    <article\r\n      class=\"uni_article flex flex-col p-4 border-2 rounded\"\r\n      [style.height]=\"isOpen() ? '100%' : 'auto'\"\r\n      [style.backgroundColor]=\"color() + '26'\"\r\n      [style.borderColor]=\"color() + '33'\">\r\n      <!-- Title -->\r\n      @if (isHeader()) {\r\n        <div class=\"uni_article_header flex items-center gap-4 mb-4\">\r\n          <!-- Icona nella testata, se presente -->\r\n          @if (icon(); as icon) {\r\n            <fa-icon class=\"uni-article-header-icon\" [icon]=\"icon\"></fa-icon>\r\n          }\r\n\r\n          <!-- Titolo nella testata, se presente -->\r\n          @if (title(); as title) {\r\n            <h5 class=\"uni_article_header_title uppercase truncate\">{{ title }}</h5>\r\n          }\r\n\r\n          <!-- Bottone per aprire/chiudere l'articolo, se presente -->\r\n          @if (headerCloseButton()) {\r\n            <dx-button\r\n              class=\"uni_article_header_button ml-auto\"\r\n              [icon]=\"isOpen() ? 'close' : 'expandform'\"\r\n              (onClick)=\"toggleIsOpen()\">\r\n            </dx-button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- Contenuto dell'articolo, visibile solo se aperto -->\r\n      @if (isOpen()) {\r\n        <ng-content></ng-content>\r\n      }\r\n    </article>\r\n  `,\r\n  styles: [\r\n    `\r\n      :host {\r\n        height: 100%;\r\n        display: block;\r\n        overflow: hidden;\r\n      }\r\n    `,\r\n  ],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class UniArticleComponent implements OnChanges {\r\n  /* Inputs */\r\n  readonly color = input.required<string>(); // Colore di base dell'articolo\r\n  readonly title = input<string>(); // Titolo opzionale dell'articolo\r\n  readonly icon = input<IconDefinition>(); // Icona opzionale per l'intestazione\r\n  readonly setIsOpen = input<boolean | undefined>(); // Stato iniziale di apertura\r\n  readonly headerCloseButton = input<boolean>(false); // Se mostrare il button per chiudere article\r\n\r\n  /* Variables */\r\n  isOpen = signal<boolean>(true);\r\n  isHeader = computed(() => this.icon() || this.title() || this.headerCloseButton());\r\n\r\n  /* ----------------------- Lifecycle Hook --------------------------- */\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    const { setIsOpen } = changes;\r\n    // Verifica se 'setIsOpen' è cambiato e non è il primo cambiamento\r\n    if (setIsOpen && !setIsOpen.firstChange && setIsOpen.currentValue !== undefined) {\r\n      this.isOpen.set(setIsOpen.currentValue);\r\n    }\r\n  }\r\n\r\n  /* ----------------------- Metodi --------------------------- */\r\n  protected toggleIsOpen(): void {\r\n    // Inverte lo stato di apertura/chiusura\r\n    this.isOpen.update((val) => !val);\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/uni-component-tw-uni-header.mjs

@@ -0,0 +1,73 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, output, Component, ChangeDetectionStrategy } from '@angular/core';
+import * as i1 from 'devextreme-angular/ui/button';
+import { DxButtonModule } from 'devextreme-angular/ui/button';
+
+class UniHeaderComponent {
+    constructor() {
+        /* Input */
+        this.title = input.required();
+        this.version = input.required();
+        this.pathBrandLogo = input.required();
+        this.pathAppLogo = input(undefined);
+        this.sideMenu = input(false);
+        /* Output */
+        this.evtToggleMenu = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: UniHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: UniHeaderComponent, isStandalone: true, selector: "uni-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: true, transformFunction: null }, pathBrandLogo: { classPropertyName: "pathBrandLogo", publicName: "pathBrandLogo", isSignal: true, isRequired: true, transformFunction: null }, pathAppLogo: { classPropertyName: "pathAppLogo", publicName: "pathAppLogo", isSignal: true, isRequired: false, transformFunction: null }, sideMenu: { classPropertyName: "sideMenu", publicName: "sideMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { evtToggleMenu: "evtToggleMenu" }, ngImport: i0, template: `<header id="uni-header">
+    <div>
+      <!-- app logo  -->
+      @if (pathAppLogo(); as pathAppLogo) {
+        <img id="header-img-app" [src]="pathAppLogo" alt="App logo" />
+      }
+
+      <!-- info  -->
+      <div id="header-info">
+        <p>{{ title() }}</p>
+        <p>{{ version() }}</p>
+      </div>
+
+      <!-- brand logo  -->
+      <img id="header-img-brand" [src]="pathBrandLogo()" alt="Brand logo" />
+
+      <!-- button menu  -->
+      @if (sideMenu()) {
+        <dx-button [icon]="'menu'" (onClick)="evtToggleMenu.emit(true)"></dx-button>
+      }
+    </div>
+  </header>`, isInline: true, styles: [":host{display:block}#uni-header{position:fixed;top:0;left:0;height:calc(60px + var(--padding-m));width:100%;padding:var(--padding-m);background-color:#36363f;overflow:hidden;z-index:999}#uni-header>div{display:grid;grid-template-rows:1fr;grid-template-columns:40px 1fr auto min-content;align-items:center;gap:1rem;padding:calc(var(--padding-m) / 2);background-color:#52525b99;border-radius:.25rem;box-shadow:#00000059 0 5px 5px}#uni-header>div #header-info{display:flex;flex-direction:column;justify-content:center;text-wrap:nowrap}#uni-header>div #header-info p:first-child{font-size:20px;line-height:28px;font-weight:500;text-transform:uppercase}#uni-header>div #header-info p:last-child{font-size:12px;line-height:12px;opacity:.65}#uni-header>div #header-img-app,#uni-header>div #header-img-brand{height:40px;object-fit:contain}@media (max-resolution: 1dppx){#uni-header>div{grid-template-columns:30px 1fr auto min-content}#uni-header>div #header-img-app,#uni-header>div #header-img-brand{height:31px}#uni-header>div #header-info p:first-child{font-size:16px;line-height:21px}#uni-header>div #header-info p:last-child{font-size:10px;line-height:10px}}::ng-deep .theme-light #uni-header{background-color:#0284c70d}::ng-deep .theme-light #uni-header>div{background-color:#0284c799!important;box-shadow:#0284c759 0 5px 5px!important}::ng-deep .theme-light #uni-header>div,::ng-deep .theme-light #uni-header>div i:before{color:#fff}:host ::ng-deep .dx-button{height:23px;min-width:23px;background-color:transparent}:host ::ng-deep .dx-button .dx-icon{font-size:23px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DxButtonModule }, { kind: "component", type: i1.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: UniHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-header', standalone: true, imports: [CommonModule, DxButtonModule], template: `<header id="uni-header">
+    <div>
+      <!-- app logo  -->
+      @if (pathAppLogo(); as pathAppLogo) {
+        <img id="header-img-app" [src]="pathAppLogo" alt="App logo" />
+      }
+
+      <!-- info  -->
+      <div id="header-info">
+        <p>{{ title() }}</p>
+        <p>{{ version() }}</p>
+      </div>
+
+      <!-- brand logo  -->
+      <img id="header-img-brand" [src]="pathBrandLogo()" alt="Brand logo" />
+
+      <!-- button menu  -->
+      @if (sideMenu()) {
+        <dx-button [icon]="'menu'" (onClick)="evtToggleMenu.emit(true)"></dx-button>
+      }
+    </div>
+  </header>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}#uni-header{position:fixed;top:0;left:0;height:calc(60px + var(--padding-m));width:100%;padding:var(--padding-m);background-color:#36363f;overflow:hidden;z-index:999}#uni-header>div{display:grid;grid-template-rows:1fr;grid-template-columns:40px 1fr auto min-content;align-items:center;gap:1rem;padding:calc(var(--padding-m) / 2);background-color:#52525b99;border-radius:.25rem;box-shadow:#00000059 0 5px 5px}#uni-header>div #header-info{display:flex;flex-direction:column;justify-content:center;text-wrap:nowrap}#uni-header>div #header-info p:first-child{font-size:20px;line-height:28px;font-weight:500;text-transform:uppercase}#uni-header>div #header-info p:last-child{font-size:12px;line-height:12px;opacity:.65}#uni-header>div #header-img-app,#uni-header>div #header-img-brand{height:40px;object-fit:contain}@media (max-resolution: 1dppx){#uni-header>div{grid-template-columns:30px 1fr auto min-content}#uni-header>div #header-img-app,#uni-header>div #header-img-brand{height:31px}#uni-header>div #header-info p:first-child{font-size:16px;line-height:21px}#uni-header>div #header-info p:last-child{font-size:10px;line-height:10px}}::ng-deep .theme-light #uni-header{background-color:#0284c70d}::ng-deep .theme-light #uni-header>div{background-color:#0284c799!important;box-shadow:#0284c759 0 5px 5px!important}::ng-deep .theme-light #uni-header>div,::ng-deep .theme-light #uni-header>div i:before{color:#fff}:host ::ng-deep .dx-button{height:23px;min-width:23px;background-color:transparent}:host ::ng-deep .dx-button .dx-icon{font-size:23px}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UniHeaderComponent };
+//# sourceMappingURL=uni-component-tw-uni-header.mjs.map

package/fesm2022/uni-component-tw-uni-header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"uni-component-tw-uni-header.mjs","sources":["../../../projects/uni-component-tw/uni-header/src/uni-header.component.ts","../../../projects/uni-component-tw/uni-header/uni-component-tw-uni-header.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, input, output } from '@angular/core';\r\nimport { DxButtonModule } from 'devextreme-angular/ui/button';\r\n\r\n@Component({\r\n  selector: 'uni-header',\r\n  standalone: true,\r\n  imports: [CommonModule, DxButtonModule],\r\n  template: `<header id=\"uni-header\">\r\n    <div>\r\n      <!-- app logo  -->\r\n      @if (pathAppLogo(); as pathAppLogo) {\r\n        <img id=\"header-img-app\" [src]=\"pathAppLogo\" alt=\"App logo\" />\r\n      }\r\n\r\n      <!-- info  -->\r\n      <div id=\"header-info\">\r\n        <p>{{ title() }}</p>\r\n        <p>{{ version() }}</p>\r\n      </div>\r\n\r\n      <!-- brand logo  -->\r\n      <img id=\"header-img-brand\" [src]=\"pathBrandLogo()\" alt=\"Brand logo\" />\r\n\r\n      <!-- button menu  -->\r\n      @if (sideMenu()) {\r\n        <dx-button [icon]=\"'menu'\" (onClick)=\"evtToggleMenu.emit(true)\"></dx-button>\r\n      }\r\n    </div>\r\n  </header>`,\r\n  styleUrl: './uni-header.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class UniHeaderComponent {\r\n  /* Input */\r\n  title = input.required<string>();\r\n  version = input.required<string>();\r\n  pathBrandLogo = input.required<string>();\r\n  pathAppLogo = input<string | undefined>(undefined);\r\n  sideMenu = input<boolean>(false);\r\n\r\n  /* Output */\r\n  evtToggleMenu = output<true>();\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/uni-component-tw-uni-login-modal.mjs

@@ -0,0 +1,152 @@
+import { Location, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, input, Component, ChangeDetectionStrategy } from '@angular/core';
+import { Router } from '@angular/router';
+import * as i2 from '@angular/forms';
+import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
+import * as i1 from 'devextreme-angular';
+import { DxPopupModule, DxTextBoxModule, DxButtonModule } from 'devextreme-angular';
+import { UNIAuthService } from 'uni-service/auth';
+import { UNIToastService } from 'uni-service/toast';
+import { UNITranslateService } from 'uni-service/translate';
+
+class UNILoginModalComponent {
+    constructor() {
+        /* Service */
+        this.router = inject(Router);
+        this.location = inject(Location);
+        this.authService = inject(UNIAuthService);
+        this.toastService = inject(UNIToastService);
+        this.translateService = inject(UNITranslateService);
+        /* Input & output */
+        this.visibile = input(true);
+        this.routeHome = input();
+        this.enableGoBack = input.required();
+        /* Form */
+        this.loginForm = new FormGroup({
+            username: new FormControl('', { nonNullable: true, validators: Validators.required }),
+            password: new FormControl('', { nonNullable: true, validators: Validators.required }),
+        });
+    }
+    /* ------------------------ Methods ------------------------ */
+    login() {
+        this.authService.login$(this.loginForm.getRawValue()).subscribe(() => {
+            if (this.routeHome())
+                this.router.navigate([this.routeHome]);
+        });
+    }
+    logout() {
+        this.authService.logout$().subscribe();
+    }
+    onHiding() {
+        if (this.enableGoBack())
+            this.location.back();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: UNILoginModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: UNILoginModalComponent, isStandalone: true, selector: "uni-login-modal", inputs: { visibile: { classPropertyName: "visibile", publicName: "visibile", isSignal: true, isRequired: false, transformFunction: null }, routeHome: { classPropertyName: "routeHome", publicName: "routeHome", isSignal: true, isRequired: false, transformFunction: null }, enableGoBack: { classPropertyName: "enableGoBack", publicName: "enableGoBack", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <dx-popup
+      [wrapperAttr]="{ id: 'loginPopup' }"
+      [width]="'40%'"
+      [minWidth]="400"
+      [maxWidth]="700"
+      [height]="500"
+      [visible]="visibile()"
+      [showTitle]="true"
+      [title]="'Login'"
+      [dragEnabled]="false"
+      [showCloseButton]="true"
+      [hideOnOutsideClick]="false"
+      (onHiding)="onHiding()">
+      <section>
+        <img src="../../../assets/images/logo/logo_trasparente.png" alt="Logo" />
+        <p>UNITEC</p>
+        @if (authService.user(); as user) {
+          <div>Utente: {{ user.username }}</div>
+          <dx-button
+            id="logoutButton"
+            stylingMode="contained"
+            [text]="'Logout'"
+            (onClick)="logout()"></dx-button>
+        } @else {
+          <form [formGroup]="loginForm" (ngSubmit)="login()">
+            <dx-text-box
+              [placeholder]="'User'"
+              stylingMode="outlined"
+              formControlName="username"
+              [inputAttr]="{ 'aria-label': 'User' }"></dx-text-box>
+            <dx-text-box
+              [placeholder]="'Password'"
+              mode="password"
+              stylingMode="outlined"
+              formControlName="password"
+              [inputAttr]="{ 'aria-label': 'Password' }"></dx-text-box>
+            <dx-button
+              id="loginSubmitButton"
+              stylingMode="contained"
+              [text]="'Login'"
+              [useSubmitBehavior]="true"
+              [disabled]="loginForm.invalid"></dx-button>
+          </form>
+        }
+      </section>
+    </dx-popup>
+  `, isInline: true, styles: [":host{display:block}::ng-deep #loginPopup .dx-popup-content{display:flex;justify-content:center;align-items:center}section{width:60%;display:flex;align-items:center;flex-direction:column;gap:1.5rem}img{height:8rem}form{width:100%;display:flex;flex-direction:column;gap:1rem}form dx-button{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DxPopupModule }, { kind: "component", type: i1.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "enableBodyScroll", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "enableBodyScrollChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: DxTextBoxModule }, { kind: "component", type: i1.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isDirtyChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "ngmodule", type: DxButtonModule }, { kind: "component", type: i1.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: UNILoginModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-login-modal', standalone: true, imports: [CommonModule, DxPopupModule, ReactiveFormsModule, DxTextBoxModule, DxButtonModule], template: `
+    <dx-popup
+      [wrapperAttr]="{ id: 'loginPopup' }"
+      [width]="'40%'"
+      [minWidth]="400"
+      [maxWidth]="700"
+      [height]="500"
+      [visible]="visibile()"
+      [showTitle]="true"
+      [title]="'Login'"
+      [dragEnabled]="false"
+      [showCloseButton]="true"
+      [hideOnOutsideClick]="false"
+      (onHiding)="onHiding()">
+      <section>
+        <img src="../../../assets/images/logo/logo_trasparente.png" alt="Logo" />
+        <p>UNITEC</p>
+        @if (authService.user(); as user) {
+          <div>Utente: {{ user.username }}</div>
+          <dx-button
+            id="logoutButton"
+            stylingMode="contained"
+            [text]="'Logout'"
+            (onClick)="logout()"></dx-button>
+        } @else {
+          <form [formGroup]="loginForm" (ngSubmit)="login()">
+            <dx-text-box
+              [placeholder]="'User'"
+              stylingMode="outlined"
+              formControlName="username"
+              [inputAttr]="{ 'aria-label': 'User' }"></dx-text-box>
+            <dx-text-box
+              [placeholder]="'Password'"
+              mode="password"
+              stylingMode="outlined"
+              formControlName="password"
+              [inputAttr]="{ 'aria-label': 'Password' }"></dx-text-box>
+            <dx-button
+              id="loginSubmitButton"
+              stylingMode="contained"
+              [text]="'Login'"
+              [useSubmitBehavior]="true"
+              [disabled]="loginForm.invalid"></dx-button>
+          </form>
+        }
+      </section>
+    </dx-popup>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}::ng-deep #loginPopup .dx-popup-content{display:flex;justify-content:center;align-items:center}section{width:60%;display:flex;align-items:center;flex-direction:column;gap:1.5rem}img{height:8rem}form{width:100%;display:flex;flex-direction:column;gap:1rem}form dx-button{width:100%}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UNILoginModalComponent };
+//# sourceMappingURL=uni-component-tw-uni-login-modal.mjs.map

package/fesm2022/uni-component-tw-uni-login-modal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"uni-component-tw-uni-login-modal.mjs","sources":["../../../projects/uni-component-tw/uni-login-modal/src/uni-login-modal.component.ts","../../../projects/uni-component-tw/uni-login-modal/uni-component-tw-uni-login-modal.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';\r\nimport { Router } from '@angular/router';\r\nimport { Location } from '@angular/common';\r\nimport { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';\r\nimport { DxButtonModule, DxPopupModule, DxTextBoxModule } from 'devextreme-angular';\r\nimport { UNIAuthService } from 'uni-service/auth';\r\nimport { UNIToastService } from 'uni-service/toast';\r\nimport { UNITranslateService } from 'uni-service/translate';\r\n\r\nexport type LoginForm = {\r\n  username: string;\r\n  password: string;\r\n};\r\n\r\n@Component({\r\n  selector: 'uni-login-modal',\r\n  standalone: true,\r\n  imports: [CommonModule, DxPopupModule, ReactiveFormsModule, DxTextBoxModule, DxButtonModule],\r\n  template: `\r\n    <dx-popup\r\n      [wrapperAttr]=\"{ id: 'loginPopup' }\"\r\n      [width]=\"'40%'\"\r\n      [minWidth]=\"400\"\r\n      [maxWidth]=\"700\"\r\n      [height]=\"500\"\r\n      [visible]=\"visibile()\"\r\n      [showTitle]=\"true\"\r\n      [title]=\"'Login'\"\r\n      [dragEnabled]=\"false\"\r\n      [showCloseButton]=\"true\"\r\n      [hideOnOutsideClick]=\"false\"\r\n      (onHiding)=\"onHiding()\">\r\n      <section>\r\n        <img src=\"../../../assets/images/logo/logo_trasparente.png\" alt=\"Logo\" />\r\n        <p>UNITEC</p>\r\n        @if (authService.user(); as user) {\r\n          <div>Utente: {{ user.username }}</div>\r\n          <dx-button\r\n            id=\"logoutButton\"\r\n            stylingMode=\"contained\"\r\n            [text]=\"'Logout'\"\r\n            (onClick)=\"logout()\"></dx-button>\r\n        } @else {\r\n          <form [formGroup]=\"loginForm\" (ngSubmit)=\"login()\">\r\n            <dx-text-box\r\n              [placeholder]=\"'User'\"\r\n              stylingMode=\"outlined\"\r\n              formControlName=\"username\"\r\n              [inputAttr]=\"{ 'aria-label': 'User' }\"></dx-text-box>\r\n            <dx-text-box\r\n              [placeholder]=\"'Password'\"\r\n              mode=\"password\"\r\n              stylingMode=\"outlined\"\r\n              formControlName=\"password\"\r\n              [inputAttr]=\"{ 'aria-label': 'Password' }\"></dx-text-box>\r\n            <dx-button\r\n              id=\"loginSubmitButton\"\r\n              stylingMode=\"contained\"\r\n              [text]=\"'Login'\"\r\n              [useSubmitBehavior]=\"true\"\r\n              [disabled]=\"loginForm.invalid\"></dx-button>\r\n          </form>\r\n        }\r\n      </section>\r\n    </dx-popup>\r\n  `,\r\n  styleUrls: ['./uni-login-modal.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class UNILoginModalComponent {\r\n  /* Service */\r\n  readonly router = inject(Router);\r\n  readonly location = inject(Location);\r\n  readonly authService = inject(UNIAuthService);\r\n  readonly toastService = inject(UNIToastService);\r\n  readonly translateService = inject(UNITranslateService);\r\n\r\n  /* Input & output */\r\n  visibile = input<boolean>(true);\r\n  routeHome = input<string>();\r\n  enableGoBack = input.required<boolean>();\r\n\r\n  /* Form */\r\n  public readonly loginForm = new FormGroup<{ [K in keyof LoginForm]: FormControl<LoginForm[K]> }>({\r\n    username: new FormControl('', { nonNullable: true, validators: Validators.required }),\r\n    password: new FormControl('', { nonNullable: true, validators: Validators.required }),\r\n  });\r\n\r\n  /* ------------------------ Methods ------------------------ */\r\n  public login(): void {\r\n    this.authService.login$(this.loginForm.getRawValue()).subscribe(() => {\r\n      if (this.routeHome()) this.router.navigate([this.routeHome]);\r\n    });\r\n  }\r\n\r\n  public logout(): void {\r\n    this.authService.logout$().subscribe();\r\n  }\r\n\r\n  public onHiding(): void {\r\n    if (this.enableGoBack()) this.location.back();\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/uni-component-tw-uni-pie-chart.mjs

@@ -0,0 +1,166 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, computed, Component, ChangeDetectionStrategy } from '@angular/core';
+import * as i1 from 'devextreme-angular/ui/pie-chart';
+import { DxPieChartModule } from 'devextreme-angular/ui/pie-chart';
+import * as i2 from 'devextreme-angular/core';
+
+class UniPieChartComponent {
+    /* ----------------------- Constructor & lifecycle --------------------------- */
+    constructor() {
+        /* Input & output */
+        this.chartDataSource = input.required();
+        this.chartPercentage = input(undefined);
+        this.chartType = input('pie');
+        this.chartDiameter = input(1);
+        this.chartInnerRadius = input(0.7);
+        this.tooltipIsEnabled = input(true);
+        this.legendPosition = input('none');
+        this.legendWithValue = input(false);
+        this.legendGap = input('12px');
+        this.uom = input('');
+        /* Variables */
+        this.paletteColor = computed(() => this.chartDataSource().map((data) => data.color));
+        this.gridColumn = computed(() => {
+            switch (this.legendPosition()) {
+                case 'right':
+                    return '1fr min-content';
+                case 'left':
+                    return 'min-content 1fr';
+                default:
+                    return '1fr';
+            }
+        });
+        this.gridRow = computed(() => {
+            switch (this.legendPosition()) {
+                case 'top':
+                    return 'min-content 1fr';
+                case 'bottom':
+                    return '1fr min-content';
+                default:
+                    return '1fr';
+            }
+        });
+        this.customizeTooltip = this.customizeTooltip.bind(this);
+    }
+    /* -----------------------Methods--------------------------- */
+    /* Funzione usata per personalizzare i tooltips del grafico */
+    customizeTooltip(pointInfo) {
+        const { argumentText, valueText } = pointInfo;
+        return {
+            text: `${argumentText}<br/>${valueText} ${this.uom()}`,
+            color: 'rgba(149, 157, 165, 0.5)',
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: UniPieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: UniPieChartComponent, isStandalone: true, selector: "uni-pie-chart", inputs: { chartDataSource: { classPropertyName: "chartDataSource", publicName: "chartDataSource", isSignal: true, isRequired: true, transformFunction: null }, chartPercentage: { classPropertyName: "chartPercentage", publicName: "chartPercentage", isSignal: true, isRequired: false, transformFunction: null }, chartType: { classPropertyName: "chartType", publicName: "chartType", isSignal: true, isRequired: false, transformFunction: null }, chartDiameter: { classPropertyName: "chartDiameter", publicName: "chartDiameter", isSignal: true, isRequired: false, transformFunction: null }, chartInnerRadius: { classPropertyName: "chartInnerRadius", publicName: "chartInnerRadius", isSignal: true, isRequired: false, transformFunction: null }, tooltipIsEnabled: { classPropertyName: "tooltipIsEnabled", publicName: "tooltipIsEnabled", isSignal: true, isRequired: false, transformFunction: null }, legendPosition: { classPropertyName: "legendPosition", publicName: "legendPosition", isSignal: true, isRequired: false, transformFunction: null }, legendWithValue: { classPropertyName: "legendWithValue", publicName: "legendWithValue", isSignal: true, isRequired: false, transformFunction: null }, legendGap: { classPropertyName: "legendGap", publicName: "legendGap", isSignal: true, isRequired: false, transformFunction: null }, uom: { classPropertyName: "uom", publicName: "uom", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="container-pie-chart"
+      [style.display]="legendPosition() === 'none' ? 'block' : 'grid'"
+      [style.gridTemplateRows]="gridRow()"
+      [style.gridTemplateColumns]="gridColumn()">
+      <dx-pie-chart
+        [style.order]="legendPosition() === 'top' || legendPosition() === 'left' ? 1 : 0"
+        style="height: 100%; width: 100%; overflow: hidden"
+        [type]="chartType()"
+        [dataSource]="chartDataSource()"
+        resolveLabelOverlapping="shift"
+        [palette]="paletteColor()"
+        [diameter]="chartDiameter()"
+        [innerRadius]="chartInnerRadius()"
+        [redrawOnResize]="true"
+        [centerTemplate]="chartPercentage() !== undefined ? 'centerTemplate' : undefined"
+        [series]="{
+          argumentField: 'name',
+          format: 'fixedPoint',
+          valueField: 'value',
+          hoverStyle: 'none',
+          label: { visible: false }
+        }"
+        [legend]="{ visible: false }"
+        [tooltip]="{ enabled: tooltipIsEnabled(), customizeTooltip: customizeTooltip }">
+        <svg *dxTemplate="let pieChart of 'centerTemplate'">
+          <text text-anchor="middle" style="font-size: 28px" x="100" y="120" fill="#fff">
+            {{ chartPercentage() }}%
+          </text>
+        </svg>
+      </dx-pie-chart>
+
+      @if (legendPosition() !== 'none') {
+        <ul
+          class="container-legend"
+          [style.flexDirection]="
+            legendPosition() === 'top' || legendPosition() === 'bottom' ? 'row' : 'column'
+          "
+          [style.gap]="legendGap()">
+          @for (item of chartDataSource(); track $index) {
+            <li>
+              <span class="square" [style.backgroundColor]="item.color"></span>
+              {{ legendWithValue() ? item.name + ' ' + item.value + ' ' + uom() : item.name }}
+            </li>
+          }
+        </ul>
+      }
+    </div>
+  `, isInline: true, styles: [".container-pie-chart{height:100%;width:100%;gap:16px}.container-legend{display:flex;align-items:flex-start;justify-content:center;flex-wrap:wrap}.container-legend li{display:grid;grid-template-rows:1fr;grid-template-columns:min-content 1fr;align-items:center;gap:6px;text-wrap:nowrap}.square{display:block;height:12px;width:12px;border-radius:2.5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DxPieChartModule }, { kind: "component", type: i1.DxPieChartComponent, selector: "dx-pie-chart", inputs: ["adaptiveLayout", "animation", "annotations", "centerTemplate", "commonAnnotationSettings", "commonSeriesSettings", "customizeAnnotation", "customizeLabel", "customizePoint", "dataSource", "diameter", "disabled", "elementAttr", "export", "innerRadius", "legend", "loadingIndicator", "margin", "minDiameter", "palette", "paletteExtensionMode", "pathModified", "pointSelectionMode", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "segmentsDirection", "series", "seriesTemplate", "size", "sizeGroup", "startAngle", "theme", "title", "tooltip", "type"], outputs: ["onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onTooltipHidden", "onTooltipShown", "adaptiveLayoutChange", "animationChange", "annotationsChange", "centerTemplateChange", "commonAnnotationSettingsChange", "commonSeriesSettingsChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataSourceChange", "diameterChange", "disabledChange", "elementAttrChange", "exportChange", "innerRadiusChange", "legendChange", "loadingIndicatorChange", "marginChange", "minDiameterChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "segmentsDirectionChange", "seriesChange", "seriesTemplateChange", "sizeChange", "sizeGroupChange", "startAngleChange", "themeChange", "titleChange", "tooltipChange", "typeChange"] }, { kind: "directive", type: i2.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: UniPieChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-pie-chart', standalone: true, imports: [CommonModule, DxPieChartModule], template: `
+    <div
+      class="container-pie-chart"
+      [style.display]="legendPosition() === 'none' ? 'block' : 'grid'"
+      [style.gridTemplateRows]="gridRow()"
+      [style.gridTemplateColumns]="gridColumn()">
+      <dx-pie-chart
+        [style.order]="legendPosition() === 'top' || legendPosition() === 'left' ? 1 : 0"
+        style="height: 100%; width: 100%; overflow: hidden"
+        [type]="chartType()"
+        [dataSource]="chartDataSource()"
+        resolveLabelOverlapping="shift"
+        [palette]="paletteColor()"
+        [diameter]="chartDiameter()"
+        [innerRadius]="chartInnerRadius()"
+        [redrawOnResize]="true"
+        [centerTemplate]="chartPercentage() !== undefined ? 'centerTemplate' : undefined"
+        [series]="{
+          argumentField: 'name',
+          format: 'fixedPoint',
+          valueField: 'value',
+          hoverStyle: 'none',
+          label: { visible: false }
+        }"
+        [legend]="{ visible: false }"
+        [tooltip]="{ enabled: tooltipIsEnabled(), customizeTooltip: customizeTooltip }">
+        <svg *dxTemplate="let pieChart of 'centerTemplate'">
+          <text text-anchor="middle" style="font-size: 28px" x="100" y="120" fill="#fff">
+            {{ chartPercentage() }}%
+          </text>
+        </svg>
+      </dx-pie-chart>
+
+      @if (legendPosition() !== 'none') {
+        <ul
+          class="container-legend"
+          [style.flexDirection]="
+            legendPosition() === 'top' || legendPosition() === 'bottom' ? 'row' : 'column'
+          "
+          [style.gap]="legendGap()">
+          @for (item of chartDataSource(); track $index) {
+            <li>
+              <span class="square" [style.backgroundColor]="item.color"></span>
+              {{ legendWithValue() ? item.name + ' ' + item.value + ' ' + uom() : item.name }}
+            </li>
+          }
+        </ul>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container-pie-chart{height:100%;width:100%;gap:16px}.container-legend{display:flex;align-items:flex-start;justify-content:center;flex-wrap:wrap}.container-legend li{display:grid;grid-template-rows:1fr;grid-template-columns:min-content 1fr;align-items:center;gap:6px;text-wrap:nowrap}.square{display:block;height:12px;width:12px;border-radius:2.5px}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UniPieChartComponent };
+//# sourceMappingURL=uni-component-tw-uni-pie-chart.mjs.map

package/fesm2022/uni-component-tw-uni-pie-chart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"uni-component-tw-uni-pie-chart.mjs","sources":["../../../projects/uni-component-tw/uni-pie-chart/src/uni-pie-chart.component.ts","../../../projects/uni-component-tw/uni-pie-chart/uni-component-tw-uni-pie-chart.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\r\nimport { DxPieChartModule } from 'devextreme-angular/ui/pie-chart';\r\nimport { PieChartType } from 'devextreme/viz/pie_chart_types';\r\n\r\nexport type ChartDataSource = {\r\n  name: string;\r\n  value: number | undefined;\r\n  color: string;\r\n};\r\n\r\n@Component({\r\n  selector: 'uni-pie-chart',\r\n  standalone: true,\r\n  imports: [CommonModule, DxPieChartModule],\r\n  template: `\r\n    <div\r\n      class=\"container-pie-chart\"\r\n      [style.display]=\"legendPosition() === 'none' ? 'block' : 'grid'\"\r\n      [style.gridTemplateRows]=\"gridRow()\"\r\n      [style.gridTemplateColumns]=\"gridColumn()\">\r\n      <dx-pie-chart\r\n        [style.order]=\"legendPosition() === 'top' || legendPosition() === 'left' ? 1 : 0\"\r\n        style=\"height: 100%; width: 100%; overflow: hidden\"\r\n        [type]=\"chartType()\"\r\n        [dataSource]=\"chartDataSource()\"\r\n        resolveLabelOverlapping=\"shift\"\r\n        [palette]=\"paletteColor()\"\r\n        [diameter]=\"chartDiameter()\"\r\n        [innerRadius]=\"chartInnerRadius()\"\r\n        [redrawOnResize]=\"true\"\r\n        [centerTemplate]=\"chartPercentage() !== undefined ? 'centerTemplate' : undefined\"\r\n        [series]=\"{\r\n          argumentField: 'name',\r\n          format: 'fixedPoint',\r\n          valueField: 'value',\r\n          hoverStyle: 'none',\r\n          label: { visible: false }\r\n        }\"\r\n        [legend]=\"{ visible: false }\"\r\n        [tooltip]=\"{ enabled: tooltipIsEnabled(), customizeTooltip: customizeTooltip }\">\r\n        <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\r\n          <text text-anchor=\"middle\" style=\"font-size: 28px\" x=\"100\" y=\"120\" fill=\"#fff\">\r\n            {{ chartPercentage() }}%\r\n          </text>\r\n        </svg>\r\n      </dx-pie-chart>\r\n\r\n      @if (legendPosition() !== 'none') {\r\n        <ul\r\n          class=\"container-legend\"\r\n          [style.flexDirection]=\"\r\n            legendPosition() === 'top' || legendPosition() === 'bottom' ? 'row' : 'column'\r\n          \"\r\n          [style.gap]=\"legendGap()\">\r\n          @for (item of chartDataSource(); track $index) {\r\n            <li>\r\n              <span class=\"square\" [style.backgroundColor]=\"item.color\"></span>\r\n              {{ legendWithValue() ? item.name + ' ' + item.value + ' ' + uom() : item.name }}\r\n            </li>\r\n          }\r\n        </ul>\r\n      }\r\n    </div>\r\n  `,\r\n  styleUrl: './uni-pie-chart.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class UniPieChartComponent {\r\n  /* Input & output */\r\n  chartDataSource = input.required<ChartDataSource[]>();\r\n  chartPercentage = input<number | undefined>(undefined);\r\n  chartType = input<PieChartType>('pie');\r\n  chartDiameter = input<number>(1);\r\n  chartInnerRadius = input<number>(0.7);\r\n  tooltipIsEnabled = input<boolean>(true);\r\n  legendPosition = input<'right' | 'left' | 'top' | 'bottom' | 'none'>('none');\r\n  legendWithValue = input<boolean>(false);\r\n  legendGap = input<string>('12px');\r\n  uom = input<string>('');\r\n\r\n  /* Variables */\r\n  paletteColor = computed(() => this.chartDataSource().map((data) => data.color));\r\n  gridColumn = computed(() => {\r\n    switch (this.legendPosition()) {\r\n      case 'right':\r\n        return '1fr min-content';\r\n      case 'left':\r\n        return 'min-content 1fr';\r\n      default:\r\n        return '1fr';\r\n    }\r\n  });\r\n  gridRow = computed(() => {\r\n    switch (this.legendPosition()) {\r\n      case 'top':\r\n        return 'min-content 1fr';\r\n      case 'bottom':\r\n        return '1fr min-content';\r\n      default:\r\n        return '1fr';\r\n    }\r\n  });\r\n\r\n  /* ----------------------- Constructor & lifecycle --------------------------- */\r\n  constructor() {\r\n    this.customizeTooltip = this.customizeTooltip.bind(this);\r\n  }\r\n\r\n  /* -----------------------Methods--------------------------- */\r\n  /* Funzione usata per personalizzare i tooltips del grafico */\r\n  public customizeTooltip(pointInfo: { argumentText: string; valueText: string }) {\r\n    const { argumentText, valueText } = pointInfo;\r\n    return {\r\n      text: `${argumentText}<br/>${valueText} ${this.uom()}`,\r\n      color: 'rgba(149, 157, 165, 0.5)',\r\n    };\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}