commons-shared-web-ui 0.0.50 → 0.0.52

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

@@ -1,73 +0,0 @@
-<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

@@ -1,321 +0,0 @@
-// ─────────────────────────────────────────────────────────────────────────────
-// 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
-  }
-}