npm - @testgorilla/tgo-ui - Versions diffs - 6.2.13 → 6.2.14-beta.0 - Mend

@testgorilla/tgo-ui 6.2.13 → 6.2.14-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (135) hide show

package/fesm2022/testgorilla-tgo-ui-components-multi-input.mjs CHANGED Viewed

@@ -268,10 +268,10 @@ class MultiInputComponent {
             this.multiInputForm.enable({ emitEvent: false });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MultiInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: MultiInputComponent, isStandalone: false, selector: "ui-multi-input", inputs: { itemsList: { classPropertyName: "itemsList", publicName: "itemsList", isSignal: true, isRequired: true, transformFunction: null }, itemTextField: { classPropertyName: "itemTextField", publicName: "itemTextField", isSignal: true, isRequired: true, transformFunction: null }, itemValueField: { classPropertyName: "itemValueField", publicName: "itemValueField", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, allowDecimal: { classPropertyName: "allowDecimal", publicName: "allowDecimal", isSignal: true, isRequired: false, transformFunction: null }, allowNegative: { classPropertyName: "allowNegative", publicName: "allowNegative", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, hideBuiltInErrors: { classPropertyName: "hideBuiltInErrors", publicName: "hideBuiltInErrors", isSignal: true, isRequired: false, transformFunction: null }, hideLabelInErrors: { classPropertyName: "hideLabelInErrors", publicName: "hideLabelInErrors", isSignal: true, isRequired: false, transformFunction: null }, maxCharacters: { classPropertyName: "maxCharacters", publicName: "maxCharacters", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: false, isRequired: false, transformFunction: null }, hasCustomErrors: { classPropertyName: "hasCustomErrors", publicName: "hasCustomErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.full-width": "this.fullWidth", "class": "this.class" } }, ngImport: i0, template: "<div [formGroup]=\"multiInputForm\">\n  <div class=\"controls-wrapper\">\n    <ui-dropdown\n      [hasError]=\"controlHasError\"\n      [formControlName]=\"itemValueField()\"\n      [valueList]=\"itemsList()\"\n      [textField]=\"itemTextField()\"\n      [valueField]=\"itemValueField()\"\n      [showBottomContent]=\"false\"\n      [allowClear]=\"false\"\n      (closed)=\"markAsTouched()\"\n    ></ui-dropdown>\n\n    <ui-field\n      [hasError]=\"controlHasError\"\n      formControlName=\"value\"\n      [label]=\"label()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [hideBuiltInErrors]=\"true\"\n      [showBottomContent]=\"false\"\n      [allowOnlyDigits]=\"true\"\n      [fullWidth]=\"fullWidth\"\n      [allowNegative]=\"allowNegative()\"\n      (focusout)=\"markAsTouched()\"\n    ></ui-field>\n  </div>\n\n  @if (!hasCustomErrors()) {\n    <mat-hint class=\"info\" *ngIf=\"!controlHasError && maxCharacters() && !errors()?.length\"\n      >{{ getValueLength() }} / {{ maxCharacters() }}</mat-hint\n    >\n\n    @if (errors()?.length || (ngControl?.errors | hasValidationError)) {\n      <mat-hint class=\"error\">\n        @for (error of errors(); track error) {\n          <ui-icon name=\"Error-in-line\"></ui-icon>{{ error }}\n        }\n        @if ((ngControl?.errors | hasValidationError) && !hideBuiltInErrors()) {\n          <ui-validation-error\n            [touchedOn]=\"!controlHasError\"\n            [ngControl]=\"ngControl\"\n            [label]=\"hideLabelInErrors() ? null : label()\"\n          ></ui-validation-error>\n        }\n      </mat-hint>\n    }\n  }\n  <ng-content select=\"[custom-errors]\"></ng-content>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host.ui-multi-input{position:relative!important}:host.ui-multi-input .ng-untouched,:host.ui-multi-input .ng-touched{width:fit-content}:host.ui-multi-input.full-width .ng-untouched{width:100%}:host.ui-multi-input .controls-wrapper{display:flex}:host.ui-multi-input ::ng-deep ui-validation-error .errors{display:flex}:host.ui-multi-input ::ng-deep .ui-dropdown{max-width:120px}:host.ui-multi-input ::ng-deep .ui-dropdown .mdc-notched-outline__trailing,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-text-field-wrapper,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mdc-notched-outline__trailing{border-right-color:transparent!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}:host.ui-multi-input ::ng-deep .ui-dropdown:hover .mdc-notched-outline__trailing,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-form-field-focused .mdc-notched-outline__trailing{border-right-color:#242424}:host.ui-multi-input ::ng-deep .ui-field .mdc-notched-outline__leading,:host.ui-multi-input ::ng-deep .ui-field .mat-mdc-text-field-wrapper{border-top-left-radius:0!important;border-bottom-left-radius:0!important}:host.ui-multi-input ::ng-deep .ui-field .mat-mdc-form-field-subscript-wrapper{position:absolute!important;left:0!important;top:48px!important}:host.ui-multi-input ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;min-height:48px!important;align-items:center!important;display:flex!important}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.info{display:block;color:#888;width:100%;text-align:right}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error{display:flex;gap:4px;color:#e02800;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error svg{color:#e02800}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint:before{display:none}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error{color:#e02800;font-size:12px;line-height:16px;letter-spacing:.4px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error .errors{display:flex;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error svg{margin-right:4px;color:#e02800;row-gap:0}:host.ui-multi-input .separator-line{border-left:1px solid var(--mdc-outlined-text-field-outline-color);height:40px;margin:0 12px -7px 8px}:host.ui-multi-input ::ng-deep .mat-mdc-select .mat-mdc-select-arrow-wrapper{display:none}:host.ui-multi-input ::ng-deep .mdc-text-field--outlined{padding-left:12px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i4.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i5.DropdownComponent, selector: "ui-dropdown", inputs: ["label", "labelIcon", "isAIVariant", "name", "placeholder", "id", "value", "errors", "disabled", "valueList", "allowClear", "allowMultipleSelection", "required", "showBottomContent", "applicationTheme", "hideBuiltInErrors", "hideLabelInErrors", "textField", "valueField", "hasError", "companyColor", "panelClass"], outputs: ["closed", "opened"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "component", type: i7.FieldComponent, selector: "ui-field", inputs: ["fullWidth", "fullHeight", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "isAutocompleteOff", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "autosizableTextarea", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "pipe", type: i8.HasValidationErrorPipe, name: "hasValidationError" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MultiInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: MultiInputComponent, isStandalone: false, selector: "ui-multi-input", inputs: { itemsList: { classPropertyName: "itemsList", publicName: "itemsList", isSignal: true, isRequired: true, transformFunction: null }, itemTextField: { classPropertyName: "itemTextField", publicName: "itemTextField", isSignal: true, isRequired: true, transformFunction: null }, itemValueField: { classPropertyName: "itemValueField", publicName: "itemValueField", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, allowDecimal: { classPropertyName: "allowDecimal", publicName: "allowDecimal", isSignal: true, isRequired: false, transformFunction: null }, allowNegative: { classPropertyName: "allowNegative", publicName: "allowNegative", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, hideBuiltInErrors: { classPropertyName: "hideBuiltInErrors", publicName: "hideBuiltInErrors", isSignal: true, isRequired: false, transformFunction: null }, hideLabelInErrors: { classPropertyName: "hideLabelInErrors", publicName: "hideLabelInErrors", isSignal: true, isRequired: false, transformFunction: null }, maxCharacters: { classPropertyName: "maxCharacters", publicName: "maxCharacters", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: false, isRequired: false, transformFunction: null }, hasCustomErrors: { classPropertyName: "hasCustomErrors", publicName: "hasCustomErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.full-width": "this.fullWidth", "class": "this.class" } }, ngImport: i0, template: "<div [formGroup]=\"multiInputForm\">\n  <div class=\"controls-wrapper\">\n    <ui-dropdown\n      [hasError]=\"controlHasError\"\n      [formControlName]=\"itemValueField()\"\n      [valueList]=\"itemsList()\"\n      [textField]=\"itemTextField()\"\n      [valueField]=\"itemValueField()\"\n      [showBottomContent]=\"false\"\n      [allowClear]=\"false\"\n      (closed)=\"markAsTouched()\"\n    ></ui-dropdown>\n\n    <ui-field\n      [hasError]=\"controlHasError\"\n      formControlName=\"value\"\n      [label]=\"label()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [hideBuiltInErrors]=\"true\"\n      [showBottomContent]=\"false\"\n      [allowOnlyDigits]=\"true\"\n      [fullWidth]=\"fullWidth\"\n      [allowNegative]=\"allowNegative()\"\n      (focusout)=\"markAsTouched()\"\n    ></ui-field>\n  </div>\n\n  @if (!hasCustomErrors()) {\n    <mat-hint class=\"info\" *ngIf=\"!controlHasError && maxCharacters() && !errors()?.length\"\n      >{{ getValueLength() }} / {{ maxCharacters() }}</mat-hint\n    >\n\n    @if (errors()?.length || (ngControl?.errors | hasValidationError)) {\n      <mat-hint class=\"error\">\n        @for (error of errors(); track error) {\n          <ui-icon name=\"Error-in-line\"></ui-icon>{{ error }}\n        }\n        @if ((ngControl?.errors | hasValidationError) && !hideBuiltInErrors()) {\n          <ui-validation-error\n            [touchedOn]=\"!controlHasError\"\n            [ngControl]=\"ngControl\"\n            [label]=\"hideLabelInErrors() ? null : label()\"\n          ></ui-validation-error>\n        }\n      </mat-hint>\n    }\n  }\n  <ng-content select=\"[custom-errors]\"></ng-content>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host.ui-multi-input{position:relative!important}:host.ui-multi-input .ng-untouched,:host.ui-multi-input .ng-touched{width:fit-content}:host.ui-multi-input.full-width .ng-untouched{width:100%}:host.ui-multi-input .controls-wrapper{display:flex}:host.ui-multi-input ::ng-deep ui-validation-error .errors{display:flex}:host.ui-multi-input ::ng-deep .ui-dropdown{max-width:120px}:host.ui-multi-input ::ng-deep .ui-dropdown .mdc-notched-outline__trailing,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-text-field-wrapper,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mdc-notched-outline__trailing{border-right-color:transparent!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}:host.ui-multi-input ::ng-deep .ui-dropdown:hover .mdc-notched-outline__trailing,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-form-field-focused .mdc-notched-outline__trailing{border-right-color:#242424}:host.ui-multi-input ::ng-deep .ui-field .mdc-notched-outline__leading,:host.ui-multi-input ::ng-deep .ui-field .mat-mdc-text-field-wrapper{border-top-left-radius:0!important;border-bottom-left-radius:0!important}:host.ui-multi-input ::ng-deep .ui-field .mat-mdc-form-field-subscript-wrapper{position:absolute!important;left:0!important;top:48px!important}:host.ui-multi-input ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;min-height:48px!important;align-items:center!important;display:flex!important}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.info{display:block;color:#888;width:100%;text-align:right}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error{display:flex;gap:4px;color:#e02800;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error svg{color:#e02800}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint:before{display:none}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error{color:#e02800;font-size:12px;line-height:16px;letter-spacing:.4px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error .errors{display:flex;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error svg{margin-right:4px;color:#e02800;row-gap:0}:host.ui-multi-input .separator-line{border-left:1px solid var(--mdc-outlined-text-field-outline-color);height:40px;margin:0 12px -7px 8px}:host.ui-multi-input ::ng-deep .mat-mdc-select .mat-mdc-select-arrow-wrapper{display:none}:host.ui-multi-input ::ng-deep .mdc-text-field--outlined{padding-left:12px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i4.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i5.DropdownComponent, selector: "ui-dropdown", inputs: ["label", "labelIcon", "isAIVariant", "name", "placeholder", "id", "value", "errors", "disabled", "valueList", "allowClear", "allowMultipleSelection", "required", "showBottomContent", "applicationTheme", "hideBuiltInErrors", "hideLabelInErrors", "textField", "valueField", "hasError", "companyColor", "panelClass"], outputs: ["closed", "opened"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "component", type: i7.FieldComponent, selector: "ui-field", inputs: ["fullWidth", "fullHeight", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "isAutocompleteOff", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "autosizableTextarea", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "pipe", type: i8.HasValidationErrorPipe, name: "hasValidationError" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MultiInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MultiInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-multi-input', standalone: false, template: "<div [formGroup]=\"multiInputForm\">\n  <div class=\"controls-wrapper\">\n    <ui-dropdown\n      [hasError]=\"controlHasError\"\n      [formControlName]=\"itemValueField()\"\n      [valueList]=\"itemsList()\"\n      [textField]=\"itemTextField()\"\n      [valueField]=\"itemValueField()\"\n      [showBottomContent]=\"false\"\n      [allowClear]=\"false\"\n      (closed)=\"markAsTouched()\"\n    ></ui-dropdown>\n\n    <ui-field\n      [hasError]=\"controlHasError\"\n      formControlName=\"value\"\n      [label]=\"label()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [hideBuiltInErrors]=\"true\"\n      [showBottomContent]=\"false\"\n      [allowOnlyDigits]=\"true\"\n      [fullWidth]=\"fullWidth\"\n      [allowNegative]=\"allowNegative()\"\n      (focusout)=\"markAsTouched()\"\n    ></ui-field>\n  </div>\n\n  @if (!hasCustomErrors()) {\n    <mat-hint class=\"info\" *ngIf=\"!controlHasError && maxCharacters() && !errors()?.length\"\n      >{{ getValueLength() }} / {{ maxCharacters() }}</mat-hint\n    >\n\n    @if (errors()?.length || (ngControl?.errors | hasValidationError)) {\n      <mat-hint class=\"error\">\n        @for (error of errors(); track error) {\n          <ui-icon name=\"Error-in-line\"></ui-icon>{{ error }}\n        }\n        @if ((ngControl?.errors | hasValidationError) && !hideBuiltInErrors()) {\n          <ui-validation-error\n            [touchedOn]=\"!controlHasError\"\n            [ngControl]=\"ngControl\"\n            [label]=\"hideLabelInErrors() ? null : label()\"\n          ></ui-validation-error>\n        }\n      </mat-hint>\n    }\n  }\n  <ng-content select=\"[custom-errors]\"></ng-content>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host.ui-multi-input{position:relative!important}:host.ui-multi-input .ng-untouched,:host.ui-multi-input .ng-touched{width:fit-content}:host.ui-multi-input.full-width .ng-untouched{width:100%}:host.ui-multi-input .controls-wrapper{display:flex}:host.ui-multi-input ::ng-deep ui-validation-error .errors{display:flex}:host.ui-multi-input ::ng-deep .ui-dropdown{max-width:120px}:host.ui-multi-input ::ng-deep .ui-dropdown .mdc-notched-outline__trailing,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-text-field-wrapper,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mdc-notched-outline__trailing{border-right-color:transparent!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}:host.ui-multi-input ::ng-deep .ui-dropdown:hover .mdc-notched-outline__trailing,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-form-field-focused .mdc-notched-outline__trailing{border-right-color:#242424}:host.ui-multi-input ::ng-deep .ui-field .mdc-notched-outline__leading,:host.ui-multi-input ::ng-deep .ui-field .mat-mdc-text-field-wrapper{border-top-left-radius:0!important;border-bottom-left-radius:0!important}:host.ui-multi-input ::ng-deep .ui-field .mat-mdc-form-field-subscript-wrapper{position:absolute!important;left:0!important;top:48px!important}:host.ui-multi-input ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;min-height:48px!important;align-items:center!important;display:flex!important}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.info{display:block;color:#888;width:100%;text-align:right}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error{display:flex;gap:4px;color:#e02800;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error svg{color:#e02800}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint:before{display:none}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error{color:#e02800;font-size:12px;line-height:16px;letter-spacing:.4px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error .errors{display:flex;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error svg{margin-right:4px;color:#e02800;row-gap:0}:host.ui-multi-input .separator-line{border-left:1px solid var(--mdc-outlined-text-field-outline-color);height:40px;margin:0 12px -7px 8px}:host.ui-multi-input ::ng-deep .mat-mdc-select .mat-mdc-select-arrow-wrapper{display:none}:host.ui-multi-input ::ng-deep .mdc-text-field--outlined{padding-left:12px!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
@@ -290,8 +290,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }] } });
 class MultiInputComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MultiInputComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: MultiInputComponentModule, declarations: [MultiInputComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MultiInputComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: MultiInputComponentModule, declarations: [MultiInputComponent], imports: [CommonModule,
             MatInputModule,
             MatSelectModule,
             DividerComponentModule,
@@ -302,7 +302,7 @@ class MultiInputComponentModule {
             HasValidationErrorPipe,
             ValidationErrorModule,
             FieldComponentModule], exports: [MultiInputComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MultiInputComponentModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MultiInputComponentModule, imports: [CommonModule,
             MatInputModule,
             MatSelectModule,
             DividerComponentModule,
@@ -312,7 +312,7 @@ class MultiInputComponentModule {
             ValidationErrorModule,
             FieldComponentModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MultiInputComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MultiInputComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MultiInputComponent],

package/fesm2022/testgorilla-tgo-ui-components-multi-input.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"testgorilla-tgo-ui-components-multi-input.mjs","sources":["../../../components/multi-input/required-multi-input.validator.ts","../../../components/multi-input/multi-input.component.ts","../../../components/multi-input/multi-input.component.html","../../../components/multi-input/multi-input.component.module.ts","../../../components/multi-input/testgorilla-tgo-ui-components-multi-input.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/unbound-method /\nimport { AbstractControl, ValidationErrors, Validators } from '@angular/forms';\nimport { MultiInputValue } from './multi-input.model';\n\nexport const requiredMultiInput = (control: AbstractControl<MultiInputValue>): ValidationErrors \| null => {\n const controlValue = control.value;\n\n const hasRequired = control.hasValidator(Validators.required);\n\n if (hasRequired && controlValue) {\n const anyFalsy = Object.values(controlValue).some(v => !v);\n if (anyFalsy) {\n return { required: true };\n }\n }\n return null;\n};\n","/ eslint-disable @typescript-eslint/no-inferrable-types /\n/ eslint-disable @typescript-eslint/no-unsafe-assignment /\n\nimport {\n booleanAttribute,\n Component,\n effect,\n EventEmitter,\n HostBinding,\n input,\n Input,\n OnInit,\n Optional,\n Output,\n Self,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n AbstractControl,\n ControlValueAccessor,\n FormBuilder,\n FormControl,\n NgControl,\n ValidatorFn,\n Validators,\n} from '@angular/forms';\nimport { MultiInputValue } from './multi-input.model';\nimport { requiredMultiInput } from './required-multi-input.validator';\n\n@Component({\n selector: 'ui-multi-input',\n templateUrl: './multi-input.component.html',\n styleUrl: './multi-input.component.scss',\n standalone: false,\n})\nexport class MultiInputComponent implements ControlValueAccessor, OnInit {\n /\n \n * @description List of items to be displayed in the dropdown list\n * @type {Record<string, string \| null \| number>[]}\n * @memberof MultiInputComponent\n /\n itemsList = input.required<Record<string, string \| null \| number>[]>();\n\n /\n \n * @description The field to be displayed in the dropdown\n * @type {string}\n * @memberof MultiInputComponent\n /\n itemTextField = input.required<string>();\n\n /\n \n * @description The value to be displayed in the droddown\n * @type {string}\n * @memberof MultiInputComponent\n /\n itemValueField = input.required<string>();\n\n /\n \n * @description The Value of the multi input\n * @type {MultiInputValue}\n * @memberof MultiInputComponent\n /\n value = input<MultiInputValue>();\n\n /\n \n * @description Disables the multi input\n * @type {boolean}\n * @memberof MultiInputComponent\n /\n disabled = input(false, { transform: booleanAttribute });\n\n /\n \n * @description Defines if the multi input is required\n * @type {boolean}\n * @memberof MultiInputComponent\n /\n required = input(false, { transform: booleanAttribute });\n\n /\n \n * @description Defines the label of the multi input\n * @type {string}\n * @memberof MultiInputComponent\n /\n label = input('');\n\n /\n \n * @description Defines the placeholder of the multi input\n * @type {string}\n * @memberof MultiInputComponent\n /\n placeholder = input('');\n\n /\n \n * @description Allow decimal values in the multi input\n * @type {boolean}\n * @memberof MultiInputComponent\n /\n allowDecimal = input(true, { transform: booleanAttribute });\n\n /\n \n * @description Allow negative values in the multi input\n * @type {boolean}\n * @memberof MultiInputComponent\n /\n allowNegative = input(true, { transform: booleanAttribute });\n\n /\n \n * @description The errors of the multi input\n * @type {string[]}\n * @memberof MultiInputComponent\n /\n errors = input<string[]>([]);\n\n /\n \n * @description Hide built in errors for Reactive Forms\n * @type {boolean}\n * @memberof MultiInputComponent\n /\n hideBuiltInErrors = input(false, { transform: booleanAttribute });\n\n /\n \n * @description Hide label in errors\n * @type {boolean}\n * @memberof MultiInputComponent\n /\n hideLabelInErrors = input(false, { transform: booleanAttribute });\n\n /\n \n * @description The maximum characters allowed in the multi input\n * @type {number}\n * @memberof MultiInputComponent\n /\n maxCharacters = input(0);\n\n /\n \n * @description The validators to apply to input field\n * @type {Validators[]}\n * @memberof MultiInputComponent\n /\n validators = input<ValidatorFn[]>([]);\n\n /\n \n * @description The width of the multi input\n * @type {boolean}\n * @memberof MultiInputComponent\n /\n @HostBinding('class.full-width')\n @Input()\n fullWidth: boolean = false;\n\n @Output() valueChange = new EventEmitter<MultiInputValue>();\n\n @HostBinding() class = 'ui-multi-input';\n\n /\n @description Indicates that custom errors are provided via content projection.\n * When true, the built-in error hints will be hidden.\n * @type {boolean}\n * @memberof MultiInputComponent\n /\n hasCustomErrors = input(false, { transform: booleanAttribute });\n\n /\n @ignore\n /\n onChange = (_value: any): void => {};\n\n /\n @ignore\n /\n onTouch = (): void => {};\n\n protected readonly multiInputForm = this.fb.group<MultiInputValue>({\n value: null,\n });\n\n constructor(\n @Optional() @Self() protected ngControl: NgControl,\n private readonly fb: FormBuilder\n ) {\n effect(() => {\n this.updateDisableState(this.disabled());\n });\n\n effect(() => {\n const maxCharacters = this.maxCharacters();\n if (maxCharacters) {\n this.inputControl?.addValidators(Validators.maxLength(maxCharacters));\n this.inputControl?.updateValueAndValidity({ emitEvent: false });\n }\n });\n\n effect(() => {\n const inputValidators = this.validators();\n if (inputValidators?.length) {\n this.inputControl?.addValidators(inputValidators);\n this.inputControl?.updateValueAndValidity({ emitEvent: false });\n }\n });\n\n effect(() => {\n const value = this.value();\n // skip in the context of angular Forms\n if (!this.ngControl) {\n this.addDropdownControl();\n this.patchForm(value);\n }\n });\n\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n\n this.multiInputForm.valueChanges.pipe(takeUntilDestroyed()).subscribe(formValue => {\n this.valueChanged(formValue as MultiInputValue);\n });\n }\n\n ngOnInit(): void {\n this.addDropdownControl();\n if (this.ngControl) {\n this.ngControl.control?.addValidators(requiredMultiInput);\n }\n }\n\n writeValue(value: MultiInputValue): void {\n this.addDropdownControl();\n this.patchForm(value);\n }\n\n patchForm(value: MultiInputValue \| undefined) {\n if (value) {\n this.multiInputForm.patchValue(value, { emitEvent: false });\n } else {\n this.multiInputForm.reset(undefined, { emitEvent: false });\n }\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.updateDisableState(isDisabled);\n }\n\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: any): void {\n this.onTouch = fn;\n }\n\n protected valueChanged(value: MultiInputValue): void {\n this.valueChange.emit(value);\n this.onChange(value);\n }\n\n protected get dropdownControl(): AbstractControl<unknown> {\n return this.multiInputForm.controls[this.itemValueField()];\n }\n\n protected get inputControl(): AbstractControl<unknown> {\n return this.multiInputForm.controls.value;\n }\n\n protected markAsTouched(): void {\n this.onTouch();\n }\n\n protected addDropdownControl(): void {\n if (!this.multiInputForm.value[this.itemValueField()]) {\n this.multiInputForm.addControl(this.itemValueField(), new FormControl(null), { emitEvent: false });\n this.updateDisableState(this.disabled());\n }\n }\n\n protected get controlHasError(): boolean {\n if (this.ngControl) {\n return !!(this.ngControl.errors && this.ngControl.touched);\n } else {\n return this.errors()?.length > 0;\n }\n }\n\n protected getValueLength(): number {\n return this.inputControl?.value?.toString().length \|\| 0;\n }\n\n private updateDisableState(state: boolean): void {\n if (state) {\n this.multiInputForm.disable({ emitEvent: false });\n } else {\n this.multiInputForm.enable({ emitEvent: false });\n }\n }\n}\n","<div [formGroup]=\"multiInputForm\">\n <div class=\"controls-wrapper\">\n <ui-dropdown\n [hasError]=\"controlHasError\"\n [formControlName]=\"itemValueField()\"\n [valueList]=\"itemsList()\"\n [textField]=\"itemTextField()\"\n [valueField]=\"itemValueField()\"\n [showBottomContent]=\"false\"\n [allowClear]=\"false\"\n (closed)=\"markAsTouched()\"\n ></ui-dropdown>\n\n <ui-field\n [hasError]=\"controlHasError\"\n formControlName=\"value\"\n [label]=\"label()\"\n [placeholder]=\"placeholder()\"\n [required]=\"required()\"\n [hideBuiltInErrors]=\"true\"\n [showBottomContent]=\"false\"\n [allowOnlyDigits]=\"true\"\n [fullWidth]=\"fullWidth\"\n [allowNegative]=\"allowNegative()\"\n (focusout)=\"markAsTouched()\"\n ></ui-field>\n </div>\n\n @if (!hasCustomErrors()) {\n <mat-hint class=\"info\" ngIf=\"!controlHasError && maxCharacters() && !errors()?.length\"\n >{{ getValueLength() }} / {{ maxCharacters() }}</mat-hint\n >\n\n @if (errors()?.length \|\| (ngControl?.errors \| hasValidationError)) {\n <mat-hint class=\"error\">\n @for (error of errors(); track error) {\n <ui-icon name=\"Error-in-line\"></ui-icon>{{ error }}\n }\n @if ((ngControl?.errors \| hasValidationError) && !hideBuiltInErrors()) {\n <ui-validation-error\n [touchedOn]=\"!controlHasError\"\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors() ? null : label()\"\n ></ui-validation-error>\n }\n </mat-hint>\n }\n }\n <ng-content select=\"[custom-errors]\"></ng-content>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MultiInputComponent } from './multi-input.component';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectModule } from '@angular/material/select';\nimport { DividerComponentModule } from '@testgorilla/tgo-ui/components/divider';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { DropdownComponentModule } from '@testgorilla/tgo-ui/components/dropdown';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { DigitsOnlyDirective, HasValidationErrorPipe } from '@testgorilla/tgo-ui/components/core';\nimport { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';\nimport { FieldComponentModule } from '@testgorilla/tgo-ui/components/field';\n\n@NgModule({\n declarations: [MultiInputComponent],\n imports: [\n CommonModule,\n MatInputModule,\n MatSelectModule,\n DividerComponentModule,\n IconComponentModule,\n DropdownComponentModule,\n ReactiveFormsModule,\n DigitsOnlyDirective,\n HasValidationErrorPipe,\n ValidationErrorModule,\n FieldComponentModule,\n ],\n exports: [MultiInputComponent],\n})\nexport class MultiInputComponentModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"testgorilla-tgo-ui-components-multi-input.mjs","sources":["../../../components/multi-input/required-multi-input.validator.ts","../../../components/multi-input/multi-input.component.ts","../../../components/multi-input/multi-input.component.html","../../../components/multi-input/multi-input.component.module.ts","../../../components/multi-input/testgorilla-tgo-ui-components-multi-input.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/unbound-method /\nimport { AbstractControl, ValidationErrors, Validators } from '@angular/forms';\nimport { MultiInputValue } from './multi-input.model';\n\nexport const requiredMultiInput = (control: AbstractControl<MultiInputValue>): ValidationErrors \| null => {\n const controlValue = control.value;\n\n const hasRequired = control.hasValidator(Validators.required);\n\n if (hasRequired && controlValue) {\n const anyFalsy = Object.values(controlValue).some(v => !v);\n if (anyFalsy) {\n return { required: true };\n }\n }\n return null;\n};\n","/ eslint-disable @typescript-eslint/no-inferrable-types /\n/ eslint-disable @typescript-eslint/no-unsafe-assignment /\n\nimport {\n booleanAttribute,\n Component,\n effect,\n EventEmitter,\n HostBinding,\n input,\n Input,\n OnInit,\n Optional,\n Output,\n Self,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n AbstractControl,\n ControlValueAccessor,\n FormBuilder,\n FormControl,\n NgControl,\n ValidatorFn,\n Validators,\n} from '@angular/forms';\nimport { MultiInputValue } from './multi-input.model';\nimport { requiredMultiInput } from './required-multi-input.validator';\n\n@Component({\n selector: 'ui-multi-input',\n templateUrl: './multi-input.component.html',\n styleUrl: './multi-input.component.scss',\n standalone: false,\n})\nexport class MultiInputComponent implements ControlValueAccessor, OnInit {\n /\n \n * @description List of items to be displayed in the dropdown list\n * @type {Record<string, string \| null \| number>[]}\n * @memberof MultiInputComponent\n /\n itemsList = input.required<Record<string, string \| null \| number>[]>();\n\n /\n \n * @description The field to be displayed in the dropdown\n * @type {string}\n * @memberof MultiInputComponent\n /\n itemTextField = input.required<string>();\n\n /\n \n * @description The value to be displayed in the droddown\n * @type {string}\n * @memberof MultiInputComponent\n /\n itemValueField = input.required<string>();\n\n /\n \n * @description The Value of the multi input\n * @type {MultiInputValue}\n * @memberof MultiInputComponent\n /\n value = input<MultiInputValue>();\n\n /\n \n * @description Disables the multi input\n * @type {boolean}\n * @memberof MultiInputComponent\n /\n disabled = input(false, { transform: booleanAttribute });\n\n /\n \n * @description Defines if the multi input is required\n * @type {boolean}\n * @memberof MultiInputComponent\n /\n required = input(false, { transform: booleanAttribute });\n\n /\n \n * @description Defines the label of the multi input\n * @type {string}\n * @memberof MultiInputComponent\n /\n label = input('');\n\n /\n \n * @description Defines the placeholder of the multi input\n * @type {string}\n * @memberof MultiInputComponent\n /\n placeholder = input('');\n\n /\n \n * @description Allow decimal values in the multi input\n * @type {boolean}\n * @memberof MultiInputComponent\n /\n allowDecimal = input(true, { transform: booleanAttribute });\n\n /\n \n * @description Allow negative values in the multi input\n * @type {boolean}\n * @memberof MultiInputComponent\n /\n allowNegative = input(true, { transform: booleanAttribute });\n\n /\n \n * @description The errors of the multi input\n * @type {string[]}\n * @memberof MultiInputComponent\n /\n errors = input<string[]>([]);\n\n /\n \n * @description Hide built in errors for Reactive Forms\n * @type {boolean}\n * @memberof MultiInputComponent\n /\n hideBuiltInErrors = input(false, { transform: booleanAttribute });\n\n /\n \n * @description Hide label in errors\n * @type {boolean}\n * @memberof MultiInputComponent\n /\n hideLabelInErrors = input(false, { transform: booleanAttribute });\n\n /\n \n * @description The maximum characters allowed in the multi input\n * @type {number}\n * @memberof MultiInputComponent\n /\n maxCharacters = input(0);\n\n /\n \n * @description The validators to apply to input field\n * @type {Validators[]}\n * @memberof MultiInputComponent\n /\n validators = input<ValidatorFn[]>([]);\n\n /\n \n * @description The width of the multi input\n * @type {boolean}\n * @memberof MultiInputComponent\n /\n @HostBinding('class.full-width')\n @Input()\n fullWidth: boolean = false;\n\n @Output() valueChange = new EventEmitter<MultiInputValue>();\n\n @HostBinding() class = 'ui-multi-input';\n\n /\n @description Indicates that custom errors are provided via content projection.\n * When true, the built-in error hints will be hidden.\n * @type {boolean}\n * @memberof MultiInputComponent\n /\n hasCustomErrors = input(false, { transform: booleanAttribute });\n\n /\n @ignore\n /\n onChange = (_value: any): void => {};\n\n /\n @ignore\n /\n onTouch = (): void => {};\n\n protected readonly multiInputForm = this.fb.group<MultiInputValue>({\n value: null,\n });\n\n constructor(\n @Optional() @Self() protected ngControl: NgControl,\n private readonly fb: FormBuilder\n ) {\n effect(() => {\n this.updateDisableState(this.disabled());\n });\n\n effect(() => {\n const maxCharacters = this.maxCharacters();\n if (maxCharacters) {\n this.inputControl?.addValidators(Validators.maxLength(maxCharacters));\n this.inputControl?.updateValueAndValidity({ emitEvent: false });\n }\n });\n\n effect(() => {\n const inputValidators = this.validators();\n if (inputValidators?.length) {\n this.inputControl?.addValidators(inputValidators);\n this.inputControl?.updateValueAndValidity({ emitEvent: false });\n }\n });\n\n effect(() => {\n const value = this.value();\n // skip in the context of angular Forms\n if (!this.ngControl) {\n this.addDropdownControl();\n this.patchForm(value);\n }\n });\n\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n\n this.multiInputForm.valueChanges.pipe(takeUntilDestroyed()).subscribe(formValue => {\n this.valueChanged(formValue as MultiInputValue);\n });\n }\n\n ngOnInit(): void {\n this.addDropdownControl();\n if (this.ngControl) {\n this.ngControl.control?.addValidators(requiredMultiInput);\n }\n }\n\n writeValue(value: MultiInputValue): void {\n this.addDropdownControl();\n this.patchForm(value);\n }\n\n patchForm(value: MultiInputValue \| undefined) {\n if (value) {\n this.multiInputForm.patchValue(value, { emitEvent: false });\n } else {\n this.multiInputForm.reset(undefined, { emitEvent: false });\n }\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.updateDisableState(isDisabled);\n }\n\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: any): void {\n this.onTouch = fn;\n }\n\n protected valueChanged(value: MultiInputValue): void {\n this.valueChange.emit(value);\n this.onChange(value);\n }\n\n protected get dropdownControl(): AbstractControl<unknown> {\n return this.multiInputForm.controls[this.itemValueField()];\n }\n\n protected get inputControl(): AbstractControl<unknown> {\n return this.multiInputForm.controls.value;\n }\n\n protected markAsTouched(): void {\n this.onTouch();\n }\n\n protected addDropdownControl(): void {\n if (!this.multiInputForm.value[this.itemValueField()]) {\n this.multiInputForm.addControl(this.itemValueField(), new FormControl(null), { emitEvent: false });\n this.updateDisableState(this.disabled());\n }\n }\n\n protected get controlHasError(): boolean {\n if (this.ngControl) {\n return !!(this.ngControl.errors && this.ngControl.touched);\n } else {\n return this.errors()?.length > 0;\n }\n }\n\n protected getValueLength(): number {\n return this.inputControl?.value?.toString().length \|\| 0;\n }\n\n private updateDisableState(state: boolean): void {\n if (state) {\n this.multiInputForm.disable({ emitEvent: false });\n } else {\n this.multiInputForm.enable({ emitEvent: false });\n }\n }\n}\n","<div [formGroup]=\"multiInputForm\">\n <div class=\"controls-wrapper\">\n <ui-dropdown\n [hasError]=\"controlHasError\"\n [formControlName]=\"itemValueField()\"\n [valueList]=\"itemsList()\"\n [textField]=\"itemTextField()\"\n [valueField]=\"itemValueField()\"\n [showBottomContent]=\"false\"\n [allowClear]=\"false\"\n (closed)=\"markAsTouched()\"\n ></ui-dropdown>\n\n <ui-field\n [hasError]=\"controlHasError\"\n formControlName=\"value\"\n [label]=\"label()\"\n [placeholder]=\"placeholder()\"\n [required]=\"required()\"\n [hideBuiltInErrors]=\"true\"\n [showBottomContent]=\"false\"\n [allowOnlyDigits]=\"true\"\n [fullWidth]=\"fullWidth\"\n [allowNegative]=\"allowNegative()\"\n (focusout)=\"markAsTouched()\"\n ></ui-field>\n </div>\n\n @if (!hasCustomErrors()) {\n <mat-hint class=\"info\" ngIf=\"!controlHasError && maxCharacters() && !errors()?.length\"\n >{{ getValueLength() }} / {{ maxCharacters() }}</mat-hint\n >\n\n @if (errors()?.length \|\| (ngControl?.errors \| hasValidationError)) {\n <mat-hint class=\"error\">\n @for (error of errors(); track error) {\n <ui-icon name=\"Error-in-line\"></ui-icon>{{ error }}\n }\n @if ((ngControl?.errors \| hasValidationError) && !hideBuiltInErrors()) {\n <ui-validation-error\n [touchedOn]=\"!controlHasError\"\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors() ? null : label()\"\n ></ui-validation-error>\n }\n </mat-hint>\n }\n }\n <ng-content select=\"[custom-errors]\"></ng-content>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MultiInputComponent } from './multi-input.component';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectModule } from '@angular/material/select';\nimport { DividerComponentModule } from '@testgorilla/tgo-ui/components/divider';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { DropdownComponentModule } from '@testgorilla/tgo-ui/components/dropdown';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { DigitsOnlyDirective, HasValidationErrorPipe } from '@testgorilla/tgo-ui/components/core';\nimport { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';\nimport { FieldComponentModule } from '@testgorilla/tgo-ui/components/field';\n\n@NgModule({\n declarations: [MultiInputComponent],\n imports: [\n CommonModule,\n MatInputModule,\n MatSelectModule,\n DividerComponentModule,\n IconComponentModule,\n DropdownComponentModule,\n ReactiveFormsModule,\n DigitsOnlyDirective,\n HasValidationErrorPipe,\n ValidationErrorModule,\n FieldComponentModule,\n ],\n exports: [MultiInputComponent],\n})\nexport class MultiInputComponentModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/testgorilla-tgo-ui-components-navbar.mjs CHANGED Viewed

@@ -58,10 +58,10 @@ class MobileNavbarSideSheetComponent {
     clickMenuItem(id) {
         this.menuItemClicked.emit(id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MobileNavbarSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: MobileNavbarSideSheetComponent, isStandalone: true, selector: "ui-mobile-navbar-side-sheet", inputs: { routes: { classPropertyName: "routes", publicName: "routes", isSignal: false, isRequired: false, transformFunction: null }, activedRoute: { classPropertyName: "activedRoute", publicName: "activedRoute", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: false, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: false, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: false, isRequired: false, transformFunction: null }, contentTemplateRef: { classPropertyName: "contentTemplateRef", publicName: "contentTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, userInfoExtraTemplateRef: { classPropertyName: "userInfoExtraTemplateRef", publicName: "userInfoExtraTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, menuContentTemplateRef: { classPropertyName: "menuContentTemplateRef", publicName: "menuContentTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, isDesktop: { classPropertyName: "isDesktop", publicName: "isDesktop", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<div class=\"mobile-navbar-container\">\n  <ng-container *ngIf=\"isDesktop\" [ngTemplateOutlet]=\"userInfo\"></ng-container>\n\n  @if (menuContentTemplateRef) {\n    <ng-container [ngTemplateOutlet]=\"menuContentTemplateRef\"></ng-container>\n  }\n\n  <div class=\"routes\">\n    <div\n      *ngFor=\"let route of routes\"\n      [attr.data-testid]=\"route.id\"\n      data-test-role=\"nav-route\"\n      tabindex=\"0\"\n      (click)=\"navigate(route.id)\"\n      (keydown.enter)=\"navigate(route.id)\"\n      class=\"route\"\n      [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n    >\n      <span>{{ route.title }}</span>\n    </div>\n  </div>\n\n  <div class=\"settings\">\n    <ng-container *ngFor=\"let e of menuItems\">\n      <div *ngIf=\"e\" class=\"menu-item\">\n        <ui-button\n          [attr.data-testid]=\"e.id\"\n          data-test-role=\"menu-item\"\n          [applicationTheme]=\"applicationTheme\"\n          [fullWidth]=\"true\"\n          [disabledScaleOnClick]=\"true\"\n          [variant]=\"'menuCell'\"\n          iconPosition=\"left\"\n          [iconName]=\"e.icon\"\n          [label]=\"e.text\"\n          (buttonClickEvent)=\"clickMenuItem(e.id)\"\n          (keydown.Tab)=\"$event.stopPropagation()\"\n          (keydown.shift.tab)=\"$event.stopPropagation()\"\n          [ariaLabel]=\"e.text + '--' + e.text\"\n        ></ui-button>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"bottom-content\" [ngClass]=\"{ desktop: isDesktop }\">\n  <ng-container *ngIf=\"!isDesktop\" [ngTemplateOutlet]=\"contentTemplateRef\"></ng-container>\n  <ng-container *ngIf=\"isDesktop; else tablet\">\n    <div class=\"menu-item\">\n      <ui-button\n        data-testid=\"logout-button\"\n        [applicationTheme]=\"applicationTheme\"\n        [fullWidth]=\"true\"\n        [disabledScaleOnClick]=\"true\"\n        [variant]=\"'menuCell'\"\n        iconPosition=\"left\"\n        [iconName]=\"'Logout-in-line'\"\n        [label]=\"(translationContext + 'LOG_OUT' | uiTranslate | async)!\"\n        (buttonClickEvent)=\"logout()\"\n        (keydown.Tab)=\"$event.stopPropagation()\"\n        (keydown.shift.tab)=\"$event.stopPropagation()\"\n      ></ui-button>\n    </div>\n  </ng-container>\n\n  <ng-template #tablet>\n    <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n  </ng-template>\n</div>\n\n<ng-template #userInfo>\n  <div class=\"user-info\" [ngClass]=\"{ desktop: isDesktop }\">\n    <ui-avatar [size]=\"avatarSize.MEDIUM\" [name]=\"userName\"></ui-avatar>\n    <div class=\"details-container\">\n      <div class=\"name-container\">\n        <span class=\"user-name dd-privacy-mask\">{{ userName }}</span>\n        <span class=\"user-email dd-privacy-mask\">{{ email }}</span>\n        @if (userInfoExtraTemplateRef) {\n          <ng-container [ngTemplateOutlet]=\"userInfoExtraTemplateRef\"></ng-container>\n        }\n      </div>\n      <ui-button\n        *ngIf=\"!isDesktop\"\n        data-testid=\"logout-button\"\n        [tooltip]=\"(translationContext + 'LOG_OUT' | uiTranslate | async)!\"\n        [iconName]=\"'Logout-in-line'\"\n        [applicationTheme]=\"'light'\"\n        [variant]=\"'icon-button'\"\n        (click)=\"logout()\"\n      ></ui-button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;flex-direction:column;height:100%}.mobile-navbar-container{min-width:340px;padding-top:16px;height:100%}.mobile-navbar-container .routes{display:none}.mobile-navbar-container .routes .route{padding:0 16px;width:100%;height:48px;display:flex;justify-content:flex-start;align-items:center;font-size:14px;cursor:pointer}.mobile-navbar-container .routes .route.active{background-color:#f4f4f4;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .routes .route:hover{background-color:#fff2fc;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .routes .route:active{background-color:#ffe6fa}@media (max-width: 600px){.mobile-navbar-container .routes{display:block}}.menu-item{width:100%;height:48px;display:flex;font-size:14px;font-weight:700;font-family:ModernGothic,sans-serif;flex-direction:row;align-items:center;cursor:pointer}.menu-item ::ng-deep ui-button{width:100%}.menu-item ::ng-deep ui-button button{padding-left:16px!important}.menu-item ::ng-deep ui-button button span.icon{margin-right:16px!important}.menu-item ::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}.menu-item ::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}.bottom-content{width:100%;display:flex;align-items:center;flex-direction:column;position:sticky;bottom:0;background:#fff;z-index:1}.bottom-content.desktop{position:relative;border-top:1px #d3d3d3 solid;margin-top:16px;padding:16px 0 8px}.user-info{display:flex;align-items:center;gap:16px;padding:0 16px;margin-top:32px;margin-bottom:16px;width:100%}.user-info.desktop{margin-top:0;margin-bottom:16px}.user-info .details-container{display:flex;justify-content:space-between;width:100%;gap:8px}.user-info .name-container{display:flex;flex-direction:column;width:224px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-info .name-container .user-name{font-weight:700;font-size:14px;line-height:22px;font-family:ModernGothic,sans-serif;white-space:wrap}.user-info .name-container .user-email{width:100%;font-size:14px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: AccordionComponentModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AvatarComponentModule }, { kind: "component", type: i1.AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i2.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MobileNavbarSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: MobileNavbarSideSheetComponent, isStandalone: true, selector: "ui-mobile-navbar-side-sheet", inputs: { routes: { classPropertyName: "routes", publicName: "routes", isSignal: false, isRequired: false, transformFunction: null }, activedRoute: { classPropertyName: "activedRoute", publicName: "activedRoute", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: false, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: false, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: false, isRequired: false, transformFunction: null }, contentTemplateRef: { classPropertyName: "contentTemplateRef", publicName: "contentTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, userInfoExtraTemplateRef: { classPropertyName: "userInfoExtraTemplateRef", publicName: "userInfoExtraTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, menuContentTemplateRef: { classPropertyName: "menuContentTemplateRef", publicName: "menuContentTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, isDesktop: { classPropertyName: "isDesktop", publicName: "isDesktop", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<div class=\"mobile-navbar-container\">\n  <ng-container *ngIf=\"isDesktop\" [ngTemplateOutlet]=\"userInfo\"></ng-container>\n\n  @if (menuContentTemplateRef) {\n    <ng-container [ngTemplateOutlet]=\"menuContentTemplateRef\"></ng-container>\n  }\n\n  <div class=\"routes\">\n    <div\n      *ngFor=\"let route of routes\"\n      [attr.data-testid]=\"route.id\"\n      data-test-role=\"nav-route\"\n      tabindex=\"0\"\n      (click)=\"navigate(route.id)\"\n      (keydown.enter)=\"navigate(route.id)\"\n      class=\"route\"\n      [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n    >\n      <span>{{ route.title }}</span>\n    </div>\n  </div>\n\n  <div class=\"settings\">\n    <ng-container *ngFor=\"let e of menuItems\">\n      <div *ngIf=\"e\" class=\"menu-item\">\n        <ui-button\n          [attr.data-testid]=\"e.id\"\n          data-test-role=\"menu-item\"\n          [applicationTheme]=\"applicationTheme\"\n          [fullWidth]=\"true\"\n          [disabledScaleOnClick]=\"true\"\n          [variant]=\"'menuCell'\"\n          iconPosition=\"left\"\n          [iconName]=\"e.icon\"\n          [label]=\"e.text\"\n          (buttonClickEvent)=\"clickMenuItem(e.id)\"\n          (keydown.Tab)=\"$event.stopPropagation()\"\n          (keydown.shift.tab)=\"$event.stopPropagation()\"\n          [ariaLabel]=\"e.text + '--' + e.text\"\n        ></ui-button>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"bottom-content\" [ngClass]=\"{ desktop: isDesktop }\">\n  <ng-container *ngIf=\"!isDesktop\" [ngTemplateOutlet]=\"contentTemplateRef\"></ng-container>\n  <ng-container *ngIf=\"isDesktop; else tablet\">\n    <div class=\"menu-item\">\n      <ui-button\n        data-testid=\"logout-button\"\n        [applicationTheme]=\"applicationTheme\"\n        [fullWidth]=\"true\"\n        [disabledScaleOnClick]=\"true\"\n        [variant]=\"'menuCell'\"\n        iconPosition=\"left\"\n        [iconName]=\"'Logout-in-line'\"\n        [label]=\"(translationContext + 'LOG_OUT' | uiTranslate | async)!\"\n        (buttonClickEvent)=\"logout()\"\n        (keydown.Tab)=\"$event.stopPropagation()\"\n        (keydown.shift.tab)=\"$event.stopPropagation()\"\n      ></ui-button>\n    </div>\n  </ng-container>\n\n  <ng-template #tablet>\n    <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n  </ng-template>\n</div>\n\n<ng-template #userInfo>\n  <div class=\"user-info\" [ngClass]=\"{ desktop: isDesktop }\">\n    <ui-avatar [size]=\"avatarSize.MEDIUM\" [name]=\"userName\"></ui-avatar>\n    <div class=\"details-container\">\n      <div class=\"name-container\">\n        <span class=\"user-name dd-privacy-mask\">{{ userName }}</span>\n        <span class=\"user-email dd-privacy-mask\">{{ email }}</span>\n        @if (userInfoExtraTemplateRef) {\n          <ng-container [ngTemplateOutlet]=\"userInfoExtraTemplateRef\"></ng-container>\n        }\n      </div>\n      <ui-button\n        *ngIf=\"!isDesktop\"\n        data-testid=\"logout-button\"\n        [tooltip]=\"(translationContext + 'LOG_OUT' | uiTranslate | async)!\"\n        [iconName]=\"'Logout-in-line'\"\n        [applicationTheme]=\"'light'\"\n        [variant]=\"'icon-button'\"\n        (click)=\"logout()\"\n      ></ui-button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;flex-direction:column;height:100%}.mobile-navbar-container{min-width:340px;padding-top:16px;height:100%}.mobile-navbar-container .routes{display:none}.mobile-navbar-container .routes .route{padding:0 16px;width:100%;height:48px;display:flex;justify-content:flex-start;align-items:center;font-size:14px;cursor:pointer}.mobile-navbar-container .routes .route.active{background-color:#f4f4f4;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .routes .route:hover{background-color:#fff2fc;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .routes .route:active{background-color:#ffe6fa}@media (max-width: 600px){.mobile-navbar-container .routes{display:block}}.menu-item{width:100%;height:48px;display:flex;font-size:14px;font-weight:700;font-family:ModernGothic,sans-serif;flex-direction:row;align-items:center;cursor:pointer}.menu-item ::ng-deep ui-button{width:100%}.menu-item ::ng-deep ui-button button{padding-left:16px!important}.menu-item ::ng-deep ui-button button span.icon{margin-right:16px!important}.menu-item ::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}.menu-item ::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}.bottom-content{width:100%;display:flex;align-items:center;flex-direction:column;position:sticky;bottom:0;background:#fff;z-index:1}.bottom-content.desktop{position:relative;border-top:1px #d3d3d3 solid;margin-top:16px;padding:16px 0 8px}.user-info{display:flex;align-items:center;gap:16px;padding:0 16px;margin-top:32px;margin-bottom:16px;width:100%}.user-info.desktop{margin-top:0;margin-bottom:16px}.user-info .details-container{display:flex;justify-content:space-between;width:100%;gap:8px}.user-info .name-container{display:flex;flex-direction:column;width:224px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-info .name-container .user-name{font-weight:700;font-size:14px;line-height:22px;font-family:ModernGothic,sans-serif;white-space:wrap}.user-info .name-container .user-email{width:100%;font-size:14px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: AccordionComponentModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AvatarComponentModule }, { kind: "component", type: i1.AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i2.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MobileNavbarSideSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MobileNavbarSideSheetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-mobile-navbar-side-sheet', imports: [
                         NgForOf,
@@ -253,10 +253,10 @@ class NavbarComponent {
         this.isOpened = isOpened;
         this.menuState.emit({ isOpened, screenSize });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NavbarComponent, deps: [{ token: i1$1.BreakpointObserver }, { token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i2$1.SideSheetService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: NavbarComponent, isStandalone: false, selector: "ui-navbar", inputs: { routes: { classPropertyName: "routes", publicName: "routes", isSignal: false, isRequired: false, transformFunction: null }, activedRoute: { classPropertyName: "activedRoute", publicName: "activedRoute", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: false, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: false, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, contentTemplateRef: { classPropertyName: "contentTemplateRef", publicName: "contentTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, userInfoExtraTemplateRef: { classPropertyName: "userInfoExtraTemplateRef", publicName: "userInfoExtraTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, menuContentTemplateRef: { classPropertyName: "menuContentTemplateRef", publicName: "menuContentTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: false, isRequired: false, transformFunction: null }, isAvatar: { classPropertyName: "isAvatar", publicName: "isAvatar", isSignal: false, isRequired: false, transformFunction: null }, menuClass: { classPropertyName: "menuClass", publicName: "menuClass", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent", menuState: "menuState" }, ngImport: i0, template: "<ui-side-sheet\n  [applicationTheme]=\"applicationTheme\"\n  (openChange)=\"onChangeMenuState($event, screenSize)\"\n  [position]=\"(isMobile$ | async) ? 'start' : 'end'\"\n>\n  <mat-toolbar [attr.theme]=\"applicationTheme\">\n    <div class=\"custom-toolbar row\">\n      <ui-logo\n        [applicationTheme]=\"applicationTheme\"\n        class=\"logo\"\n        (click)=\"navigate('')\"\n        [allowResizing]=\"true\"\n        [width]=\"(isMobile$ | async) ? 160 : (isTablet$ | async) ? 30 : 160\"\n        [type]=\"\n          (isMobile$ | async)\n            ? logoType.DEFAULT\n            : (isTablet$ | async)\n              ? logoType.PRIMARY_BRANDMARK_PINK\n              : logoType.DEFAULT\n        \"\n      ></ui-logo>\n\n      <ui-button\n        (click)=\"openMobileMenu()\"\n        *ngIf=\"isMobile$ | async\"\n        [variant]=\"'text'\"\n        [companyColor]=\"'#242424'\"\n        [applicationTheme]=\"'light'\"\n        [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n        [justIcon]=\"true\"\n      ></ui-button>\n\n      <div class=\"navigation row\">\n        <a\n          *ngFor=\"let route of routes\"\n          (click)=\"navigate(route.id); $event.preventDefault()\"\n          [href]=\"route.id\"\n          [attr.data-testid]=\"route.id\"\n          data-test-role=\"nav-route\"\n          [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n        >\n          <ui-badge\n            *ngIf=\"route?.badgeOptions\"\n            [label]=\"route.badgeOptions!.text\"\n            [rebrandColor]=\"route.badgeOptions!.color\"\n          ></ui-badge>\n          <span>{{ route.title }}</span>\n        </a>\n      </div>\n\n      <div class=\"actions\">\n        <div class=\"custom-actions\">\n          <ng-content select=\"[actions]\"></ng-content>\n        </div>\n\n        <button mat-button class=\"profile-menu\" *ngIf=\"isTablet$ | async; else pc\" (click)=\"openMobileMenu()\">\n          <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n        </button>\n\n        <ng-template #pc>\n          <button\n            mat-button\n            class=\"profile-menu\"\n            [disableRipple]=\"applicationTheme !== 'classic'\"\n            (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n            (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n            [matMenuTriggerFor]=\"menu\"\n          >\n            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n          </button>\n        </ng-template>\n\n        <ng-template #buttonContent>\n          <div class=\"profile-button-content\">\n            <ng-container *ngIf=\"isAvatar; else onlyName\">\n              <ui-avatar\n                data-testid=\"profile-button\"\n                [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n                [applicationTheme]=\"applicationTheme\"\n                [name]=\"userName\"\n                [size]=\"AvatarSize.SMALL_MEDIUM\"\n              ></ui-avatar>\n            </ng-container>\n\n            <ng-template #onlyName>\n              {{ userName }}\n            </ng-template>\n\n            <mat-icon *ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n            <ng-template #newThemeIcon>\n              <ui-icon\n                [size]=\"'24'\"\n                *ngIf=\"!isAvatar\"\n                [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n                [applicationTheme]=\"applicationTheme\"\n              ></ui-icon>\n            </ng-template>\n          </div>\n        </ng-template>\n      </div>\n    </div>\n  </mat-toolbar>\n\n  <ng-content></ng-content>\n\n  <mat-menu [class]=\"menuClass\" #menu=\"matMenu\">\n    <ng-container *ngIf=\"applicationTheme === 'classic'; else newTheme\">\n      <button\n        *ngFor=\"let e of menuItems\"\n        mat-menu-item\n        (click)=\"clickMenuItem(e.id)\"\n        [attr.data-testid]=\"e.id\"\n        data-test-role=\"profile-menu-item\"\n      >\n        <div class=\"menu-item\">\n          <ui-icon *ngIf=\"e?.icon\" [name]=\"e.icon\" size=\"24\"></ui-icon>\n          {{ e.text }}\n        </div>\n      </button>\n\n      <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n        <mat-icon>power_settings_new</mat-icon>\n        {{ translationContext + 'LOG_OUT' | uiTranslate | async }}\n      </button>\n    </ng-container>\n\n    <ng-template #newTheme>\n      <ui-mobile-navbar-side-sheet\n        [isDesktop]=\"true\"\n        [menuItems]=\"menuItems\"\n        [userName]=\"userName\"\n        [routes]=\"routes\"\n        [activedRoute]=\"activedRoute()\"\n        [email]=\"email\"\n        [applicationTheme]=\"applicationTheme\"\n        [contentTemplateRef]=\"contentTemplateRef\"\n        [userInfoExtraTemplateRef]=\"userInfoExtraTemplateRef\"\n        [menuContentTemplateRef]=\"menuContentTemplateRef\"\n        (menuItemClicked)=\"clickMenuItem($event)\"\n        (logoutEvent)=\"logout()\"\n      >\n      </ui-mobile-navbar-side-sheet>\n    </ng-template>\n  </mat-menu>\n</ui-side-sheet>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{height:100%}:host ::ng-deep .side-sheet-container{display:block;height:100%;position:unset!important}:host ::ng-deep .mat-drawer-container{height:100%}:host ::ng-deep .mat-drawer{padding:0!important;background:#fff!important}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header{padding:16px 16px 16px 24px!important;border-bottom:1px solid #d3d3d3;height:64px}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo{width:100%;margin:0!important;display:flex;justify-content:flex-start}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo img{width:fit-content;height:32px}@media (max-width: 1024px) and (min-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px);max-width:375px}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}@media (max-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px)}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff;max-width:1440px;padding:0}@media (max-width: 600px){.mat-toolbar .custom-toolbar{padding:0 16px}}@media (min-width: 1024px) and (max-width: 1280px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (min-width: 960px) and (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (max-width: 960px){.mat-toolbar .custom-toolbar{padding:0 20px!important}}@media (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 64px}}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;height:43px;align-self:center;display:flex;margin-left:0!important}@media (max-width: 1024px){.mat-toolbar .custom-toolbar ui-logo.logo{min-width:22px}}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none}.mat-toolbar .custom-toolbar .navigation a:hover{text-decoration:none}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:7px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar .custom-toolbar .actions .profile-button-content{display:flex;align-items:center;flex-wrap:nowrap}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar{position:relative}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar.opened:after{position:absolute;content:\"\";width:40px;height:40px;left:-2px;top:-2px;z-index:-1;border-radius:100%;background:#f4f4f4}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0;border-bottom:1px solid #d3d3d3}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{justify-content:space-between}@media (min-width: 1280px){.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{padding:0 64px!important}}.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{justify-content:flex-start;margin-left:40px}@media (min-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{min-width:160px}}@media (max-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{margin-left:20px!important}}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] .actions .profile-menu,.mat-toolbar[theme=light] .actions .profile-menu{margin-right:0}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation,.mat-toolbar[theme=light] .navigation{gap:2px}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px;border-bottom:2px solid transparent;position:relative;transition:border-bottom-color .15s ease-in}.mat-toolbar[theme=dark] .navigation a ui-badge,.mat-toolbar[theme=light] .navigation a ui-badge{position:absolute;right:-12px;top:4px;z-index:1}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #d410aa}.mat-toolbar[theme=dark] .navigation a:hover,.mat-toolbar[theme=light] .navigation a:hover{border-top:unset!important;border-bottom:2px solid #242424}@media (max-width: 600px){.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center;margin:0!important}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.custom-actions{display:flex;align-items:center;height:64px}@media (max-width: 1024px){.custom-actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.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: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.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: i8.LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width", "allowResizing"] }, { kind: "component", type: i9.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i1.AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "component", type: i2$1.SideSheetComponent, selector: "ui-side-sheet", inputs: ["position", "applicationTheme"], outputs: ["openChange"] }, { kind: "component", type: i2.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: MobileNavbarSideSheetComponent, selector: "ui-mobile-navbar-side-sheet", inputs: ["routes", "activedRoute", "email", "userName", "menuItems", "contentTemplateRef", "userInfoExtraTemplateRef", "menuContentTemplateRef", "isDesktop", "applicationTheme"], outputs: ["navigateEvent", "menuItemClicked", "logoutEvent"] }, { kind: "component", type: i13.BadgeComponent, selector: "ui-badge", inputs: ["label", "staticLabel", "icon", "color", "variant", "notificationsAmount", "applicationTheme", "rebrandColor", "truncateLabel", "enableAnimation"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i14.UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NavbarComponent, deps: [{ token: i1$1.BreakpointObserver }, { token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i2$1.SideSheetService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: NavbarComponent, isStandalone: false, selector: "ui-navbar", inputs: { routes: { classPropertyName: "routes", publicName: "routes", isSignal: false, isRequired: false, transformFunction: null }, activedRoute: { classPropertyName: "activedRoute", publicName: "activedRoute", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: false, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: false, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, contentTemplateRef: { classPropertyName: "contentTemplateRef", publicName: "contentTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, userInfoExtraTemplateRef: { classPropertyName: "userInfoExtraTemplateRef", publicName: "userInfoExtraTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, menuContentTemplateRef: { classPropertyName: "menuContentTemplateRef", publicName: "menuContentTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: false, isRequired: false, transformFunction: null }, isAvatar: { classPropertyName: "isAvatar", publicName: "isAvatar", isSignal: false, isRequired: false, transformFunction: null }, menuClass: { classPropertyName: "menuClass", publicName: "menuClass", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent", menuState: "menuState" }, ngImport: i0, template: "<ui-side-sheet\n  [applicationTheme]=\"applicationTheme\"\n  (openChange)=\"onChangeMenuState($event, screenSize)\"\n  [position]=\"(isMobile$ | async) ? 'start' : 'end'\"\n>\n  <mat-toolbar [attr.theme]=\"applicationTheme\">\n    <div class=\"custom-toolbar row\">\n      <ui-logo\n        [applicationTheme]=\"applicationTheme\"\n        class=\"logo\"\n        (click)=\"navigate('')\"\n        [allowResizing]=\"true\"\n        [width]=\"(isMobile$ | async) ? 160 : (isTablet$ | async) ? 30 : 160\"\n        [type]=\"\n          (isMobile$ | async)\n            ? logoType.DEFAULT\n            : (isTablet$ | async)\n              ? logoType.PRIMARY_BRANDMARK_PINK\n              : logoType.DEFAULT\n        \"\n      ></ui-logo>\n\n      <ui-button\n        (click)=\"openMobileMenu()\"\n        *ngIf=\"isMobile$ | async\"\n        [variant]=\"'text'\"\n        [companyColor]=\"'#242424'\"\n        [applicationTheme]=\"'light'\"\n        [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n        [justIcon]=\"true\"\n      ></ui-button>\n\n      <div class=\"navigation row\">\n        <a\n          *ngFor=\"let route of routes\"\n          (click)=\"navigate(route.id); $event.preventDefault()\"\n          [href]=\"route.id\"\n          [attr.data-testid]=\"route.id\"\n          data-test-role=\"nav-route\"\n          [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n        >\n          <ui-badge\n            *ngIf=\"route?.badgeOptions\"\n            [label]=\"route.badgeOptions!.text\"\n            [rebrandColor]=\"route.badgeOptions!.color\"\n          ></ui-badge>\n          <span>{{ route.title }}</span>\n        </a>\n      </div>\n\n      <div class=\"actions\">\n        <div class=\"custom-actions\">\n          <ng-content select=\"[actions]\"></ng-content>\n        </div>\n\n        <button mat-button class=\"profile-menu\" *ngIf=\"isTablet$ | async; else pc\" (click)=\"openMobileMenu()\">\n          <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n        </button>\n\n        <ng-template #pc>\n          <button\n            mat-button\n            class=\"profile-menu\"\n            [disableRipple]=\"applicationTheme !== 'classic'\"\n            (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n            (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n            [matMenuTriggerFor]=\"menu\"\n          >\n            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n          </button>\n        </ng-template>\n\n        <ng-template #buttonContent>\n          <div class=\"profile-button-content\">\n            <ng-container *ngIf=\"isAvatar; else onlyName\">\n              <ui-avatar\n                data-testid=\"profile-button\"\n                [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n                [applicationTheme]=\"applicationTheme\"\n                [name]=\"userName\"\n                [size]=\"AvatarSize.SMALL_MEDIUM\"\n              ></ui-avatar>\n            </ng-container>\n\n            <ng-template #onlyName>\n              {{ userName }}\n            </ng-template>\n\n            <mat-icon *ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n            <ng-template #newThemeIcon>\n              <ui-icon\n                [size]=\"'24'\"\n                *ngIf=\"!isAvatar\"\n                [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n                [applicationTheme]=\"applicationTheme\"\n              ></ui-icon>\n            </ng-template>\n          </div>\n        </ng-template>\n      </div>\n    </div>\n  </mat-toolbar>\n\n  <ng-content></ng-content>\n\n  <mat-menu [class]=\"menuClass\" #menu=\"matMenu\">\n    <ng-container *ngIf=\"applicationTheme === 'classic'; else newTheme\">\n      <button\n        *ngFor=\"let e of menuItems\"\n        mat-menu-item\n        (click)=\"clickMenuItem(e.id)\"\n        [attr.data-testid]=\"e.id\"\n        data-test-role=\"profile-menu-item\"\n      >\n        <div class=\"menu-item\">\n          <ui-icon *ngIf=\"e?.icon\" [name]=\"e.icon\" size=\"24\"></ui-icon>\n          {{ e.text }}\n        </div>\n      </button>\n\n      <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n        <mat-icon>power_settings_new</mat-icon>\n        {{ translationContext + 'LOG_OUT' | uiTranslate | async }}\n      </button>\n    </ng-container>\n\n    <ng-template #newTheme>\n      <ui-mobile-navbar-side-sheet\n        [isDesktop]=\"true\"\n        [menuItems]=\"menuItems\"\n        [userName]=\"userName\"\n        [routes]=\"routes\"\n        [activedRoute]=\"activedRoute()\"\n        [email]=\"email\"\n        [applicationTheme]=\"applicationTheme\"\n        [contentTemplateRef]=\"contentTemplateRef\"\n        [userInfoExtraTemplateRef]=\"userInfoExtraTemplateRef\"\n        [menuContentTemplateRef]=\"menuContentTemplateRef\"\n        (menuItemClicked)=\"clickMenuItem($event)\"\n        (logoutEvent)=\"logout()\"\n      >\n      </ui-mobile-navbar-side-sheet>\n    </ng-template>\n  </mat-menu>\n</ui-side-sheet>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{height:100%}:host ::ng-deep .side-sheet-container{display:block;height:100%;position:unset!important}:host ::ng-deep .mat-drawer-container{height:100%}:host ::ng-deep .mat-drawer{padding:0!important;background:#fff!important}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header{padding:16px 16px 16px 24px!important;border-bottom:1px solid #d3d3d3;height:64px}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo{width:100%;margin:0!important;display:flex;justify-content:flex-start}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo img{width:fit-content;height:32px}@media (max-width: 1024px) and (min-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px);max-width:375px}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}@media (max-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px)}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff;max-width:1440px;padding:0}@media (max-width: 600px){.mat-toolbar .custom-toolbar{padding:0 16px}}@media (min-width: 1024px) and (max-width: 1280px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (min-width: 960px) and (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (max-width: 960px){.mat-toolbar .custom-toolbar{padding:0 20px!important}}@media (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 64px}}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;height:43px;align-self:center;display:flex;margin-left:0!important}@media (max-width: 1024px){.mat-toolbar .custom-toolbar ui-logo.logo{min-width:22px}}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none}.mat-toolbar .custom-toolbar .navigation a:hover{text-decoration:none}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:7px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar .custom-toolbar .actions .profile-button-content{display:flex;align-items:center;flex-wrap:nowrap}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar{position:relative}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar.opened:after{position:absolute;content:\"\";width:40px;height:40px;left:-2px;top:-2px;z-index:-1;border-radius:100%;background:#f4f4f4}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0;border-bottom:1px solid #d3d3d3}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{justify-content:space-between}@media (min-width: 1280px){.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{padding:0 64px!important}}.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{justify-content:flex-start;margin-left:40px}@media (min-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{min-width:160px}}@media (max-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{margin-left:20px!important}}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] .actions .profile-menu,.mat-toolbar[theme=light] .actions .profile-menu{margin-right:0}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation,.mat-toolbar[theme=light] .navigation{gap:2px}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px;border-bottom:2px solid transparent;position:relative;transition:border-bottom-color .15s ease-in}.mat-toolbar[theme=dark] .navigation a ui-badge,.mat-toolbar[theme=light] .navigation a ui-badge{position:absolute;right:-12px;top:4px;z-index:1}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #d410aa}.mat-toolbar[theme=dark] .navigation a:hover,.mat-toolbar[theme=light] .navigation a:hover{border-top:unset!important;border-bottom:2px solid #242424}@media (max-width: 600px){.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center;margin:0!important}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.custom-actions{display:flex;align-items:center;height:64px}@media (max-width: 1024px){.custom-actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.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: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.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: i8.LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width", "allowResizing"] }, { kind: "component", type: i9.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i1.AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "component", type: i2$1.SideSheetComponent, selector: "ui-side-sheet", inputs: ["position", "applicationTheme"], outputs: ["openChange"] }, { kind: "component", type: i2.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: MobileNavbarSideSheetComponent, selector: "ui-mobile-navbar-side-sheet", inputs: ["routes", "activedRoute", "email", "userName", "menuItems", "contentTemplateRef", "userInfoExtraTemplateRef", "menuContentTemplateRef", "isDesktop", "applicationTheme"], outputs: ["navigateEvent", "menuItemClicked", "logoutEvent"] }, { kind: "component", type: i13.BadgeComponent, selector: "ui-badge", inputs: ["label", "staticLabel", "icon", "color", "variant", "notificationsAmount", "applicationTheme", "rebrandColor", "truncateLabel", "enableAnimation"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i14.UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ui-side-sheet\n  [applicationTheme]=\"applicationTheme\"\n  (openChange)=\"onChangeMenuState($event, screenSize)\"\n  [position]=\"(isMobile$ | async) ? 'start' : 'end'\"\n>\n  <mat-toolbar [attr.theme]=\"applicationTheme\">\n    <div class=\"custom-toolbar row\">\n      <ui-logo\n        [applicationTheme]=\"applicationTheme\"\n        class=\"logo\"\n        (click)=\"navigate('')\"\n        [allowResizing]=\"true\"\n        [width]=\"(isMobile$ | async) ? 160 : (isTablet$ | async) ? 30 : 160\"\n        [type]=\"\n          (isMobile$ | async)\n            ? logoType.DEFAULT\n            : (isTablet$ | async)\n              ? logoType.PRIMARY_BRANDMARK_PINK\n              : logoType.DEFAULT\n        \"\n      ></ui-logo>\n\n      <ui-button\n        (click)=\"openMobileMenu()\"\n        *ngIf=\"isMobile$ | async\"\n        [variant]=\"'text'\"\n        [companyColor]=\"'#242424'\"\n        [applicationTheme]=\"'light'\"\n        [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n        [justIcon]=\"true\"\n      ></ui-button>\n\n      <div class=\"navigation row\">\n        <a\n          *ngFor=\"let route of routes\"\n          (click)=\"navigate(route.id); $event.preventDefault()\"\n          [href]=\"route.id\"\n          [attr.data-testid]=\"route.id\"\n          data-test-role=\"nav-route\"\n          [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n        >\n          <ui-badge\n            *ngIf=\"route?.badgeOptions\"\n            [label]=\"route.badgeOptions!.text\"\n            [rebrandColor]=\"route.badgeOptions!.color\"\n          ></ui-badge>\n          <span>{{ route.title }}</span>\n        </a>\n      </div>\n\n      <div class=\"actions\">\n        <div class=\"custom-actions\">\n          <ng-content select=\"[actions]\"></ng-content>\n        </div>\n\n        <button mat-button class=\"profile-menu\" *ngIf=\"isTablet$ | async; else pc\" (click)=\"openMobileMenu()\">\n          <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n        </button>\n\n        <ng-template #pc>\n          <button\n            mat-button\n            class=\"profile-menu\"\n            [disableRipple]=\"applicationTheme !== 'classic'\"\n            (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n            (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n            [matMenuTriggerFor]=\"menu\"\n          >\n            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n          </button>\n        </ng-template>\n\n        <ng-template #buttonContent>\n          <div class=\"profile-button-content\">\n            <ng-container *ngIf=\"isAvatar; else onlyName\">\n              <ui-avatar\n                data-testid=\"profile-button\"\n                [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n                [applicationTheme]=\"applicationTheme\"\n                [name]=\"userName\"\n                [size]=\"AvatarSize.SMALL_MEDIUM\"\n              ></ui-avatar>\n            </ng-container>\n\n            <ng-template #onlyName>\n              {{ userName }}\n            </ng-template>\n\n            <mat-icon *ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n            <ng-template #newThemeIcon>\n              <ui-icon\n                [size]=\"'24'\"\n                *ngIf=\"!isAvatar\"\n                [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n                [applicationTheme]=\"applicationTheme\"\n              ></ui-icon>\n            </ng-template>\n          </div>\n        </ng-template>\n      </div>\n    </div>\n  </mat-toolbar>\n\n  <ng-content></ng-content>\n\n  <mat-menu [class]=\"menuClass\" #menu=\"matMenu\">\n    <ng-container *ngIf=\"applicationTheme === 'classic'; else newTheme\">\n      <button\n        *ngFor=\"let e of menuItems\"\n        mat-menu-item\n        (click)=\"clickMenuItem(e.id)\"\n        [attr.data-testid]=\"e.id\"\n        data-test-role=\"profile-menu-item\"\n      >\n        <div class=\"menu-item\">\n          <ui-icon *ngIf=\"e?.icon\" [name]=\"e.icon\" size=\"24\"></ui-icon>\n          {{ e.text }}\n        </div>\n      </button>\n\n      <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n        <mat-icon>power_settings_new</mat-icon>\n        {{ translationContext + 'LOG_OUT' | uiTranslate | async }}\n      </button>\n    </ng-container>\n\n    <ng-template #newTheme>\n      <ui-mobile-navbar-side-sheet\n        [isDesktop]=\"true\"\n        [menuItems]=\"menuItems\"\n        [userName]=\"userName\"\n        [routes]=\"routes\"\n        [activedRoute]=\"activedRoute()\"\n        [email]=\"email\"\n        [applicationTheme]=\"applicationTheme\"\n        [contentTemplateRef]=\"contentTemplateRef\"\n        [userInfoExtraTemplateRef]=\"userInfoExtraTemplateRef\"\n        [menuContentTemplateRef]=\"menuContentTemplateRef\"\n        (menuItemClicked)=\"clickMenuItem($event)\"\n        (logoutEvent)=\"logout()\"\n      >\n      </ui-mobile-navbar-side-sheet>\n    </ng-template>\n  </mat-menu>\n</ui-side-sheet>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{height:100%}:host ::ng-deep .side-sheet-container{display:block;height:100%;position:unset!important}:host ::ng-deep .mat-drawer-container{height:100%}:host ::ng-deep .mat-drawer{padding:0!important;background:#fff!important}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header{padding:16px 16px 16px 24px!important;border-bottom:1px solid #d3d3d3;height:64px}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo{width:100%;margin:0!important;display:flex;justify-content:flex-start}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo img{width:fit-content;height:32px}@media (max-width: 1024px) and (min-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px);max-width:375px}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}@media (max-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px)}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff;max-width:1440px;padding:0}@media (max-width: 600px){.mat-toolbar .custom-toolbar{padding:0 16px}}@media (min-width: 1024px) and (max-width: 1280px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (min-width: 960px) and (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (max-width: 960px){.mat-toolbar .custom-toolbar{padding:0 20px!important}}@media (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 64px}}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;height:43px;align-self:center;display:flex;margin-left:0!important}@media (max-width: 1024px){.mat-toolbar .custom-toolbar ui-logo.logo{min-width:22px}}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none}.mat-toolbar .custom-toolbar .navigation a:hover{text-decoration:none}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:7px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar .custom-toolbar .actions .profile-button-content{display:flex;align-items:center;flex-wrap:nowrap}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar{position:relative}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar.opened:after{position:absolute;content:\"\";width:40px;height:40px;left:-2px;top:-2px;z-index:-1;border-radius:100%;background:#f4f4f4}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0;border-bottom:1px solid #d3d3d3}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{justify-content:space-between}@media (min-width: 1280px){.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{padding:0 64px!important}}.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{justify-content:flex-start;margin-left:40px}@media (min-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{min-width:160px}}@media (max-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{margin-left:20px!important}}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] .actions .profile-menu,.mat-toolbar[theme=light] .actions .profile-menu{margin-right:0}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation,.mat-toolbar[theme=light] .navigation{gap:2px}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px;border-bottom:2px solid transparent;position:relative;transition:border-bottom-color .15s ease-in}.mat-toolbar[theme=dark] .navigation a ui-badge,.mat-toolbar[theme=light] .navigation a ui-badge{position:absolute;right:-12px;top:4px;z-index:1}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #d410aa}.mat-toolbar[theme=dark] .navigation a:hover,.mat-toolbar[theme=light] .navigation a:hover{border-top:unset!important;border-bottom:2px solid #242424}@media (max-width: 600px){.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center;margin:0!important}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.custom-actions{display:flex;align-items:center;height:64px}@media (max-width: 1024px){.custom-actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.BreakpointObserver }, { type: undefined, decorators: [{
@@ -297,8 +297,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }] } });
 class NavbarComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NavbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: NavbarComponentModule, declarations: [NavbarComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NavbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: NavbarComponentModule, declarations: [NavbarComponent], imports: [CommonModule,
             MatToolbarModule,
             MatIconModule,
             MatButtonModule,
@@ -312,7 +312,7 @@ class NavbarComponentModule {
             ButtonComponentModule,
             MobileNavbarSideSheetComponent,
             BadgeComponentModule], exports: [NavbarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NavbarComponentModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NavbarComponentModule, imports: [CommonModule,
             MatToolbarModule,
             MatIconModule,
             MatButtonModule,
@@ -326,7 +326,7 @@ class NavbarComponentModule {
             MobileNavbarSideSheetComponent,
             BadgeComponentModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NavbarComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NavbarComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NavbarComponent],