commons-shared-web-ui 0.0.53 → 0.0.55

package/documentation/smart-form.md

@@ -396,6 +396,10 @@ The End Date picker automatically sets its minimum to whatever value `startDate`
 | `maxTime` | string | Explicit maximum time in 24-hour `"HH:mm"` format (e.g. `"18:00"`). |
 | `inputReadonly` | boolean | When true, the input is readonly. |
 | `minTimeField` | string | Name of a sibling TIME field whose value is used as the dynamic minimum. When it changes, this field's minimum updates and any now-invalid value (earlier than the new minimum) is cleared. Mirrors `dateConfig.minTimeField`. |
+| `variant` | string | Rendering variant: `'default'` (native picker input, default) or `'wheel'` (custom drum-roll slide picker). |
+| `mode` | string | Hour display mode for `'wheel'` variant: `'12'` (12-hour, AM/PM column, default) or `'24'` (24-hour, no AM/PM). |
+| `minuteStep` | number | Minute column increment step for `'wheel'` variant. Omit (or `1`) for every minute `00–59`; a value greater than `0` adds the break (e.g. `5`, `10`, `15`, `30`). |
+| `placeholder` | string | Overridden placeholder text for the `'wheel'` variant trigger field. |
 
 **Start / End time pair** — the end time cannot be earlier than the start time (same pattern as `dateConfig.minDateField`):
 
@@ -419,6 +423,154 @@ The End Date picker automatically sets its minimum to whatever value `startDate`
 }
 ```
 
+**Custom Wheel Time Picker Example** — using the custom drum-roll picker with 12-hour mode and 15-minute increments:
+
+```json
+{
+  "name": "preferredSlot",
+  "label": "Preferred Meeting Slot",
+  "type": "TIME",
+  "subType": "SINGLE",
+  "required": true,
+  "timeConfig": {
+    "variant": "wheel",
+    "mode": "12",
+    "minuteStep": 15,
+    "minTime": "09:00",
+    "maxTime": "17:00",
+    "placeholder": "Choose a 15-minute slot"
+  }
+}
+```
+
+> **Note:** `minuteStep` omitted (or `0`/`1`) shows every minute `00–59`; any value greater than `0` adds the step break (e.g. `15` → `00, 15, 30, 45`). The wheel opens as a compact, centered modal.
+
+**Styling & Variants (SCSS)**:
+By default, the time picker uses the black/grey theme (Image 2 style). To use a blue accent variant instead, include the theme mixin with overrides inside your global stylesheet or MFE container styles:
+
+```scss
+@use 'commons-shared-web-ui/lib/modules/time-picker/time-picker.theme' as tp;
+
+// Default variant (Black/Grey Color Scheme)
+:root {
+  @include tp.time-picker-theme();
+}
+
+// Blue Accent Variant
+:root {
+  @include tp.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,
+    btn-cancel-bg:       transparent,
+    btn-cancel-border:   #e5e7eb,
+    btn-cancel-hover:    #e5e7eb
+  ));
+}
+```
+
+**Time Picker i18n labels** — the `'wheel'` variant reads these keys from the form-level `[labels]` map (all optional; each falls back to English):
+
+| Label key | Applies to | Default |
+| --- | --- | --- |
+| `TIME_PICKER.SELECT_TIME` | Popup title | `Select Time` |
+| `TIME_PICKER.HOUR` | Hour column header | `Hour` |
+| `TIME_PICKER.MINUTE` | Minute column header | `Minute` |
+| `TIME_PICKER.PERIOD` | AM/PM column header | `AM/PM` |
+| `TIME_PICKER.AM` / `TIME_PICKER.PM` | Period values | `AM` / `PM` |
+| `COMMON.ACTIONS.CONFIRM` | Confirm button | `Confirm` |
+| `COMMON.ACTIONS.CANCEL` | Cancel button | `Cancel` |
+
+#### Complete Example (TIME wheel field in a Smart Form)
+
+A full form schema with a start/end wheel time-picker pair, plus the parent-component wiring and picker i18n labels.
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-booking-form',
+  template: `
+    <lib-smart-form
+      [formJson]="formJson"
+      [labels]="labels"
+      (submit)="onSubmit($event)">
+    </lib-smart-form>
+  `
+})
+export class BookingFormComponent {
+  formJson = JSON.stringify({
+    entityType: 'BOOKING',
+    label: 'FORM.BOOKING_TITLE',
+    formType: 'SECTION',
+    sectionConfig: {
+      children: [
+        {
+          type: 'ROW',
+          subType: 'HORIZONTAL',
+          children: [
+            {
+              name: 'startTime',
+              label: 'FIELD.START_TIME',
+              type: 'TIME',
+              subType: 'SINGLE',
+              required: true,
+              colSpan: 6,
+              timeConfig: {
+                variant: 'wheel',
+                mode: '12',
+                minuteStep: 15,
+                minTime: '09:00',
+                maxTime: '18:00'
+              }
+            },
+            {
+              name: 'endTime',
+              label: 'FIELD.END_TIME',
+              type: 'TIME',
+              subType: 'SINGLE',
+              required: true,
+              colSpan: 6,
+              timeConfig: {
+                variant: 'wheel',
+                mode: '12',
+                minuteStep: 15,
+                minTimeField: 'startTime'   // end cannot precede start
+              }
+            }
+          ]
+        }
+      ]
+    },
+    submitConfig: {
+      apiUrl: 'https://api.example.com/bookings',
+      method: 'POST',
+      successMessage: 'Booking created!'
+    }
+  });
+
+  labels = {
+    'FORM.BOOKING_TITLE': 'New Booking',
+    'FIELD.START_TIME': 'Start Time',
+    'FIELD.END_TIME': 'End Time',
+    // Time picker popup i18n
+    'TIME_PICKER.SELECT_TIME': 'Pick a time',
+    'TIME_PICKER.HOUR': 'Hour',
+    'TIME_PICKER.MINUTE': 'Min',
+    'TIME_PICKER.PERIOD': 'AM/PM',
+    'COMMON.ACTIONS.CONFIRM': 'Confirm',
+    'COMMON.ACTIONS.CANCEL': 'Cancel'
+  };
+
+  onSubmit(payload: any): void {
+    // { startTime: "09:15 AM", endTime: "10:00 AM" }
+    console.log('Booking:', payload);
+  }
+}
+```
+
 ### 5. Autocomplete (AUTOCOMPLETE)
 
 A searchable input backed by Angular Material's `mat-autocomplete`. As the user types, the option list is filtered by label or code. The form control stores the **code** value, while the input shows the human-readable **label**.
@@ -989,6 +1141,87 @@ Provides a WYSIWYG rich text editor using Quill.
 
 Supported tokens: `bold`, `italic`, `underline`, `strike`, `blockquote`, `code`, `font`, `size`, `color`, `background`, `align`, `header1`, `header2`, `orderedList`, `bulletList`, `subscript`, `superscript`, `indentMinus`, `indentPlus`, `link`, `image`, `video`, `clean`.
 
+### 14. Link List (LINK_LIST)
+
+Allows users to manage a list of URLs dynamically. Provides a text input box with a trailing plus icon to add links, displaying them as a list above or below the input field.
+
+**Configuration Properties (`linkListConfig`):**
+
+| Property | Type | Description |
+|---|---|---|
+| `listPosition` | `'top' \| 'bottom'` | Renders the link list above or below the input field (default: `'bottom'`). |
+| `editable` | `boolean` | Allows inline editing of existing links in the list (default: `true`). |
+| `deleteable` | `boolean` | Shows a delete action button on list items (default: `true`). |
+| `valueFormat` | `'string' \| 'array' \| 'object'` | Format in which data is stored in the form control: `'string'` (separated by `separator`), `'array'` (array of strings), or `'object'` (array of objects) (default: `'string'`). |
+| `separator` | `string` | Character used to separate links when `valueFormat` is `'string'` (default: `','`). |
+| `urlKey` | `string` | The object key used to store/load the link URL when `valueFormat` is `'object'` (default: `'linkUrl'`). |
+| `idField` | `string` | The object key representing the link identifier when resolving API placeholders (default: `'id'`). |
+| `deleteApiUrl` | `string` | Optional API endpoint to execute an HTTP DELETE call upon removing a saved item (e.g. `/api/v1/links/:id`). |
+| `editApiUrl` | `string` | Optional API endpoint to execute an HTTP PUT call upon editing a saved item (e.g. `/api/v1/links/:id`). |
+| `pattern` | `string` | Regular expression pattern for validating each link (default URL validator regex: `^https?://([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,}(/\S*)?$`). |
+| `patternMessage` | `string` | Custom error message displayed if pattern validation fails. |
+| `colSpan` | `number` | Grid column span (1-12) for each list item in the 12-column grid. E.g., `6` for two columns side-by-side (default: `12`). |
+
+**Example Config (Storing as an Array of Objects):**
+
+```json
+{
+  "name": "externalLinks",
+  "label": "External Links",
+  "type": "LINK_LIST",
+  "placeholder": "Enter link...",
+  "colSpan": 12,
+  "linkListConfig": {
+    "listPosition": "bottom",
+    "editable": true,
+    "deleteable": true,
+    "valueFormat": "object",
+    "urlKey": "linkUrl"
+  }
+}
+```
+
+**Example Config (Storing as a Comma-Separated String):**
+
+```json
+{
+  "name": "externalLinks",
+  "label": "External Links",
+  "type": "LINK_LIST",
+  "placeholder": "Enter link...",
+  "colSpan": 12,
+  "linkListConfig": {
+    "listPosition": "top",
+    "editable": true,
+    "deleteable": true,
+    "valueFormat": "string",
+    "separator": ","
+  }
+}
+```
+
+**Example Config (Two-Column Layout with Regex Validation):**
+
+```json
+{
+  "name": "externalLinks",
+  "label": "External Links",
+  "type": "LINK_LIST",
+  "placeholder": "Enter link...",
+  "colSpan": 12,
+  "linkListConfig": {
+    "listPosition": "bottom",
+    "editable": true,
+    "deleteable": true,
+    "valueFormat": "object",
+    "urlKey": "linkUrl",
+    "colSpan": 6,
+    "pattern": "^https?://([a-zA-Z0-9\\-]+\\.)+com(/\\S*)?$",
+    "patternMessage": "Only .com domain links are allowed"
+  }
+}
+```
+
 ---
 
 ## Layout System
@@ -2104,6 +2337,7 @@ All variables are prefixed `--cc-sf-`. They are generated by the mixin and casca
 
 ### Contact Form
 
+```json
 {
 "entityType": "CONTACT",
 "label": "Contact Us",
@@ -2147,8 +2381,7 @@ All variables are prefixed `--cc-sf-`. They are generated by the mixin and casca
 ]
 }
 }
-
-````
+```
 
 ### User Registration with Password Validation
 
@@ -2203,7 +2436,7 @@ All variables are prefixed `--cc-sf-`. They are generated by the mixin and casca
     ]
   }
 }
-````
+```
 
 ### Section Stepper with `showOnLastStepOnly`
 

package/documentation/time-picker.md

@@ -0,0 +1,274 @@
+# Time Picker Component (`lib-time-picker`)
+
+A highly customizable, slot-machine / drum-roll style wheel picker component that supports 12-hour or 24-hour modes, custom minute steps, disabled time range limits (`minTime` and `maxTime`), full touch interaction, and accessibility attributes.
+
+---
+
+## 1. Importing the Module
+
+To use the time picker in your Angular application (or within a Micro Frontend Remote MFE), import `TimePickerModule` into your Angular module:
+
+```typescript
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TimePickerModule } from 'commons-shared-web-ui';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    TimePickerModule
+  ]
+})
+export class MyFeatureModule {}
+```
+
+---
+
+## 2. Basic Component Usage
+
+### Template-Driven Form / Two-Way Binding (`ngModel`)
+```html
+<lib-time-picker
+  [(ngModel)]="selectedTime"
+  [label]="'Meeting Time'"
+  [placeholder]="'Choose a time'"
+  [required]="true"
+  [mode]="'12'"
+  [minuteStep]="15">
+</lib-time-picker>
+```
+
+### Reactive Forms (`formControlName`)
+```html
+<form [formGroup]="form">
+  <lib-time-picker
+    [formControlName]="'startTime'"
+    [label]="'Start Time'"
+    [mode]="'24'"
+    [minTime]="'08:00'"
+    [maxTime]="'18:00'">
+  </lib-time-picker>
+</form>
+```
+
+### Complete Example (Reactive Form + Events)
+
+A full working component wiring up two pickers with a time range, a minute step, and the `(timeChange)` output.
+
+```typescript
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-schedule-form',
+  templateUrl: './schedule-form.component.html'
+})
+export class ScheduleFormComponent {
+  form: FormGroup = this.fb.group({
+    startTime: ['09:00 AM', Validators.required],
+    endTime:   ['05:00 PM', Validators.required]
+  });
+
+  constructor(private fb: FormBuilder) {}
+
+  onStartChange(value: string): void {
+    // Emitted on Confirm — "hh:mm AM|PM" (12h) or "HH:mm" (24h)
+    console.log('Start time selected:', value);
+  }
+
+  submit(): void {
+    if (this.form.valid) {
+      console.log('Schedule:', this.form.value);
+    }
+  }
+}
+```
+
+```html
+<form [formGroup]="form" (ngSubmit)="submit()">
+  <lib-time-picker
+    formControlName="startTime"
+    [label]="'Start Time'"
+    [placeholder]="'Select start'"
+    [required]="true"
+    [mode]="'12'"
+    [minuteStep]="15"
+    [errorMessage]="form.get('startTime')?.touched && form.get('startTime')?.invalid ? 'Start time is required' : ''"
+    (timeChange)="onStartChange($event)">
+  </lib-time-picker>
+
+  <lib-time-picker
+    formControlName="endTime"
+    [label]="'End Time'"
+    [mode]="'12'"
+    [minuteStep]="15"
+    [minTime]="'09:00'"
+    [maxTime]="'21:00'">
+  </lib-time-picker>
+
+  <button type="submit" [disabled]="form.invalid">Save</button>
+</form>
+```
+
+### Complete Example (Single `config` object)
+
+Every input can also be supplied through one `TimePickerConfig` object — handy when the config comes from JSON/i18n.
+
+```typescript
+import { Component } from '@angular/core';
+import { TimePickerConfig } from 'commons-shared-web-ui';
+
+@Component({
+  selector: 'app-reminder',
+  template: `
+    <lib-time-picker
+      [(ngModel)]="reminderTime"
+      [config]="pickerConfig"
+      (timeChange)="reminderTime = $event">
+    </lib-time-picker>
+  `
+})
+export class ReminderComponent {
+  reminderTime = '';
+
+  pickerConfig: TimePickerConfig = {
+    label: 'Daily Reminder',
+    placeholder: 'Pick a time',
+    mode: '24',
+    minuteStep: 5,        // 0/1 = every minute; > 0 adds the break
+    required: true,
+    minTime: '06:00',
+    maxTime: '23:30'
+  };
+}
+```
+
+---
+
+## 3. Configuration Properties
+
+### Inputs
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `config` | `TimePickerConfig` | `undefined` | Unified configuration object that mirrors individual inputs. |
+| `labels` | `TimePickerLabels` | `undefined` | i18n label map keys. |
+| `label` | `string` | `""` | The label text displayed above the trigger input. |
+| `placeholder` | `string` | `""` | Placeholder text shown inside the input when no time is selected. |
+| `mode` | `'12' \| '24'` | `'12'` | Hour display format. `'12'` shows a AM/PM column, while `'24'` runs from 00-23. |
+| `minuteStep` | `number` | `0` | Increment for the minutes column. `0` (or `1`) shows every minute `00–59` with no break; a value greater than `0` adds the step break (e.g. `15` → `00, 15, 30, 45`). |
+| `disabled` | `boolean` | `false` | Disables the trigger field, blocking popup opening. |
+| `required` | `boolean` | `false` | Appends a red asterisk to the field label. |
+| `errorMessage` | `string` | `""` | Validation error message text. |
+| `minTime` | `string` | `undefined` | Minimum allowed limit in 24hr `"HH:mm"` string format (e.g., `"09:30"`). |
+| `maxTime` | `string` | `undefined` | Maximum allowed limit in 24hr `"HH:mm"` string format (e.g., `"17:00"`). |
+
+### `TimePickerLabels` Properties
+When passing the `[labels]` input, you can provide any of the following fields (all optional, falling back to English defaults):
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `selectTimeTitle` | `string` | `'Select Time'` | The subtle header title printed at the top of the dialog. |
+| `hourLabel` | `string` | `'Hour'` | Header label shown above the hour column. |
+| `minuteLabel` | `string` | `'Minute'` | Header label shown above the minute column. |
+| `periodLabel` | `string` | `'AM/PM'` | Header label shown above the AM/PM column (12h mode only). |
+| `confirmLabel` | `string` | `'Confirm'` | Confirm button text. |
+| `cancelLabel` | `string` | `'Cancel'` | Cancel button text. |
+
+### Outputs
+| Output | Type | Description |
+| --- | --- | --- |
+| `timeChange` | `EventEmitter<string>` | Emitted when a time is confirmed and closed. Emits `"hh:mm AM\|PM"` for `'12'` mode, or `"HH:mm"` for `'24'` mode. |
+
+---
+
+## 4. Styling & Customization in MFEs
+
+The time-picker has two main styling options: the **Default (Black/Grey)** scheme (matching Image 2) and the **Blue Accent** scheme. These are easily set via the theme mixin or global CSS variables.
+
+### Variant Options (SCSS)
+
+#### Option 1: Default (Black/Grey Theme — Image 2)
+The default theme features black text active indicators, borderless wheels, a light-grey center highlight bar, a black Confirm button, and a light-grey Cancel button.
+
+```scss
+@use 'commons-shared-web-ui/lib/modules/time-picker/time-picker.theme' as tp;
+
+:root {
+  @include tp.time-picker-theme();
+}
+```
+
+#### Option 2: Blue Accent Variant
+The blue accent theme uses the same layout and headers, but changes highlights, preview text, active wheel items, and buttons to use the blue accent color.
+
+```scss
+@use 'commons-shared-web-ui/lib/modules/time-picker/time-picker.theme' as tp;
+
+:root {
+  @include tp.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,
+    btn-cancel-bg:       transparent,
+    btn-cancel-border:   #e5e7eb,
+    btn-cancel-hover:    #e5e7eb
+  ));
+}
+```
+
+You can style the trigger inputs and picker wheels using two different methods: using Scss Mixins or CSS Custom Properties.
+
+### Method A: Including Theme Mixin inside MFE Component SCSS
+
+To scope the theme changes inside a specific feature component or the main MFE root stylesheet, use the `@use` rule to import the SCSS file and `@include` the mixin:
+
+```scss
+// remote-mfe/src/app/feature/feature.component.scss
+
+@use 'commons-shared-web-ui/lib/modules/time-picker/time-picker.theme' as tp;
+
+// Apply default theme to component scope
+:host {
+  @include tp.time-picker-theme();
+}
+
+// OR customize theme properties:
+.custom-theme-picker {
+  @include tp.time-picker-theme((
+    accent: #C21E25,                  // Crimson Red brand color
+    accent-light: rgba(194, 30, 37, 0.08),
+    accent-border: rgba(194, 30, 37, 0.15),
+    btn-confirm-bg: #C21E25,
+    btn-confirm-hover: #a1141a,
+    border-radius: 8px
+  ));
+}
+```
+
+### Method B: Overriding CSS Custom Properties directly
+
+If you prefer not to include mixins, you can set the CSS variables directly in your MFE stylesheet:
+
+```css
+/* remote-mfe/src/styles.scss */
+:root {
+  --cc-timepicker-accent: #C21E25;
+  --cc-timepicker-accent-light: rgba(194, 30, 37, 0.08);
+  --cc-timepicker-accent-border: rgba(194, 30, 37, 0.15);
+  --cc-timepicker-btn-confirm-bg: #C21E25;
+  --cc-timepicker-btn-confirm-hover: #a1141a;
+  --cc-timepicker-border-radius: 8px;
+}
+```
+
+---
+
+## 5. Constraint Engine Enforcement
+
+When `minTime` and/or `maxTime` is specified:
+1. Slices of time that violate the boundaries are **automatically greyed out** (`opacity: 0.25`) and have pointer events disabled.
+2. Clicking on a disabled item will not trigger selection.
+3. Flicking or scrolling past a disabled value snaps to the **closest valid item** automatically.
+4. Changing the AM/PM column to a period where the current hour is disabled triggers an automatic visual snap transition to a valid hour.

package/ng-package.json

@@ -23,6 +23,8 @@
         "src/lib/modules/side-nav/side-nav.theme.scss",
         "src/lib/modules/form-builder/form-builder.theme.scss",
         "src/lib/modules/filter-table-selector/filter-table-selector.theme.scss",
-        "src/lib/modules/snackbar/snackbar.theme.scss"
+        "src/lib/modules/snackbar/snackbar.theme.scss",
+        "src/lib/modules/button-dropdown/button-dropdown.theme.scss",
+        "src/lib/modules/time-picker/time-picker.theme.scss"
     ]
 }

package/package.json

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

package/src/lib/modules/form-components/form-components.module.ts

@@ -35,7 +35,8 @@ import { ClickOutsideDirective } from './directives/click-outside.directive';
         RadioComponent,
         ToggleComponent,
         DatepickerComponent,
-        SearchComponent
+        SearchComponent,
+        ClickOutsideDirective
     ]
 })
 export class FormComponentsModule { }

package/src/lib/modules/form-field-configuration/services/config-schema-tree.service.ts

@@ -83,13 +83,24 @@ export class ConfigSchemaTreeService {
       }
     }
 
-    const visible = (field.isEnabled ?? field.visible ?? true) && field.disabled !== true;
+    // A section is locked (toggle replaced by a lock, can never be hidden) when its
+    // own field is locked OR any descendant field/subsection is locked — hiding the
+    // section would otherwise hide a field that must always stay visible. Subsection
+    // locks are already transitive, so checking direct children is enough.
+    const hasLockedDescendant =
+      fields.some(f => f.lockVisibility) || subsections.some(s => s.lockVisibility);
+    const lockVisibility = field.lockVisibility === true || hasLockedDescendant;
+
+    // Locked sections are always visible; otherwise honour the schema's flags.
+    const visible = lockVisibility
+      ? true
+      : (field.isEnabled ?? field.visible ?? true) && field.disabled !== true;
     return {
       label: field.sectionConfig?.label || field.label || field.name || 'Section',
       fieldConfig: field,
       sectionConfig: field.sectionConfig ?? null,
       visible,
-      lockVisibility: field.lockVisibility === true,
+      lockVisibility,
       expanded: true,
       fields,
       subsections,

package/src/lib/modules/side-nav/components/side-nav/side-nav.component.scss

@@ -268,7 +268,7 @@
 
 .cc-side-nav-label {
   flex: 1;
-  white-space: nowrap;
+  white-space: wrap;
   overflow: hidden;
   max-width: 200px;
   opacity: 1;