platformcommons-web-lib 1.0.0

package/src/lib/modules/filter-table-selector/filter-table-selector.models.ts

@@ -0,0 +1,91 @@
+import { FormSchema } from '../smart-form/models/form-schema.model';
+import { TableConfig } from '../smart-table/models/table-config.model';
+
+/**
+ * Maps a SmartForm field name to its corresponding API query-param key.
+ */
+export interface FilterParamMap {
+  /** Field name as declared in sectionConfig.children (e.g. "country") */
+  formFieldName: string;
+  /** Actual query-param key sent to the table API (e.g. "currentCountryCode") */
+  apiParamKey: string;
+}
+
+/**
+ * Configuration for the left-hand filter panel (powered by SmartForm).
+ */
+export interface FilterPanelConfig {
+  /** Full SmartForm JSON schema (entityType, sectionConfig, actionBarConfig, etc.) */
+  smartFormConfig: FormSchema;
+  /** Maps each form field to the API query-param that the table expects */
+  filterParamMapping: FilterParamMap[];
+  /**
+   * Optional default values pre-filled when the component opens AND restored on Clear Filter.
+   * Key = formFieldName, Value = the field value.
+   * When provided, the initial table load will include these params.
+   */
+  defaultValues?: Record<string, any>;
+  /**
+   * List of field names that should be rendered as disabled/read-only.
+   * The values are still used when building API params, but users cannot change them.
+   * Their values are preserved when Clear Filter is triggered.
+   */
+  disabledFields?: string[];
+  /**
+   * i18n key or literal text for the "Clear Filter" button.
+   * Defaults to 'COMMON.FILTER_TABLE.CLEAR_FILTER'.
+   */
+  clearFilterLabel?: string;
+  /**
+   * i18n key or literal text for the "Apply Filter" button.
+   * Defaults to 'COMMON.FILTER_TABLE.APPLY_FILTER'.
+   */
+  applyFilterLabel?: string;
+}
+
+/**
+ * Controls selection behaviour and bottom action bar labels.
+ */
+export interface SelectionConfig {
+  /** Allow selecting multiple rows (true = checkbox per row, false = radio). */
+  multiSelect: boolean;
+  /**
+   * i18n token for the "X of Y users Selected" counter.
+   * Use placeholders {selected} and {total}.
+   * Example: "COMMON.FILTER_TABLE.SELECTION_COUNT"
+   */
+  selectionCountLabel: string;
+  /** i18n token (or literal text) for the primary submit button. */
+  submitButtonLabel: string;
+  /** i18n token (or literal text) for the secondary cancel/back button. */
+  cancelButtonLabel: string;
+}
+
+/**
+ * Top-level configuration object for FilterTableSelectorComponent.
+ */
+export interface FilterTableSelectorConfig {
+  /** Dialog / modal heading. */
+  title?: string;
+  /** Left-panel filter form configuration. */
+  filterConfig: FilterPanelConfig;
+  /**
+   * Right-panel table configuration.
+   * Extends the standard SmartTable config; `selectable` should be true.
+   * `multiSelect` is controlled via selectionConfig.multiSelect.
+   */
+  tableConfig: FilterTableConfig;
+  /** Selection behaviour and bottom action bar labels. */
+  selectionConfig: SelectionConfig;
+}
+
+/**
+ * Extended TableConfig for FilterTableSelector — adds multiSelect support.
+ */
+export interface FilterTableConfig extends TableConfig {
+  /**
+   * When true (and selectable=true), multiple rows can be selected simultaneously.
+   * When false, only one row can be selected at a time (radio behaviour).
+   */
+  multiSelect?: boolean;
+}

package/src/lib/modules/filter-table-selector/filter-table-selector.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FilterTableSelectorComponent } from './components/filter-table-selector/filter-table-selector.component';
+import { SmartFormModule } from '../smart-form/smart-form.module';
+import { SmartTableModule } from '../smart-table/smart-table.module';
+import { ButtonModule } from '../button/button.module';
+
+@NgModule({
+  declarations: [
+    FilterTableSelectorComponent
+  ],
+  imports: [
+    CommonModule,
+    SmartFormModule,
+    SmartTableModule,
+    ButtonModule
+  ],
+  exports: [
+    FilterTableSelectorComponent
+  ]
+})
+export class FilterTableSelectorModule { }

package/src/lib/modules/filter-table-selector/filter-table-selector.theme.scss

@@ -0,0 +1,36 @@
+@use 'sass:map';
+
+$filter-table-selector-config: (
+  panel-bg: #ffffff,
+  filter-panel-width: 220px,
+  filter-panel-border: 1px solid #dee2e6,
+  header-bg: #ffffff,
+  header-border: 1px solid #dee2e6,
+  header-height: 56px,
+  header-padding: 0 24px,
+  header-title-color: #333333,
+  header-title-font-size: 18px,
+  header-title-font-weight: 600,
+  footer-bg: #ffffff,
+  footer-border: 1px solid #dee2e6,
+  footer-height: 64px,
+  footer-padding: 0 24px,
+  footer-gap: 12px,
+  body-bg: #f8f9fb,
+  filter-section-title-color: #666666,
+  filter-section-title-font-size: 12px,
+  filter-section-title-font-weight: 600,
+  selection-count-color: #666666,
+  selection-count-font-size: 14px,
+  toolbar-border: 1px solid #dee2e6,
+);
+
+@mixin filter-table-selector-theme($user-config: ()) {
+  $config: map.merge($filter-table-selector-config, $user-config);
+
+  :root {
+    @each $key, $value in $config {
+      --fts-#{$key}: #{$value};
+    }
+  }
+}

package/src/lib/modules/form-builder/components/field-configurator/configurator-config-panel/configurator-config-panel.component.html

@@ -0,0 +1,63 @@
+<div class="fb-config-panel">
+  @if (!selectedField) {
+    <div class="fb-config-panel__empty">
+      <div class="fb-config-panel__empty-icon">
+        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+          <line x1="3" y1="9" x2="21" y2="9"/>
+          <line x1="9" y1="21" x2="9" y2="9"/>
+        </svg>
+      </div>
+      <p class="fb-config-panel__empty-text">
+        Select a field from the tree panel to edit its configuration.
+      </p>
+    </div>
+  } @else {
+    <div class="fb-config-panel__header">
+      <div class="fb-config-panel__header-left">
+        <h3 class="fb-config-panel__title">
+          {{ selectedField.label || selectedField.name || 'Field Settings' }}
+        </h3>
+        @if (selectedField.type) {
+          <span class="fb-config-panel__badge">{{ selectedField.type }}</span>
+        }
+      </div>
+
+      <!-- Field Type Switcher: hidden for DROPDOWN / MULTI_SELECT fields -->
+      @if (!isDropdownType) {
+        <div class="fb-config-panel__type-switcher">
+          <label class="fb-config-panel__type-label" for="fb-field-type-select">Field Type</label>
+          <select
+            id="fb-field-type-select"
+            class="fb-config-panel__type-select"
+            [value]="currentBuilderType"
+            (change)="onTypeSelectChange($event)"
+          >
+            @for (opt of switchableFieldTypes; track opt.value) {
+              <option [value]="opt.value">{{ opt.label }}</option>
+            }
+          </select>
+        </div>
+      }
+    </div>
+
+    <div class="fb-config-panel__form-wrapper">
+      @if (showConfigForm && configFormJson) {
+        <div class="fb-config-card">
+          <lib-smart-form
+            [formJson]="configFormJson"
+            [initialValues]="configInitialValues"
+            (actionClick)="onActionClick($event)"
+          />
+        </div>
+      } @else if (!showConfigForm) {
+        <!-- intentionally empty — SmartForm is being recycled -->
+      } @else {
+        <div class="fb-config-panel__error">
+          No configuration schema available for this field type.
+        </div>
+      }
+    </div>
+  }
+</div>

package/src/lib/modules/form-builder/components/field-configurator/configurator-config-panel/configurator-config-panel.component.scss

@@ -0,0 +1,496 @@
+@use '../../../form-builder.theme' as theme;
+@use '../../../../smart-form/smart-form.theme' as sf;
+
+.fb-config-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--fb-fc-panel-bg, #f9fafb);
+  overflow: hidden;
+
+  // Apply smart-form theme at container level so CSS variables cascade to all nested components
+  // This ensures lib-smart-form and form-section components receive the CSS variables
+  // regardless of ViewEncapsulation.Emulated boundary
+
+  // ──────────────────────────────────────────────────────────────────────────────
+  // RESPONSIVE THEME CONFIGURATION
+  // Optimized for visual hierarchy and readability across all screen sizes
+  // ──────────────────────────────────────────────────────────────────────────────
+
+  // Default (Mobile-First): 480px+
+  @include sf.smart-form-theme((
+    section-padding: 12px,
+    section-border: none,
+    section-shadow: none,
+    section-bg: transparent,
+    form-padding: 0,
+    form-bg: transparent,
+    form-shadow: none,
+    grid-gap: 12px,
+    label-size: 0.75rem,
+    label-weight: 600,
+    input-padding: 0.5rem 0.75rem,
+  ));
+
+  // Tablet Portrait (600px+): Better spacing for readability
+  @media (min-width: 600px) {
+    @include sf.smart-form-theme((
+      section-padding: 14px,
+      section-border: none,
+      section-shadow: none,
+      section-bg: transparent,
+      form-padding: 0,
+      form-bg: transparent,
+      form-shadow: none,
+      grid-gap: 14px,
+      label-size: 0.8rem,
+      label-weight: 600,
+      input-padding: 0.5rem 0.75rem,
+    ));
+  }
+
+  // Tablet Landscape (768px+): Balanced comfortable spacing
+  @media (min-width: 768px) {
+    @include sf.smart-form-theme((
+      section-padding: 16px,
+      section-border: none,
+      section-shadow: none,
+      section-bg: transparent,
+      form-padding: 0,
+      form-bg: transparent,
+      form-shadow: none,
+      grid-gap: 16px,
+      label-size: 0.8125rem,
+      label-weight: 600,
+      input-padding: 0.625rem 0.875rem,
+    ));
+  }
+
+  // Desktop (1024px+): Optimal form experience
+  @media (min-width: 1024px) {
+    @include sf.smart-form-theme((
+      section-padding: 16px,
+      section-border: none,
+      section-shadow: none,
+      section-bg: transparent,
+      form-padding: 0,
+      form-bg: transparent,
+      form-shadow: none,
+      grid-gap: 16px,
+      label-size: 0.8125rem,
+      label-weight: 600,
+      input-padding: 0.625rem 0.875rem,
+    ));
+  }
+
+  // Large Desktop (1440px+): Generous spacing
+  @media (min-width: 1440px) {
+    @include sf.smart-form-theme((
+      section-padding: 18px,
+      section-border: none,
+      section-shadow: none,
+      section-bg: transparent,
+      form-padding: 0,
+      form-bg: transparent,
+      form-shadow: none,
+      grid-gap: 18px,
+      label-size: 0.8125rem,
+      label-weight: 600,
+      input-padding: 0.625rem 0.875rem,
+    ));
+  }
+
+  // Ultra-wide (1920px+): Maximum breathing room
+  @media (min-width: 1920px) {
+    @include sf.smart-form-theme((
+      section-padding: 18px,
+      section-border: none,
+      section-shadow: none,
+      section-bg: transparent,
+      form-padding: 0,
+      form-bg: transparent,
+      form-shadow: none,
+      grid-gap: 18px,
+      label-size: 0.8125rem,
+      label-weight: 600,
+      input-padding: 0.625rem 0.875rem,
+    ));
+  }
+
+  &__empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--fb-fc-empty-color, #9ca3af);
+    text-align: center;
+    padding: 48px 24px;
+
+    @media (max-width: 640px) {
+      padding: 24px 16px;
+    }
+
+    &-icon {
+      margin-bottom: 24px;
+      opacity: 0.4;
+      color: var(--fb-fc-accent, #3b82f6);
+
+      @media (max-width: 640px) {
+        margin-bottom: 16px;
+      }
+    }
+
+    &-text {
+      font-size: 15px;
+      max-width: 320px;
+      line-height: 1.6;
+      font-weight: 500;
+
+      @media (max-width: 640px) {
+        font-size: 14px;
+        max-width: 100%;
+      }
+    }
+  }
+
+  &__header {
+    background: var(--fb-fc-header-bg, #ffffff);
+    padding: 1.4rem; //20px 32px;
+    border-bottom: 1px solid var(--fb-fc-border, #e5e7eb);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+    gap: 16px;
+    flex-wrap: wrap;
+
+    @media (max-width: 768px) {
+      padding: 16px 24px;
+      gap: 12px;
+    }
+
+    @media (max-width: 640px) {
+      padding: 12px 16px;
+      gap: 8px;
+    }
+
+    &-left {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      min-width: 0;
+      flex-wrap: wrap;
+
+      @media (max-width: 640px) {
+        gap: 8px;
+      }
+    }
+  }
+
+  &__type-switcher {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+
+    @media (max-width: 640px) {
+      gap: 4px;
+    }
+  }
+
+  &__type-label {
+    font-size: var(--fb-fc-type-label-size, 0.75rem);
+    font-weight: 600;
+    color: var(--fb-fc-type-label-color, #6b7280);
+    white-space: nowrap;
+
+    @media (max-width: 640px) {
+      font-size: 0.7rem;
+    }
+  }
+
+  &__type-select {
+    height: var(--fb-fc-type-select-height, 36px);
+    padding: 0 32px 0 10px;
+    border: 1px solid var(--fb-fc-type-select-border, #d1d5db);
+    border-radius: var(--fb-fc-type-select-radius, 8px);
+    background-color: var(--fb-fc-type-select-bg, #ffffff);
+    color: var(--fb-fc-type-select-color, #111827);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    min-width: 160px;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+    @media (max-width: 640px) {
+      height: 32px;
+      font-size: 0.75rem;
+      min-width: 140px;
+      padding: 0 28px 0 8px;
+    }
+
+    &:hover {
+      border-color: var(--fb-fc-type-select-hover-border, #9ca3af);
+    }
+
+    &:focus {
+      outline: none;
+      border-color: var(--fb-fc-accent, #3b82f6);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
+    }
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--fb-fc-title-color, #111827);
+
+    @media (max-width: 1024px) {
+      font-size: 1.125rem;
+    }
+
+    @media (max-width: 640px) {
+      font-size: 1rem;
+    }
+  }
+
+  &__badge {
+    padding: 4px 12px;
+    background: var(--fb-fc-badge-bg, #eff6ff);
+    color: var(--fb-fc-badge-color, #3b82f6);
+    border-radius: 20px;
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border: 1px solid var(--fb-fc-badge-border, #dbeafe);
+
+    @media (max-width: 640px) {
+      padding: 3px 8px;
+      font-size: 9px;
+    }
+  }
+
+  &__form-wrapper {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: 100%;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    box-sizing: border-box;
+
+    // Mobile First: Tight padding for small screens
+    padding: 12px 16px;
+
+    // Tablet Portrait (600px+): Increase comfort space
+    @media (min-width: 600px) {
+      padding: 16px 20px;
+    }
+
+    // Tablet Landscape (768px+): Better vertical breathing room
+    @media (min-width: 768px) {
+      padding: 20px 24px;
+    }
+
+    // Desktop (1024px+): Comfortable padding
+    @media (min-width: 1024px) {
+      padding: 1rem;
+    }
+
+    // Large Desktop (1440px+): Spacious padding
+    @media (min-width: 1440px) {
+      padding: 28px 40px;
+    }
+
+    // Ultra-wide (1920px+): Maximum breathing room
+    @media (min-width: 1920px) {
+      padding: 32px 48px;
+    }
+
+    .fb-config-card {
+      width: 100%;
+      max-width: none;
+      margin: 0;
+      background: transparent;
+      border: none;
+      box-shadow: none;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      flex: 1;
+      box-sizing: border-box;
+
+      // ────────────────────────────────────────────────────────────────────────────
+      // RESPONSIVE FORM FIELD LAYOUT
+      // Professional responsive grid for form fields - centered design
+      // ────────────────────────────────────────────────────────────────────────────
+
+      // Form field wrapper styling
+      ::ng-deep .sf-col {
+        // display: flex;
+        min-width: 0;
+      }
+
+      // Horizontal form rows - flexible responsive layout
+      ::ng-deep .form-row.horizontal {
+        display: grid;
+        grid-auto-flow: dense;
+        gap: 12px;
+        width: 100%;
+        align-items: start;
+
+        // Mobile (< 600px): Single column, full width
+        @media (max-width: 599px) {
+          grid-template-columns: 1fr;
+          gap: 12px;
+        }
+
+        // Tablet Portrait (600px-768px): Single column with better gap
+        @media (min-width: 600px) and (max-width: 767px) {
+          grid-template-columns: 1fr;
+          gap: 14px;
+        }
+
+        // Tablet Landscape (768px-1024px): 2 columns
+        @media (min-width: 768px) and (max-width: 1023px) {
+          grid-template-columns: repeat(2, 1fr);
+          gap: 14px;
+        }
+
+        // Desktop (1024px-1440px): 2 columns with balanced spacing
+        @media (min-width: 1024px) and (max-width: 1439px) {
+          grid-template-columns: repeat(2, 1fr);
+          gap: 16px;
+        }
+
+        // Large Desktop (1440px+): 3 columns for optimal use of space
+        @media (min-width: 1440px) {
+          grid-template-columns: repeat(3, 1fr);
+          gap: 18px;
+        }
+
+        // Ultra-wide (1920px+): 3 columns with generous gaps
+        @media (min-width: 1920px) {
+          grid-template-columns: repeat(3, 1fr);
+          gap: 20px;
+        }
+
+        // Field wrapper styling
+        > * {
+          display: flex;
+          flex-direction: column;
+          min-width: 0;
+          overflow: hidden;
+
+          // Ensure inputs take full width
+          ::ng-deep .form-field-wrapper,
+          ::ng-deep .field-wrapper,
+          ::ng-deep input,
+          ::ng-deep select,
+          ::ng-deep textarea {
+            width: 100%;
+            min-width: 0;
+          }
+        }
+      }
+
+      // Switch field styling - inline horizontal layout
+      ::ng-deep .form-row.horizontal .sf-switch-wrapper {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+        white-space: nowrap;
+        min-width: 0;
+
+        @media (max-width: 768px) {
+          gap: 6px;
+        }
+
+        .field-label {
+          font-size: 0.75rem;
+          font-weight: 600;
+          margin: 0;
+          flex-shrink: 1;
+          min-width: 0;
+          word-break: keep-all;
+
+          @media (max-width: 768px) {
+            font-size: 0.7rem;
+          }
+
+          @media (max-width: 640px) {
+            font-size: 0.65rem;
+          }
+        }
+
+        .switch {
+          flex-shrink: 0;
+        }
+      }
+
+      ::ng-deep .grid-row .sf-col .sf-switch-wrapper {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+        white-space: nowrap;
+        min-width: 0;
+
+        @media (max-width: 768px) {
+          gap: 6px;
+        }
+
+        .field-label {
+          font-size: 0.75rem;
+          font-weight: 600;
+          margin: 0;
+          flex-shrink: 1;
+          min-width: 0;
+          word-break: keep-all;
+
+          @media (max-width: 768px) {
+            font-size: 0.7rem;
+          }
+
+          @media (max-width: 640px) {
+            font-size: 0.65rem;
+          }
+        }
+
+        .switch {
+          flex-shrink: 0;
+        }
+      }
+    }
+  }
+
+  &__error {
+    padding: 24px;
+    background: var(--fb-fc-error-bg, #fef2f2);
+    color: var(--fb-fc-error-color, #dc2626);
+    border: 1px solid var(--fb-fc-error-border, #fee2e2);
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+
+    @media (max-width: 768px) {
+      padding: 16px;
+      font-size: 13px;
+    }
+
+    @media (max-width: 640px) {
+      padding: 12px;
+      font-size: 12px;
+    }
+  }
+}