spiderly 19.0.1 → 19.0.3

package/src/lib/components/info-card/info-card.component.html

@@ -1,18 +0,0 @@
-<div class="card responsive-card-padding" style="background-color: var(--p-primary-100); position: relative; overflow: hidden;">
-    <!-- TODO FT: Translate -->
-    <div style="display: flex; align-items: center; gap: 21px; position: relative; z-index: 2;">
-      <i class="pi pi-info-circle" style="font-size: 26px; color: var(--p-primary-color);"></i>
-      <div>
-          <div class="header" style="color:var(--p-primary-color); font-weight: 600; text-align: left;">
-              {{header}}
-          </div>
-          <div style="text-align: left; margin-top: 8px;">
-            <ng-content></ng-content>
-          </div>
-      </div>
-    </div>
-
-    <div class="card-overflow-icon" style="position: absolute; overflow: hidden; right: 8px; top: -25px; z-index: 1;">
-      <i class="pi pi-info-circle" style="font-size: 270px;"></i>
-    </div>
-  </div>

package/src/lib/components/info-card/info-card.component.ts

@@ -1,29 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
-import { SpiderlyPanelsModule } from "../spiderly-panels/spiderly-panels.module";
-import { PrimengModule } from '../../modules/primeng.module';
-
-@Component({
-    selector: 'info-card',
-    templateUrl: './info-card.component.html',
-    imports: [
-        CommonModule,
-        PrimengModule,
-        SpiderlyPanelsModule
-    ]
-})
-export class InfoCardComponent {
-    @Input() public header: string = '';
-    @Input() public description: string;
-    
-    constructor(
-        protected formBuilder: FormBuilder,
-        ) {
-
-        }
-
-    ngOnInit(){
-    }
-
-}

package/src/lib/components/layout/layout-base.component.ts

@@ -1,140 +0,0 @@
-import { Component, OnDestroy, Renderer2, ViewChild } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
-import { filter, Subscription } from 'rxjs';
-import { AppSidebarComponent } from './sidebar/sidebar.component';
-import { AppTopBarComponent } from './topbar/topbar.component';
-import { LayoutBaseService } from '../../services/app-layout-base.service';
-
-@Component({
-    selector: 'layout-base',
-    template: '',
-    standalone: true
-})
-export class LayoutBaseComponent implements OnDestroy {
-
-    overlayMenuOpenSubscription: Subscription;
-
-    menuOutsideClickListener: any;
-
-    profileMenuOutsideClickListener: any;
-
-    @ViewChild(AppSidebarComponent) appSidebar!: AppSidebarComponent;
-
-    @ViewChild(AppTopBarComponent) appTopbar!: AppTopBarComponent;
-
-    constructor(
-        protected layoutService: LayoutBaseService, 
-        protected renderer: Renderer2, 
-        protected router: Router,
-    ) {
-        this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
-            if (!this.menuOutsideClickListener) {
-                this.menuOutsideClickListener = this.renderer.listen('document', 'click', event => {
-                    const isOutsideClicked = !(
-                        this.appSidebar.el.nativeElement.isSameNode(event.target) || 
-                        this.appSidebar.el.nativeElement.contains(event.target) ||
-                        this.appTopbar.menuButton.nativeElement.isSameNode(event.target) || 
-                        this.appTopbar.menuButton.nativeElement.contains(event.target) ||
-                        (event.target.closest('.p-autocomplete-items')) ||
-                        (event.target.closest('.p-autocomplete-clear-icon'))
-                    );
-                    
-                    if (isOutsideClicked) {
-                        this.hideMenu();
-                    }
-                });
-            }
-
-            if (!this.profileMenuOutsideClickListener) {
-                this.profileMenuOutsideClickListener = this.renderer.listen('document', 'click', event => {
-                    const isOutsideClicked = !(
-                        this.appTopbar.menu.nativeElement.isSameNode(event.target) || 
-                        this.appTopbar.menu.nativeElement.contains(event.target)
-                    );
-
-                    if (isOutsideClicked) {
-                        this.hideProfileMenu();
-                    }
-                });
-            }
-
-            if (this.layoutService.state.staticMenuMobileActive) {
-                this.blockBodyScroll();
-            }
-        });
-
-        this.router.events.pipe(filter(event => event instanceof NavigationEnd))
-            .subscribe(() => {
-                this.hideMenu();
-                this.hideProfileMenu();
-            });
-    }
-
-    hideMenu() {
-        this.layoutService.state.overlayMenuActive = false;
-        this.layoutService.state.staticMenuMobileActive = false;
-        this.layoutService.state.menuHoverActive = false;
-        if (this.menuOutsideClickListener) {
-            this.menuOutsideClickListener();
-            this.menuOutsideClickListener = null;
-        }
-        this.unblockBodyScroll();
-    }
-
-    hideProfileMenu() {
-        this.layoutService.state.profileSidebarVisible = false;
-        if (this.profileMenuOutsideClickListener) {
-            this.profileMenuOutsideClickListener();
-            this.profileMenuOutsideClickListener = null;
-        }
-    }
-
-    blockBodyScroll(): void {
-        if (document.body.classList) {
-            document.body.classList.add('blocked-scroll');
-        }
-        else {
-            document.body.className += ' blocked-scroll';
-        }
-    }
-
-    unblockBodyScroll(): void {
-        if (document.body.classList) {
-            document.body.classList.remove('blocked-scroll');
-        }
-        else {
-            document.body.className = document.body.className.replace(new RegExp('(^|\\b)' +
-                'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
-        }
-    }
-
-    get containerClass() {
-        return {
-            'layout-theme-light': this.layoutService.layoutConfig.colorScheme === 'light',
-            'layout-theme-dark': this.layoutService.layoutConfig.colorScheme === 'dark',
-            'layout-overlay': this.layoutService.layoutConfig.menuMode === 'overlay',
-            'layout-static': this.layoutService.layoutConfig.menuMode === 'static',
-            'layout-static-inactive': this.layoutService.state.staticMenuDesktopInactive && this.layoutService.layoutConfig.menuMode === 'static',
-            'layout-overlay-active': this.layoutService.state.overlayMenuActive,
-            'layout-mobile-active': this.layoutService.state.staticMenuMobileActive,
-            'p-input-filled': this.layoutService.layoutConfig.inputStyle === 'filled',
-            'p-ripple-disabled': !this.layoutService.layoutConfig.ripple
-        }
-    }
-
-    ngOnDestroy() {
-        if (this.overlayMenuOpenSubscription) {
-            this.overlayMenuOpenSubscription.unsubscribe();
-        }
-
-        if (this.menuOutsideClickListener) {
-            this.menuOutsideClickListener();
-        }
-
-        this.onAfterNgDestroy();
-    }
-
-    onAfterNgDestroy = () => {}
-    
-}
-

package/src/lib/components/layout/sidebar/menuitem.component.html

@@ -1,40 +0,0 @@
-<ng-container *transloco="let t">
-    <div *ngIf="root && item.visible === true" class="layout-menuitem-root-text">{{item.label}}</div>
-    <a *ngIf="(!item.routerLink || item.items) && item.visible === true" [attr.href]="item.url" (click)="itemClick($event)"
-       [ngClass]="item.styleClass" [attr.target]="item.target" tabindex="0" pRipple>
-        <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
-        <span class="layout-menuitem-text">{{item.label}}</span>
-        <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
-    </a>
-    <a *ngIf="(item.routerLink && !item.items) && item.visible === true" (click)="itemClick($event)" [ngClass]="item.styleClass"
-    [routerLink]="item.routerLink" routerLinkActive="active-route" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{ paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }"
-    [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment"
-    [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state" [queryParams]="item.queryParams"
-    [attr.target]="item.target" tabindex="0" pRipple>
-        <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
-        <span class="layout-menuitem-text">{{item.label}}</span>
-        <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
-    </a>
-
-    <ul *ngIf="item.items && item.visible === true" [@children]="submenuAnimation">
-        <ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
-            <li menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child.badgeStyleClass"></li>
-        </ng-template>
-    </ul>
-
-    <!-- Delete this in the future iterations, make link to partner in /partners page -->
-    <spiderly-autocomplete
-    *ngIf="item.showPartnerDialog"
-    [control]="selectedPartner"
-    [options]="partnerOptions"
-    (onTextInput)="searchPartners($event)"
-    label=""
-    [placeholder]="t('SelectThePartner')"
-    [showAddon]="true"
-    (onButtonClick)="partnersAutocompleteButtonClick()"
-    addonIcon="pi pi-check"
-    [emptyMessage]="t('LeftCornerPartnersEmptyMessage')"
-    class="mobile-stay-open"
-    ></spiderly-autocomplete>
-     
-</ng-container>

package/src/lib/components/layout/sidebar/menuitem.component.ts

@@ -1,179 +0,0 @@
-import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
-import { NavigationEnd, Router, RouterModule } from '@angular/router';
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Subscription } from 'rxjs';
-import { filter } from 'rxjs/operators';
-import { SidebarMenuService } from './sidebar-menu.service';
-import { SpiderlyMenuItem } from './sidebar-menu.component';
-import { AutoCompleteCompleteEvent } from 'primeng/autocomplete';
-import { SpiderlyFormControl } from '../../spiderly-form-control/spiderly-form-control';
-import { PrimengOption } from '../../../entities/primeng-option';
-import { LayoutBaseService } from '../../../services/app-layout-base.service';
-import { AuthBaseService } from '../../../services/auth-base.service';
-import { ApiSecurityService } from '../../../services/api.service.security';
-import { ConfigBaseService } from '../../../services/config-base.service';
-import { CommonModule } from '@angular/common';
-import { PrimengModule } from '../../../modules/primeng.module';
-import { SpiderlyControlsModule } from '../../../controls/spiderly-controls.module';
-import { TranslocoDirective } from '@jsverse/transloco';
-
-@Component({
-    // eslint-disable-next-line @angular-eslint/component-selector
-    selector: '[menuitem]',
-    templateUrl: './menuitem.component.html',
-    animations: [
-        trigger('children', [
-            state('collapsed', style({
-                height: '0'
-            })),
-            state('expanded', style({
-                height: '*'
-            })),
-            transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
-        ])
-    ],
-    imports: [
-        CommonModule,
-        RouterModule,
-        PrimengModule,
-        TranslocoDirective,
-        SpiderlyControlsModule,
-    ]
-})
-export class MenuitemComponent implements OnInit, OnDestroy {
-
-    @Input() item: SpiderlyMenuItem;
-
-    @Input() index!: number;
-
-    @Input() @HostBinding('class.layout-root-menuitem') root!: boolean;
-
-    @Input() parentKey!: string;
-
-    active = false;
-
-    private menuSourceSubscription: Subscription;
-
-    private menuResetSubscription: Subscription;
-
-    private permissionSubscription: Subscription | null = null;
-
-    key: string = "";
-
-    selectedPartner: SpiderlyFormControl = new SpiderlyFormControl<string>(null, { updateOn: 'change' });
-
-    partnerOptions: PrimengOption[];
-
-    constructor(
-        public layoutService: LayoutBaseService, 
-        private cd: ChangeDetectorRef, 
-        public router: Router, 
-        private menuService: SidebarMenuService, 
-        private authService: AuthBaseService,
-        private apiService: ApiSecurityService,
-        private config: ConfigBaseService
-    ) {
-        this.menuSourceSubscription = this.menuService.menuSource$.subscribe(value => {
-            Promise.resolve(null).then(() => {
-                if (value.routeEvent) {
-                    this.active = (value.key === this.key || value.key.startsWith(this.key + '-')) ? true : false;
-                }
-                else {
-                    if (value.key !== this.key && !value.key.startsWith(this.key + '-')) {
-                        this.active = false;
-                    }
-                }
-            });
-        });
-
-        this.menuResetSubscription = this.menuService.resetSource$.subscribe(() => {
-            this.active = false;
-        });
-
-        this.router.events.pipe(filter(event => event instanceof NavigationEnd))
-            .subscribe(params => {
-                if (this.item.routerLink) {
-                    this.updateActiveStateFromRoute();
-                }
-            });
-    }
-
-    ngOnInit() {
-        this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
-        
-        if (this.item.routerLink) {
-            this.updateActiveStateFromRoute();
-        }
-
-        this.permissionSubscription = this.authService.currentUserPermissionCodes$.subscribe((currentUserPermissionCodes: string[]) => {
-            if (this.item && typeof this.item.hasPermission === 'function') {
-                this.item.visible = this.item.hasPermission(currentUserPermissionCodes);
-            }
-        });
-    }
-
-    updateActiveStateFromRoute() {
-        let activeRoute = this.router.isActive(this.item.routerLink[0], { paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' });
-
-        if (activeRoute) {
-            this.menuService.onMenuStateChange({ key: this.key, routeEvent: true });
-        }
-    }
-
-    itemClick(event: Event) {
-        // avoid processing disabled items
-        if (this.item.disabled || event === null) {
-            event.preventDefault();
-            return;
-        }
-
-        // execute command
-        if (this.item.command) {
-            this.item.command({ originalEvent: event, item: this.item });
-        }
-
-        // toggle active state
-        if (this.item.items) {
-            this.active = !this.active;
-        }
-        
-        this.menuService.onMenuStateChange({ key: this.key });
-    }
-
-    get submenuAnimation() {
-        return this.root ? 'expanded' : (this.active ? 'expanded' : 'collapsed');
-    }
-
-    @HostBinding('class.active-menuitem') 
-    get activeClass() {
-        return this.active && !this.root;
-    }
-
-    //#region FT HACK: Partner
-
-    searchPartners(event: AutoCompleteCompleteEvent) {
-        this.layoutService.searchPartners(event).subscribe(po => {
-            this.partnerOptions = po;    
-        })
-    }
-
-    partnersAutocompleteButtonClick = async () => {
-        this.layoutService.partnersAutocompleteButtonClick(this.selectedPartner);
-    }
-
-    //#endregion
-
-    ngOnDestroy() {
-        if (this.menuSourceSubscription) {
-            this.menuSourceSubscription.unsubscribe();
-        }
-
-        if (this.menuResetSubscription) {
-            this.menuResetSubscription.unsubscribe();
-        }
-
-        if (this.permissionSubscription) {
-            this.permissionSubscription.unsubscribe();
-        }
-    }
-}

package/src/lib/components/layout/sidebar/sidebar-menu.component.html

@@ -1,6 +0,0 @@
-<ul class="layout-menu">
-    <ng-container *ngFor="let item of menu; let i = index;">
-        <li menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
-        <li *ngIf="item.separator" class="gray-separator" style="margin-top: 11px;"></li>
-    </ng-container>
-</ul>

package/src/lib/components/layout/sidebar/sidebar-menu.component.ts

@@ -1,44 +0,0 @@
-import { TranslocoService } from '@jsverse/transloco';
-import { Input, OnInit } from '@angular/core';
-import { Component } from '@angular/core';
-import { MenuItem } from 'primeng/api';
-import { LayoutBaseService } from '../../../services/app-layout-base.service';
-import { AuthBaseService } from '../../../services/auth-base.service';
-import { ConfigBaseService } from '../../../services/config-base.service';
-import { MenuitemComponent } from './menuitem.component';
-import { CommonModule } from '@angular/common';
-
-export interface SpiderlyMenuItem extends MenuItem{
-    hasPermission?: (permissionCodes: string[]) => boolean;
-    showPartnerDialog?: boolean; 
-}
-
-@Component({
-    selector: 'sidebar-menu', // FT: Don't chane selector to 'menu', because other style will apply to it
-    templateUrl: './sidebar-menu.component.html',
-    imports: [
-        CommonModule,
-        MenuitemComponent
-    ]
-})
-export class SidebarMenuComponent implements OnInit {
-    @Input() menu: SpiderlyMenuItem[];
-
-    constructor(
-        public layoutService: LayoutBaseService, 
-        private authService: AuthBaseService,
-        private translocoService: TranslocoService,
-        private config: ConfigBaseService
-    ) {
-        
-    }
-
-    ngOnInit() {
-    }
-
-
-    ngOnDestroy(): void {
-
-    }
-
-}

package/src/lib/components/layout/sidebar/sidebar-menu.service.ts

@@ -1,22 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Subject } from 'rxjs';
-import { MenuChangeEvent } from '../../../entities/menuchangeevent';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class SidebarMenuService {
-    private menuSource = new Subject<MenuChangeEvent>();
-    private resetSource = new Subject();
-
-    menuSource$ = this.menuSource.asObservable();
-    resetSource$ = this.resetSource.asObservable();
-
-    onMenuStateChange(event: MenuChangeEvent) {
-        this.menuSource.next(event);
-    }
-
-    reset() {
-        this.resetSource.next(true);
-    }
-}

package/src/lib/components/layout/sidebar/sidebar.component.html

@@ -1 +0,0 @@
- <sidebar-menu [menu]="menu"></sidebar-menu>

package/src/lib/components/layout/sidebar/sidebar.component.ts

@@ -1,20 +0,0 @@
-import { Component, ElementRef, Input } from '@angular/core';
-import { SidebarMenuComponent, SpiderlyMenuItem } from './sidebar-menu.component';
-
-@Component({
-    selector: 'sidebar',
-    templateUrl: './sidebar.component.html',
-    imports: [
-        SidebarMenuComponent
-    ]
-})
-export class AppSidebarComponent {
-    @Input() menu: SpiderlyMenuItem[];
-
-    constructor(public el: ElementRef) { 
-    }
-
-    ngOnInit(){
-    }
-}
-

package/src/lib/components/layout/topbar/topbar.component.html

@@ -1,64 +0,0 @@
-<div class="layout-topbar">
-  <a class="layout-topbar-logo" routerLink="/">
-    <span>{{companyName?.toLocaleUpperCase()}}</span>
-  </a>
-
-  <button
-    #menubutton
-    class="p-link layout-menu-button layout-topbar-button"
-    (click)="layoutService.onMenuToggle()"
-  >
-    <i class="pi pi-bars"></i>
-  </button>
-
-  <div
-    #topbarmenu
-    class="profile-button"
-    >
-    <div
-      #topbarprofiledropdownmenubutton
-      (click)="layoutService.showProfileDropdownSidebar()"
-    >
-    <p-avatar
-        *ngIf="showProfileIcon"
-        [label]="avatarLabel"
-        [style]="{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'cursor': 'pointer', 'width': '34px', 'height': '34px', 'font-size': '21px' }"
-        pBadge 
-        [badgeStyleClass]="'p-badge-danger'"
-        [badgeDisabled]="unreadNotificationsCount == 0 || unreadNotificationsCount == null"
-        [value]="unreadNotificationsCount"
-        />
-    </div>
-    <div
-      #topbarprofiledropdownmenu
-      (document:click)="onDocumentClick($event)"
-    >
-    <div *ngIf="layoutService.state.profileDropdownSidebarVisible" style="width: 280px; position: absolute; right: 26px; top: 60px; padding: 15px;" class="card">
-      <div style="display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 10px;">
-        <p-avatar
-          [label]="avatarLabel"
-          size="xlarge"
-          [style]="{ 'background-color': 'var(--p-primary-color)', 'color': '#fff', 'cursor': 'pointer', 'margin': 'auto' }"
-          (click)="routeToUserPage()"
-          />
-        <div>{{currentUser?.email}}</div>
-      </div>
-      <div style="margin-top: 15px;">
-        <div *ngFor="let item of menuItems" [style]="item.showSeparator ? 'margin-top: 5px;' : ''">
-          <div *ngIf="item.showSeparator" class="gray-separator"></div>
-          <div (click)="item.onClick()" class="hover-card" style="display: flex; align-items: center; gap: 5px; margin-top: 5px;">
-            <i 
-              class="pi pi-fw {{item.icon}} primary-color" 
-              style="font-size: 16px; position: relative;"
-              >
-              <span *ngIf="item.showNotificationBadge && unreadNotificationsCount != 0" class="badge"></span>
-            </i>
-            <div> {{item.label}} </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    </div>
-  </div>
-</div>
-