commons-shared-web-ui 0.0.12 → 0.0.14

package/index.d.ts

@@ -20,6 +20,7 @@ import * as i15 from '@angular/material/button';
 import * as i16 from '@angular/material/menu';
 import * as i17 from '@angular/material/progress-bar';
 import * as i18 from '@angular/material/tooltip';
+import { TooltipPosition } from '@angular/material/tooltip';
 import * as i19 from '@angular/material/slider';
 import * as i20 from '@angular/material/list';
 import * as i21 from '@angular/material/chips';
@@ -33,6 +34,7 @@ import * as i28 from '@angular/material/expansion';
 import * as i29 from '@angular/cdk/accordion';
 import * as i3$1 from '@angular/forms';
 import { ControlValueAccessor, FormGroup, FormBuilder, AbstractControl, FormControl, FormArray, ValidatorFn, ValidationErrors } from '@angular/forms';
+import * as i3$2 from '@angular/router';
 import { Router, ActivatedRoute } from '@angular/router';
 import * as i11$1 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
@@ -1951,7 +1953,7 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
      * validity whenever any of them change.
      */
     private setupFormulaValidation;
-    addGroupInstance(): void;
+    addGroupInstance(initialData?: any): void;
     saveGroupInstance(index: number): void;
     cancelGroupInstance(index: number): void;
     editGroupInstance(index: number): void;
@@ -2052,9 +2054,78 @@ declare class SmartFormModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<SmartFormModule>;
 }
 
+interface SideNavItem {
+    id: string;
+    label: string;
+    icon?: string;
+    route?: string;
+    roles?: string[];
+    disabled?: boolean;
+    showArrow?: boolean;
+    tooltip?: string;
+}
+interface SideNavStyleConfig {
+    bg?: string;
+    width?: string;
+    collapsedWidth?: string;
+    fontFamily?: string;
+    headingColor?: string;
+    itemColor?: string;
+    itemHoverBg?: string;
+    activeBg?: string;
+    activeColor?: string;
+    activeHoverBg?: string;
+}
+interface SideNavSection {
+    heading?: string;
+    items: SideNavItem[];
+}
+
+declare class SideNavComponent implements OnChanges {
+    sections: SideNavSection[];
+    userRoles?: string[];
+    activeId?: string;
+    styleConfig?: SideNavStyleConfig;
+    /** Control whether the nav is collapsed externally (two-way bindable) */
+    collapsed: boolean;
+    /** Width of the nav when expanded. Overrides the CSS variable default. */
+    width?: string;
+    /** Width of the nav when collapsed (icons only). Overrides the CSS variable default. */
+    collapsedWidth?: string;
+    /** Whether to show the collapse toggle button */
+    showCollapseToggle: boolean;
+    /** Whether to hide icons when the side nav is expanded */
+    hideIconsWhenExpanded: boolean;
+    /** Whether to show tooltips on nav items */
+    showTooltips: boolean;
+    /** Position of the tooltip */
+    tooltipPosition: TooltipPosition;
+    itemClicked: EventEmitter<SideNavItem>;
+    /** Emits whenever the collapsed state changes (supports two-way binding via [(collapsed)]) */
+    collapsedChange: EventEmitter<boolean>;
+    /** Applies collapsed class to :host for the width CSS transition */
+    get isHostCollapsed(): boolean;
+    filteredSections: SideNavSection[];
+    ngOnChanges(changes: SimpleChanges): void;
+    private filterSections;
+    onItemClick(item: SideNavItem, event: Event): void;
+    toggleCollapse(): void;
+    get customStyles(): {
+        [key: string]: string;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<SideNavComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SideNavComponent, "lib-side-nav", never, { "sections": { "alias": "sections"; "required": false; }; "userRoles": { "alias": "userRoles"; "required": false; }; "activeId": { "alias": "activeId"; "required": false; }; "styleConfig": { "alias": "styleConfig"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; "width": { "alias": "width"; "required": false; }; "collapsedWidth": { "alias": "collapsedWidth"; "required": false; }; "showCollapseToggle": { "alias": "showCollapseToggle"; "required": false; }; "hideIconsWhenExpanded": { "alias": "hideIconsWhenExpanded"; "required": false; }; "showTooltips": { "alias": "showTooltips"; "required": false; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; }; }, { "itemClicked": "itemClicked"; "collapsedChange": "collapsedChange"; }, never, never, false, never>;
+}
+
+declare class SideNavModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SideNavModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SideNavModule, [typeof SideNavComponent], [typeof i2$1.CommonModule, typeof i3$2.RouterModule, typeof MaterialModule], [typeof SideNavComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SideNavModule>;
+}
+
 declare class SharedUiModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SharedUiModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedUiModule, never, [typeof i2$1.CommonModule, typeof MaterialModule, typeof AlertModule, typeof ButtonModule, typeof ConfirmationModalModule, typeof FilterSidebarModule, typeof FilterModule, typeof SummaryCardModule, typeof ConfigurableFormModule, typeof FormComponentsModule, typeof SmartFormModule], [typeof MaterialModule, typeof AlertModule, typeof ButtonModule, typeof ConfirmationModalModule, typeof FilterSidebarModule, typeof FilterModule, typeof SummaryCardModule, typeof ConfigurableFormModule, typeof FormComponentsModule, typeof SmartFormModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedUiModule, never, [typeof i2$1.CommonModule, typeof MaterialModule, typeof AlertModule, typeof ButtonModule, typeof ConfirmationModalModule, typeof FilterSidebarModule, typeof FilterModule, typeof SummaryCardModule, typeof ConfigurableFormModule, typeof FormComponentsModule, typeof SmartFormModule, typeof SideNavModule], [typeof MaterialModule, typeof AlertModule, typeof ButtonModule, typeof ConfirmationModalModule, typeof FilterSidebarModule, typeof FilterModule, typeof SummaryCardModule, typeof ConfigurableFormModule, typeof FormComponentsModule, typeof SmartFormModule, typeof SideNavModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SharedUiModule>;
 }
 
@@ -2216,6 +2287,7 @@ declare const PAGINATION_THEME_DEFAULT = "theme-1";
 declare const PAGINATION_THEME_DARK = "theme-2";
 declare const NAV_VARIANT_DEFAULT: 'filled' | 'underline' | 'pills';
 declare const NAV_ORIENTATION_DEFAULT: 'horizontal' | 'vertical';
+declare const DEFAULT_SIDE_NAV_TOOLTIP_POSITION = "right";
 
 interface TableOption {
     label: string;
@@ -2478,5 +2550,5 @@ declare class SnackbarModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<SnackbarModule>;
 }
 
-export { AlertComponent, AlertModule, ButtonComponent, ButtonModule, CheckboxComponent, ConfigurableFormComponent, configurableForm_examples_d as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, DatepickerComponent, DropdownComponent, ExpressionService, FilterComponent, FilterModule, FilterSidebarComponent, FilterSidebarModule, FormComponentsModule, InputComponent, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, RadioComponent, SearchComponent, SharedUiModule, SmartFormComponent, SmartFormController, smartForm_examples_d as SmartFormExamples, SmartFormModule, SmartTableComponent, SmartTableModule, SnackbarComponent, SnackbarModule, SnackbarService, StringUtils, SummaryCardComponent, SummaryCardModule, ToggleComponent, ValidationUtils, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem, translateConfig };
-export type { AlertLabels, AlertVariant, AttachmentConfig, ButtonLabels, ButtonVariant, CheckboxConfig, CheckboxLabels, CheckboxOption, ConfirmationModalConfig, DateConfig, DatePickerConfig, DatepickerLabels, DropdownConfig, DropdownLabels, DropdownOption, EmailConfig, FieldConfig, FieldType, FilterChangeEvent, FilterConfig, FilterItem, FilterItemType, FilterOutput, FilterSearchConfig, FilterSidebarChangeEvent, FilterSidebarConfig, FilterSidebarOutput, FormConfig, FormField, FormOption, FormSchema, FormSection, GeneratedConfig, IconInput, InputConfig, InputLabels, InputType, JsonFieldConfig, JsonFormConfig, KeyType, LengthConstraint, LocationConfig, NavItem, NavStyleConfig, NestedStringConfig, NumberConfig, OptionConfig$1 as OptionConfig, OptionDTO, OptionItem, PaginationConfig, PaginationLabels, PhoneConfig, QueryParamsConfig, RadioConfig, RadioLabels, RadioOption, RangeConfig, RatingConfig, SearchConfig, SearchLabels, SectionConfig, SnackbarConfig, SnackbarVariant, StepperConfig, SubmitConfig, SummaryCardConfig, SummaryCardLabels, SummaryCardMeta, TableAction, TableActionItem, TableColumn, TableConfig, TableFilter, TableFilterChangeEvent, TableFilterColumn, TableFilterConfig, TableFilterItem, TableFilterLabels, TableFilterOutput, TableLabels, TableOption, TableTheme, TextConfig, ToggleConfig, ToggleLabels, UIConfig, UISubType, UIType, UploadedFile, ValidationResult, ValidationRules };
+export { AlertComponent, AlertModule, ButtonComponent, ButtonModule, CheckboxComponent, ConfigurableFormComponent, configurableForm_examples_d as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_SIDE_NAV_TOOLTIP_POSITION, DatepickerComponent, DropdownComponent, ExpressionService, FilterComponent, FilterModule, FilterSidebarComponent, FilterSidebarModule, FormComponentsModule, InputComponent, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, RadioComponent, SearchComponent, SharedUiModule, SideNavComponent, SideNavModule, SmartFormComponent, SmartFormController, smartForm_examples_d as SmartFormExamples, SmartFormModule, SmartTableComponent, SmartTableModule, SnackbarComponent, SnackbarModule, SnackbarService, StringUtils, SummaryCardComponent, SummaryCardModule, ToggleComponent, ValidationUtils, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem, translateConfig };
+export type { AlertLabels, AlertVariant, AttachmentConfig, ButtonLabels, ButtonVariant, CheckboxConfig, CheckboxLabels, CheckboxOption, ConfirmationModalConfig, DateConfig, DatePickerConfig, DatepickerLabels, DropdownConfig, DropdownLabels, DropdownOption, EmailConfig, FieldConfig, FieldType, FilterChangeEvent, FilterConfig, FilterItem, FilterItemType, FilterOutput, FilterSearchConfig, FilterSidebarChangeEvent, FilterSidebarConfig, FilterSidebarOutput, FormConfig, FormField, FormOption, FormSchema, FormSection, GeneratedConfig, IconInput, InputConfig, InputLabels, InputType, JsonFieldConfig, JsonFormConfig, KeyType, LengthConstraint, LocationConfig, NavItem, NavStyleConfig, NestedStringConfig, NumberConfig, OptionConfig$1 as OptionConfig, OptionDTO, OptionItem, PaginationConfig, PaginationLabels, PhoneConfig, QueryParamsConfig, RadioConfig, RadioLabels, RadioOption, RangeConfig, RatingConfig, SearchConfig, SearchLabels, SectionConfig, SideNavItem, SideNavSection, SideNavStyleConfig, SnackbarConfig, SnackbarVariant, StepperConfig, SubmitConfig, SummaryCardConfig, SummaryCardLabels, SummaryCardMeta, TableAction, TableActionItem, TableColumn, TableConfig, TableFilter, TableFilterChangeEvent, TableFilterColumn, TableFilterConfig, TableFilterItem, TableFilterLabels, TableFilterOutput, TableLabels, TableOption, TableTheme, TextConfig, ToggleConfig, ToggleLabels, UIConfig, UISubType, UIType, UploadedFile, ValidationResult, ValidationRules };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "commons-shared-web-ui",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "peerDependencies": {
     "@angular/animations": "20.3.15",
     "@angular/cdk": "20.2.14",

package/src/lib/modules/side-nav/side-nav.theme.scss

@@ -0,0 +1,94 @@
+@use 'sass:map';
+
+$default-side-nav-config: (
+  // Container & Global
+  bg: #F9C80E0D,
+  width: 220px,
+  collapsed-width: 56px,
+  gap-sections: 24px,
+  padding: 16px,
+
+  // Typographic Global
+  font-family: ('Poppins', sans-serif),
+
+  // Header Typography
+  heading-font-weight: 500,
+  heading-font-size: 16px,
+  heading-color: #3C4043,
+
+  // Item Defaults (Inactive)
+  item-gap: 4px,
+  item-padding: 12px 16px,
+  item-border-radius: 8px,
+  item-font-weight: 400,
+  item-font-size: 14px,
+  item-color: #5F6368,
+  
+  // Item Hover
+  // (Figma didn't strictly specify hover for inactive, assume subtle transparency on the active color)
+  item-hover-bg: rgba(#E63E30, 0.05),
+  item-hover-color: #3C4043,
+
+  // Active Item
+  active-bg: #E63E30,
+  active-color: #FFFFFF,
+  active-font-weight: 500,
+  active-hover-bg: #D4382B, // Darkened active color
+  
+  // Disable State
+  disabled-opacity: 0.5,
+
+  // Tooltip Styling
+  tooltip-bg: rgba(0, 0, 0, 0.8),
+  tooltip-color: #FFFFFF,
+  tooltip-padding: 8px 12px,
+  tooltip-border-radius: 6px,
+  tooltip-font-size: 12px
+);
+
+@mixin side-nav-theme($user-config: ()) {
+  $config: map.merge($default-side-nav-config, $user-config);
+
+  // Container
+  --cc-side-nav-bg: #{map.get($config, bg)};
+  --cc-side-nav-width: #{map.get($config, width)};
+  --cc-side-nav-collapsed-width: #{map.get($config, collapsed-width)};
+  --cc-side-nav-gap-sections: #{map.get($config, gap-sections)};
+  --cc-side-nav-padding: #{map.get($config, padding)};
+
+  // Typography Family
+  --cc-side-nav-font-family: #{map.get($config, font-family)};
+
+  // Headers
+  --cc-side-nav-heading-font-weight: #{map.get($config, heading-font-weight)};
+  --cc-side-nav-heading-font-size: #{map.get($config, heading-font-size)};
+  --cc-side-nav-heading-color: #{map.get($config, heading-color)};
+
+  // Items Config
+  --cc-side-nav-item-gap: #{map.get($config, item-gap)};
+  --cc-side-nav-item-padding: #{map.get($config, item-padding)};
+  --cc-side-nav-item-border-radius: #{map.get($config, item-border-radius)};
+  
+  // Inactive Items
+  --cc-side-nav-item-font-weight: #{map.get($config, item-font-weight)};
+  --cc-side-nav-item-font-size: #{map.get($config, item-font-size)};
+  --cc-side-nav-item-color: #{map.get($config, item-color)};
+  --cc-side-nav-item-hover-bg: #{map.get($config, item-hover-bg)};
+  --cc-side-nav-item-hover-color: #{map.get($config, item-hover-color)};
+
+  // Active Items
+  --cc-side-nav-active-bg: #{map.get($config, active-bg)};
+  --cc-side-nav-active-color: #{map.get($config, active-color)};
+  --cc-side-nav-active-font-weight: #{map.get($config, active-font-weight)};
+  --cc-side-nav-active-hover-bg: #{map.get($config, active-hover-bg)};
+
+  // Disabled
+  --cc-side-nav-disabled-opacity: #{map.get($config, disabled-opacity)};
+
+  // Tooltip
+  --cc-side-nav-tooltip-bg: #{map.get($config, tooltip-bg)};
+  --cc-side-nav-tooltip-color: #{map.get($config, tooltip-color)};
+  --cc-side-nav-tooltip-padding: #{map.get($config, tooltip-padding)};
+  --cc-side-nav-tooltip-border-radius: #{map.get($config, tooltip-border-radius)};
+  --cc-side-nav-tooltip-font-size: #{map.get($config, tooltip-font-size)};
+}

package/src/lib/styles/global.scss

@@ -1,3 +1,4 @@
+@use '../modules/side-nav/side-nav.theme' as sideNav;
 @import 'quill/dist/quill.snow.css';
 
 :root {
@@ -61,7 +62,7 @@
   --ms-btn-add-color: #3b82f6;
   --ms-btn-add-hover: #2563eb;
 
-
+  @include sideNav.side-nav-theme();
 }
 
 /* ----------------------------------------------------