commons-shared-web-ui 0.0.54 → 0.0.55

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/shared-ui.module.ts

@@ -0,0 +1,55 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MaterialModule } from './modules/material/material.module';
+import { AlertModule } from './modules/alert/alert.module';
+import { ButtonModule } from './modules/button/button.module';
+import { ButtonDropdownModule } from './modules/button-dropdown/button-dropdown.module';
+import { ConfirmationModalModule } from './modules/confirmation-modal/confirmation-modal.module';
+import { FilterSidebarModule } from './modules/filter-sidebar/filter-sidebar.module';
+import { SummaryCardModule } from './modules/summary-card/summary-card.module';
+import { ConfigurableFormModule } from './modules/configurable-form/configurable-form.module';
+import { FormComponentsModule } from './modules/form-components/form-components.module';
+import { SmartFormModule } from './modules/smart-form/smart-form.module';
+import { FilterModule } from './modules/filter/filter.module';
+import { SideNavModule } from './modules/side-nav/side-nav.module';
+import { FormBuilderModule } from './modules/form-builder/form-builder.module';
+import { FormFieldConfigurationModule } from './modules/form-field-configuration/form-field-configuration.module';
+import { TableColumnConfigurationModule } from './modules/table-column-configuration/table-column-configuration.module';
+import { FilterTableSelectorModule } from './modules/filter-table-selector/filter-table-selector.module';
+import { TimePickerModule } from './modules/time-picker/time-picker.module';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    MaterialModule,
+    AlertModule, ButtonModule, ButtonDropdownModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
+    SummaryCardModule,
+    ConfigurableFormModule,
+    FormComponentsModule,
+    SmartFormModule,
+    SideNavModule,
+    FormBuilderModule,
+    FilterTableSelectorModule,
+    TimePickerModule,
+    FormFieldConfigurationModule,
+    TableColumnConfigurationModule,
+    FilterTableSelectorModule
+  ],
+  exports: [
+    MaterialModule,
+    AlertModule, ButtonModule, ButtonDropdownModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
+    SummaryCardModule,
+    ConfigurableFormModule,
+    FormComponentsModule,
+    SmartFormModule,
+    SideNavModule,
+    FormBuilderModule,
+    FilterTableSelectorModule,
+    TimePickerModule,
+    FormFieldConfigurationModule,
+    TableColumnConfigurationModule,
+    FilterTableSelectorModule
+  ],
+})
+export class SharedUiModule { }

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();
 }
 

package/src/lib/utils/constants.ts

@@ -0,0 +1,11 @@
+export const DEFAULT_ITEMS_PER_PAGE = 10;
+export const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 20, 50, 100];
+export const PAGINATION_THEME_DEFAULT = 'theme-1';
+export const PAGINATION_THEME_DARK = 'theme-2';
+
+// Nav
+export const NAV_VARIANT_DEFAULT: 'filled' | 'underline' | 'pills' = 'filled';
+export const NAV_ORIENTATION_DEFAULT: 'horizontal' | 'vertical' = 'horizontal';
+
+// Side Nav
+export const DEFAULT_SIDE_NAV_TOOLTIP_POSITION = 'right';

package/src/lib/utils/storage.utils.ts

@@ -0,0 +1,37 @@
+/**
+ * Utility functions for LocalStorage operations
+ */
+export const getLocalStorageItem = (key: string): string | null => {
+  return localStorage.getItem(key);
+};
+
+export const setLocalStorageItem = (key: string, value: string): void => {
+  localStorage.setItem(key, value);
+};
+
+export const removeLocalStorageItem = (key: string): void => {
+  localStorage.removeItem(key);
+};
+
+export const clearLocalStorage = (): void => {
+  localStorage.clear();
+};
+
+/**
+ * Utility functions for SessionStorage operations
+ */
+export const getSessionStorageItem = (key: string): string | null => {
+  return sessionStorage.getItem(key);
+};
+
+export const setSessionStorageItem = (key: string, value: string): void => {
+  sessionStorage.setItem(key, value);
+};
+
+export const removeSessionStorageItem = (key: string): void => {
+  sessionStorage.removeItem(key);
+};
+
+export const clearSessionStorage = (): void => {
+  sessionStorage.clear();
+};

package/src/lib/utils/string.utils.ts

@@ -0,0 +1,23 @@
+/**
+ * Utility functions for string manipulation
+ */
+export class StringUtils {
+
+    /**
+     * Converts a string to camelCase.
+     * Example: "First Name" -> "firstName", "Profile Picture" -> "profilePicture"
+     */
+    static toCamelCase(str?: string): string {
+        if (!str) return '';
+        return str
+            .replace(/[^a-zA-Z0-9 ]/g, '')
+            .split(' ')
+            .filter(Boolean)
+            .map((word, i) =>
+                i === 0
+                    ? word.charAt(0).toLowerCase() + word.slice(1)
+                    : word.charAt(0).toUpperCase() + word.slice(1)
+            )
+            .join('');
+    }
+}

package/src/lib/utils/translation.utils.ts

@@ -0,0 +1,87 @@
+
+/**
+ * Recursively translates the Configuration object using the provided labels map.
+ * This function processes:
+ * - Section Titles
+ * - Field Labels
+ * - Placeholders
+ * - Help Texts
+ * - Option Labels (for static options)
+ * - Repeater Labels (addLabel, repeaterItemLabel)
+ * 
+ * @param config The FormConfig object to translate
+ * @param labelsMap A map of key-value pairs for translation (Flattened JSON)
+ * @returns A new FormConfig object with translated strings
+ */
+export function translateConfig(config: any, labelsMap: any): any {
+    if (!config || !labelsMap) {
+        return config;
+    }
+
+    // Deep clone to avoid mutating original config, if not already cloned
+    // Note: Assuming config passed here is already a clone to be modified or we clone it.
+    // To be safe, let's clone it if it's the root call, but this function is helper.
+    // In component we do: processedConfig = JSON.parse(JSON.stringify(config)); -> translateConfig(processedConfig, map)
+    // So distinct reference is passed.
+
+    // Helper to translate a single key
+    const t = (key: string) => {
+        return labelsMap[key] || key;
+    };
+
+    if (config.sections) {
+        config.sections.forEach((section: any) => {
+            if (section.sectionTitle) {
+                section.sectionTitle = t(section.sectionTitle);
+            }
+            if (section.repeaterItemLabel) {
+                section.repeaterItemLabel = t(section.repeaterItemLabel);
+            }
+            if (section.addLabel) {
+                section.addLabel = t(section.addLabel);
+            }
+
+            if (section.fields) {
+                section.fields.forEach((field: any) => {
+                    translateField(field, t);
+                });
+            }
+        });
+    }
+
+    return config;
+}
+
+function translateField(field: any, t: (key: string) => string) {
+    if (field.label) {
+        field.label = t(field.label);
+    }
+    if (field.placeholder) {
+        field.placeholder = t(field.placeholder);
+    }
+    if (field.helpText) {
+        field.helpText = t(field.helpText);
+    }
+    if (field.suffixText) {
+        field.suffixText = t(field.suffixText);
+    }
+    if (field.prefixText) { // Assuming prefixText might exist or be added
+        field.prefixText = t(field.prefixText);
+    }
+
+    // Translate options if they exist
+    if (field.options) {
+        field.options.forEach((opt: any) => {
+            if (opt.label) {
+                opt.label = t(opt.label);
+            }
+        });
+    }
+
+    // Handle subFields for composite type
+    if (field.subFields) {
+        field.subFields.forEach((sub: any) => {
+            translateField(sub, t);
+        });
+    }
+}

package/src/public-api.ts

@@ -0,0 +1,127 @@
+/*
+ * Public API Surface of commons-shared-web-ui
+ */
+
+export * from './lib/modules/form-builder/form-builder.module';
+export * from './lib/modules/form-builder/components/field-selection/field-selection.component';
+export * from './lib/modules/form-builder/components/field-configurator/field-configurator.component';
+
+// ── Form Field Configuration ────────────────────────────────────────────────
+export * from './lib/modules/form-field-configuration/form-field-configuration.module';
+export * from './lib/modules/form-field-configuration/components/form-field-configuration/form-field-configuration.component';
+export * from './lib/modules/form-field-configuration/components/config-section-node/config-section-node.component';
+export * from './lib/modules/form-field-configuration/components/config-field-node/config-field-node.component';
+export * from './lib/modules/form-field-configuration/models/field-configuration.models';
+export * from './lib/modules/form-field-configuration/services/field-configuration.service';
+export * from './lib/modules/form-field-configuration/services/config-schema-tree.service';
+
+// ── Table Column Configuration ──────────────────────────────────────────────
+export * from './lib/modules/table-column-configuration/table-column-configuration.module';
+export * from './lib/modules/table-column-configuration/components/table-column-configuration/table-column-configuration.component';
+export * from './lib/modules/table-column-configuration/components/config-column-node/config-column-node.component';
+export * from './lib/modules/table-column-configuration/models/table-column-configuration.models';
+export * from './lib/modules/table-column-configuration/services/table-column-configuration.service';
+
+export * from './lib/shared-ui.module';
+export * from './lib/modules/material/material.module';
+export * from './lib/utils/storage.utils';
+export * from './lib/utils/string.utils';
+export * from './lib/utils/translation.utils';
+export * from './lib/modules/summary-card/summary-card.module';
+export * from './lib/modules/summary-card/components/summary-card/summary-card.component';
+export * from './lib/modules/configurable-form/configurable-form.module';
+export * from './lib/modules/configurable-form/component/configurable-form.component';
+// Export Configurable Form resources namespaced to avoid collisions
+export * from './lib/modules/configurable-form/configurable-form.model';
+export * as ConfigurableFormExamples from './lib/modules/configurable-form/configurable-form.examples';
+
+export * from './lib/modules/pagination/pagination.module';
+export * from './lib/modules/pagination/components/pagination/pagination.component';
+export * from './lib/modules/nav/nav.module';
+export * from './lib/modules/nav/components/nav/nav.component';
+export * from './lib/modules/nav/nav.models';
+export * from './lib/modules/side-nav/side-nav.module';
+export * from './lib/modules/side-nav/components/side-nav/side-nav.component';
+export * from './lib/modules/side-nav/side-nav.models';
+export * from './lib/utils/constants';
+export * from './lib/modules/alert/alert.module';
+export * from './lib/modules/alert/alert.models';
+export * from './lib/modules/alert/components/alert/alert.component';
+export * from './lib/modules/button/button.module';
+export * from './lib/modules/button/button.models';
+export * from './lib/modules/button/components/button/button.component';
+export * from './lib/modules/button-dropdown/button-dropdown.module';
+export * from './lib/modules/button-dropdown/button-dropdown.models';
+export * from './lib/modules/button-dropdown/components/button-dropdown/button-dropdown.component';
+export * from './lib/modules/confirmation-modal/confirmation-modal.module';
+export * from './lib/modules/confirmation-modal/confirmation-modal.models';
+export * from './lib/modules/confirmation-modal/components/confirmation-modal/confirmation-modal.component';
+export * from './lib/modules/filter-sidebar/filter-sidebar.module';
+export * from './lib/modules/filter-sidebar/filter-sidebar.models';
+export * from './lib/modules/filter-sidebar/components/filter-sidebar/filter-sidebar.component';
+export * from './lib/modules/filter/filter.module';
+export * from './lib/modules/filter/filter.models';
+export * from './lib/modules/filter/components/filter/filter.component';
+export * from './lib/modules/form-components/form-components.module';
+export * from './lib/modules/form-components/directives/click-outside.directive';
+export * from './lib/modules/form-components/components/input/input.component';
+export * from './lib/modules/form-components/components/input/input.models';
+export * from './lib/modules/form-components/components/dropdown/dropdown.component';
+export * from './lib/modules/form-components/components/dropdown/dropdown.models';
+export * from './lib/modules/form-components/components/checkbox/checkbox.component';
+export * from './lib/modules/form-components/components/checkbox/checkbox.models';
+export * from './lib/modules/form-components/components/radio/radio.component';
+export * from './lib/modules/form-components/components/radio/radio.models';
+export * from './lib/modules/form-components/components/toggle/toggle.component';
+export * from './lib/modules/form-components/components/toggle/toggle.models';
+export * from './lib/modules/form-components/components/datepicker/datepicker.component';
+export * from './lib/modules/form-components/components/datepicker/datepicker.models';
+export * from './lib/modules/form-components/components/search/search.component';
+export * from './lib/modules/form-components/components/search/search.models';
+
+export * from './lib/modules/time-picker/time-picker.module';
+export * from './lib/modules/time-picker/components/time-picker/time-picker.component';
+export * from './lib/modules/time-picker/components/time-wheel-panel/time-wheel-panel.component';
+export * from './lib/modules/time-picker/models/time-picker.models';
+export * from './lib/modules/smart-table/smart-table.module';
+export * from './lib/modules/smart-table/components/smart-table/smart-table.component';
+export * from './lib/modules/smart-table/models/table-config.model';
+export * from './lib/modules/smart-table/utils/smart-table.utils';
+export * from './lib/modules/smart-form/smart-form.module';
+export * from './lib/modules/smart-form/components/smart-form/smart-form.component';
+export {
+  FormSchema,
+  SubmitConfig,
+  FieldConfig,
+  SectionConfig,
+  StepperConfig,
+  TextConfig,
+  NumberConfig,
+  DateConfig,
+  EmailConfig,
+  PhoneConfig,
+  GeneratedConfig,
+  RangeConfig,
+  AttachmentConfig,
+  LocationConfig,
+  RatingConfig,
+  ValidationResult,
+  LengthConstraint,
+  OptionItem,
+  SuffixActionIcon
+} from './lib/modules/smart-form/models/form-schema.model';
+export * from './lib/modules/smart-form/models/hierarchy-config.model';
+export * from './lib/modules/smart-form/services/expression.service';
+export * from './lib/modules/smart-form/services/smart-form-controller.service';
+export * from './lib/modules/smart-form/utils/validation.utils';
+export * as SmartFormExamples from './lib/modules/smart-form/smart-form.examples';
+
+export * from './lib/modules/snackbar/snackbar.module';
+export * from './lib/modules/snackbar/components/snackbar.component';
+export * from './lib/modules/snackbar/models/snackbar.models';
+export * from './lib/modules/snackbar/services/snackbar.service';
+
+// ── FilterTableSelector ─────────────────────────────────────────────────────
+export * from './lib/modules/filter-table-selector/filter-table-selector.module';
+export * from './lib/modules/filter-table-selector/filter-table-selector.models';
+export * from './lib/modules/filter-table-selector/components/filter-table-selector/filter-table-selector.component';

package/tsconfig.lib.json

@@ -0,0 +1,15 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../out-tsc/lib",
+        "target": "es2022",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "exclude": [
+        "src/test.ts",
+        "**/*.spec.ts"
+    ]
+}