lib-common-angular 0.0.11 → 0.0.14

package/projects/lib-common-angular/src/lib/componentes/daskboards/daskboard3/moleculas/app.configurator.ts

@@ -1,445 +0,0 @@
-import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { Component, computed, inject, PLATFORM_ID, signal } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { Router } from '@angular/router';
-import { $t, updatePreset, updateSurfacePalette } from '@primeng/themes';
-import Aura from '@primeng/themes/aura';
-import Lara from '@primeng/themes/lara';
-import Nora from '@primeng/themes/nora';
-import { PrimeNG } from 'primeng/config';
-import { SelectButtonModule } from 'primeng/selectbutton';
-import { LayoutService } from '../../../shared/services/layout.service';
-
-const presets = {
-    Aura,
-    Lara,
-    Nora
-} as const;
-
-declare type KeyOfType<T> = keyof T extends infer U ? U : never;
-
-declare type SurfacesType = {
-    name?: string;
-    palette?: {
-        0?: string;
-        50?: string;
-        100?: string;
-        200?: string;
-        300?: string;
-        400?: string;
-        500?: string;
-        600?: string;
-        700?: string;
-        800?: string;
-        900?: string;
-        950?: string;
-    };
-};
-
-@Component({
-    selector: 'app-configurator',
-    standalone: true,
-    imports: [CommonModule, FormsModule, SelectButtonModule],
-    template: `
-        <div class="flex flex-col gap-4">
-            <div>
-                <span class="text-sm text-muted-color font-semibold">Primary</span>
-                <div class="pt-2 flex gap-2 flex-wrap justify-start">
-                    @for (primaryColor of primaryColors(); track primaryColor.name) {
-                        <button
-                            type="button"
-                            [title]="primaryColor.name"
-                            (click)="updateColors($event, 'primary', primaryColor)"
-                            [ngClass]="{ 'outline-primary': primaryColor.name === selectedPrimaryColor() }"
-                            class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-                            [style]="{
-                                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
-                            }"
-                        ></button>
-                    }
-                </div>
-            </div>
-            <div>
-                <span class="text-sm text-muted-color font-semibold">Surface</span>
-                <div class="pt-2 flex gap-2 flex-wrap justify-start">
-                    @for (surface of surfaces; track surface.name) {
-                        <button
-                            type="button"
-                            [title]="surface.name"
-                            (click)="updateColors($event, 'surface', surface)"
-                            [ngClass]="{ 'outline-primary': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : layoutService.layoutConfig().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
-                            class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-                            [style]="{
-                                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
-                            }"
-                        ></button>
-                    }
-                </div>
-            </div>
-            <div class="flex flex-col gap-2">
-                <span class="text-sm text-muted-color font-semibold">Presets</span>
-                <p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" size="small" />
-            </div>
-            <div *ngIf="showMenuModeButton()" class="flex flex-col gap-2">
-                <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
-                <p-selectbutton [ngModel]="menuMode()" (ngModelChange)="onMenuModeChange($event)" [options]="menuModeOptions" [allowEmpty]="false" size="small" />
-            </div>
-        </div>
-    `,
-    host: {
-        class: 'hidden absolute top-[3.25rem] right-0 w-72 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]'
-    }
-})
-export class AppConfigurator {
-    router = inject(Router);
-
-    config: PrimeNG = inject(PrimeNG);
-
-    layoutService: LayoutService = inject(LayoutService);
-
-    platformId = inject(PLATFORM_ID);
-
-    primeng = inject(PrimeNG);
-
-    presets = Object.keys(presets);
-
-    showMenuModeButton = signal(!this.router.url.includes('auth'));
-
-    menuModeOptions = [
-        { label: 'Static', value: 'static' },
-        { label: 'Overlay', value: 'overlay' }
-    ];
-
-    ngOnInit() {
-        if (isPlatformBrowser(this.platformId)) {
-            this.onPresetChange(this.layoutService.layoutConfig().preset);
-        }
-    }
-
-    surfaces: SurfacesType[] = [
-        {
-            name: 'slate',
-            palette: {
-                0: '#ffffff',
-                50: '#f8fafc',
-                100: '#f1f5f9',
-                200: '#e2e8f0',
-                300: '#cbd5e1',
-                400: '#94a3b8',
-                500: '#64748b',
-                600: '#475569',
-                700: '#334155',
-                800: '#1e293b',
-                900: '#0f172a',
-                950: '#020617'
-            }
-        },
-        {
-            name: 'gray',
-            palette: {
-                0: '#ffffff',
-                50: '#f9fafb',
-                100: '#f3f4f6',
-                200: '#e5e7eb',
-                300: '#d1d5db',
-                400: '#9ca3af',
-                500: '#6b7280',
-                600: '#4b5563',
-                700: '#374151',
-                800: '#1f2937',
-                900: '#111827',
-                950: '#030712'
-            }
-        },
-        {
-            name: 'zinc',
-            palette: {
-                0: '#ffffff',
-                50: '#fafafa',
-                100: '#f4f4f5',
-                200: '#e4e4e7',
-                300: '#d4d4d8',
-                400: '#a1a1aa',
-                500: '#71717a',
-                600: '#52525b',
-                700: '#3f3f46',
-                800: '#27272a',
-                900: '#18181b',
-                950: '#09090b'
-            }
-        },
-        {
-            name: 'neutral',
-            palette: {
-                0: '#ffffff',
-                50: '#fafafa',
-                100: '#f5f5f5',
-                200: '#e5e5e5',
-                300: '#d4d4d4',
-                400: '#a3a3a3',
-                500: '#737373',
-                600: '#525252',
-                700: '#404040',
-                800: '#262626',
-                900: '#171717',
-                950: '#0a0a0a'
-            }
-        },
-        {
-            name: 'stone',
-            palette: {
-                0: '#ffffff',
-                50: '#fafaf9',
-                100: '#f5f5f4',
-                200: '#e7e5e4',
-                300: '#d6d3d1',
-                400: '#a8a29e',
-                500: '#78716c',
-                600: '#57534e',
-                700: '#44403c',
-                800: '#292524',
-                900: '#1c1917',
-                950: '#0c0a09'
-            }
-        },
-        {
-            name: 'soho',
-            palette: {
-                0: '#ffffff',
-                50: '#ececec',
-                100: '#dedfdf',
-                200: '#c4c4c6',
-                300: '#adaeb0',
-                400: '#97979b',
-                500: '#7f8084',
-                600: '#6a6b70',
-                700: '#55565b',
-                800: '#3f4046',
-                900: '#2c2c34',
-                950: '#16161d'
-            }
-        },
-        {
-            name: 'viva',
-            palette: {
-                0: '#ffffff',
-                50: '#f3f3f3',
-                100: '#e7e7e8',
-                200: '#cfd0d0',
-                300: '#b7b8b9',
-                400: '#9fa1a1',
-                500: '#87898a',
-                600: '#6e7173',
-                700: '#565a5b',
-                800: '#3e4244',
-                900: '#262b2c',
-                950: '#0e1315'
-            }
-        },
-        {
-            name: 'ocean',
-            palette: {
-                0: '#ffffff',
-                50: '#fbfcfc',
-                100: '#F7F9F8',
-                200: '#EFF3F2',
-                300: '#DADEDD',
-                400: '#B1B7B6',
-                500: '#828787',
-                600: '#5F7274',
-                700: '#415B61',
-                800: '#29444E',
-                900: '#183240',
-                950: '#0c1920'
-            }
-        }
-    ];
-
-    selectedPrimaryColor = computed(() => {
-        return this.layoutService.layoutConfig().primary;
-    });
-
-    selectedSurfaceColor = computed(() => this.layoutService.layoutConfig().surface);
-
-    selectedPreset = computed(() => this.layoutService.layoutConfig().preset);
-
-    menuMode = computed(() => this.layoutService.layoutConfig().menuMode);
-
-    primaryColors = computed<SurfacesType[]>(() => {
-        const presetPalette = presets[this.layoutService.layoutConfig().preset as KeyOfType<typeof presets>].primitive;
-        const colors = ['emerald', 'green', 'lime', 'orange', 'amber', 'yellow', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'];
-        const palettes: SurfacesType[] = [{ name: 'noir', palette: {} }];
-
-        colors.forEach((color) => {
-            palettes.push({
-                name: color,
-                palette: presetPalette?.[color as KeyOfType<typeof presetPalette>] as SurfacesType['palette']
-            });
-        });
-
-        return palettes;
-    });
-
-    // eslint-disable-next-line max-lines-per-function
-    getPresetExt() {
-        const color: SurfacesType = this.primaryColors().find((c) => c.name === this.selectedPrimaryColor()) || {};
-        const preset = this.layoutService.layoutConfig().preset;
-
-        if (color.name === 'noir') {
-            return {
-                semantic: {
-                    primary: {
-                        50: '{surface.50}',
-                        100: '{surface.100}',
-                        200: '{surface.200}',
-                        300: '{surface.300}',
-                        400: '{surface.400}',
-                        500: '{surface.500}',
-                        600: '{surface.600}',
-                        700: '{surface.700}',
-                        800: '{surface.800}',
-                        900: '{surface.900}',
-                        950: '{surface.950}'
-                    },
-                    colorScheme: {
-                        light: {
-                            primary: {
-                                color: '{primary.950}',
-                                contrastColor: '#ffffff',
-                                hoverColor: '{primary.800}',
-                                activeColor: '{primary.700}'
-                            },
-                            highlight: {
-                                background: '{primary.950}',
-                                focusBackground: '{primary.700}',
-                                color: '#ffffff',
-                                focusColor: '#ffffff'
-                            }
-                        },
-                        dark: {
-                            primary: {
-                                color: '{primary.50}',
-                                contrastColor: '{primary.950}',
-                                hoverColor: '{primary.200}',
-                                activeColor: '{primary.300}'
-                            },
-                            highlight: {
-                                background: '{primary.50}',
-                                focusBackground: '{primary.300}',
-                                color: '{primary.950}',
-                                focusColor: '{primary.950}'
-                            }
-                        }
-                    }
-                }
-            };
-        } else {
-            if (preset === 'Nora') {
-                return {
-                    semantic: {
-                        primary: color.palette,
-                        colorScheme: {
-                            light: {
-                                primary: {
-                                    color: '{primary.600}',
-                                    contrastColor: '#ffffff',
-                                    hoverColor: '{primary.700}',
-                                    activeColor: '{primary.800}'
-                                },
-                                highlight: {
-                                    background: '{primary.600}',
-                                    focusBackground: '{primary.700}',
-                                    color: '#ffffff',
-                                    focusColor: '#ffffff'
-                                }
-                            },
-                            dark: {
-                                primary: {
-                                    color: '{primary.500}',
-                                    contrastColor: '{surface.900}',
-                                    hoverColor: '{primary.400}',
-                                    activeColor: '{primary.300}'
-                                },
-                                highlight: {
-                                    background: '{primary.500}',
-                                    focusBackground: '{primary.400}',
-                                    color: '{surface.900}',
-                                    focusColor: '{surface.900}'
-                                }
-                            }
-                        }
-                    }
-                };
-            } else {
-                return {
-                    semantic: {
-                        primary: color.palette,
-                        colorScheme: {
-                            light: {
-                                primary: {
-                                    color: '{primary.500}',
-                                    contrastColor: '#ffffff',
-                                    hoverColor: '{primary.600}',
-                                    activeColor: '{primary.700}'
-                                },
-                                highlight: {
-                                    background: '{primary.50}',
-                                    focusBackground: '{primary.100}',
-                                    color: '{primary.700}',
-                                    focusColor: '{primary.800}'
-                                }
-                            },
-                            dark: {
-                                primary: {
-                                    color: '{primary.400}',
-                                    contrastColor: '{surface.900}',
-                                    hoverColor: '{primary.300}',
-                                    activeColor: '{primary.200}'
-                                },
-                                highlight: {
-                                    background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
-                                    focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
-                                    color: 'rgba(255,255,255,.87)',
-                                    focusColor: 'rgba(255,255,255,.87)'
-                                }
-                            }
-                        }
-                    }
-                };
-            }
-        }
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    updateColors(event: any, type: string, color: any) {
-        if (type === 'primary') {
-            this.layoutService.layoutConfig.update((state) => ({ ...state, primary: color.name }));
-        } else if (type === 'surface') {
-            this.layoutService.layoutConfig.update((state) => ({ ...state, surface: color.name }));
-        }
-        this.applyTheme(type, color);
-
-        event.stopPropagation();
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    applyTheme(type: string, color: any) {
-        if (type === 'primary') {
-            updatePreset(this.getPresetExt());
-        } else if (type === 'surface') {
-            updateSurfacePalette(color.palette);
-        }
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onPresetChange(event: any) {
-        this.layoutService.layoutConfig.update((state) => ({ ...state, preset: event }));
-        const preset = presets[event as KeyOfType<typeof presets>];
-        const surfacePalette = this.surfaces.find((s) => s.name === this.selectedSurfaceColor())?.palette;
-        $t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
-    }
-
-    onMenuModeChange(event: string) {
-        this.layoutService.layoutConfig.update((prev) => ({ ...prev, menuMode: event }));
-    }
-}

package/projects/lib-common-angular/src/lib/componentes/daskboards/daskboard3/moleculas/app.floatingconfigurator.ts

@@ -1,29 +0,0 @@
-import { Component, computed, inject } from '@angular/core';
-import { ButtonModule } from 'primeng/button';
-import { StyleClassModule } from 'primeng/styleclass';
-import { AppConfigurator } from './app.configurator';
-import { LayoutService } from '../../../shared/services/layout.service';
-
-@Component({
-    selector: 'app-floating-configurator',
-    imports: [ButtonModule, StyleClassModule, AppConfigurator],
-    standalone:true,
-    template: `
-        <div class="fixed flex gap-4 top-8 right-8">
-            <p-button type="button" (onClick)="toggleDarkMode()" [rounded]="true" [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'" severity="secondary" />
-            <div class="relative">
-                <p-button icon="pi pi-palette" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true" type="button" rounded />
-                <app-configurator />
-            </div>
-        </div>
-    `
-})
-export class AppFloatingConfigurator {
-    LayoutService = inject(LayoutService);
-
-    isDarkTheme = computed(() => this.LayoutService.layoutConfig().darkTheme);
-
-    toggleDarkMode() {
-        this.LayoutService.layoutConfig.update((state) => ({ ...state, darkTheme: !state.darkTheme }));
-    }
-}

package/projects/lib-common-angular/src/lib/componentes/daskboards/daskboard3/moleculas/app.footer.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    standalone: true,
-    selector: 'lib-footer3',
-    template: `<div class="layout-footer">
-        SAKAI by
-        <a href="https://primeng.org" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">PrimeNG</a>
-    </div>`
-})
-export class AppFooter {}

package/projects/lib-common-angular/src/lib/componentes/daskboards/daskboard3/moleculas/app.menuitem.ts

@@ -1,170 +0,0 @@
-import { Component, HostBinding, Input } 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 { CommonModule } from '@angular/common';
-import { RippleModule } from 'primeng/ripple';
-import { MenuItem } from 'primeng/api';
-import { LayoutService } from '../../../shared/services/layout.service';
-
-@Component({
-    selector: '[app-menuitem]',
-    imports: [CommonModule, RouterModule, RippleModule],
-    standalone: true,
-    template: `
-        <ng-container>
-            <div *ngIf="root && item.visible !== false" class="layout-menuitem-root-text">{{ item.label }}</div>
-            <a *ngIf="(!item.routerLink || item.items) && item.visible !== false" [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 !== false"
-                (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 !== false" [@children]="submenuAnimation">
-                <ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
-                    <li app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child['badgeClass']"></li>
-                </ng-template>
-            </ul>
-        </ng-container>
-    `,
-    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)'))
-        ])
-    ],
-    providers: [LayoutService]
-})
-export class AppMenuitem {
-    @Input() item!: MenuItem;
-
-    @Input() index!: number;
-
-    @Input() @HostBinding('class.layout-root-menuitem') root!: boolean;
-
-    @Input() parentKey!: string;
-
-    active = false;
-
-    menuSourceSubscription: Subscription;
-
-    menuResetSubscription: Subscription;
-
-    key: string = '';
-
-    constructor(
-        public router: Router,
-        private layoutService: LayoutService
-    ) {
-        this.menuSourceSubscription = this.layoutService.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.layoutService.resetSource$.subscribe(() => {
-            this.active = false;
-        });
-
-        this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
-            if (this.item.routerLink) {
-                this.updateActiveStateFromRoute();
-            }
-        });
-    }
-
-    ngOnInit() {
-        this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
-
-        if (this.item.routerLink) {
-            this.updateActiveStateFromRoute();
-        }
-    }
-
-    updateActiveStateFromRoute() {
-        const activeRoute = this.router.isActive(this.item.routerLink[0], { paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' });
-
-        if (activeRoute) {
-            this.layoutService.onMenuStateChange({ key: this.key, routeEvent: true });
-        }
-    }
-
-    itemClick(event: Event) {
-        // avoid processing disabled items
-        if (this.item.disabled) {
-            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.layoutService.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;
-    }
-
-    ngOnDestroy() {
-        if (this.menuSourceSubscription) {
-            this.menuSourceSubscription.unsubscribe();
-        }
-
-        if (this.menuResetSubscription) {
-            this.menuResetSubscription.unsubscribe();
-        }
-    }
-}