commons-shared-web-ui 0.0.54 → 0.0.55

package/src/lib/modules/filter-table-selector/components/filter-table-selector/filter-table-selector.component.html

@@ -0,0 +1,73 @@
+<div class="fts-container">
+
+  <!-- ── Modal Header ──────────────────────────────────────────────────────── -->
+  <div class="fts-header" *ngIf="config?.title">
+    <h2 class="fts-header__title">{{ titleLabel }}</h2>
+  </div>
+
+  <!-- ── Body: Filter Panel + Table Panel ──────────────────────────────────── -->
+  <div class="fts-body" *ngIf="config">
+
+    <!-- LEFT: Filter Panel -->
+    <aside class="fts-filter-panel" [class.fts-filter-panel--hidden]="!filterPanelVisible">
+
+      <div class="fts-filter-panel__header">
+        <span class="fts-filter-panel__title">{{ translate('COMMON.FILTER_TABLE.FILTER_BY') || 'Filter By' }}</span>
+      </div>
+
+      <div class="fts-filter-panel__content">
+        <!-- SmartForm renders the dynamic filter form. -->
+        <ng-container *ngIf="resolvedFormJson && formVersion >= 0">
+          <lib-smart-form [formJson]="resolvedFormJson" [labels]="labels" [initialValues]="resolvedInitialValues"
+            (valueChange)="onFormValueChange($event)">
+          </lib-smart-form>
+        </ng-container>
+      </div>
+
+    </aside>
+
+    <!-- RIGHT: Table Panel -->
+    <section class="fts-table-panel">
+
+      <!-- Table toolbar: selection count -->
+      <!-- <div class="fts-table-panel__toolbar">
+        <span class="fts-selection-count" *ngIf="config.selectionConfig?.selectionCountLabel">
+          {{ selectionCountText }}
+        </span>
+      </div> -->
+
+      <!-- SmartTable -->
+      <div class="fts-table-wrapper">
+        <lib-smart-table *ngIf="resolvedTableConfig" [config]="resolvedTableConfig" [selectedRows]="selectedRows"
+          (rowSelect)="onRowSelect($event)">
+        </lib-smart-table>
+      </div>
+
+    </section>
+
+  </div>
+
+  <!-- ── Footer Action Bar ─────────────────────────────────────────────────── -->
+  <div class="fts-footer">
+    <div class="fts-footer__left">
+      <lib-button id="fts-clear-filter-btn" variant="outline" (click)="onClearFilter()">
+        {{ clearFilterButtonLabel }}
+      </lib-button>
+
+      <lib-button id="fts-apply-filter-btn" variant="primary" (click)="applyCurrentFilter()">
+        {{ applyFilterButtonLabel }}
+      </lib-button>
+    </div>
+
+    <div class="fts-footer__right">
+      <lib-button id="fts-cancel-btn" variant="outline" (click)="handleCancel()">
+        {{ cancelButtonLabel }}
+      </lib-button>
+
+      <lib-button id="fts-submit-btn" variant="primary" (click)="handleSubmit()">
+        {{ submitButtonLabel }}
+      </lib-button>
+    </div>
+  </div>
+
+</div>

package/src/lib/modules/filter-table-selector/components/filter-table-selector/filter-table-selector.component.scss

@@ -0,0 +1,321 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// FilterTableSelector — Layout SCSS
+//
+// Layout goal:
+//   [host] fills the modal-body (flex child of cc-modal-container)
+//     └── .fts-container  flex-column, clips overflow
+//           ├── .fts-header      flex-shrink:0
+//           ├── .fts-body        flex:1, min-height:0  ← the scroll zone
+//           │     ├── .fts-filter-panel    fixed width, scrolls independently
+//           │     │     └── .__content     flex:1, overflow-y:auto
+//           │     └── .fts-table-panel     flex:1, clips inner table
+//           │           └── .fts-table-wrapper  → st-table-container scrolls
+//           └── .fts-footer      flex-shrink:0  ← always visible
+// ─────────────────────────────────────────────────────────────────────────────
+
+:host {
+  // CSS custom properties
+  --fts-panel-bg: #ffffff;
+  --fts-filter-panel-width: 300px;
+  --fts-filter-panel-border: 1px solid #dee2e6;
+  --fts-header-bg: #ffffff;
+  --fts-header-border: 1px solid #f1f3f4;
+  --fts-header-height: 60px;
+  --fts-header-padding: 0 24px;
+  --fts-header-title-color: #111827;
+  --fts-header-title-font-size: 1.125rem;
+  --fts-header-title-font-weight: 600;
+  --fts-footer-bg: #ffffff;
+  --fts-footer-border: 1px solid #f1f3f4;
+  --fts-footer-height: 72px;
+  --fts-footer-padding: 0 24px;
+  --fts-footer-gap: 12px;
+  --fts-body-bg: #ffffff;
+  --fts-filter-section-title-color: var(--text-muted, #6b7280);
+  --fts-filter-section-title-font-size: 0.75rem;
+  --fts-filter-section-title-font-weight: 600;
+  --fts-selection-count-color: var(--text-muted, #6b7280);
+  --fts-selection-count-font-size: 0.875rem;
+  --fts-toolbar-border: 1px solid #f1f3f4;
+  --fts-divider-color: #f1f3f4;
+  --fts-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --fts-border-radius: 12px;
+
+  // Host must stretch to fill the flex modal body
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+}
+
+// ── Container ─────────────────────────────────────────────────────────────────
+.fts-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0; // Lets children shrink so scrolling activates
+  width: 100%;
+  overflow: hidden; // Must clip — prevents container from growing to content
+  background-color: var(--fts-panel-bg);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: var(--fts-border-radius);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+// ── Optional Title Header ──────────────────────────────────────────────────────
+.fts-header {
+  display: flex;
+  align-items: center;
+  min-height: var(--fts-header-height);
+  padding: var(--fts-header-padding);
+  border-bottom: var(--fts-header-border);
+  background-color: var(--fts-header-bg);
+  flex-shrink: 0; // Never shrinks
+
+  &__title {
+    margin: 0;
+    font-size: var(--fts-header-title-font-size);
+    font-weight: var(--fts-header-title-font-weight);
+    color: var(--fts-header-title-color);
+    letter-spacing: -0.01em;
+  }
+}
+
+// ── Body: side-by-side panels ─────────────────────────────────────────────────
+.fts-body {
+  display: flex;
+  flex: 1;
+  min-height: 0; // Critical: prevents body from expanding past container
+  background-color: var(--fts-body-bg);
+  // No overflow on body itself — each child panel manages its own scroll
+}
+
+// ── Left: Filter Panel ────────────────────────────────────────────────────────
+.fts-filter-panel {
+  width: var(--fts-filter-panel-width);
+  min-width: var(--fts-filter-panel-width);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; // Panel itself clips; __content handles the scroll
+  background-color: #fcfcfd;
+  border-right: 1px solid var(--fts-divider-color);
+
+  &--hidden {
+    display: none;
+  }
+
+  &__header {
+    padding: 20px 20px 12px 20px;
+    flex-shrink: 0;
+  }
+
+  &__title {
+    font-size: var(--fts-filter-section-title-font-size);
+    font-weight: var(--fts-filter-section-title-font-weight);
+    color: var(--fts-filter-section-title-color);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  // This is the scrolling region — grows to fill panel, scrolls on overflow
+  &__content {
+    flex: 1;
+    min-height: 0; // Allows this flex child to shrink & scroll
+    overflow-y: auto;
+    padding: 0;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #d1d5db;
+      border-radius: 10px;
+    }
+  }
+
+  // SmartForm overrides (scoped to filter panel only)
+  ::ng-deep {
+
+    .smart-form-container,
+    .smart-form-wrapper {
+      padding: 0;
+    }
+
+    .form-header,
+    .form-actions {
+      display: none;
+    }
+
+    .form-section {
+      padding: 0;
+    }
+
+    .form-field-wrapper {
+      margin-bottom: 16px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .field-label {
+      font-size: 12px;
+      font-weight: 500;
+      color: #374151;
+      margin-bottom: 4px;
+    }
+
+    input,
+    select,
+    .mat-select-trigger {
+      font-size: 13px !important;
+      border-color: #e5e7eb !important;
+      background-color: #ffffff !important;
+
+      &:focus {
+        border-color: var(--primary-color) !important;
+        box-shadow: 0 0 0 2px rgba(194, 30, 37, 0.05) !important;
+      }
+    }
+  }
+}
+
+
+// Override the 12-col grid gap — tight layout for the narrow filter panel
+.form-section-container .section-fields.sf-grid {
+  gap: 2px !important;
+}
+
+// ── Right: Table Panel ────────────────────────────────────────────────────────
+.fts-table-panel {
+  flex: 1;
+  min-width: 0; // Prevents horizontal overflow
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; // Clips; inner st-table-container does the scroll
+  background-color: var(--fts-panel-bg);
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-shrink: 0;
+    min-height: 48px;
+    padding: 0 24px;
+    background-color: var(--fts-panel-bg);
+  }
+}
+
+.fts-table-wrapper {
+  flex: 1;
+  min-height: 0; // Flex child must have min-height:0 to allow scroll
+  display: flex;
+  flex-direction: column;
+  // overflow: hidden;
+  overflow-y: auto;
+
+  ::ng-deep {
+
+    // Root outer — must be a flex column that fills the wrapper
+    .smart-table-outer {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    // Card — grows to fill remaining space, clips so table scrolls inside
+    .smart-table-wrapper {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    // The actual table scroll area.
+    // SmartTable hardcodes overflow-y:visible, so !important is required.
+    .st-table-container {
+      flex: 1;
+      min-height: 0;
+      overflow-x: auto;
+      overflow-y: auto !important; // Override SmartTable's own overflow-y:visible
+
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: #d1d5db;
+        border-radius: 3px;
+      }
+    }
+
+    // Pagination sits outside .smart-table-wrapper — keep it pinned at bottom
+    .st-pagination {
+      flex-shrink: 0;
+      padding: 12px 24px;
+      border-top: 1px solid var(--fts-divider-color);
+      background-color: var(--fts-panel-bg);
+    }
+  }
+}
+
+// ── Selection Count Pill ──────────────────────────────────────────────────────
+.fts-selection-count {
+  font-size: 13px;
+  color: #4b5563;
+  white-space: nowrap;
+  background: #f3f4f6;
+  padding: 4px 14px;
+  border-radius: 100px;
+  font-weight: 500;
+  border: 1px solid #e5e7eb;
+}
+
+// ── Footer: always visible at bottom ─────────────────────────────────────────
+.fts-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--fts-footer-height);
+  padding: var(--fts-footer-padding);
+  border-top: var(--fts-footer-border);
+  flex-shrink: 0; // Never shrinks — always visible at the bottom
+  background-color: var(--fts-footer-bg);
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
+  z-index: 10;
+
+  &__left,
+  &__right {
+    display: flex;
+    align-items: center;
+    gap: var(--fts-footer-gap);
+  }
+
+  ::ng-deep lib-button button {
+    min-width: 100px;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+  }
+}
+
+// ── Modal Integration ─────────────────────────────────────────────────────────
+// Makes the cc-modal-body behave as a flex column so :host can fill it fully.
+// Without this the body grows to content height and our overflow clips nothing.
+::ng-deep {
+  .cc-modal-footer {
+    display: none !important;
+  }
+
+  .cc-modal-body:has(lib-filter-table-selector) {
+    padding: 0 !important;
+    overflow: hidden !important;
+    display: flex !important;
+    flex-direction: column !important;
+    // flex:1 is already set by confirmation-modal — no height:100% needed
+  }
+}