@skysoftware-co/bayan-core-widgets-ui 0.0.22 → 0.0.24

package/README.md

@@ -1,24 +1,71 @@
 # @skysoftware-co/bayan-core-widgets-ui
 
-Reusable Angular widgets for Bayan top-menu scenarios.
+Reusable Angular widgets for Bayan portals — top menu, side menu, and shared services.
+
+## Installation
+
+```bash
+npm install @skysoftware-co/bayan-core-widgets-ui
+```
 
 ## Package Surface
 
-This package currently exports:
+This package exports:
 
-- `BayanCoreTopMenuWidgetComponent`
-- `BayanCoreTopMenuService`
-- shared DTOs from `menu.dtos`
+- `BayanCoreTopMenuWidgetComponent` — full horizontal top bar
+- `BayanCoreSideMenuWidgetComponent` — collapsible vertical side navigation
+- `BayanCoreTopMenuService` — API service for menu/search data
+- `BayanCoreTranslatePipe` / `BayanCoreTranslateService` — built-in i18n
+- Shared DTOs from `menu.dtos`
+- Internal child widgets (see below) for advanced composition
 
-The child widgets are documented below because they make up the top-menu contract, but they are currently intended for internal composition rather than direct package consumption.
+---
 
-## Installation
+## Top Menu Widget
 
-```bash
-npm install @skysoftware-co/bayan-core-widgets-ui
-```
+Selector: `bayan-core-top-menu-widget`
 
-## Basic Usage
+### Inputs
+
+| Name | Type | Default | Description |
+|---|---|---|---|
+| `baseUrl` | `string` | `''` | Base URL for all API calls. |
+| `systemModule` | `SystemModule \| null` | `null` | Current system module context. |
+| `sidebarCollapsed` | `boolean` | `false` | Switches the brand logo to its collapsed state. |
+| `homeUrl` | `string \| null` | `null` | Navigation target when the logo is clicked. |
+| `logoUrl` | `string` | Bayan CDN URL | Expanded logo source. |
+| `collapsedLogoUrl` | `string` | Bayan CDN URL | Collapsed logo source. |
+| `isSsoLogin` | `boolean` | `false` | Hides sign-out when true. |
+| `showGlobalSearch` | `boolean` | `true` | Shows the global search widget. |
+| `showUserPanel` | `boolean` | `true` | Shows the user panel (employee + property switcher). |
+| `showSettings` | `boolean` | `true` | Shows the settings dropdown. |
+| `showShortcutMenus` | `boolean` | `true` | Shows shortcut navigation items loaded from the API. |
+| `showNotifications` | `boolean` | `true` | Shows the notifications bell. |
+| `notificationsTitle` | `string` | `'Notifications'` | Notification icon title / translation key. |
+| `showHelp` | `boolean` | `true` | Shows the help icon link. |
+| `helpTitle` | `string` | `'Help'` | Help icon title / translation key. |
+| `helpUrl` | `string \| null` | Bayan docs URL | Help navigation target. |
+| `helpIcon` | `IconDefinition` | `faQuestionCircle` | Help icon (FontAwesome). |
+| `helpAnchorClass` | `string` | `'menu-icon-btn'` | CSS classes for the help anchor. |
+| `helpUrlTarget` | `'_self' \| '_blank' \| string` | `'_blank'` | Anchor target for help. |
+| `licenseUrl` | `string` | `''` | URL passed to the About dialog license button. |
+| `releaseNotesUrl` | `string` | `''` | URL passed to the About dialog release-notes button. |
+| `supportUrl` | `string` | `'https://skyits.com/contact'` | URL passed to the About dialog support button. |
+
+### Outputs
+
+| Name | Type | Description |
+|---|---|---|
+| `logoClick` | `EventEmitter<void>` | Fired when the logo is clicked (only when `homeUrl` is null). |
+| `helpClick` | `EventEmitter<void>` | Fired when help is clicked (only when `helpUrl` is null). |
+| `menuItemClick` | `EventEmitter<TopMenuShortcut>` | Fired when a shortcut menu leaf item is activated. |
+| `searchSubmit` | `EventEmitter<string>` | Fired when free-text search is submitted. |
+| `propertyChanged` | `EventEmitter<PropertyOption>` | Fired when the active property changes in the user panel. |
+| `signOutClick` | `EventEmitter<void>` | Fired when sign out is requested. |
+| `alternateNamesChange` | `EventEmitter<boolean>` | Fired when alternate names toggle changes. |
+| `employeeNameModeChange` | `EventEmitter<EmployeeNamesModeOption>` | Fired when the employee name mode is changed. |
+
+### Usage Example
 
 ```html
 <bayan-core-top-menu-widget
@@ -28,495 +75,264 @@ npm install @skysoftware-co/bayan-core-widgets-ui
   [homeUrl]="homeUrl"
   [logoUrl]="logoUrl"
   [collapsedLogoUrl]="collapsedLogoUrl"
-  [menuItems]="menuItems"
-  [searchItems]="searchItems"
-  [nameModeItems]="nameModeItems"
   [showGlobalSearch]="true"
   [showUserPanel]="true"
   [showSettings]="true"
+  [showShortcutMenus]="true"
   [showNotifications]="true"
   [showHelp]="true"
-  [useInternalDialogs]="true"
-  [aboutDialog]="aboutDialog"
-  [changePasswordDialog]="changePasswordDialog"
-  (menuItemClick)="onMenuItemClick($event)"
-  (searchSubmit)="onSearchSubmit($event)"
-  (searchItemNavigate)="onSearchItemNavigate($event)"
   (propertyChanged)="onPropertyChange($event)"
   (signOutClick)="onSignOut()"
-  (submitPasswordChange)="onSubmitPasswordChange($event)">
+  (menuItemClick)="onMenuItemClick($event)"
+  (searchSubmit)="onSearchSubmit($event)">
 </bayan-core-top-menu-widget>
 ```
 
-## Models
-
-```ts
-interface TopMenuWidgetItem {
-  id?: string | number;
-  menuName: string;
-  menuUrl?: string | null;
-  children?: TopMenuWidgetItem[];
-}
-
-interface TopMenuWidgetSearchItem {
-  id?: string | number;
-  menuTitle: string;
-  menuSubTitle: string;
-  menuUrl?: string | null;
-  iconClass?: string | null;
-  isTranslatable?: boolean;
-}
-
-interface TopMenuWidgetNameModeItem {
-  id: string;
-  text: string;
-  selected: boolean;
-}
+---
 
-interface TopMenuWidgetAboutDialogConfig {
-  title?: string;
-  logoUrl?: string;
-  version?: string;
-  versionLabel?: string;
-  copyright?: string;
-  statusLabel?: string;
-  licenseButtonLabel?: string;
-  releaseNotesButtonLabel?: string;
-  supportButtonLabel?: string;
-  closeButtonLabel?: string;
-}
+## Side Menu Widget
 
-interface TopMenuWidgetChangePasswordDialogConfig {
-  title: string;
-  currentPasswordLabel: string;
-  newPasswordLabel: string;
-  confirmNewPasswordLabel: string;
-  primaryButtonText: string;
-}
+Selector: `bayan-core-side-menu-widget`
 
-interface TopMenuWidgetChangePasswordPayload {
-  currentPassword: string;
-  newPassword: string;
-  confirmNewPassword: string;
-}
-```
-
-## Top Menu Widget
-
-Selector: `bayan-core-top-menu-widget`
+Loads side navigation from the API and renders a collapsible tree. Reacts automatically when `activePropertyId` or `ActivePropertyChanged` changes.
 
 ### Inputs
 
 | Name | Type | Default | Description |
 |---|---|---|---|
-| `baseUrl` | `string` | `''` | Base URL used to resolve internal and external navigation targets. |
-| `systemModule` | `SystemModule \| null` | `null` | Current system module context. |
-| `sidebarCollapsed` | `boolean` | `false` | Switches the brand area to the collapsed logo state. |
-| `homeUrl` | `string \| null` | `null` | Brand navigation target. |
-| `logoUrl` | `string` | Bayan CDN URL | Expanded logo source. |
-| `collapsedLogoUrl` | `string` | Bayan CDN URL | Collapsed logo source. |
-| `searchPlaceholder` | `string` | `'TopMenu.SearchPlaceholder'` | Search placeholder text or translation key. |
-| `menuItems` | `TopMenuWidgetItem[]` | `[]` | Top-level navigation items. |
-| `searchItems` | `TopMenuWidgetSearchItem[]` | `[]` | Autocomplete items for global search. |
-| `isSsoLogin` | `boolean` | `false` | Fallback SSO flag when the user panel does not provide one. |
-| `useAlternateNames` | `boolean` | `false` | Enables alternate-names behavior in settings. |
-| `displayAlternateNames` | `boolean` | `false` | Marks alternate names as active. |
-| `hrBlocked` | `boolean` | `false` | Current HR block state. |
-| `hrCanBlock` | `boolean` | `false` | Enables HR block and release actions. |
-| `tkBlocked` | `boolean` | `false` | Current Timekeeping block state. |
-| `tkCanBlock` | `boolean` | `false` | Enables Timekeeping block and release actions. |
-| `employeeNamesMode` | `AppFramePreferences` |  | Name display mode option from preferences. |
-| `settingsEnabled` | `boolean` | `true` | Enables settings interactions. |
-| `useInternalDialogs` | `boolean` | `false` | Shows built-in About and Change Password dialogs. |
-| `changePasswordLoading` | `boolean` | `false` | Loading state for the built-in Change Password dialog. |
-| `changePasswordDialog` | `TopMenuWidgetChangePasswordDialogConfig` | default labels | Built-in Change Password dialog labels. |
-| `aboutDialog` | `TopMenuWidgetAboutDialogConfig` | default labels | Built-in About dialog content and labels. |
-| `showGlobalSearch` | `boolean` | `false` | Shows the global search widget. |
-| `showUserPanel` | `boolean` | `false` | Shows the user panel widget. |
-| `showSettings` | `boolean` | `false` | Shows the settings widget. |
-| `showNotifications` | `boolean` | `true` | Shows the notifications widget. |
-| `notificationsTitle` | `string` | `'Notifications'` | Notification link title text or translation key. |
-| `showHelp` | `boolean` | `true` | Shows the help action. |
-| `helpTitle` | `string` | `'Help'` | Help link title text or translation key. |
-| `helpUrl` | `string \| null` | `null` | Help navigation target. |
-| `helpIcon` | `IconDefinition` | `faQuestionCircle` | Help icon. |
-| `helpAnchorClass` | `string` | `'menu-icon-btn top-menu-widget__help-link'` | CSS classes for the help anchor. |
-| `helpUrlTarget` | `'_self' \| '_blank' \| string` | `'_blank'` | Anchor target for the help action. |
+| `baseUrl` | `string` | `''` | Base URL for API calls. |
+| `systemModule` | `SystemModule \| null` | `null` | Current system module — used to scope menu loading. |
+| `activePropertyId` | `number` | `0` | Active property ID. Menu reloads when this changes. |
+| `ActivePropertyChanged` | `boolean` | `false` | Toggle this flag (flip true/false) when the property changes to force a menu reload. Pair with `BayanCoreConfigService` to read the new property ID. |
+| `collapsed` | `boolean` | `false` | Collapsed sidebar state. |
+| `logoUrl` | `string` | Bayan CDN URL | Logo shown in expanded state. |
+| `collapsedLogoUrl` | `string` | Bayan CDN URL | Logo shown in collapsed state. |
+| `showFooter` | `boolean` | `true` | Shows/hides the sidebar footer (copyright, Terms, Privacy, toggle button). |
 
 ### Outputs
 
 | Name | Type | Description |
 |---|---|---|
-| `logoClick` | `EventEmitter<void>` | Fired when the brand link is clicked. |
-| `helpClick` | `EventEmitter<void>` | Fired when the help action is clicked. |
-| `menuItemClick` | `EventEmitter<TopMenuWidgetItem>` | Fired when a leaf menu item is activated. |
-| `searchSubmit` | `EventEmitter<string>` | Fired when free-text search is submitted. |
-| `searchItemNavigate` | `EventEmitter<TopMenuWidgetSearchItem>` | Fired when an autocomplete result is chosen. |
-| `propertyChanged` | `EventEmitter<PropertyOption>` | Fired when the active property changes. |
-| `signOutClick` | `EventEmitter<void>` | Fired when sign out is requested. |
-| `alternateNamesChange` | `EventEmitter<void>` | Fired when alternate names are toggled. |
-| `nameModeChange` | `EventEmitter<number>` | Fired when a name mode item is selected. |
-| `blockHrClick` | `EventEmitter<void>` | Fired when HR block is requested. |
-| `releaseHrClick` | `EventEmitter<void>` | Fired when HR release is requested. |
-| `blockTkClick` | `EventEmitter<void>` | Fired when Timekeeping block is requested. |
-| `releaseTkClick` | `EventEmitter<void>` | Fired when Timekeeping release is requested. |
-| `changePasswordClick` | `EventEmitter<void>` | Fired when Change Password is requested from settings. |
-| `openAboutClick` | `EventEmitter<void>` | Fired when About is requested from settings. |
-| `aboutLicenseClick` | `EventEmitter<void>` | Fired when the About dialog license action is clicked. |
-| `aboutReleaseNotesClick` | `EventEmitter<void>` | Fired when the About dialog release-notes action is clicked. |
-| `aboutSupportClick` | `EventEmitter<void>` | Fired when the About dialog support action is clicked. |
-| `submitPasswordChange` | `EventEmitter<TopMenuWidgetChangePasswordPayload>` | Fired when the built-in Change Password dialog is submitted. |
+| `collapsedChange` | `EventEmitter<boolean>` | Fired when the sidebar toggle is clicked. Use with `[(collapsed)]`. |
+| `itemClick` | `EventEmitter<SystemMenu>` | Fired when a menu item is activated. |
 
-## Internal Composition Widgets
+### Connecting Top Menu Property Changes to Side Menu
 
-These widgets are used by the top-menu component and are documented here so the full contract is visible.
+When the user switches property in the top menu, pass `ActivePropertyChanged` to the side menu so it reloads:
 
-### Global Search Widget
+```ts
+// In your component
+activePropertyId = 0;
+activePropertyChanged = false;
 
-Selector: `bayan-core-global-search-widget`
+onPropertyChange(property: PropertyOption) {
+  this.activePropertyId = property.PropertyId;
+  this.activePropertyChanged = !this.activePropertyChanged; // toggle to trigger reload
+}
+```
 
-Inputs:
+```html
+<bayan-core-top-menu-widget
+  ...
+  (propertyChanged)="onPropertyChange($event)">
+</bayan-core-top-menu-widget>
 
-| Name | Type | Default | Description |
-|---|---|---|---|
-| `baseUrl` | `string` | `''` | Base URL used to resolve selected item URLs. |
-| `ActivePropertyChanged` | `boolean` | `false` | Boolean change token used to reset the search input after a property switch. |
-| `placeholder` | `string` | `'TopMenu.SearchPlaceholder'` | Placeholder text or translation key. |
-| `dataSource` | `TopMenuWidgetSearchItem[]` | `[]` | Search results shown in the autocomplete. |
+<bayan-core-side-menu-widget
+  [baseUrl]="appBaseUrl"
+  [systemModule]="systemModule"
+  [activePropertyId]="activePropertyId"
+  [ActivePropertyChanged]="activePropertyChanged"
+  [(collapsed)]="sidebarCollapsed"
+  (itemClick)="onMenuItemClick($event)">
+</bayan-core-side-menu-widget>
+```
 
-Outputs:
+Alternatively, inject `BayanCoreConfigService` in your service layer to read the current property ID reactively:
 
-| Name | Type | Description |
-|---|---|---|
-| `search` | `EventEmitter<string>` | Fired when the user submits free-text search with Enter. |
-| `itemNavigate` | `EventEmitter<TopMenuWidgetSearchItem>` | Fired when the user selects a result item. |
+```ts
+import { BayanCoreConfigService } from '@skysoftware-co/bayan-core-widgets-ui';
 
-### Item Widget
+constructor(private propertyState: BayanCoreConfigService) {
+  this.propertyState.getActivePropertyId$().subscribe(id => {
+    this.activePropertyId = id;
+  });
+}
+```
 
-Selector: `bayan-core-item-widget`
+### Usage Example (with footer hidden)
+
+```html
+<bayan-core-side-menu-widget
+  [baseUrl]="appBaseUrl"
+  [systemModule]="systemModule"
+  [activePropertyId]="activePropertyId"
+  [ActivePropertyChanged]="activePropertyChanged"
+  [showFooter]="false"
+  [(collapsed)]="sidebarCollapsed"
+  (itemClick)="onMenuItemClick($event)">
+</bayan-core-side-menu-widget>
+```
 
-Inputs:
+---
 
-| Name | Type | Default | Description |
-|---|---|---|---|
-| `baseUrl` | `string` | `''` | Base URL used to resolve item URLs. |
-| `ActivePropertyChanged` | `boolean` | `false` | Boolean change token used to close open menu branches after a property switch. |
-| `item` | `TopMenuWidgetItem` | required | Menu item to render. |
+## Child Widgets (Internal Composition)
 
-Outputs:
+These are exported for advanced scenarios but are composed automatically by the top-menu and side-menu widgets.
 
-| Name | Type | Description |
+### BayanCoreItemWidgetComponent
+
+Selector: `bayan-core-item-widget`
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `baseUrl` | `string` | `''` | Base URL. |
+| `ActivePropertyChanged` | `boolean` | `false` | Toggle to reset open dropdowns on property switch. |
+| `item` | `TopMenuShortcut` | required | Menu item to render. |
+| `navItemClass` | `string` | `'nav-item'` | CSS class for `<li>`. |
+| `navLinkClass` | `string` | `'nav-link'` | CSS class for leaf `<a>`. |
+| `dropdownClass` | `string` | `'nav-item dropdown'` | CSS class for dropdown `<li>`. |
+| `dropdownOpenClass` | `string` | `'open'` | CSS class added when dropdown is open. |
+| `dropdownToggleClass` | `string` | `'nav-link dropdown-toggle'` | CSS class for the dropdown toggle `<a>`. |
+| `caretClass` | `string` | `'caret'` | CSS class for the caret `<span>`. |
+| `dropdownMenuClass` | `string` | `'dropdown-menu menu-dropdown-panel'` | CSS class for the dropdown `<ul>`. |
+
+| Output | Type | Description |
 |---|---|---|
-| `itemClick` | `EventEmitter<TopMenuWidgetItem>` | Fired when a leaf menu item is activated. |
+| `itemClick` | `EventEmitter<TopMenuShortcut>` | Fired when a leaf item is clicked. |
 
-### Notifications Widget
+---
 
-Selector: `bayan-core-notifications-widget`
+### BayanCoreUserPanelWidgetComponent
 
-Inputs:
+Selector: `bayan-core-user-panel-widget`
 
-| Name | Type | Default | Description |
+| Input | Type | Default | Description |
 |---|---|---|---|
-| `baseUrl` | `string` | `''` | Base URL used to load the notifications summary and resolve its navigation URL. |
-| `title` | `string` | `'Notifications'` | Link title text or translation key. |
-| `wrapperClass` | `string` | `'notifications-icon-wrap menu-dropdown-host'` | Wrapper CSS classes. |
-| `linkClass` | `string` | `'menu-icon-btn cursor-pointer top-menu-widget__notification-btn'` | Anchor CSS classes. |
-| `iconClass` | `string` | `'fs-6'` | Bell icon CSS classes. |
-| `badgeClass` | `string` | `'top-menu-widget__notification-badge'` | Badge CSS classes. |
+| `baseUrl` | `string` | `''` | Base URL for user panel API. |
+| `showSignOutIcon` | `boolean` | `true` | Shows/hides the sign-out icon. |
 
-Outputs: none.
+| Output | Type | Description |
+|---|---|---|
+| `propertyChanged` | `EventEmitter<PropertyOption>` | Fired after property switch succeeds. |
+| `signOutClick` | `EventEmitter<void>` | Fired when sign out is requested. |
 
-### Settings Widget
+---
+
+### BayanCoreSettingsWidgetComponent
 
 Selector: `bayan-core-settings-widget`
 
-Inputs:
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `baseUrl` | `string` | `''` | Base URL. |
+| `ActivePropertyChanged` | `boolean` | `false` | Closes the settings menu on property switch. |
+| `systemModule` | `SystemModule \| null` | `null` | Module context for settings. |
+| `licenseUrl` | `string` | `''` | License URL shown in the About dialog. |
+| `releaseNotesUrl` | `string` | `''` | Release notes URL. |
+| `supportUrl` | `string` | `''` | Support URL. |
+
+| Output | Type | Description |
+|---|---|---|
+| `alternateNamesChange` | `EventEmitter<boolean>` | Fired when alternate names toggle changes. |
+| `employeeNameModeChange` | `EventEmitter<EmployeeNamesModeOption>` | Fired when name mode changes. |
 
-| Name | Type | Default | Description |
+---
+
+### BayanCoreGlobalSearchWidgetComponent
+
+Selector: `bayan-core-global-search-widget`
+
+| Input | Type | Default | Description |
 |---|---|---|---|
-| `ActivePropertyChanged` | `boolean` | `false` | Boolean change token used to close the settings menu after a property switch. |
-| `useAlternateNames` | `boolean` | `false` | Enables alternate names behavior. |
-| `displayAlternateNames` | `boolean` | `false` | Marks alternate names as active. |
-| `hrBlocked` | `boolean` | `false` | Current HR block state. |
-| `hrCanBlock` | `boolean` | `false` | Enables HR block and release actions. |
-| `tkBlocked` | `boolean` | `false` | Current Timekeeping block state. |
-| `tkCanBlock` | `boolean` | `false` | Enables Timekeeping block and release actions. |
-| `employeeNamesMode` | `AppFramePreferences` |  | Name mode option from preferences. |
-| `settingsEnabled` | `boolean` | `true` | Enables settings interactions. |
-
-Outputs:
+| `baseUrl` | `string` | `''` | Base URL. |
+| `ActivePropertyChanged` | `boolean` | `false` | Resets the search input on property switch. |
+| `dataSource` | `GlobalSearchMenu[]` | `[]` | Search results for the autocomplete. |
 
-| Name | Type | Description |
+| Output | Type | Description |
 |---|---|---|
-| `alternateNamesChange` | `EventEmitter<void>` | Fired when alternate names are toggled. |
-| `nameModeChange` | `EventEmitter<number>` | Fired when a name mode item is selected. |
-| `blockHrClick` | `EventEmitter<void>` | Fired when HR block is requested. |
-| `releaseHrClick` | `EventEmitter<void>` | Fired when HR release is requested. |
-| `blockTkClick` | `EventEmitter<void>` | Fired when Timekeeping block is requested. |
-| `releaseTkClick` | `EventEmitter<void>` | Fired when Timekeeping release is requested. |
-| `changePasswordClick` | `EventEmitter<void>` | Fired when Change Password is requested. |
-| `openAboutClick` | `EventEmitter<void>` | Fired when About is requested. |
+| `search` | `EventEmitter<string>` | Fired on free-text search submit. |
 
-### User Panel Widget
+---
 
-Selector: `bayan-core-user-panel-widget`
+### BayanCoreNotificationsWidgetComponent
 
-Inputs:
+Selector: `bayan-core-notifications-widget`
 
-| Name | Type | Default | Description |
+| Input | Type | Default | Description |
 |---|---|---|---|
-| `baseUrl` | `string` | `''` | Base URL used to load the current user panel and to switch the active property. |
-| `wrapperClass` | `string` | `'menu-dropdown-host'` | Wrapper CSS classes. |
-| `dropdownOpenClass` | `string` | `'open'` | CSS class added while the dropdown is open. |
-| `toggleButtonClass` | `string` | `'employee-toggle'` | Toggle button CSS classes. |
-| `employeeInfoClass` | `string` | `'employee-info'` | Employee info wrapper CSS classes. |
-| `userNameClass` | `string` | `'user-name'` | User name text CSS classes. |
-| `propertyNameClass` | `string` | `'property-name'` | Active property text CSS classes. |
-| `caretClass` | `string` | `'employee-caret'` | Caret CSS classes. |
-| `menuClass` | `string` | `'employee-menu menu-dropdown-panel'` | Dropdown menu CSS classes. |
-| `sectionLabelClass` | `string` | `'menu-section-label'` | Section label CSS classes. |
-| `menuItemClass` | `string` | `'menu-item'` | Property row CSS classes. |
-| `menuItemActiveClass` | `string` | `'menu-item-active'` | Active property CSS class. |
-| `indicatorClass` | `string` | `'menu-indicator'` | Selection indicator CSS classes. |
-| `invisibleIndicatorClass` | `string` | `'invisible'` | Hidden indicator CSS class. |
-| `dividerClass` | `string` | `'menu-divider'` | Divider CSS classes. |
-| `signOutButtonClass` | `string` | `'menu-item menu-item-signout'` | Sign-out button CSS classes. |
-| `showSignOutIcon` | `boolean` | `true` | Shows or hides the sign-out icon. |
-| `signOutIconClass` | `string` | `'mx-2'` | Sign-out icon CSS classes. |
-
-Outputs:
+| `baseUrl` | `string` | `''` | Base URL for notifications API. |
+| `title` | `string` | `'Notifications'` | Icon title / translation key. |
 
-| Name | Type | Description |
-|---|---|---|
-| `propertyChanged` | `EventEmitter<PropertyOption>` | Fired after `switchProperty` succeeds and the widget refetches the user panel. |
-| `signOutClick` | `EventEmitter<void>` | Fired when sign out is requested. |
+---
 
-### Change Password Widget
+### BayanCoreChangePasswordWidgetComponent
 
 Selector: `bayan-core-change-password-widget`
 
-Inputs:
-
-| Name | Type | Default | Description |
+| Input | Type | Default | Description |
 |---|---|---|---|
-| `baseUrl` | `string` | `''` | Reserved for dialog-level extensibility. |
+| `baseUrl` | `string` | `''` | Base URL. |
 | `visible` | `boolean` | `false` | Controls popup visibility. |
-| `config` | `TopMenuWidgetChangePasswordDialogConfig` | required | Dialog labels and title. |
-| `isSubmitting` | `boolean` | `false` | Disables editing while submission is in progress. |
 
-Outputs:
-
-| Name | Type | Description |
+| Output | Type | Description |
 |---|---|---|
-| `visibleChange` | `EventEmitter<boolean>` | Fired when the dialog requests a visibility change. |
-| `submitPasswordChange` | `EventEmitter<TopMenuWidgetChangePasswordPayload>` | Fired with the form payload when save succeeds validation. |
+| `visibleChange` | `EventEmitter<boolean>` | Two-way binding support for `[(visible)]`. |
 
-### About Dialog Widget
+---
 
-Selector: `bayan-core-about-dialog-widget`
+### BayanCoreAboutDialogWidgetComponent
 
-Inputs:
+Selector: `bayan-core-about-dialog-widget`
 
-| Name | Type | Default | Description |
+| Input | Type | Default | Description |
 |---|---|---|---|
-| `baseUrl` | `string` | `''` | Reserved for dialog-level extensibility. |
+| `baseUrl` | `string` | `''` | Base URL. |
 | `visible` | `boolean` | `false` | Controls dialog visibility. |
-| `config` | `TopMenuWidgetAboutDialogConfig` | required | Dialog content and action labels. |
+| `licenseUrl` | `string` | `''` | License button URL. |
+| `releaseNotesUrl` | `string` | `''` | Release notes button URL. |
+| `supportUrl` | `string` | `''` | Support button URL. |
 
-Outputs:
-
-| Name | Type | Description |
+| Output | Type | Description |
 |---|---|---|
-| `visibleChange` | `EventEmitter<boolean>` | Fired when the dialog requests to close. |
-| `licenseClick` | `EventEmitter<void>` | Fired when the license action is clicked. |
-| `releaseNotesClick` | `EventEmitter<void>` | Fired when the release-notes action is clicked. |
-| `supportClick` | `EventEmitter<void>` | Fired when the support action is clicked. |
-
-## Widget API Reference
-
-### BayanCoreTopMenuWidgetComponent
-**Inputs:**
-- `baseUrl: string`
-- `systemModule: SystemModule | null`
-- `sidebarCollapsed: boolean`
-- `homeUrl: string | null`
-- `logoUrl: string`
-- `collapsedLogoUrl: string`
-- `isSsoLogin: boolean`
-- `showGlobalSearch: boolean`
-- `showUserPanel: boolean`
-- `showSettings: boolean`
-- `ShowShourtcutMenus: boolean`
-- `showNotifications: boolean`
-- `notificationsTitle: string`
-- `showHelp: boolean`
-- `helpTitle: string`
-- `helpUrl: string | null`
-- `helpIcon: IconDefinition`
-- `helpAnchorClass: string`
-- `helpUrlTarget: '_self' | '_blank' | string`
-- `licenseUrl: string`
-- `releaseNotesUrl: string`
-- `supportUrl: string`
-
-**Outputs:**
-- `logoClick: EventEmitter<void>`
-- `helpClick: EventEmitter<void>`
-- `menuItemClick: EventEmitter<TopMenuShortcut>`
-- `searchSubmit: EventEmitter<string>`
-- `propertyChanged: EventEmitter<PropertyOption>`
-- `signOutClick: EventEmitter<void>`
-- `alternateNamesChange: EventEmitter<boolean>`
-- `employeeNameModeChange: EventEmitter<EmployeeNamesModeOption>`
+| `visibleChange` | `EventEmitter<boolean>` | Two-way binding support for `[(visible)]`. |
 
 ---
 
-### BayanCoreSettingsWidgetComponent
-**Inputs:**
-- `baseUrl: string`
-- `licenseUrl: string`
-- `releaseNotesUrl: string`
-- `supportUrl: string`
-- `ActivePropertyChanged: boolean`
-- `checkIcon: any`
-- `cogIcon: any`
-- `infoIcon: any`
-- `dropdownOpen: Signal<boolean>`
-- `dropdownHostClass: string`
-- `toggleBtnClass: string`
-- `menuPanelClass: string`
-- `sectionLabelClass: string`
-- `menuRowClass: string`
-- `dividerClass: string`
-- `indicatorClass: string`
-- `indicatorActiveClass: string`
-- `indicatorInvisibleClass: string`
-- `alternateNamesLinkClass: string`
-
-**Outputs:**
-- `alternateNamesChange: EventEmitter<boolean>`
-- `nameModeChange: EventEmitter<EmployeeNamesModeOption>`
-
----
+## Shared Services
 
-### BayanCoreAboutDialogWidgetComponent
-**Inputs:**
-- `baseUrl: string`
-- `visible: boolean`
-- `config: TopMenuWidgetAboutDialogConfig`
-- `licenseUrl: string`
-- `releaseNotesUrl: string`
-- `supportUrl: string`
-- `backdropClass: string`
-- `modalClass: string`
-- `headerClass: string`
-- `titleClass: string`
-- `closeBtnClass: string`
-- `bodyClass: string`
-- `logoClass: string`
-- `productNameClass: string`
-- `versionTextClass: string`
-- `upToDateClass: string`
-- `copyrightClass: string`
-- `actionsClass: string`
-- `actionBtnClass: string`
-
-**Outputs:**
-- `visibleChange: EventEmitter<boolean>`
-- `licenseClick: EventEmitter<void>`
-- `releaseNotesClick: EventEmitter<void>`
-- `supportClick: EventEmitter<void>`
+### BayanCoreConfigService
 
----
+A singleton service (`providedIn: 'root'`) for sharing the active property ID across widgets without explicit prop-drilling.
 
-### BayanCoreChangePasswordWidgetComponent
-**Inputs:**
-- `baseUrl: string`
-- `visible: boolean`
-- `config: TopMenuWidgetChangePasswordDialogConfig`
-- `isSubmitting: boolean`
+```ts
+import { BayanCoreConfigService } from '@skysoftware-co/bayan-core-widgets-ui';
 
-**Outputs:**
-- `visibleChange: EventEmitter<boolean>`
+// Set (e.g. after property switch)
+configService.setActivePropertyId(propertyId);
 
----
+// Read (reactive)
+configService.getActivePropertyId$().subscribe(id => { ... });
+```
 
-### BayanCoreGlobalSearchWidgetComponent
-**Inputs:**
-- `baseUrl: string`
-- `ActivePropertyChanged: boolean`
-- `ActivePropertyId: number`
-- `placeholder: string`
-- `searchMode: 'contains' | 'startswith'`
-- `stylingMode: 'filled' | 'outlined' | 'underlined'`
-- `searchWrapperClass: string`
-- `searchItemClass: string`
-- `searchItemTitleClass: string`
-- `searchItemSubtitleClass: string`
-- `iconClass: string`
-
-**Outputs:**
-- `search: EventEmitter<string>`
-- `itemNavigate: EventEmitter<GlobalSearchMenu>`
+### BayanCoreTranslatePipe / BayanCoreTranslateService
 
----
+Built-in i18n pipe and service that checks a built-in lexicon first, then a runtime lexicon.
 
-### BayanCoreUserPanelWidgetComponent
-**Inputs:**
-- `baseUrl: string`
-- `wrapperClass: string`
-- `dropdownOpenClass: string`
-- `toggleButtonClass: string`
-- `employeeInfoClass: string`
-- `userNameClass: string`
-- `propertyNameClass: string`
-- `caretClass: string`
-- `menuClass: string`
-- `sectionLabelClass: string`
-- `menuItemClass: string`
-- `menuItemActiveClass: string`
-- `indicatorClass: string`
-- `invisibleIndicatorClass: string`
-- `dividerClass: string`
-- `signOutButtonClass: string`
-- `showSignOutIcon: boolean`
-- `signOutIconClass: string`
-
-**Outputs:**
-- `propertyChanged: EventEmitter<PropertyOption>`
-- `signOutClick: EventEmitter<void>`
+```html
+{{ 'SomeKey' | translate }}
+```
 
 ---
 
-### BayanCoreItemWidgetComponent
-**Inputs:**
-- `baseUrl: string`
-- `ActivePropertyChanged: boolean`
-- `item: TopMenuShortcut`
-- `navItemClass: string`
-- `navLinkClass: string`
-- `dropdownClass: string`
-- `dropdownOpenClass: string`
-- `dropdownToggleClass: string`
-- `caretClass: string`
-- `dropdownMenuClass: string`
-
-**Outputs:**
-- `itemClick: EventEmitter<TopMenuShortcut>`
-
----
+## Build
 
-### BayanCoreNotificationsWidgetComponent
-**Inputs:**
-- `baseUrl: string`
-- `title: string`
-- `wrapperClass: string`
-- `linkClass: string`
-- `iconClass: string`
-- `badgeClass: string`
+```bash
+ng build BayanCoreComponents
+```
 
-## Build
+## Publish
 
 ```bash
-npm run build -- --project BayanCoreComponents --configuration development
+cd dist/bayan-core-ui
+npm publish --access public
 ```