@tilde-nlp/ngx-menu 8.1.14 → 8.1.16

package/index.d.ts

@@ -6,7 +6,7 @@ import * as i21 from '@tilde-nlp/ngx-common';
 import { PlausibleEvent, IconService, DOMService } from '@tilde-nlp/ngx-common';
 import { StrapiSubscriptionService, StrapiApiConfig, StrapiLinkService, PlaceholderComponentBase, StrapiVariablesService } from '@tilde-nlp/ngx-strapi';
 import * as rxjs from 'rxjs';
-import { Observable, Subscription } from 'rxjs';
+import { Observable, Subscription, Subject } from 'rxjs';
 import * as i12 from '@angular/router';
 import { IsActiveMatchOptions, Router } from '@angular/router';
 import * as _tilde_nlp_ngx_menu from '@tilde-nlp/ngx-menu';
@@ -60,6 +60,7 @@ interface SideNavSettings {
     disableLogoNavigation?: boolean;
     expandableMenuChildren?: boolean;
     useLargeLoginButton?: boolean;
+    openExternalLinksInSameTab?: boolean;
     menuVersion?: MENU_VERSION;
 }
 
@@ -236,11 +237,27 @@ declare class NavBaseComponent implements OnInit, OnDestroy {
     static ɵcmp: i0.ɵɵComponentDeclaration<NavBaseComponent, "nav-base", never, { "direction": { "alias": "direction"; "required": false; }; }, {}, never, never, false, never>;
 }
 
+declare class MenuAccessibilityService {
+    readonly fontSizeLocalStorageKey = "ACCESSIBILITY_FONT_SIZE_IX";
+    readonly contrastLocalStorageKey = "ACCESSIBILITY_CONTRAST";
+    sizeIncreaseSubject: Subject<boolean>;
+    contrastSubject: Subject<string>;
+    saveContrast(contrast: string): void;
+    getSavedContrast(): string;
+    getSavedFontSize(): number;
+    saveFontSize(ix: number): void;
+    setFontSize(fontSizeIx: number): void;
+    setContrast(contrast: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MenuAccessibilityService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MenuAccessibilityService>;
+}
+
 declare class SideNavMenuComponent extends NavBaseComponent implements OnInit, OnDestroy {
     #private;
     strapiLinkService: StrapiLinkService;
     readonly domService: DOMService;
     readonly menuItems: MenuItemsService;
+    readonly accessibility: MenuAccessibilityService;
     get username(): string | undefined;
     set username(value: string | undefined);
     menuSettings: SideNavSettings;
@@ -262,13 +279,16 @@ declare class SideNavMenuComponent extends NavBaseComponent implements OnInit, O
     get menuLogoImage(): string;
     get sideNavWidth(): string | undefined;
     get footerItems(): _tilde_nlp_strapi_models.MenuItem[];
-    constructor(strapiLinkService: StrapiLinkService, domService: DOMService, menuItems: MenuItemsService);
+    isViewIncreased: boolean;
+    isMobileRes: boolean;
+    constructor(strapiLinkService: StrapiLinkService, domService: DOMService, menuItems: MenuItemsService, accessibility: MenuAccessibilityService);
     ngOnInit(): void;
     login(): void;
     logoClick(event: MouseEvent): void;
     toggleCollapse(): void;
     linkCallback(link: UserMenuOptionLink): void;
     changeLanguage(lang: string): void;
+    private watchAccessibilityChanges;
     private getColapsedFromLocalStorage;
     private setColapsedFromLocalStorage;
     static ɵfac: i0.ɵɵFactoryDeclaration<SideNavMenuComponent, never>;
@@ -283,6 +303,7 @@ declare class MenuItemListComponent implements OnInit {
     labelsVisible: boolean;
     activeItem: CustomMenuItem | undefined;
     showIcons: boolean;
+    openExternalLinksInSameTab: boolean;
     expandableMenuChildren: boolean;
     items: CustomMenuItem[];
     menuItemGroup: MenuItemGroupBase;
@@ -297,7 +318,7 @@ declare class MenuItemListComponent implements OnInit {
     toggleExpandEvent(item: CustomMenuItem): void;
     openMenu(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuItemListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MenuItemListComponent, "menu-item-list", never, { "direction": { "alias": "direction"; "required": false; }; "labelsVisible": { "alias": "labelsVisible"; "required": false; }; "activeItem": { "alias": "activeItem"; "required": false; }; "showIcons": { "alias": "showIcons"; "required": false; }; "expandableMenuChildren": { "alias": "expandableMenuChildren"; "required": false; }; "items": { "alias": "items"; "required": false; }; "menuItemGroup": { "alias": "menuItemGroup"; "required": false; }; }, { "openMenuTrigger": "openMenuTrigger"; "toggleExpand": "toggleExpand"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuItemListComponent, "menu-item-list", never, { "direction": { "alias": "direction"; "required": false; }; "labelsVisible": { "alias": "labelsVisible"; "required": false; }; "activeItem": { "alias": "activeItem"; "required": false; }; "showIcons": { "alias": "showIcons"; "required": false; }; "openExternalLinksInSameTab": { "alias": "openExternalLinksInSameTab"; "required": false; }; "expandableMenuChildren": { "alias": "expandableMenuChildren"; "required": false; }; "items": { "alias": "items"; "required": false; }; "menuItemGroup": { "alias": "menuItemGroup"; "required": false; }; }, { "openMenuTrigger": "openMenuTrigger"; "toggleExpand": "toggleExpand"; }, never, never, false, never>;
 }
 
 declare class MenuColumnsComponent implements OnInit {
@@ -307,6 +328,7 @@ declare class MenuColumnsComponent implements OnInit {
     direction: MenuLayoutDirection;
     isOpen: boolean;
     expandableMenuChildren: boolean | undefined;
+    openExternalLinksInSameTab: boolean | undefined;
     toggleCollapseEvent: EventEmitter<any>;
     private _active;
     get active(): ActiveMenuItems;
@@ -319,7 +341,7 @@ declare class MenuColumnsComponent implements OnInit {
     openMenu(): void;
     private toggleOnMobileSelect;
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuColumnsComponent, [null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MenuColumnsComponent, "menu-columns", never, { "direction": { "alias": "direction"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "expandableMenuChildren": { "alias": "expandableMenuChildren"; "required": false; }; "active": { "alias": "active"; "required": false; }; }, { "toggleCollapseEvent": "toggleCollapseEvent"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuColumnsComponent, "menu-columns", never, { "direction": { "alias": "direction"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "expandableMenuChildren": { "alias": "expandableMenuChildren"; "required": false; }; "openExternalLinksInSameTab": { "alias": "openExternalLinksInSameTab"; "required": false; }; "active": { "alias": "active"; "required": false; }; }, { "toggleCollapseEvent": "toggleCollapseEvent"; }, never, never, false, never>;
 }
 
 declare class MenuIconComponent {
@@ -337,6 +359,7 @@ declare class MenuItemLinkComponent implements OnInit, OnDestroy, PlaceholderCom
     labelsVisible: boolean;
     activeItem: CustomMenuItem | undefined;
     showIcons: boolean;
+    openInSameTab: boolean;
     menuItem: CustomMenuItem;
     textWithPlaceholders: string;
     href: string;
@@ -351,7 +374,7 @@ declare class MenuItemLinkComponent implements OnInit, OnDestroy, PlaceholderCom
     updateTextWithPlaceholders: (textWithReplacedPlaceholders: string) => string;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuItemLinkComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MenuItemLinkComponent, "tld-menu-item-link", never, { "direction": { "alias": "direction"; "required": false; }; "labelsVisible": { "alias": "labelsVisible"; "required": false; }; "activeItem": { "alias": "activeItem"; "required": false; }; "showIcons": { "alias": "showIcons"; "required": false; }; "menuItem": { "alias": "menuItem"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuItemLinkComponent, "tld-menu-item-link", never, { "direction": { "alias": "direction"; "required": false; }; "labelsVisible": { "alias": "labelsVisible"; "required": false; }; "activeItem": { "alias": "activeItem"; "required": false; }; "showIcons": { "alias": "showIcons"; "required": false; }; "openInSameTab": { "alias": "openInSameTab"; "required": false; }; "menuItem": { "alias": "menuItem"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 declare class MenuItemBtnComponent {
@@ -402,12 +425,13 @@ declare class MenuItemWithChildrenComponent {
     activeItem: CustomMenuItem | undefined;
     direction: MenuLayoutDirection;
     expandableMenuChildren: boolean;
+    openInSameTab: boolean;
     openMenu: EventEmitter<void>;
     toggleExpand: EventEmitter<CustomMenuItem>;
     toggleMenuExpand(event: MouseEvent, menuItem: CustomMenuItem): void;
     toggleItemExpand(menuItem: CustomMenuItem): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuItemWithChildrenComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MenuItemWithChildrenComponent, "lib-menu-item-with-children", never, { "menuItem": { "alias": "menuItem"; "required": false; }; "labelsVisible": { "alias": "labelsVisible"; "required": false; }; "showIcons": { "alias": "showIcons"; "required": false; }; "menuLayoutDirection": { "alias": "menuLayoutDirection"; "required": false; }; "menuItemLayout": { "alias": "menuItemLayout"; "required": false; }; "activeItem": { "alias": "activeItem"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "expandableMenuChildren": { "alias": "expandableMenuChildren"; "required": false; }; }, { "openMenu": "openMenu"; "toggleExpand": "toggleExpand"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuItemWithChildrenComponent, "lib-menu-item-with-children", never, { "menuItem": { "alias": "menuItem"; "required": false; }; "labelsVisible": { "alias": "labelsVisible"; "required": false; }; "showIcons": { "alias": "showIcons"; "required": false; }; "menuLayoutDirection": { "alias": "menuLayoutDirection"; "required": false; }; "menuItemLayout": { "alias": "menuItemLayout"; "required": false; }; "activeItem": { "alias": "activeItem"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "expandableMenuChildren": { "alias": "expandableMenuChildren"; "required": false; }; "openInSameTab": { "alias": "openInSameTab"; "required": false; }; }, { "openMenu": "openMenu"; "toggleExpand": "toggleExpand"; }, never, never, false, never>;
 }
 
 declare class MenuAccessibilityComponent implements OnInit {
@@ -444,5 +468,5 @@ declare const USER_MENU_OPTIONS: {
     login: (callback: () => void) => UserMenuOption;
 };
 
-export { MENU_ICON_STRAPI_EXTENSION, MENU_SHARED_CONFIG, MENU_VERSION, MenuColumnsComponent, MenuItemsService, MenuLayoutDirection, MenuModule, NavBaseComponent, SideNavMenuComponent, StarpiMenuService, StrapiDataLocation, USER_MENU_OPTIONS };
+export { MENU_ICON_STRAPI_EXTENSION, MENU_SHARED_CONFIG, MENU_VERSION, MenuAccessibilityService, MenuColumnsComponent, MenuItemsService, MenuLayoutDirection, MenuModule, NavBaseComponent, SideNavMenuComponent, StarpiMenuService, StrapiDataLocation, USER_MENU_OPTIONS };
 export type { ActiveMenuItemConfig, ActiveMenuItems, CustomMenuItem, MenuItemGroup, MenuItemGroupBase, MenuSharedConfig, SideNavSettings, UserMenuOption };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tilde-nlp/ngx-menu",
-  "version": "8.1.14",
+  "version": "8.1.16",
   "peerDependencies": {
     "@angular/common": "^20.0.0",
     "@angular/core": "^20.0.0",

package/src/lib/components/menu-accessibility/styles/contrast-themes.scss

@@ -0,0 +1,206 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+$_palettes: (
+	primary: (
+		0: #000000,
+		10: #1b1b1b,
+		20: #303030,
+		25: #3b3b3b,
+		30: #474747,
+		35: #525252,
+		40: #5e5e5e,
+		50: #777777,
+		60: #919191,
+		70: #ababab,
+		80: #c6c6c6,
+		90: #e2e2e2,
+		95: #f1f1f1,
+		98: #f9f9f9,
+		99: #fcfcfc,
+		100: #ffffff,
+	),
+	secondary: (
+		0: #000000,
+		10: #1a1c1c,
+		20: #2f3131,
+		25: #3a3c3c,
+		30: #454747,
+		35: #515353,
+		40: #5d5f5f,
+		50: #767777,
+		60: #909191,
+		70: #aaabab,
+		80: #c6c6c7,
+		90: #e2e2e2,
+		95: #f0f1f1,
+		98: #f9f9f9,
+		99: #fcfcfc,
+		100: #ffffff,
+	),
+	tertiary: (
+		0: #000000,
+		10: #1b1b1b,
+		20: #303030,
+		25: #3b3b3b,
+		30: #474747,
+		35: #525252,
+		40: #5e5e5e,
+		50: #777777,
+		60: #919191,
+		70: #ababab,
+		80: #c6c6c6,
+		90: #e2e2e2,
+		95: #f1f1f1,
+		98: #f9f9f9,
+		99: #fcfcfc,
+		100: #ffffff,
+	),
+	neutral: (
+		0: #000000,
+		10: #1b1b1b,
+		20: #303030,
+		25: #3b3b3b,
+		30: #474747,
+		35: #525252,
+		40: #5e5e5e,
+		50: #777777,
+		60: #919191,
+		70: #ababab,
+		80: #c6c6c6,
+		90: #e2e2e2,
+		95: #f1f1f1,
+		98: #f9f9f9,
+		99: #fcfcfc,
+		100: #ffffff,
+		4: #0e0e0e,
+		6: #131313,
+		12: #1f1f1f,
+		17: #2a2a2a,
+		22: #353535,
+		24: #393939,
+		87: #dadada,
+		92: #e8e8e8,
+		94: #eeeeee,
+		96: #f3f3f3,
+	),
+	neutral-variant: (
+		0: #000000,
+		10: #201a1b,
+		20: #352f30,
+		25: #413a3b,
+		30: #4c4546,
+		35: #585052,
+		40: #645c5e,
+		50: #7e7576,
+		60: #988e90,
+		70: #b3a9aa,
+		80: #cfc4c5,
+		90: #ebe0e1,
+		95: #faeeef,
+		98: #fff8f8,
+		99: #fffbff,
+		100: #ffffff,
+	),
+	error: (
+		0: #000000,
+		10: #410002,
+		20: #690005,
+		25: #7e0007,
+		30: #93000a,
+		35: #a80710,
+		40: #ba1a1a,
+		50: #de3730,
+		60: #ff5449,
+		70: #ff897d,
+		80: #ffb4ab,
+		90: #ffdad6,
+		95: #ffedea,
+		98: #fff8f7,
+		99: #fffbff,
+		100: #ffffff,
+	),
+);
+
+$_rest: (
+	secondary: map.get($_palettes, secondary),
+	neutral: map.get($_palettes, neutral),
+	neutral-variant: map.get($_palettes, neutral-variant),
+	error: map.get($_palettes, error),
+);
+
+$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
+$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);
+
+html.black-white {
+	--base-0: #ffffff !important;
+	--base-10: #f1f1f1 !important;
+	--base-30: #ababab !important;
+	--base-40: #919191 !important;
+	--base-65: #5e5e5e !important;
+	--base-70: #474747 !important;
+	--base-95: #1b1b1b !important;
+	--base-100: #000000 !important;
+	--neutral-50: #847374 !important;
+	--neutral-95: #fbeeee !important;
+	--overlay: #181a1b 70% !important;
+	--primary-accent: #000000 !important;
+	--primary-accent-lighter: #373737 !important;
+	--secondary-accent: #ffffff !important;
+	--info-primary: #0288d1 !important;
+	--info-dark: #014361 !important;
+	--info-light: #e5f6fd !important;
+	--success-dark: #177d61 !important;
+	--success-light: #e1f9f3 !important;
+	--warning-dark: #b25300 !important;
+	--warning-light: #fff1e5 !important;
+	--error-dark: #c42121 !important;
+	--error-light: #fdf2f2 !important;
+	--gradient: #667680 !important;
+	--accent: #000000 !important;
+
+	--mat-menu-item-label-text-color: #000000 !important;
+	--mat-menu-container-color: #e2e2e2 !important;
+
+	@include mat.dialog-overrides(
+		(
+			subhead-color: var(--base-0),
+		)
+	);
+
+	@include mat.tabs-overrides(
+		(
+			inactive-label-text-color: var(--base-0),
+			inactive-hover-label-text-color: var(--base-0),
+		)
+	);
+
+	@include mat.button-overrides((
+		outlined-label-text-color: var(--base-0),
+		outlined-outline-color: var(--base-0)
+  ));
+
+	@include mat.theme(
+		(
+			color: (
+				primary: $primary-palette,
+				tertiary: $tertiary-palette,
+				theme-type: light,
+			),
+		)
+	);
+
+	body {
+		color: var(--base-0) !important;
+		background-color: var(--base-100) !important;
+	}
+
+	textarea, input {
+		background-color: var(--base-100) !important;
+	}
+
+	.mat-mdc-outlined-button.mat-accent {
+		color: var(--base-0) !important;
+		border-color: var(--base-0) !important;
+	}
+}