@cauca-911/menu/fesm2022/cauca-911-menu.mjs

Run `npm install @cauca-911/menu --save` to add this library to your project

import * as i0 from '@angular/core';
import { InjectionToken, Injector, inject, ChangeDetectionStrategy, Component, input, computed, signal, Injectable, Input } from '@angular/core';
import { Router, RouterOutlet, NavigationStart } from '@angular/router';
import { MatToolbar } from '@angular/material/toolbar';
import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
import { Location, NgClass } from '@angular/common';
import { CaucaCoreService } from '@cauca-911/core';
import { MenuItemComponent, IconButtonComponent, StrokedButtonComponent, RaisedButtonComponent, PasswordInputComponent, PasswordSelectionComponent, SavingErrorBoxComponent, DialogService } from '@cauca-911/material';
import { BreakpointObserver } from '@angular/cdk/layout';
import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { map, filter } from 'rxjs';
import * as i3 from '@ngx-translate/core';
import { TranslateService, TranslateModule } from '@ngx-translate/core';
import * as i2 from '@angular/forms';
import { UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
import * as i1 from '@angular/material/dialog';
import { MatDialogRef, MatDialogModule } from '@angular/material/dialog';
import { MatError } from '@angular/material/form-field';
import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs/internal/firstValueFrom';
import { MatIcon } from '@angular/material/icon';

function provideCaucaMenu(option) {
    const internalOptions = {
        showLoginButtonInHeader: option.showLoginButtonInHeader ?? false,
        showSpanishLanguageOption: option.showSpanishLanguageOption ?? false
    };
    const providers = [
        { provide: APP_VERSION_TOKEN, useValue: option.applicationVersion },
        { provide: LOGO_PATH_TOKEN, useValue: option.logoPath || '/assets/images/logo.svg' },
        { provide: MENU_ITEMS_PROVIDER_TOKEN, useFactory: (injector) => injector.get(option.menuItemsProvider), deps: [Injector] },
        { provide: LOGOUT_HANDLER_TOKEN, useFactory: (injector) => injector.get(option.logoutHandler), deps: [Injector] },
        { provide: LOGIN_STATE_TOKEN, useFactory: (injector) => injector.get(option.loginState), deps: [Injector] },
        { provide: INTERNAL_CAUCA_MENU_OPTIONS_TOKEN, useValue: internalOptions },
        { provide: ALLOW_PASSWORD_CHANGE_TOKEN, useValue: option.allowPasswordChange ?? false }
    ];
    if (option.genericMenuProvider) {
        providers.push({ provide: GENERIC_MENU_PROVIDER_TOKEN, useFactory: (injector) => injector.get(option.genericMenuProvider), deps: [Injector] });
    }
    if (option.logoProvider) {
        providers.push({ provide: MENU_LOGO_PROVIDER_TOKEN, useFactory: (injector) => injector.get(option.logoProvider), deps: [Injector] });
    }
    if (option.headerLinkLoader) {
        providers.push({ provide: HEADER_LINK_LOADER_TOKEN, useFactory: (injector) => injector.get(option.headerLinkLoader), deps: [Injector] });
    }
    if (option.englishLogoPath) {
        providers.push({ provide: ENGLISH_LOGO_PATH_TOKEN, useValue: option.englishLogoPath });
    }
    return providers;
}
const APP_VERSION_TOKEN = new InjectionToken('Application Version');
const LOGO_PATH_TOKEN = new InjectionToken('Logo Path');
const ENGLISH_LOGO_PATH_TOKEN = new InjectionToken('English Logo Path');
const MENU_ITEMS_PROVIDER_TOKEN = new InjectionToken('Menu Items Provider');
const LOGOUT_HANDLER_TOKEN = new InjectionToken('Logout Handler');
const LOGIN_STATE_TOKEN = new InjectionToken('Login State');
const HEADER_LINK_LOADER_TOKEN = new InjectionToken('Header Link Loader');
const INTERNAL_CAUCA_MENU_OPTIONS_TOKEN = new InjectionToken('Internal Cauca Menu Options');
const GENERIC_MENU_PROVIDER_TOKEN = new InjectionToken('Generic Menu Provider');
const MENU_LOGO_PROVIDER_TOKEN = new InjectionToken('Menu Logo Provider');
const ALLOW_PASSWORD_CHANGE_TOKEN = new InjectionToken('Allow Password Change Option Provider');

class UserMenuHeaderComponent {
    constructor() {
        this.loginState = inject(LOGIN_STATE_TOKEN);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: UserMenuHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: UserMenuHeaderComponent, isStandalone: true, selector: "cauca-user-menu-header", ngImport: i0, template: "<div class=\"menu-header\">\r\n  <div class=\"header-content\">\r\n    <div class=\"header-content-text\">\r\n      <div class=\"body1 fullname\">{{loginState.userFullName()}}</div>\r\n      <div class=\"body2 username\">{{loginState.username()}}</div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".menu-header{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}.header-content{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.header-content-text{display:flex;padding:4px 0;flex-direction:column;align-items:flex-start;flex:1 0 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: UserMenuHeaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cauca-user-menu-header', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"menu-header\">\r\n  <div class=\"header-content\">\r\n    <div class=\"header-content-text\">\r\n      <div class=\"body1 fullname\">{{loginState.userFullName()}}</div>\r\n      <div class=\"body2 username\">{{loginState.username()}}</div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".menu-header{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}.header-content{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.header-content-text{display:flex;padding:4px 0;flex-direction:column;align-items:flex-start;flex:1 0 0}\n"] }]
        }] });

class LanguageMenuComponent {
    constructor() {
        this.isSubMenu = input(false, ...(ngDevMode ? [{ debugName: "isSubMenu" }] : []));
        this.languages = computed(() => {
            if (this.showSpanishLanguage()) {
                return [...this.basicLanguages, { code: 'es', description: 'Español' }];
            }
            return this.basicLanguages;
        }, ...(ngDevMode ? [{ debugName: "languages" }] : []));
        this.basicLanguages = [
            { code: 'fr', description: 'Français' },
            { code: 'en', description: 'English' }
        ];
        this.location = inject(Location);
        this.coreService = inject(CaucaCoreService);
        this.showSpanishLanguage = signal(inject(INTERNAL_CAUCA_MENU_OPTIONS_TOKEN).showSpanishLanguageOption, ...(ngDevMode ? [{ debugName: "showSpanishLanguage" }] : []));
    }
    setLanguage(languageCode) {
        this.coreService.setLanguage(languageCode);
        this.location.historyGo(0);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LanguageMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: LanguageMenuComponent, isStandalone: true, selector: "cauca-language-menu", inputs: { isSubMenu: { classPropertyName: "isSubMenu", publicName: "isSubMenu", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isSubMenu()) {\r\n  <cauca-menu-item class=\"change-language-menu-item\" [trigger]=\"languagesMenu\" icon=\"language_rounded\" [translateLabel]=\"true\" label=\"headerBar.changeLanguageButtonLabel\"  [matMenuTriggerFor]=\"languagesMenu\"/>\r\n} @else {\r\n  <cauca-icon-button class=\"change-language-button\" icon=\"language_rounded\" [matMenuTriggerFor]=\"languagesMenu\" />\r\n}\r\n\r\n<mat-menu #languagesMenu=\"matMenu\">\r\n  @for (language of languages(); track language.code) {\r\n    <cauca-menu-item icon=\"language_rounded\" [label]=\"language.description\" [translateLabel]=\"false\" (click)=\"setLanguage(language.code)\" onkeypress=\"setLanguage(language.code)\" />\r\n  }\r\n</mat-menu>", styles: [""], dependencies: [{ kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LanguageMenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cauca-language-menu', imports: [MatMenu, MenuItemComponent, IconButtonComponent, MatMenuTrigger], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isSubMenu()) {\r\n  <cauca-menu-item class=\"change-language-menu-item\" [trigger]=\"languagesMenu\" icon=\"language_rounded\" [translateLabel]=\"true\" label=\"headerBar.changeLanguageButtonLabel\"  [matMenuTriggerFor]=\"languagesMenu\"/>\r\n} @else {\r\n  <cauca-icon-button class=\"change-language-button\" icon=\"language_rounded\" [matMenuTriggerFor]=\"languagesMenu\" />\r\n}\r\n\r\n<mat-menu #languagesMenu=\"matMenu\">\r\n  @for (language of languages(); track language.code) {\r\n    <cauca-menu-item icon=\"language_rounded\" [label]=\"language.description\" [translateLabel]=\"false\" (click)=\"setLanguage(language.code)\" onkeypress=\"setLanguage(language.code)\" />\r\n  }\r\n</mat-menu>" }]
        }] });

class MenuSeparatorComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MenuSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: MenuSeparatorComponent, isStandalone: true, selector: "cauca-menu-separator", ngImport: i0, template: "<hr class=\"separator\" />", styles: [".separator{border:1px solid rgba(0,0,0,.12)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MenuSeparatorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cauca-menu-separator', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr class=\"separator\" />", styles: [".separator{border:1px solid rgba(0,0,0,.12)}\n"] }]
        }] });

class UserAgentReaderService {
    getUserAgent() {
        return navigator.userAgent;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: UserAgentReaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: UserAgentReaderService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: UserAgentReaderService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }] });

const MOBILE = /Android.*Mobile|webOS|iPhone|iPod|BB|IEMobile|Opera Mini|Opera Mobi/i;
const TABLET = /iPad|Android(?!.*Mobile)/i;
class ScreenSizeService {
    constructor() {
        this.isSmallScreen = toSignal(inject(BreakpointObserver)
            .observe('(max-width: 1000px)')
            .pipe(takeUntilDestroyed(), map((value) => value.matches)));
        this.isMobile = signal(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
        this.isCompact = computed(() => this.isMobile() || this.isSmallScreen(), ...(ngDevMode ? [{ debugName: "isCompact" }] : []));
        const reader = inject(UserAgentReaderService);
        this.isMobile.set(this.is(reader, MOBILE) && !this.is(reader, TABLET));
    }
    is(reader, regEx) {
        return regEx.test(reader.getUserAgent());
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ScreenSizeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ScreenSizeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ScreenSizeService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: () => [] });

const MENU_STATE_KEY = 'menuState';
class MenuStateService {
    constructor() {
        this.version = signal(this.getVersion(inject(APP_VERSION_TOKEN)), ...(ngDevMode ? [{ debugName: "version" }] : []));
        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
        this.isPinned = signal(this.getInitialPinState(), ...(ngDevMode ? [{ debugName: "isPinned" }] : []));
        this.isExpanded = computed(() => (this.isOpen() || this.isPinned()), ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
        this.isShowingMenuItems = signal(true, ...(ngDevMode ? [{ debugName: "isShowingMenuItems" }] : []));
        this.menuItems = inject(MENU_ITEMS_PROVIDER_TOKEN).items;
        this.currentUrl = signal('', ...(ngDevMode ? [{ debugName: "currentUrl" }] : []));
        this.displayMenu = computed(() => !this.screenSize.isCompact() || this.isOpen(), ...(ngDevMode ? [{ debugName: "displayMenu" }] : []));
        this.showHeaderMenuButton = computed(() => this.screenSize.isCompact(), ...(ngDevMode ? [{ debugName: "showHeaderMenuButton" }] : []));
        this.showPinButton = computed(() => !this.screenSize.isCompact() && this.isExpanded(), ...(ngDevMode ? [{ debugName: "showPinButton" }] : []));
        this.showBottomLogo = computed(() => !!this.logoProvider.logo(), ...(ngDevMode ? [{ debugName: "showBottomLogo" }] : []));
        this.topLogo = computed(() => this.showBottomLogo() ? this.logoProvider.logo() : this.caucaLogoToUse, ...(ngDevMode ? [{ debugName: "topLogo" }] : []));
        this.smallLogo = computed(() => this.showBottomLogo() ? this.caucaLogoToUse : null, ...(ngDevMode ? [{ debugName: "smallLogo" }] : []));
        this.caucaLogo = inject(LOGO_PATH_TOKEN);
        this.caucaEnglishLogo = inject(ENGLISH_LOGO_PATH_TOKEN, { optional: true });
        this.screenSize = inject(ScreenSizeService);
        this.logoProvider = inject(MENU_LOGO_PROVIDER_TOKEN, { optional: true }) ?? new DefaultMenuLogoProvider();
        this.currentLanguage = inject(TranslateService).currentLang;
        this.caucaLogoToUse = this.caucaEnglishLogo && this.currentLanguage === 'en' ? this.caucaEnglishLogo : this.caucaLogo;
    }
    setCurrentUrl(url) {
        this.currentUrl.set(url);
    }
    getVersion(applicationVersion) {
        return applicationVersion || 'DEV';
    }
    togglePin() {
        this.isPinned.set(!this.isPinned());
        localStorage.setItem(MENU_STATE_KEY, JSON.stringify(this.isPinned()));
    }
    toggleMenu() {
        this.isOpen.update((isOpen) => !isOpen);
    }
    onMouseOver() {
        if (!this.screenSize.isCompact()) {
            this.isOpen.set(true);
        }
    }
    onMouseLeave() {
        if (!this.screenSize.isCompact()) {
            this.isOpen.set(false);
        }
    }
    hideMenuItems() {
        this.isShowingMenuItems.set(false);
    }
    showMenuItems() {
        this.isShowingMenuItems.set(true);
    }
    getInitialPinState() {
        return JSON.parse(localStorage.getItem(MENU_STATE_KEY)) ?? false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MenuStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MenuStateService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MenuStateService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }] });
class DefaultMenuLogoProvider {
    constructor() {
        this.logo = signal(null, ...(ngDevMode ? [{ debugName: "logo" }] : []));
    }
}

class UserPasswordService {
    constructor() {
        this.client = inject(HttpClient);
        this.baseUrl = inject(CaucaCoreService).getConfig().apiUrl + 'UserManagement';
        this.loginStateService = inject(LOGIN_STATE_TOKEN);
    }
    async changePassword(currentPassword, password) {
        const url = `${this.baseUrl}/Password`;
        const data = { id: this.loginStateService.userId(), password: password, passwordConfirmation: password, currentPassword };
        return firstValueFrom(this.client.post(url, data));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: UserPasswordService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: UserPasswordService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: UserPasswordService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }] });

class ChangePasswordDialogComponent {
    constructor() {
        this.isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : []));
        this.showIncorrectPassword = signal(false, ...(ngDevMode ? [{ debugName: "showIncorrectPassword" }] : []));
        this.showError = signal(false, ...(ngDevMode ? [{ debugName: "showError" }] : []));
        this.dialogRef = inject((MatDialogRef));
        this.userPasswordService = inject(UserPasswordService);
        this.formBuilder = inject(UntypedFormBuilder);
        this.form = this.formBuilder.group({
            currentPassword: ['', Validators.required],
            newPassword: ['', Validators.required],
        });
    }
    cancelClick() {
        this.dialogRef.close();
    }
    async trySaveNewPassword() {
        try {
            this.isSaving.set(true);
            this.showIncorrectPassword.set(false);
            this.showError.set(false);
            await this.userPasswordService.changePassword(this.form.value.currentPassword, this.form.value.newPassword);
            await this.dialogRef.close();
        }
        catch (e) {
            if (e.status === 404) {
                this.showIncorrectPassword.set(true);
            }
            else {
                this.showError.set(true);
            }
        }
        finally {
            this.isSaving.set(false);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ChangePasswordDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ChangePasswordDialogComponent, isStandalone: true, selector: "cauca-change-password-dialog", ngImport: i0, template: "<div mat-dialog-title>\r\n    <div class=\"h6\">{{ 'changePasswordDialog.title' | translate }}</div>\r\n    <cauca-icon-button id=\"close-button\" (buttonClick)=\"cancelClick()\" icon=\"close\" />\r\n</div>\r\n<div mat-dialog-content [formGroup]=\"form\">\r\n    <cauca-password-input [ngClass]=\"showIncorrectPassword() ? '' : 'bottom-padding'\" [required]=\"true\" formControlName=\"currentPassword\" label=\"changePasswordDialog.currentPasswordLabel\" [translateLabel]=\"true\" />\r\n    @if(showIncorrectPassword()) {\r\n        <mat-error>{{'changePasswordDialog.incorrectCurrentPassword' | translate}}</mat-error>\r\n    }\r\n    <cauca-password-selection\r\n        formControlName=\"newPassword\"\r\n        [passwordLabel]=\"'changePasswordDialog.newPasswordLabel'\"\r\n        [passwordConfirmationLabel]=\"'changePasswordDialog.confirmNewPasswordLabel'\"/>\r\n    <cauca-saving-error-box [show]=\"showError()\" />\r\n</div>\r\n<div mat-dialog-actions align=\"end\" class=\"buttons\">\r\n    <cauca-stroked-button label=\"cancel\" (buttonClick)=\"cancelClick()\" color=\"primary\" />\r\n    <cauca-raised-button [isInProgress]=\"isSaving()\" [isDisabled]=\"!form.valid || isSaving()\" label=\"save\" color=\"primary\"\r\n        (buttonClick)=\"trySaveNewPassword()\" />\r\n</div>", styles: [":host>div:first-child{display:flex;align-items:center;padding:8px 24px 0}:host>div:first-child div:first-child{flex:1}cauca-password-input{width:50%;display:block;padding-top:24px}cauca-saving-error-box{padding-top:16px}.bottom-padding{padding-bottom:16px}mat-error{padding-bottom:32px}.bottons{display:flex;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: StrokedButtonComponent, selector: "cauca-stroked-button" }, { kind: "component", type: RaisedButtonComponent, selector: "cauca-raised-button" }, { kind: "component", type: PasswordInputComponent, selector: "cauca-password-input", inputs: ["autocomplete", "translateLabel", "label", "translatePlaceholder", "placeholder", "required"], outputs: ["enterKeyDown"] }, { kind: "component", type: PasswordSelectionComponent, selector: "cauca-password-selection", inputs: ["direction", "formWidth", "showCriteriaOnlyWhenPasswordHasValue", "alwaysShowCriteria", "passwordLabel", "passwordConfirmationLabel"], outputs: ["hasValueChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "component", type: SavingErrorBoxComponent, selector: "cauca-saving-error-box", inputs: ["show", "specificError"], outputs: ["showChange"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ChangePasswordDialogComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cauca-change-password-dialog', imports: [TranslateModule, NgClass, MatDialogModule, MatError, StrokedButtonComponent, RaisedButtonComponent, PasswordInputComponent, PasswordSelectionComponent, ReactiveFormsModule, PasswordInputComponent, SavingErrorBoxComponent, IconButtonComponent], template: "<div mat-dialog-title>\r\n    <div class=\"h6\">{{ 'changePasswordDialog.title' | translate }}</div>\r\n    <cauca-icon-button id=\"close-button\" (buttonClick)=\"cancelClick()\" icon=\"close\" />\r\n</div>\r\n<div mat-dialog-content [formGroup]=\"form\">\r\n    <cauca-password-input [ngClass]=\"showIncorrectPassword() ? '' : 'bottom-padding'\" [required]=\"true\" formControlName=\"currentPassword\" label=\"changePasswordDialog.currentPasswordLabel\" [translateLabel]=\"true\" />\r\n    @if(showIncorrectPassword()) {\r\n        <mat-error>{{'changePasswordDialog.incorrectCurrentPassword' | translate}}</mat-error>\r\n    }\r\n    <cauca-password-selection\r\n        formControlName=\"newPassword\"\r\n        [passwordLabel]=\"'changePasswordDialog.newPasswordLabel'\"\r\n        [passwordConfirmationLabel]=\"'changePasswordDialog.confirmNewPasswordLabel'\"/>\r\n    <cauca-saving-error-box [show]=\"showError()\" />\r\n</div>\r\n<div mat-dialog-actions align=\"end\" class=\"buttons\">\r\n    <cauca-stroked-button label=\"cancel\" (buttonClick)=\"cancelClick()\" color=\"primary\" />\r\n    <cauca-raised-button [isInProgress]=\"isSaving()\" [isDisabled]=\"!form.valid || isSaving()\" label=\"save\" color=\"primary\"\r\n        (buttonClick)=\"trySaveNewPassword()\" />\r\n</div>", styles: [":host>div:first-child{display:flex;align-items:center;padding:8px 24px 0}:host>div:first-child div:first-child{flex:1}cauca-password-input{width:50%;display:block;padding-top:24px}cauca-saving-error-box{padding-top:16px}.bottom-padding{padding-bottom:16px}mat-error{padding-bottom:32px}.bottons{display:flex;gap:8px}\n"] }]
        }], ctorParameters: () => [] });

class HelpMenuComponent {
    constructor() {
        this.links = signal([], ...(ngDevMode ? [{ debugName: "links" }] : []));
        this.showMenu = computed(() => this.links()?.length > 0, ...(ngDevMode ? [{ debugName: "showMenu" }] : []));
        this.headerLinksService = inject(HEADER_LINK_LOADER_TOKEN, { optional: true });
    }
    async ngOnInit() {
        if (this.headerLinksService) {
            this.links.set(await this.headerLinksService.getLinks());
        }
    }
    openUrl(url) {
        window.open(url, '_blank');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: HelpMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: HelpMenuComponent, isStandalone: true, selector: "cauca-help-menu", ngImport: i0, template: "@if (showMenu()) {\r\n    <cauca-icon-button id=\"help-button\" color=\"primary\" icon=\"help\" [matMenuTriggerFor]=\"helpMenu\" />\r\n}\r\n\r\n<mat-menu #helpMenu=\"matMenu\" xPosition=\"before\">\r\n    @for (link of links(); track link.id) {\r\n        <cauca-menu-item [id]=\"link.id\" [icon]=\"link.icon\" [translateLabel]=\"true\" [label]=\"link.title\" (buttonClick)=\"openUrl(link.url)\" />\r\n    }\r\n</mat-menu>", styles: [""], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: HelpMenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cauca-help-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconButtonComponent, MatMenu, MatMenuTrigger, MenuItemComponent], template: "@if (showMenu()) {\r\n    <cauca-icon-button id=\"help-button\" color=\"primary\" icon=\"help\" [matMenuTriggerFor]=\"helpMenu\" />\r\n}\r\n\r\n<mat-menu #helpMenu=\"matMenu\" xPosition=\"before\">\r\n    @for (link of links(); track link.id) {\r\n        <cauca-menu-item [id]=\"link.id\" [icon]=\"link.icon\" [translateLabel]=\"true\" [label]=\"link.title\" (buttonClick)=\"openUrl(link.url)\" />\r\n    }\r\n</mat-menu>" }]
        }] });

class GenericSubMenuComponent {
    constructor() {
        this.menu = input.required(...(ngDevMode ? [{ debugName: "menu" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: GenericSubMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: GenericSubMenuComponent, isStandalone: true, selector: "cauca-generic-sub-menu", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<cauca-menu-item\r\n    class=\"generic-menu\"\r\n    [trigger]=\"genericMenu\"\r\n    [icon]=\"menu().icon\"\r\n    [translateLabel]=\"menu().translateLabel\"\r\n    [label]=\"menu().label\"\r\n    [matMenuTriggerFor]=\"genericMenu\" />\r\n\r\n<mat-menu #genericMenu=\"matMenu\">\r\n  @for (option of menu().children; track option.id) {\r\n    <cauca-menu-item\r\n      class=\"generic-menu-item\"\r\n      [icon]=\"option.icon\"\r\n      [label]=\"option.label\"\r\n      [translateLabel]=\"option.translateLabel\"\r\n      (click)=\"option.action()\" />\r\n  }\r\n</mat-menu>\r\n", styles: [""], dependencies: [{ kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: GenericSubMenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cauca-generic-sub-menu', imports: [MatMenu, MatMenuTrigger, MenuItemComponent], template: "<cauca-menu-item\r\n    class=\"generic-menu\"\r\n    [trigger]=\"genericMenu\"\r\n    [icon]=\"menu().icon\"\r\n    [translateLabel]=\"menu().translateLabel\"\r\n    [label]=\"menu().label\"\r\n    [matMenuTriggerFor]=\"genericMenu\" />\r\n\r\n<mat-menu #genericMenu=\"matMenu\">\r\n  @for (option of menu().children; track option.id) {\r\n    <cauca-menu-item\r\n      class=\"generic-menu-item\"\r\n      [icon]=\"option.icon\"\r\n      [label]=\"option.label\"\r\n      [translateLabel]=\"option.translateLabel\"\r\n      (click)=\"option.action()\" />\r\n  }\r\n</mat-menu>\r\n" }]
        }] });

class GenericMenuComponent {
    constructor() {
        this.provider = signal(null, ...(ngDevMode ? [{ debugName: "provider" }] : []));
        this.showMenu = computed(() => !!this.provider() && this.provider().options().length > 0, ...(ngDevMode ? [{ debugName: "showMenu" }] : []));
        this.provider.set(inject(GENERIC_MENU_PROVIDER_TOKEN, { optional: true }));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: GenericMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: GenericMenuComponent, isStandalone: true, selector: "cauca-generic-menu", ngImport: i0, template: "\n@if (showMenu()) {\n  @for(menu of provider().options(); track menu.id) {\n\n    @if (menu.type === 'separator') {\n      <cauca-menu-separator />\n    } @else if (menu.type === 'item') {\n      <cauca-menu-item\n        class=\"generic-menu-item\"\n        [icon]=\"menu.icon\"\n        [label]=\"menu.label\"\n        [translateLabel]=\"menu.translateLabel\"\n        (click)=\"menu.action()\" />\n    } @else if (menu.type === 'submenu') {\n      <cauca-generic-sub-menu [menu]=\"menu\" />\n    }\n\n  }\n}", styles: ["::ng-deep .mat-mdc-menu-panel{max-width:500px}\n"], dependencies: [{ kind: "component", type: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }, { kind: "component", type: MenuSeparatorComponent, selector: "cauca-menu-separator" }, { kind: "component", type: GenericSubMenuComponent, selector: "cauca-generic-sub-menu", inputs: ["menu"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: GenericMenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cauca-generic-menu', imports: [MenuItemComponent, MenuSeparatorComponent, GenericSubMenuComponent], template: "\n@if (showMenu()) {\n  @for(menu of provider().options(); track menu.id) {\n\n    @if (menu.type === 'separator') {\n      <cauca-menu-separator />\n    } @else if (menu.type === 'item') {\n      <cauca-menu-item\n        class=\"generic-menu-item\"\n        [icon]=\"menu.icon\"\n        [label]=\"menu.label\"\n        [translateLabel]=\"menu.translateLabel\"\n        (click)=\"menu.action()\" />\n    } @else if (menu.type === 'submenu') {\n      <cauca-generic-sub-menu [menu]=\"menu\" />\n    }\n\n  }\n}", styles: ["::ng-deep .mat-mdc-menu-panel{max-width:500px}\n"] }]
        }], ctorParameters: () => [] });

class LoggedInUserHeaderComponent {
    constructor() {
        this.loginState = inject(LOGIN_STATE_TOKEN);
        this.menu = inject(MenuStateService);
        this.allowPasswordChange = inject(ALLOW_PASSWORD_CHANGE_TOKEN);
        this.logoutHandler = inject(LOGOUT_HANDLER_TOKEN);
        this.dialogService = inject(DialogService);
    }
    logOut() {
        this.logoutHandler.logout();
    }
    async openChangePasswordMenu() {
        await this.dialogService.showCustomDialog(ChangePasswordDialogComponent, {}, { width: '800px', autoFocus: false });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LoggedInUserHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: LoggedInUserHeaderComponent, isStandalone: true, selector: "cauca-logged-in-user-header", ngImport: i0, template: "@if (menu.showHeaderMenuButton()) {\r\n    <cauca-icon-button id=\"menu-button\" icon=\"menu\" (buttonClick)=\"menu.toggleMenu()\" />\r\n}\r\n\r\n<div class=\"header-bar-filler\"></div>\r\n\r\n<cauca-help-menu />\r\n\r\n<cauca-icon-button class=\"account-button\" icon=\"account_circle\" [matMenuTriggerFor]=\"userMenu\" />\r\n<span class=\"body1 username\">{{loginState.userFullName()}}</span>\r\n\r\n<mat-menu #userMenu=\"matMenu\" xPosition=\"before\">\r\n\r\n    <cauca-user-menu-header />\r\n    <cauca-menu-separator />\r\n    <cauca-generic-menu />\r\n    <cauca-language-menu [isSubMenu]=\"true\" />\r\n    @if (allowPasswordChange) {\r\n        <cauca-menu-item class=\"change-password-menu-item\" icon=\"key\" [translateLabel]=\"true\" label=\"headerBar.changePasswordButtonLabel\" (buttonClick)=\"openChangePasswordMenu()\" />\r\n    }\r\n    <cauca-menu-separator />\r\n    <cauca-menu-item class=\"logout-menu-item\" icon=\"logout_rounded\" [translateLabel]=\"true\" label=\"headerBar.logoutButtonLabel\" (click)=\"logOut()\" />\r\n\r\n</mat-menu>", styles: [":host{display:flex;align-items:center;gap:4px;padding-right:24px;flex:1 0 0;width:100%}.username{color:#12101499;text-transform:none}.header-bar-filler{flex:1 0 0}\n"], dependencies: [{ kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: UserMenuHeaderComponent, selector: "cauca-user-menu-header" }, { kind: "component", type: LanguageMenuComponent, selector: "cauca-language-menu", inputs: ["isSubMenu"] }, { kind: "component", type: MenuSeparatorComponent, selector: "cauca-menu-separator" }, { kind: "component", type: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: HelpMenuComponent, selector: "cauca-help-menu" }, { kind: "component", type: GenericMenuComponent, selector: "cauca-generic-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LoggedInUserHeaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cauca-logged-in-user-header', imports: [MatMenu, MatMenuTrigger, UserMenuHeaderComponent, LanguageMenuComponent, MenuSeparatorComponent, MenuItemComponent, IconButtonComponent, HelpMenuComponent, GenericMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (menu.showHeaderMenuButton()) {\r\n    <cauca-icon-button id=\"menu-button\" icon=\"menu\" (buttonClick)=\"menu.toggleMenu()\" />\r\n}\r\n\r\n<div class=\"header-bar-filler\"></div>\r\n\r\n<cauca-help-menu />\r\n\r\n<cauca-icon-button class=\"account-button\" icon=\"account_circle\" [matMenuTriggerFor]=\"userMenu\" />\r\n<span class=\"body1 username\">{{loginState.userFullName()}}</span>\r\n\r\n<mat-menu #userMenu=\"matMenu\" xPosition=\"before\">\r\n\r\n    <cauca-user-menu-header />\r\n    <cauca-menu-separator />\r\n    <cauca-generic-menu />\r\n    <cauca-language-menu [isSubMenu]=\"true\" />\r\n    @if (allowPasswordChange) {\r\n        <cauca-menu-item class=\"change-password-menu-item\" icon=\"key\" [translateLabel]=\"true\" label=\"headerBar.changePasswordButtonLabel\" (buttonClick)=\"openChangePasswordMenu()\" />\r\n    }\r\n    <cauca-menu-separator />\r\n    <cauca-menu-item class=\"logout-menu-item\" icon=\"logout_rounded\" [translateLabel]=\"true\" label=\"headerBar.logoutButtonLabel\" (click)=\"logOut()\" />\r\n\r\n</mat-menu>", styles: [":host{display:flex;align-items:center;gap:4px;padding-right:24px;flex:1 0 0;width:100%}.username{color:#12101499;text-transform:none}.header-bar-filler{flex:1 0 0}\n"] }]
        }] });

class LoggedOutUserHeaderComponent {
    constructor() {
        this.showLoginButton = signal(inject(INTERNAL_CAUCA_MENU_OPTIONS_TOKEN).showLoginButtonInHeader, ...(ngDevMode ? [{ debugName: "showLoginButton" }] : []));
        this.router = inject(Router);
    }
    login() {
        this.router.navigate(['/login']);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LoggedOutUserHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: LoggedOutUserHeaderComponent, isStandalone: true, selector: "cauca-logged-out-user-header", ngImport: i0, template: "<div class=\"header-bar-filler\"></div>\r\n\r\n<cauca-language-menu />\r\n@if (showLoginButton()) {\r\n    <cauca-stroked-button class=\"login_button\" icon=\"login_rounded\" label=\"headerBar.loginButtonLabel\" (buttonClick)=\"login()\" color=\"primary\" />\r\n}", styles: [":host{display:flex;align-items:center;flex:1 0 0;width:100%}.header-bar-filler{flex:1 0 0}\n"], dependencies: [{ kind: "component", type: LanguageMenuComponent, selector: "cauca-language-menu", inputs: ["isSubMenu"] }, { kind: "component", type: StrokedButtonComponent, selector: "cauca-stroked-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LoggedOutUserHeaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cauca-logged-out-user-header', standalone: true, imports: [LanguageMenuComponent, StrokedButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header-bar-filler\"></div>\r\n\r\n<cauca-language-menu />\r\n@if (showLoginButton()) {\r\n    <cauca-stroked-button class=\"login_button\" icon=\"login_rounded\" label=\"headerBar.loginButtonLabel\" (buttonClick)=\"login()\" color=\"primary\" />\r\n}", styles: [":host{display:flex;align-items:center;flex:1 0 0;width:100%}.header-bar-filler{flex:1 0 0}\n"] }]
        }] });

class LoggedInLayoutComponent {
    constructor() {
        this.isLoggedOn = inject(LOGIN_STATE_TOKEN).isLoggedOn;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LoggedInLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: LoggedInLayoutComponent, isStandalone: true, selector: "cauca-logged-in-layout", ngImport: i0, template: "<mat-toolbar>\n  @if (isLoggedOn()) {\n  <cauca-logged-in-user-header />\n  } @else {\n    <cauca-logged-out-user-header />\n  }\n</mat-toolbar>\n\n<div class=\"logged-page-content\" >\n  <router-outlet />\n</div>\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden}.mat-toolbar{width:100%;height:72px}.logged-page-content{overflow:auto;flex:1;margin:8px 0 0;padding:0 24px 24px;display:flex;min-width:400px;flex-direction:column;box-sizing:border-box}@media (max-width: 500px){.logged-page-content{padding:0;min-height:calc(100svh - 72px);width:100vw;min-width:320px;box-sizing:border-box}}.mat-toolbar-single-row{background-color:#fafafa;padding:0 24px}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: LoggedInUserHeaderComponent, selector: "cauca-logged-in-user-header" }, { kind: "component", type: LoggedOutUserHeaderComponent, selector: "cauca-logged-out-user-header" }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LoggedInLayoutComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cauca-logged-in-layout', standalone: true, imports: [
                        RouterOutlet,
                        LoggedInUserHeaderComponent,
                        LoggedOutUserHeaderComponent,
                        MatToolbar
                    ], template: "<mat-toolbar>\n  @if (isLoggedOn()) {\n  <cauca-logged-in-user-header />\n  } @else {\n    <cauca-logged-out-user-header />\n  }\n</mat-toolbar>\n\n<div class=\"logged-page-content\" >\n  <router-outlet />\n</div>\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden}.mat-toolbar{width:100%;height:72px}.logged-page-content{overflow:auto;flex:1;margin:8px 0 0;padding:0 24px 24px;display:flex;min-width:400px;flex-direction:column;box-sizing:border-box}@media (max-width: 500px){.logged-page-content{padding:0;min-height:calc(100svh - 72px);width:100vw;min-width:320px;box-sizing:border-box}}.mat-toolbar-single-row{background-color:#fafafa;padding:0 24px}\n"] }]
        }] });

class HeaderBarComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: HeaderBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: HeaderBarComponent, isStandalone: true, selector: "cauca-header-bar", ngImport: i0, template: "<mat-toolbar>\r\n\r\n  <div class=\"header-bar-filler\"></div>\r\n  <cauca-logged-in-user-header />\r\n\r\n</mat-toolbar>", styles: [":host{display:flex;width:100%;height:72px;flex-direction:column;justify-content:center;align-items:flex-start}.header-bar-filler{flex:1 0 0}.mat-toolbar-single-row{background-color:#fafafa}\n"], dependencies: [{ kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: LoggedInUserHeaderComponent, selector: "cauca-logged-in-user-header" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: HeaderBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cauca-header-bar', imports: [MatToolbar, LoggedInUserHeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar>\r\n\r\n  <div class=\"header-bar-filler\"></div>\r\n  <cauca-logged-in-user-header />\r\n\r\n</mat-toolbar>", styles: [":host{display:flex;width:100%;height:72px;flex-direction:column;justify-content:center;align-items:flex-start}.header-bar-filler{flex:1 0 0}.mat-toolbar-single-row{background-color:#fafafa}\n"] }]
        }] });

class SideMenuItemComponent {
    constructor() {
        this.options = input(null, ...(ngDevMode ? [{ debugName: "options" }] : []));
        this.isLastItem = input(false, ...(ngDevMode ? [{ debugName: "isLastItem" }] : []));
        this.showIcon = computed(() => this.options().children?.length === 0, ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
        this.isParent = computed(() => this.options().isParent, ...(ngDevMode ? [{ debugName: "isParent" }] : []));
        this.isSubItem = computed(() => this.options().children?.length > 0, ...(ngDevMode ? [{ debugName: "isSubItem" }] : []));
        this.isSelected = computed(() => this.menu.currentUrl().startsWith(this.options().route), ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
        this.showChildren = computed(() => this.isSubItem() && this.isSelected(), ...(ngDevMode ? [{ debugName: "showChildren" }] : []));
        this.containerClass = computed(() => this.isSubItem() ? 'sub-menu' : undefined, ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
        this.itemClass = computed(() => this.getItemClass(this.isSubItem(), this.isParent()), ...(ngDevMode ? [{ debugName: "itemClass" }] : []));
        this.children = computed(() => this.options().children, ...(ngDevMode ? [{ debugName: "children" }] : []));
        this.route = computed(() => this.isSubItem() ? this.children()[0].route : this.options().route, ...(ngDevMode ? [{ debugName: "route" }] : []));
        this.icon = computed(() => this.options().icon, ...(ngDevMode ? [{ debugName: "icon" }] : []));
        this.label = computed(() => this.options().label, ...(ngDevMode ? [{ debugName: "label" }] : []));
        this.menu = inject(MenuStateService);
        this.router = inject(Router);
    }
    openLink() {
        this.router.navigate([this.route()]);
        if (this.menu.showHeaderMenuButton()) {
            this.menu.toggleMenu();
        }
    }
    getItemClass(isSubItem, isParent) {
        switch (true) {
            case isSubItem:
                return 'parent-sub-item';
            case isParent:
                return 'parent-item';
            default:
                return 'child-item';
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SideMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: SideMenuItemComponent, isStandalone: true, selector: "cauca-side-menu-item", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, isLastItem: { classPropertyName: "isLastItem", publicName: "isLastItem", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"item-menu-container\" [ngClass]=\"containerClass()\" [class.selected]=\"isSelected()\">\r\n\r\n    <a class=\"item-menu\" (click)=\"openLink()\" [class.selected]=\"isSelected()\" [ngClass]=\"itemClass()\" [class.is-last]=\"isLastItem()\">\r\n\r\n        <mat-icon>{{icon()}}</mat-icon>\r\n        @if (menu.isExpanded()) {\r\n            <span class=\"menu-label\" [ngClass]=\"isParent() ? 'body1' : 'caption'\" >{{label() | translate}}</span>\r\n        }\r\n        @if (isSubItem()) {\r\n