@esfaenza/core 20.3.82 → 20.3.84

package/components/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, ChangeDetectorRef, Type, ElementRef, NgZone, Injector, TemplateRef, SimpleChanges } from '@angular/core';
+import { NgZone, EventEmitter, ChangeDetectorRef, Type, ElementRef, Injector, TemplateRef, SimpleChanges } from '@angular/core';
 import * as i2 from '@angular/router';
 import { Router, ActivatedRoute, UrlTree, UrlSegment, Data } from '@angular/router';
 import { Title, DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
@@ -30,13 +30,20 @@ import { DropdownOption } from '@esfaenza/utility-components';
 import { HttpParams } from '@angular/common/http';
 
 declare class BackTop {
+    private zone;
     position: number;
     showSpeed: number;
     moveSpeed: number;
     private _selector;
+    private visible;
+    constructor(zone: NgZone);
     ngAfterViewInit(): void;
     _onClick(): boolean;
     _onWindowScroll(): void;
+    /** Torna in cima in `duration` ms con l'andamento "swing", quello di default delle animazioni jQuery */
+    private scrollToTop;
+    /** Dissolvenza in entrata/uscita fino all'opacita' del foglio di stile (0.4, 0.8 al passaggio del mouse) */
+    private fade;
     static ɵfac: i0.ɵɵFactoryDeclaration<BackTop, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BackTop, "back-top", never, { "position": { "alias": "position"; "required": false; }; "showSpeed": { "alias": "showSpeed"; "required": false; }; "moveSpeed": { "alias": "moveSpeed"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -264,11 +271,21 @@ declare class Sidebar {
     menuCollapse(): void;
     menuCollapseStateChange(isCollapsed: boolean): void;
     menuExpand(): void;
-    hoverItem(jQueryevent: any): void;
+    hoverItem(event: any): void;
     sendAwayHoverElement(): void;
+    private hoverElem;
     updateSidebarHeight(): void;
-    collapseMenu(jQueryevent: any, item: any): boolean;
+    collapseMenu(event: any, item: any): boolean;
     private outsideAngularClickHandler;
+    /** Chiude le voci espanse di un livello (es. "level-2") */
+    private collapseLevel;
+    /**
+     * Apre o chiude un sottomenu animandone l'altezza, come facevano slideDown/slideUp di jQuery:
+     * se e' gia' nello stato richiesto non fa nulla, e alla fine lascia `display` inline (block o none),
+     * cosi' togliere la classe che lo mostrava non lo nasconde di colpo a meta' animazione.
+     * Se un'animazione e' in corso riparte dall'altezza attuale invece di accodarsi.
+     */
+    private slide;
     onChangeTenant(): void;
     onLogout(): void;
     private getUserProfileData;

package/directives/index.d.ts

@@ -1,34 +1,69 @@
 import * as i0 from '@angular/core';
-import { ElementRef, NgZone, Renderer2, OnInit, OnDestroy, ViewContainerRef, Type } from '@angular/core';
+import { ElementRef, NgZone, Renderer2, ViewContainerRef, Type } from '@angular/core';
 import { AppEmbeddingExtensions } from '@esfaenza/extensions';
 import { LocationStrategy } from '@angular/common';
 import { RouterLinkWithHref, Router, ActivatedRoute, UrlTree } from '@angular/router';
 import { ModalDirective } from 'ngx-bootstrap/modal';
 import { Subscription } from 'rxjs';
 
+/**
+ * Rende trascinabile il primo figlio dell'elemento (tipicamente la `.modal-content` dentro una
+ * `.modal-dialog`), afferrandolo dall'handle indicato (default `.modal-header`).
+ *
+ * Riproduce il comportamento che aveva con jQuery UI `draggable`:
+ * - lo spostamento si applica con `left`/`top` su un elemento `position: relative`, quindi si somma
+ *   fra un trascinamento e l'altro;
+ * - non parte se si preme su campi, pulsanti o select (il `cancel` di default di jQuery UI);
+ * - solo con il tasto principale del mouse (jQuery UI non gestiva il touch);
+ * - quando l'applicazione e' incorporata (`AppEmbeddingExtensions.Embedded`) il riquadro resta
+ *   dentro la pagina, come faceva il vecchio `div_containment`.
+ *
+ * Tutto gira fuori dalla zona di Angular: i movimenti del mouse non devono scatenare change detection.
+ */
 declare class Draggable {
     private _elementRef;
     private zone;
     private emb;
     handlerSelector: string;
-    private $draggable;
+    private static readonly CANCEL;
+    private target;
+    private startX;
+    private startY;
+    private startLeft;
+    private startTop;
+    private bounds;
+    private bodyUserSelect;
     constructor(_elementRef: ElementRef, zone: NgZone, emb: AppEmbeddingExtensions);
     ngOnInit(): void;
     ngOnDestroy(): void;
+    private onDown;
+    private onMove;
+    private onUp;
+    private stopListening;
+    /** Di quanto si puo' spostare il riquadro restando dentro la pagina (in px, da dove si trova ora) */
+    private computeBounds;
     static ɵfac: i0.ɵɵFactoryDeclaration<Draggable, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<Draggable, "[emaDraggable]", never, { "handlerSelector": { "alias": "emaDraggable"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Area scorrevole ad altezza fissa con una barra sottile.
+ *
+ * Prima usava il plugin jQuery slimScroll, che avvolgeva l'elemento in un contenitore e disegnava
+ * una barra finta. Ora lo scorrimento e' quello nativo: la direttiva imposta altezza e overflow,
+ * e la classe `es-slim-scroll` da' alla barra l'aspetto di prima (4px, visibile al passaggio del
+ * mouse; vedi `_libs-override.scss`).
+ *
+ * Delle opzioni di slimScroll l'unica usata nella Suite e' `height` (numero in px o stringa CSS).
+ */
 declare class SlimScroll {
     private _elementRef;
-    private zone;
-    slimScrollOptions: Object;
-    constructor(_elementRef: ElementRef, zone: NgZone);
-    ngOnChanges(changes: any): void;
-    ngOnDestroy(): void;
-    private _scroll;
-    private _init;
-    private _destroy;
+    slimScrollOptions: {
+        height?: number | string;
+        [key: string]: any;
+    };
+    constructor(_elementRef: ElementRef);
+    ngOnChanges(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SlimScroll, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<SlimScroll, "[slim-scroll]", never, { "slimScrollOptions": { "alias": "slimScrollOptions"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -43,18 +78,6 @@ declare class esRouterLinkWithHref extends RouterLinkWithHref {
     static ɵdir: i0.ɵɵDirectiveDeclaration<esRouterLinkWithHref, "a[esRouterLink],area[esRouterLink]", never, { "esRouterLink": { "alias": "esRouterLink"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-declare class Widget implements OnInit, OnDestroy {
-    $el: any;
-    private onClose;
-    private onFullscreened;
-    private onRestored;
-    constructor(el: ElementRef);
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<Widget, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<Widget, "[widget]", never, {}, {}, never, never, true, never>;
-}
-
 declare class ComponentHostDirective {
     viewContainerRef: ViewContainerRef;
     componentHost: Type<any>;
@@ -106,8 +129,8 @@ declare class EsModalDirective extends ModalDirective {
 
 declare class DirectivesModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DirectivesModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DirectivesModule, never, [typeof Draggable, typeof SlimScroll, typeof Widget, typeof esRouterLinkWithHref, typeof ComponentHostDirective, typeof EsModalDirective], [typeof Draggable, typeof SlimScroll, typeof Widget, typeof esRouterLinkWithHref, typeof ComponentHostDirective, typeof EsModalDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DirectivesModule, never, [typeof Draggable, typeof SlimScroll, typeof esRouterLinkWithHref, typeof ComponentHostDirective, typeof EsModalDirective], [typeof Draggable, typeof SlimScroll, typeof esRouterLinkWithHref, typeof ComponentHostDirective, typeof EsModalDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DirectivesModule>;
 }
 
-export { ComponentHostDirective, DirectivesModule, Draggable, EsModalDirective, SlimScroll, Widget, esRouterLinkWithHref };
+export { ComponentHostDirective, DirectivesModule, Draggable, EsModalDirective, SlimScroll, esRouterLinkWithHref };

package/fesm2022/esfaenza-core-components.mjs

@@ -47,29 +47,60 @@ import { TooltipModule } from 'primeng/tooltip';
 
 // Angular
 class BackTop {
-    constructor() {
+    constructor(zone) {
+        this.zone = zone;
         this.position = 400;
         this.showSpeed = 500;
         this.moveSpeed = 1000;
+        this.visible = false;
     }
     ngAfterViewInit() {
         this._onWindowScroll();
     }
     _onClick() {
-        $("html, body").animate({ scrollTop: 0 }, { duration: this.moveSpeed });
+        this.zone.runOutsideAngular(() => this.scrollToTop(this.moveSpeed));
         return false;
     }
     _onWindowScroll() {
-        let el = this._selector.nativeElement;
-        window.scrollY > this.position ? $(el).fadeIn(this.showSpeed) : $(el).fadeOut(this.showSpeed);
+        let show = window.scrollY > this.position;
+        if (show !== this.visible) {
+            this.visible = show;
+            this.fade(this._selector.nativeElement, show, this.showSpeed);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: BackTop, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** Torna in cima in `duration` ms con l'andamento "swing", quello di default delle animazioni jQuery */
+    scrollToTop(duration) {
+        let start = window.scrollY;
+        if (start <= 0)
+            return;
+        let t0 = performance.now();
+        let step = (now) => {
+            let p = Math.min(1, (now - t0) / duration);
+            window.scrollTo(0, start * (0.5 + Math.cos(p * Math.PI) / 2));
+            if (p < 1)
+                requestAnimationFrame(step);
+        };
+        requestAnimationFrame(step);
+    }
+    /** Dissolvenza in entrata/uscita fino all'opacita' del foglio di stile (0.4, 0.8 al passaggio del mouse) */
+    fade(el, show, duration) {
+        el.getAnimations().forEach(a => a.cancel());
+        if (show) {
+            el.style.display = "inline";
+            el.animate([{ opacity: 0 }, { opacity: getComputedStyle(el).opacity }], { duration, easing: "ease-in-out" });
+        }
+        else {
+            el.animate([{ opacity: getComputedStyle(el).opacity }, { opacity: 0 }], { duration, easing: "ease-in-out" })
+                .finished.then(() => el.style.display = "none", () => { });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: BackTop, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.34", type: BackTop, isStandalone: true, selector: "back-top", inputs: { position: "position", showSpeed: "showSpeed", moveSpeed: "moveSpeed" }, host: { listeners: { "click": "_onClick()", "window:scroll.out-zone": "_onWindowScroll()" } }, viewQueries: [{ propertyName: "_selector", first: true, predicate: ["backTop"], descendants: true }], ngImport: i0, template: "<i #backTop class=\"fa fa-angle-up back-to-top\" title=\"Back to Top\"></i>", styles: [".back-to-top{position:fixed;width:40px;height:40px;cursor:pointer;z-index:9999;display:none;text-decoration:none;right:40px;bottom:40px!important;font-size:30px;text-align:center;opacity:.4;color:#fff;background-color:#242d3abf;border-radius:50%;line-height:34px}.back-to-top:hover{opacity:.8}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: BackTop, decorators: [{
             type: Component,
             args: [{ selector: "back-top", encapsulation: ViewEncapsulation.None, standalone: true, template: "<i #backTop class=\"fa fa-angle-up back-to-top\" title=\"Back to Top\"></i>", styles: [".back-to-top{position:fixed;width:40px;height:40px;cursor:pointer;z-index:9999;display:none;text-decoration:none;right:40px;bottom:40px!important;font-size:30px;text-align:center;opacity:.4;color:#fff;background-color:#242d3abf;border-radius:50%;line-height:34px}.back-to-top:hover{opacity:.8}\n"] }]
-        }], propDecorators: { position: [{
+        }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { position: [{
                 type: Input
             }], showSpeed: [{
                 type: Input
@@ -430,7 +461,7 @@ class Sidebar {
                 this.checkSubMenuOverClaims(t, level + 1);
         }
     }
-    //#region JQuery
+    //#region Comportamento del menu
     onWindowResize() {
         var isMenuShouldCollapsed = this._shouldMenuCollapse();
         if (this.isMenuShouldCollapsed !== isMenuShouldCollapsed) {
@@ -454,19 +485,27 @@ class Sidebar {
         this.menuCollapseStateChange(false);
         this._state.setSidebarWidth(this.sidebar.nativeElement.offsetWidth);
     }
-    hoverItem(jQueryevent) {
+    hoverItem(event) {
         if (!this.isMenuCollapsed) {
             this.showHoverElem = true;
-            this.hoverElemHeight = jQueryevent.currentTarget.clientHeight;
-            this.hoverElemTop = jQueryevent.currentTarget.getBoundingClientRect().top;
-            jQuery(".sidebar-hover-elem").css("top", this.hoverElemTop + "px");
-            jQuery(".sidebar-hover-elem").css("height", this.hoverElemHeight + "px");
-            jQuery(".sidebar-hover-elem").addClass("show-hover-elem");
+            this.hoverElemHeight = event.currentTarget.clientHeight;
+            this.hoverElemTop = event.currentTarget.getBoundingClientRect().top;
+            let hoverElem = this.hoverElem();
+            if (hoverElem) {
+                hoverElem.style.top = this.hoverElemTop + "px";
+                hoverElem.style.height = this.hoverElemHeight + "px";
+                hoverElem.classList.add("show-hover-elem");
+            }
         }
     }
     sendAwayHoverElement() {
         this.hoverElemTop = -200;
-        jQuery(".sidebar-hover-elem").css("top", this.hoverElemTop + "px");
+        let hoverElem = this.hoverElem();
+        if (hoverElem)
+            hoverElem.style.top = this.hoverElemTop + "px";
+    }
+    hoverElem() {
+        return this._elementRef.nativeElement.querySelector(".sidebar-hover-elem");
     }
     updateSidebarHeight() {
         let marginTop = 60 + 40;
@@ -475,61 +514,84 @@ class Sidebar {
     }
     //Nonostante questa funzione sia collegata con (click.out-zone) per qualche motivo angular le esegue comunque nella sua zone
     //generando un po' di irresponsività iniziale... succede solo col click... boh
-    collapseMenu(jQueryevent, item) {
+    collapseMenu(event, item) {
         if (this.isMenuCollapsed)
             this.menuExpand();
         if (!item.level)
             console.warn("Livello non presente in un oggetto del menu!");
-        //N.B: Tutte le funzioni di JQuery le esguo fuori da Angular dato che c'� una buona probabilit� che siano eventi asincroni
-        this.zone.runOutsideAngular(() => { this.outsideAngularClickHandler(jQueryevent, item); });
+        //N.B: le animazioni girano fuori da Angular: ogni fotogramma scatenerebbe la change detection
+        this.zone.runOutsideAngular(() => { this.outsideAngularClickHandler(event, item); });
         return false;
     }
-    outsideAngularClickHandler(jQueryevent, item) {
+    outsideAngularClickHandler(event, item) {
         let levelClass = item.level ? "level-" + (item.level) : "";
         let levelClassPlusOne = item.level ? "level-" + (item.level + 1) : "";
         let slidePeriod = 400;
-        var link = jQuery(jQueryevent.currentTarget);
+        let link = event.currentTarget;
+        let linkLi = link.closest("li");
+        let next = link.nextElementSibling;
         //Se l'elemento non è espanso
-        if (!link.closest(".sidebar-item-expanded" + "_" + levelClass).length) {
+        if (!link.closest(".sidebar-item-expanded" + "_" + levelClass)) {
             //Tiro su tutti gli elementi dello stesso livello espansi e li chiudo
-            //Se ho compresso un menu vado a vedere se c'è anche un altro menu di livello pi� basso da richiudere
-            jQuery("ul.nav-sidebar li" + "." + (levelClassPlusOne)).each(function () {
-                let closestLi = jQuery(this).closest("li");
-                if (closestLi.children("ul").length && closestLi.hasClass("sidebar-item-expanded")) {
-                    closestLi.children("ul").slideUp(slidePeriod);
-                    //Le uso sempre entrambe insieme. La prima è la classe per la logica, la seconda per le animazioni
-                    closestLi.removeClass("sidebar-item-expanded" + "_" + (levelClassPlusOne));
-                    closestLi.removeClass("sidebar-item-expanded");
-                }
-            });
-            //Dopodich� richiudo tutti quelli del mio livello attuale
-            jQuery("ul.nav-sidebar li" + "." + levelClass).each(function () {
-                let closestLi = jQuery(this).closest("li");
-                if (closestLi.children("ul").length && closestLi.hasClass("sidebar-item-expanded")) {
-                    closestLi.children("ul").slideUp(slidePeriod);
-                    //Le uso sempre entrambe insieme. La prima è la classe per la logica, la seconda per le animazioni
-                    closestLi.removeClass("sidebar-item-expanded" + "_" + levelClass);
-                    closestLi.removeClass("sidebar-item-expanded");
-                }
-            });
-            //Dopodich� espando quello attuale
-            link.next().slideDown(slidePeriod);
+            //Se ho compresso un menu vado a vedere se c'è anche un altro menu di livello più basso da richiudere
+            this.collapseLevel(levelClassPlusOne, slidePeriod);
+            //Dopodiché richiudo tutti quelli del mio livello attuale
+            this.collapseLevel(levelClass, slidePeriod);
+            //Dopodiché espando quello attuale
+            if (next)
+                this.slide(next, true, slidePeriod);
             if (item.subMenu) {
                 //Le uso sempre entrambe insieme. La prima è la classe per la logica, la seconda per le animazioni
-                link.closest("li").addClass("sidebar-item-expanded" + "_" + levelClass);
-                link.closest("li").addClass("sidebar-item-expanded");
+                linkLi?.classList.add("sidebar-item-expanded" + "_" + levelClass, "sidebar-item-expanded");
             }
         }
         else {
             //Altrimenti, se l'elemento è già espanso lo chiudo
             if (item.subMenu) {
                 //Le uso sempre entrambe insieme. La prima è la classe per la logica, la seconda per le animazioni
-                link.closest("li").removeClass("sidebar-item-expanded" + "_" + levelClass);
-                link.closest("li").removeClass("sidebar-item-expanded");
+                linkLi?.classList.remove("sidebar-item-expanded" + "_" + levelClass, "sidebar-item-expanded");
             }
-            link.next().slideUp(slidePeriod);
+            if (next)
+                this.slide(next, false, slidePeriod);
         }
     }
+    /** Chiude le voci espanse di un livello (es. "level-2") */
+    collapseLevel(levelClass, slidePeriod) {
+        if (!levelClass)
+            return;
+        let root = this._elementRef.nativeElement;
+        root.querySelectorAll("ul.nav-sidebar li." + levelClass).forEach(li => {
+            let subLists = Array.from(li.children).filter(c => c.tagName === "UL");
+            if (subLists.length && li.classList.contains("sidebar-item-expanded")) {
+                subLists.forEach(ul => this.slide(ul, false, slidePeriod));
+                //Le uso sempre entrambe insieme. La prima è la classe per la logica, la seconda per le animazioni
+                li.classList.remove("sidebar-item-expanded" + "_" + levelClass, "sidebar-item-expanded");
+            }
+        });
+    }
+    /**
+     * Apre o chiude un sottomenu animandone l'altezza, come facevano slideDown/slideUp di jQuery:
+     * se e' gia' nello stato richiesto non fa nulla, e alla fine lascia `display` inline (block o none),
+     * cosi' togliere la classe che lo mostrava non lo nasconde di colpo a meta' animazione.
+     * Se un'animazione e' in corso riparte dall'altezza attuale invece di accodarsi.
+     */
+    slide(el, open, duration) {
+        let running = el.getAnimations();
+        let from = el.getBoundingClientRect().height;
+        running.forEach(a => a.cancel());
+        let visible = getComputedStyle(el).display !== "none";
+        if (!running.length && visible === open)
+            return;
+        el.style.display = "block";
+        el.style.overflow = "hidden";
+        let to = open ? el.scrollHeight : 0;
+        el.animate([{ height: from + "px" }, { height: to + "px" }], { duration, easing: "ease-in-out" })
+            .finished.then(() => {
+            el.style.overflow = "";
+            if (!open)
+                el.style.display = "none";
+        }, () => { });
+    }
     //#endregion
     //#region Footer
     onChangeTenant() {
@@ -884,7 +946,11 @@ class PagesComponent {
         var url = this._location.path();
         setTimeout(function () {
             window.scrollTo(0, 0);
-            jQuery('a[href="#' + url + '"]').closest("li").closest("ul").closest("li").addClass("sidebar-item-expanded");
+            // Espande la voce di menu che contiene il link della pagina corrente
+            document.querySelectorAll("a[href]").forEach(a => {
+                if (a.getAttribute("href") === "#" + url)
+                    a.closest("li")?.closest("ul")?.closest("li")?.classList.add("sidebar-item-expanded");
+            });
         });
     }
     hideMenu() {