commons-shared-web-ui 0.0.54 → 0.0.56

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnChanges, EventEmitter, SimpleChanges, ChangeDetectorRef, OnInit, OnDestroy, ElementRef, QueryList, PipeTransform, NgZone, AfterViewInit } from '@angular/core';
+import { OnChanges, EventEmitter, SimpleChanges, ChangeDetectorRef, OnInit, OnDestroy, ElementRef, QueryList, PipeTransform, AfterViewInit, NgZone } from '@angular/core';
 import * as i2 from '@angular/material/snack-bar';
 import { MatSnackBar, MatSnackBarRef } from '@angular/material/snack-bar';
 import * as i2$1 from '@angular/common';
@@ -325,6 +325,7 @@ interface FieldConfig {
     locationConfig?: LocationConfig;
     ratingConfig?: RatingConfig;
     richTextConfig?: RichTextConfig;
+    linkListConfig?: LinkListConfig;
     children?: FieldConfig[];
 }
 interface TextConfig {
@@ -375,6 +376,28 @@ interface TimeConfig {
      * value (earlier than the new minimum) is cleared. Mirrors DateConfig.minDateField.
      */
     minTimeField?: string;
+    /**
+     * Rendering variant.
+     * 'default' -> keeps the existing native <input type="time"> (no UI change).
+     * 'wheel'   -> activates the drum-roll wheel picker (lib-time-picker).
+     * Default: 'default' — existing behaviour preserved unless explicitly set to 'wheel'.
+     */
+    variant?: 'default' | 'wheel';
+    /**
+     * Hour display mode for the wheel variant only.
+     * '12' -> 01–12 columns + AM/PM column, outputs "hh:mm AM/PM".
+     * '24' -> 00–23 columns, outputs "HH:mm".
+     * Default: '12'.
+     */
+    mode?: '12' | '24';
+    /**
+     * Minute increment step for the wheel variant.
+     * Accepted values: 1, 5, 10, 15, 30.
+     * Default: 1.
+     */
+    minuteStep?: number;
+    /** Placeholder text override for the wheel picker trigger field. */
+    placeholder?: string;
 }
 /**
  * Configuration for enabling search functionality inside DROPDOWN fields.
@@ -742,6 +765,21 @@ interface MediaItem {
     /** True while the file is being uploaded */
     isUploading?: boolean;
 }
+interface LinkListConfig {
+    listPosition?: 'top' | 'bottom';
+    editable?: boolean;
+    deleteable?: boolean;
+    deletable?: boolean;
+    valueFormat?: 'string' | 'array' | 'object';
+    separator?: string;
+    urlKey?: string;
+    idField?: string;
+    deleteApiUrl?: string;
+    editApiUrl?: string;
+    pattern?: string;
+    patternMessage?: string;
+    colSpan?: number;
+}
 
 /**
  * Wraps a FieldConfig leaf with selection metadata for the UI tree.
@@ -1300,6 +1338,53 @@ interface ConfirmationModalConfig {
     };
 }
 
+type TimeMode = '12' | '24';
+type TimePickerVariant = 'default' | 'wheel';
+interface TimePickerLabels {
+    label?: string;
+    placeholder?: string;
+    hourLabel?: string;
+    minuteLabel?: string;
+    periodLabel?: string;
+    amLabel?: string;
+    pmLabel?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    selectTimeTitle?: string;
+    requiredMarker?: string;
+    clearLabel?: string;
+}
+interface TimePickerConfig {
+    label?: string;
+    placeholder?: string;
+    variant?: TimePickerVariant;
+    mode?: TimeMode;
+    minuteStep?: number;
+    disabled?: boolean;
+    required?: boolean;
+    errorMessage?: string;
+    width?: string;
+    height?: string;
+    borderRadius?: string;
+    fontSize?: string;
+    gap?: string;
+    fontFamily?: string;
+    labelColor?: string;
+    labelFontSize?: string;
+    labelFontWeight?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    borderWidth?: string;
+    padding?: string;
+    fontWeight?: string;
+    color?: string;
+    placeholderColor?: string;
+    focusBorderColor?: string;
+    errorColor?: string;
+    disabledBackgroundColor?: string;
+    disabledColor?: string;
+}
+
 declare class FormFieldComponent implements OnInit, OnDestroy {
     private fb;
     private expressionService;
@@ -1429,6 +1514,10 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
     private _nextInstanceId;
     /** Tracks open accordion panels for standard (non-multiSave) GROUP repeaters. */
     expandedGroupInstances: Set<number>;
+    newLinkInputValue: string;
+    editingLinkIndex: number | null;
+    editingLinkValue: string;
+    linkValidationError: string;
     /**
      * Key used to register the GROUP control on the parent formGroup.
      * Priority: sectionConfig.name > field.name > camelCase(label) > '__group__'
@@ -1601,6 +1690,8 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
     get isNumberField(): boolean;
     get isDateField(): boolean;
     get isTimeField(): boolean;
+    get isWheelVariant(): boolean;
+    get timePickerLabels(): TimePickerLabels;
     get isDropdown(): boolean;
     get isAutocomplete(): boolean;
     get isFileUpload(): boolean;
@@ -1615,6 +1706,7 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
     get isRow(): boolean;
     get isGroup(): boolean;
     get isLocation(): boolean;
+    get isLinkList(): boolean;
     /**
      * Initialise the separate display-control that drives the mat-autocomplete
      * text input.  The real form control always stores the *code* value.
@@ -1700,6 +1792,14 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
     hideLocationSuggestions(): void;
     getLocationMapEmbedUrl(): string;
     private _renderMap;
+    get linkListConfig(): LinkListConfig | undefined;
+    get linkListItems(): any[];
+    getLinkDisplayUrl(item: any): string;
+    addLinkItem(event?: Event): void;
+    deleteLinkItem(index: number): void;
+    startEditLink(index: number): void;
+    cancelEditLink(): void;
+    saveEditLink(index: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldComponent, "lib-form-field", never, { "config": { "alias": "config"; "required": false; }; "controller": { "alias": "controller"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "allowMulti": { "alias": "allowMulti"; "required": false; }; "siblingFormArray": { "alias": "siblingFormArray"; "required": false; }; "siblingIndex": { "alias": "siblingIndex"; "required": false; }; }, {}, never, never, false, never>;
 }
@@ -2033,10 +2133,135 @@ declare class AlertModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<AlertModule>;
 }
 
-declare class SmartFormModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<SmartFormModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SmartFormModule, [typeof SmartFormComponent, typeof FormSectionComponent, typeof FormFieldComponent, typeof TrustedUrlPipe], [typeof i2$1.CommonModule, typeof i3$1.ReactiveFormsModule, typeof i3$1.FormsModule, typeof MaterialModule, typeof ButtonModule, typeof AlertModule, typeof i10$1.QuillModule], [typeof SmartFormComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<SmartFormModule>;
+declare class TimePickerComponent implements ControlValueAccessor, OnInit, OnChanges {
+    config?: TimePickerConfig;
+    labels?: TimePickerLabels;
+    label: string;
+    placeholder: string;
+    variant: TimePickerVariant;
+    mode: TimeMode;
+    minuteStep: number;
+    disabled: boolean;
+    required: boolean;
+    errorMessage: string;
+    minTime?: string;
+    maxTime?: string;
+    width?: string;
+    height?: string;
+    borderRadius?: string;
+    fontSize?: string;
+    gap?: string;
+    fontFamily?: string;
+    labelColor?: string;
+    labelFontSize?: string;
+    labelFontWeight?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    borderWidth?: string;
+    padding?: string;
+    fontWeight?: string;
+    color?: string;
+    placeholderColor?: string;
+    focusBorderColor?: string;
+    errorColor?: string;
+    disabledBackgroundColor?: string;
+    disabledColor?: string;
+    timeChange: EventEmitter<string>;
+    displayValue: string;
+    isOpen: boolean;
+    onChange: (value: string) => void;
+    onTouched: () => void;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private updateFromConfig;
+    writeValue(value: string): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    togglePanel(): void;
+    closePanel(): void;
+    onConfirmed(timeString: string): void;
+    onCancelled(): void;
+    get wrapperStyles(): {
+        [key: string]: string | undefined;
+    };
+    get labelStyles(): {
+        [key: string]: string | undefined;
+    };
+    get fieldStyles(): {
+        [key: string]: string | undefined;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<TimePickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimePickerComponent, "lib-time-picker", never, { "config": { "alias": "config"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "minuteStep": { "alias": "minuteStep"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "minTime": { "alias": "minTime"; "required": false; }; "maxTime": { "alias": "maxTime"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "borderRadius": { "alias": "borderRadius"; "required": false; }; "fontSize": { "alias": "fontSize"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "fontFamily": { "alias": "fontFamily"; "required": false; }; "labelColor": { "alias": "labelColor"; "required": false; }; "labelFontSize": { "alias": "labelFontSize"; "required": false; }; "labelFontWeight": { "alias": "labelFontWeight"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; "borderWidth": { "alias": "borderWidth"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "fontWeight": { "alias": "fontWeight"; "required": false; }; "color": { "alias": "color"; "required": false; }; "placeholderColor": { "alias": "placeholderColor"; "required": false; }; "focusBorderColor": { "alias": "focusBorderColor"; "required": false; }; "errorColor": { "alias": "errorColor"; "required": false; }; "disabledBackgroundColor": { "alias": "disabledBackgroundColor"; "required": false; }; "disabledColor": { "alias": "disabledColor"; "required": false; }; }, { "timeChange": "timeChange"; }, never, never, false, never>;
+}
+
+type WheelType = 'hour' | 'minute' | 'period';
+declare class TimeWheelPanelComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
+    private zone;
+    mode: TimeMode;
+    value: string;
+    labels?: TimePickerLabels;
+    minuteStep: number;
+    minTime?: string;
+    maxTime?: string;
+    confirmed: EventEmitter<string>;
+    cancelled: EventEmitter<void>;
+    hourWheel: ElementRef<HTMLDivElement>;
+    minuteWheel: ElementRef<HTMLDivElement>;
+    periodWheel?: ElementRef<HTMLDivElement>;
+    static readonly ITEM_HEIGHT = 36;
+    static readonly VISIBLE_ROWS = 3;
+    readonly ITEM_HEIGHT = 36;
+    readonly SPACERS: number;
+    readonly spacerRows: number[];
+    private get containerHeight();
+    hours: string[];
+    minutes: string[];
+    periods: string[];
+    hourRepeats: number[];
+    minuteRepeats: number[];
+    selectedHour: string;
+    selectedMinute: string;
+    selectedPeriod: string;
+    disabledHours: Set<string>;
+    disabledMinutes: Set<string>;
+    disabledPeriods: Set<string>;
+    private isInitialScrollDone;
+    private scrollListeners;
+    private idleTimers;
+    private rafIds;
+    private static readonly IDLE_MS;
+    constructor(zone: NgZone);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private attachScroll;
+    private generateHours;
+    private generateMinutes;
+    private buildRepeats;
+    private centralBandStart;
+    private parseInitialValue;
+    private findClosestMinute;
+    private setDefaultTime;
+    private toMinutes;
+    private parseLimit;
+    private to24hrHour;
+    computeConstraints(): void;
+    updateWheelEffects(element: HTMLElement): void;
+    private listFor;
+    private repeatsFor;
+    private isDisabled;
+    private onScrollIdle;
+    private nearestEnabled;
+    private adjustSelectionOnConstraintChange;
+    selectValue(type: WheelType, val: string): void;
+    scrollToValue(type: WheelType, val: string, smooth: boolean): void;
+    onCancel(): void;
+    onConfirm(): void;
+    getFormattedTime(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TimeWheelPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimeWheelPanelComponent, "lib-time-wheel-panel", never, { "mode": { "alias": "mode"; "required": false; }; "value": { "alias": "value"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "minuteStep": { "alias": "minuteStep"; "required": false; }; "minTime": { "alias": "minTime"; "required": false; }; "maxTime": { "alias": "maxTime"; "required": false; }; }, { "confirmed": "confirmed"; "cancelled": "cancelled"; }, never, never, false, never>;
 }
 
 type InputType = 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'textarea';
@@ -2810,10 +3035,22 @@ declare class ClickOutsideDirective {
 
 declare class FormComponentsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<FormComponentsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FormComponentsModule, [typeof InputComponent, typeof DropdownComponent, typeof CheckboxComponent, typeof RadioComponent, typeof ToggleComponent, typeof DatepickerComponent, typeof SearchComponent, typeof ClickOutsideDirective], [typeof i2$1.CommonModule, typeof i3$1.ReactiveFormsModule, typeof i3$1.FormsModule, typeof i11$1.ScrollingModule], [typeof InputComponent, typeof DropdownComponent, typeof CheckboxComponent, typeof RadioComponent, typeof ToggleComponent, typeof DatepickerComponent, typeof SearchComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FormComponentsModule, [typeof InputComponent, typeof DropdownComponent, typeof CheckboxComponent, typeof RadioComponent, typeof ToggleComponent, typeof DatepickerComponent, typeof SearchComponent, typeof ClickOutsideDirective], [typeof i2$1.CommonModule, typeof i3$1.ReactiveFormsModule, typeof i3$1.FormsModule, typeof i11$1.ScrollingModule], [typeof InputComponent, typeof DropdownComponent, typeof CheckboxComponent, typeof RadioComponent, typeof ToggleComponent, typeof DatepickerComponent, typeof SearchComponent, typeof ClickOutsideDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FormComponentsModule>;
 }
 
+declare class TimePickerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TimePickerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TimePickerModule, [typeof TimePickerComponent, typeof TimeWheelPanelComponent], [typeof i2$1.CommonModule, typeof i3$1.FormsModule, typeof FormComponentsModule], [typeof TimePickerComponent, typeof TimeWheelPanelComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<TimePickerModule>;
+}
+
+declare class SmartFormModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SmartFormModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SmartFormModule, [typeof SmartFormComponent, typeof FormSectionComponent, typeof FormFieldComponent, typeof TrustedUrlPipe], [typeof i2$1.CommonModule, typeof i3$1.ReactiveFormsModule, typeof i3$1.FormsModule, typeof MaterialModule, typeof ButtonModule, typeof AlertModule, typeof i10$1.QuillModule, typeof TimePickerModule], [typeof SmartFormComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SmartFormModule>;
+}
+
 declare class FormBuilderModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<FormBuilderModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<FormBuilderModule, [typeof FieldSelectionComponent, typeof FieldConfiguratorComponent, typeof GroupNodeComponent, typeof SelectionSectionNodeComponent, typeof SelectionFieldNodeComponent, typeof ConfiguratorTreeComponent, typeof ConfiguratorConfigPanelComponent], [typeof i2$1.CommonModule, typeof SmartFormModule, typeof FormComponentsModule], [typeof FieldSelectionComponent, typeof FieldConfiguratorComponent]>;
@@ -4477,7 +4714,7 @@ declare class FilterTableSelectorModule {
 
 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 ButtonDropdownModule, typeof ConfirmationModalModule, typeof FilterSidebarModule, typeof FilterModule, typeof SummaryCardModule, typeof ConfigurableFormModule, typeof FormComponentsModule, typeof SmartFormModule, typeof SideNavModule, typeof FormBuilderModule, typeof FormFieldConfigurationModule, typeof TableColumnConfigurationModule, typeof FilterTableSelectorModule], [typeof MaterialModule, typeof AlertModule, typeof ButtonModule, typeof ButtonDropdownModule, typeof ConfirmationModalModule, typeof FilterSidebarModule, typeof FilterModule, typeof SummaryCardModule, typeof ConfigurableFormModule, typeof FormComponentsModule, typeof SmartFormModule, typeof SideNavModule, typeof FormBuilderModule, typeof FormFieldConfigurationModule, typeof TableColumnConfigurationModule, typeof FilterTableSelectorModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedUiModule, never, [typeof i2$1.CommonModule, typeof MaterialModule, typeof AlertModule, typeof ButtonModule, typeof ButtonDropdownModule, typeof ConfirmationModalModule, typeof FilterSidebarModule, typeof FilterModule, typeof SummaryCardModule, typeof ConfigurableFormModule, typeof FormComponentsModule, typeof SmartFormModule, typeof SideNavModule, typeof FormBuilderModule, typeof FilterTableSelectorModule, typeof TimePickerModule, typeof FormFieldConfigurationModule, typeof TableColumnConfigurationModule, typeof FilterTableSelectorModule], [typeof MaterialModule, typeof AlertModule, typeof ButtonModule, typeof ButtonDropdownModule, typeof ConfirmationModalModule, typeof FilterSidebarModule, typeof FilterModule, typeof SummaryCardModule, typeof ConfigurableFormModule, typeof FormComponentsModule, typeof SmartFormModule, typeof SideNavModule, typeof FormBuilderModule, typeof FilterTableSelectorModule, typeof TimePickerModule, typeof FormFieldConfigurationModule, typeof TableColumnConfigurationModule, typeof FilterTableSelectorModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SharedUiModule>;
 }
 
@@ -4675,5 +4912,5 @@ declare class SnackbarModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<SnackbarModule>;
 }
 
-export { AlertComponent, AlertModule, ButtonComponent, ButtonDropdownComponent, ButtonDropdownModule, ButtonModule, CheckboxComponent, ConfigColumnNodeComponent, ConfigFieldNodeComponent, ConfigSchemaTreeService, ConfigSectionNodeComponent, 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, FieldConfigurationService, FieldConfiguratorComponent, FieldSelectionComponent, FilterComponent, FilterModule, FilterSidebarComponent, FilterSidebarModule, FilterTableSelectorComponent, FilterTableSelectorModule, FormBuilderModule, FormComponentsModule, FormFieldConfigurationComponent, FormFieldConfigurationModule, 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, TableColumnConfigurationComponent, TableColumnConfigurationModule, TableColumnConfigurationService, ToggleComponent, ValidationUtils, appendBaseUrlRecursively, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem, translateConfig };
-export type { AlertLabels, AlertVariant, AttachmentConfig, ButtonLabels, ButtonVariant, CheckboxConfig, CheckboxLabels, CheckboxOption, ConfigColumnNode, ConfigFieldNode, ConfigSectionNode, ConfirmationModalConfig, DateConfig, DatePickerConfig, DatepickerLabels, DropdownAction, DropdownConfig, DropdownLabels, DropdownOption, EmailConfig, FieldConfig, FieldEventPayload, FieldType, FilterChangeEvent, FilterConfig, FilterItem, FilterItemType, FilterOutput, FilterPanelConfig, FilterParamMap, FilterSearchConfig, FilterSidebarChangeEvent, FilterSidebarConfig, FilterSidebarOutput, FilterTableConfig, FilterTableSelectorConfig, FormConfig, FormField, FormOption, FormSchema, FormSection, GeneratedConfig, HierarchyCfg, IconInput, InputConfig, InputLabels, InputType, JsonFieldConfig, JsonFormConfig, KeyType, LengthConstraint, LocationConfig, NavItem, NavStyleConfig, NestedStringConfig, NumberConfig, OptionConfig, OptionDTO, OptionItem, PaginationConfig, PaginationLabels, PhoneConfig, QueryParamsConfig, RadioConfig, RadioLabels, RadioOption, RangeConfig, RatingConfig, SearchConfig, SearchLabels, SectionConfig, SelectionConfig, SideNavItem, SideNavSection, SideNavStyleConfig, SnackbarConfig, SnackbarVariant, StepperConfig, SubmitConfig, SuffixActionIcon, SummaryCardConfig, SummaryCardLabels, SummaryCardMeta, TableAction, TableActionItem, TableColumn, TableColumnSubField, TableConfig, TableDataChangeEvent, TableFilter, TableFilterChangeEvent, TableFilterColumn, TableFilterConfig, TableFilterItem, TableFilterLabels, TableFilterOutput, TableLabels, TableOption, TableRowSaveEvent, TableTheme, TextConfig, ToggleConfig, ToggleLabels, UIConfig, UISubType, UIType, UploadedFile, ValidationResult, ValidationRules };
+export { AlertComponent, AlertModule, ButtonComponent, ButtonDropdownComponent, ButtonDropdownModule, ButtonModule, CheckboxComponent, ClickOutsideDirective, ConfigColumnNodeComponent, ConfigFieldNodeComponent, ConfigSchemaTreeService, ConfigSectionNodeComponent, 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, FieldConfigurationService, FieldConfiguratorComponent, FieldSelectionComponent, FilterComponent, FilterModule, FilterSidebarComponent, FilterSidebarModule, FilterTableSelectorComponent, FilterTableSelectorModule, FormBuilderModule, FormComponentsModule, FormFieldConfigurationComponent, FormFieldConfigurationModule, 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, TableColumnConfigurationComponent, TableColumnConfigurationModule, TableColumnConfigurationService, TimePickerComponent, TimePickerModule, TimeWheelPanelComponent, ToggleComponent, ValidationUtils, appendBaseUrlRecursively, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem, translateConfig };
+export type { AlertLabels, AlertVariant, AttachmentConfig, ButtonLabels, ButtonVariant, CheckboxConfig, CheckboxLabels, CheckboxOption, ConfigColumnNode, ConfigFieldNode, ConfigSectionNode, ConfirmationModalConfig, DateConfig, DatePickerConfig, DatepickerLabels, DropdownAction, DropdownConfig, DropdownLabels, DropdownOption, EmailConfig, FieldConfig, FieldEventPayload, FieldType, FilterChangeEvent, FilterConfig, FilterItem, FilterItemType, FilterOutput, FilterPanelConfig, FilterParamMap, FilterSearchConfig, FilterSidebarChangeEvent, FilterSidebarConfig, FilterSidebarOutput, FilterTableConfig, FilterTableSelectorConfig, FormConfig, FormField, FormOption, FormSchema, FormSection, GeneratedConfig, HierarchyCfg, IconInput, InputConfig, InputLabels, InputType, JsonFieldConfig, JsonFormConfig, KeyType, LengthConstraint, LocationConfig, NavItem, NavStyleConfig, NestedStringConfig, NumberConfig, OptionConfig, OptionDTO, OptionItem, PaginationConfig, PaginationLabels, PhoneConfig, QueryParamsConfig, RadioConfig, RadioLabels, RadioOption, RangeConfig, RatingConfig, SearchConfig, SearchLabels, SectionConfig, SelectionConfig, SideNavItem, SideNavSection, SideNavStyleConfig, SnackbarConfig, SnackbarVariant, StepperConfig, SubmitConfig, SuffixActionIcon, SummaryCardConfig, SummaryCardLabels, SummaryCardMeta, TableAction, TableActionItem, TableColumn, TableColumnSubField, TableConfig, TableDataChangeEvent, TableFilter, TableFilterChangeEvent, TableFilterColumn, TableFilterConfig, TableFilterItem, TableFilterLabels, TableFilterOutput, TableLabels, TableOption, TableRowSaveEvent, TableTheme, TextConfig, TimeMode, TimePickerConfig, TimePickerLabels, TimePickerVariant, ToggleConfig, ToggleLabels, UIConfig, UISubType, UIType, UploadedFile, ValidationResult, ValidationRules };

package/package.json

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

package/src/lib/modules/button-dropdown/button-dropdown.theme.scss

@@ -0,0 +1,87 @@
+@use 'sass:map';
+
+$default-button-dropdown-config: (
+    // General Structure
+    menu-radius: 4px,
+    menu-border-light: 1px solid #e0e0e0,
+    menu-border-dark: 1px solid #444444,
+    menu-shadow-light: 0 4px 6px rgba(0, 0, 0, 0.1),
+    menu-shadow-dark: 0 4px 6px rgba(0, 0, 0, 0.5),
+
+    // Light Theme Map
+    light-bg: #ffffff,
+    light-item-color: #333333,
+    light-item-hover-bg: #f5f5f5,
+
+    // Dark Theme Map
+    dark-bg: #1a1a1a,
+    dark-item-color: #ffffff,
+    dark-item-hover-bg: #2d2d2d,
+
+    // Button Variants (For Explicit Actions)
+    primary-bg: #262125,
+    primary-color: #ffffff,
+    primary-hover: #3d353b,
+
+    warning-bg: #F9C80E,
+    warning-color: #000000,
+    warning-hover: #ebd573,
+
+    success-bg: #16A34A,
+    success-color: #ffffff,
+    success-hover: #148f41,
+
+    danger-bg: #E63E30,
+    danger-color: #ffffff,
+    danger-hover: #c93528,
+
+    secondary-bg: #E8EAED,
+    secondary-color: #000000,
+    secondary-hover: #d1d5db,
+
+    outline-bg: transparent,
+    outline-color: #000000,
+    outline-hover: rgba(0,0,0,0.05)
+);
+
+@mixin button-dropdown-theme($user-config: ()) {
+    $config: map.merge($default-button-dropdown-config, $user-config);
+
+    --cc-btn-dropdown-radius: #{map.get($config, menu-radius)};
+    --cc-btn-dropdown-border-light: #{map.get($config, menu-border-light)};
+    --cc-btn-dropdown-border-dark: #{map.get($config, menu-border-dark)};
+    --cc-btn-dropdown-shadow-light: #{map.get($config, menu-shadow-light)};
+    --cc-btn-dropdown-shadow-dark: #{map.get($config, menu-shadow-dark)};
+
+    --cc-btn-dropdown-light-bg: #{map.get($config, light-bg)};
+    --cc-btn-dropdown-light-item-color: #{map.get($config, light-item-color)};
+    --cc-btn-dropdown-light-item-hover-bg: #{map.get($config, light-item-hover-bg)};
+
+    --cc-btn-dropdown-dark-bg: #{map.get($config, dark-bg)};
+    --cc-btn-dropdown-dark-item-color: #{map.get($config, dark-item-color)};
+    --cc-btn-dropdown-dark-item-hover-bg: #{map.get($config, dark-item-hover-bg)};
+
+    --cc-btn-dropdown-primary-bg: #{map.get($config, primary-bg)};
+    --cc-btn-dropdown-primary-color: #{map.get($config, primary-color)};
+    --cc-btn-dropdown-primary-hover: #{map.get($config, primary-hover)};
+
+    --cc-btn-dropdown-warning-bg: #{map.get($config, warning-bg)};
+    --cc-btn-dropdown-warning-color: #{map.get($config, warning-color)};
+    --cc-btn-dropdown-warning-hover: #{map.get($config, warning-hover)};
+
+    --cc-btn-dropdown-success-bg: #{map.get($config, success-bg)};
+    --cc-btn-dropdown-success-color: #{map.get($config, success-color)};
+    --cc-btn-dropdown-success-hover: #{map.get($config, success-hover)};
+
+    --cc-btn-dropdown-danger-bg: #{map.get($config, danger-bg)};
+    --cc-btn-dropdown-danger-color: #{map.get($config, danger-color)};
+    --cc-btn-dropdown-danger-hover: #{map.get($config, danger-hover)};
+
+    --cc-btn-dropdown-secondary-bg: #{map.get($config, secondary-bg)};
+    --cc-btn-dropdown-secondary-color: #{map.get($config, secondary-color)};
+    --cc-btn-dropdown-secondary-hover: #{map.get($config, secondary-hover)};
+    
+    --cc-btn-dropdown-outline-bg: #{map.get($config, outline-bg)};
+    --cc-btn-dropdown-outline-color: #{map.get($config, outline-color)};
+    --cc-btn-dropdown-outline-hover: #{map.get($config, outline-hover)};
+}

package/src/lib/modules/time-picker/time-picker.theme.scss

@@ -0,0 +1,87 @@
+@use 'sass:map';
+
+$default-timepicker-config: (
+  // Trigger field (mirrors datepicker defaults)
+  height:              2.5rem,
+  padding:             0.375rem 1rem,
+  label-gap:           0.5rem,
+  border-radius:       0.4375rem,
+  border-color:        #BDC1C6,
+  border-width:        1px,
+  bg:                  #FEFEFE,
+  color:               #202124,
+  placeholder-color:   #80868B,
+  font-size:           0.875rem,
+  font-weight:         400,
+  font-family:         inherit,
+  label-font-size:     0.875rem,
+  label-font-weight:   500,
+  label-color:         #202124,
+  focus-border-color:  #1A73E8,
+  error-color:         #D93025,
+  disabled-bg:         #F1F3F4,
+  disabled-color:      #80868B,
+  required-color:      #D93025,
+  icon-color:          #5F6368,
+
+  // Wheel panel (popup) — greyscale/black is the default theme.
+  // Opt into a blue accent by passing these overrides to time-picker-theme():
+  //   accent: #4D89EB, accent-light: rgba(77,137,235,0.08),
+  //   accent-border: rgba(77,137,235,0.15), btn-confirm-bg: #4D89EB,
+  //   btn-confirm-hover: #3b74d1
+  accent:              #111827,
+  accent-light:        rgba(0, 0, 0, 0.05),
+  accent-border:       rgba(0, 0, 0, 0.08),
+  item-height:         36px,
+  item-font-size:      1rem,
+  text-muted:          #9CA3AF,
+  text-primary:        #111827,
+  wheels-border:       transparent,
+  btn-confirm-bg:      #111827,
+  btn-confirm-hover:   #000000,
+  btn-cancel-bg:       #F3F4F6,
+  btn-cancel-hover:    #E5E7EB,
+  btn-cancel-border:   #F3F4F6,
+);
+
+@mixin time-picker-theme($user-config: ()) {
+  $config: map.merge($default-timepicker-config, $user-config);
+
+  // Trigger field tokens
+  --cc-timepicker-height:             #{map.get($config, height)};
+  --cc-timepicker-padding:            #{map.get($config, padding)};
+  --cc-timepicker-label-gap:          #{map.get($config, label-gap)};
+  --cc-timepicker-border-radius:      #{map.get($config, border-radius)};
+  --cc-timepicker-border-color:       #{map.get($config, border-color)};
+  --cc-timepicker-border-width:       #{map.get($config, border-width)};
+  --cc-timepicker-bg:                 #{map.get($config, bg)};
+  --cc-timepicker-color:              #{map.get($config, color)};
+  --cc-timepicker-placeholder-color:  #{map.get($config, placeholder-color)};
+  --cc-timepicker-font-size:          #{map.get($config, font-size)};
+  --cc-timepicker-font-weight:        #{map.get($config, font-weight)};
+  --cc-timepicker-font-family:        #{map.get($config, font-family)};
+  --cc-timepicker-label-font-size:    #{map.get($config, label-font-size)};
+  --cc-timepicker-label-font-weight:  #{map.get($config, label-font-weight)};
+  --cc-timepicker-label-color:        #{map.get($config, label-color)};
+  --cc-timepicker-focus-border-color: #{map.get($config, focus-border-color)};
+  --cc-timepicker-error-color:        #{map.get($config, error-color)};
+  --cc-timepicker-disabled-bg:        #{map.get($config, disabled-bg)};
+  --cc-timepicker-disabled-color:     #{map.get($config, disabled-color)};
+  --cc-timepicker-required-color:     #{map.get($config, required-color)};
+  --cc-timepicker-icon-color:         #{map.get($config, icon-color)};
+
+  // Wheel panel tokens
+  --cc-timepicker-accent:             #{map.get($config, accent)};
+  --cc-timepicker-accent-light:       #{map.get($config, accent-light)};
+  --cc-timepicker-accent-border:      #{map.get($config, accent-border)};
+  --cc-timepicker-item-height:        #{map.get($config, item-height)};
+  --cc-timepicker-item-font-size:     #{map.get($config, item-font-size)};
+  --cc-timepicker-text-muted:         #{map.get($config, text-muted)};
+  --cc-timepicker-text-primary:       #{map.get($config, text-primary)};
+  --cc-timepicker-wheels-border:      #{map.get($config, wheels-border)};
+  --cc-timepicker-btn-confirm-bg:     #{map.get($config, btn-confirm-bg)};
+  --cc-timepicker-btn-confirm-hover:  #{map.get($config, btn-confirm-hover)};
+  --cc-timepicker-btn-cancel-bg:      #{map.get($config, btn-cancel-bg)};
+  --cc-timepicker-btn-cancel-hover:   #{map.get($config, btn-cancel-hover)};
+  --cc-timepicker-btn-cancel-border:  #{map.get($config, btn-cancel-border)};
+}

package/src/lib/styles/global.scss

@@ -1,12 +1,14 @@
 @use '../modules/side-nav/side-nav.theme' as sideNav;
 @use '../modules/form-builder/form-builder.theme' as fb;
 @use '../modules/filter-table-selector/filter-table-selector.theme' as fts;
+@use '../modules/time-picker/time-picker.theme' as tp;
 @import 'quill/dist/quill.snow.css';
 @import './utilities.scss';
 
 :root {
   @include sideNav.side-nav-theme();
   @include fb.form-builder-theme();
+  @include tp.time-picker-theme();
   --cc-card-bg: #ffffff;
   --cc-card-border-color: #e0e0e0;
   --cc-card-border-radius: 8px;
@@ -85,6 +87,14 @@
   --ms-btn-add-color: #3b82f6;
   --ms-btn-add-hover: #2563eb;
 
+  /* Link List */
+  --cc-sf-link-item-bg: #ffffff;
+  --cc-sf-link-item-border: #e8eaed;
+  --cc-sf-link-item-text: #111827;
+  --cc-sf-link-delete-color: #ef4444;
+  --cc-sf-link-edit-color: #4b5563;
+  --cc-sf-link-save-color: #16a34a;
+
   @include sideNav.side-nav-theme();
 }