commons-shared-web-ui 0.0.52 → 0.0.53

package/src/lib/modules/summary-card/components/summary-card/summary-card.component.scss

@@ -0,0 +1,199 @@
+:host {
+    display: block;
+    width: 100%;
+}
+
+.cc-summary-card {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    box-sizing: border-box;
+    font-family: var(--cc-sc-font-family, 'Inter', sans-serif);
+    background-color: var(--cc-sc-bg-color, #ffffff);
+    border-radius: var(--cc-sc-border-radius, 8px);
+    border: var(--cc-sc-border, 1px solid #e0e0e0);
+    padding: var(--cc-sc-padding, 16px);
+    box-shadow: var(--cc-sc-shadow, 0 2px 4px rgba(0, 0, 0, 0.05));
+    transition: all var(--cc-sc-transition-duration, 0.2s) ease;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    gap: var(--cc-sc-icon-margin, 1rem);
+
+    &.clickable {
+        cursor: pointer;
+
+        &:hover {
+            transform: var(--cc-sc-hover-transform);
+            box-shadow: var(--cc-sc-hover-shadow);
+        }
+    }
+
+    &.disabled {
+        opacity: var(--cc-sc-disabled-opacity);
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    // Icon Section (Left Side)
+    .icon-section {
+        width: var(--cc-sc-icon-box-size);
+        height: var(--cc-sc-icon-box-size);
+        min-width: var(--cc-sc-icon-box-size);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--cc-sc-icon-radius);
+        background-color: var(--cc-sc-icon-bg);
+        color: var(--cc-sc-icon-color);
+        flex-shrink: 0;
+        align-self: center;
+
+        mat-icon {
+            width: var(--cc-sc-icon-size);
+            height: var(--cc-sc-icon-size);
+            font-size: var(--cc-sc-icon-size);
+            line-height: var(--cc-sc-icon-size);
+        }
+
+        img {
+            width: var(--cc-sc-icon-size);
+            height: var(--cc-sc-icon-size);
+            object-fit: contain;
+        }
+    }
+
+    // Right Section (Header + Value/Meta)
+    .right-section {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-width: 0;
+        gap: var(--cc-sc-content-gap, 0.5rem);
+
+        .header {
+            font-size: var(--cc-sc-header-size);
+            font-weight: var(--cc-sc-header-weight);
+            text-transform: var(--cc-sc-header-transform);
+            color: var(--cc-sc-header-color);
+            letter-spacing: var(--cc-sc-header-letter-spacing);
+            line-height: var(--cc-sc-header-line-height);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            width: 100%;
+        }
+
+        // Value and Meta Row
+        .value-meta-row {
+            display: flex;
+            flex-direction: row;
+            align-items: flex-start;
+            justify-content: space-between;
+            gap: 1rem;
+            flex: 1;
+
+            // Content Section
+            .content-section {
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-start;
+                flex: 1;
+                min-width: 0;
+
+                .value-row {
+                    display: flex;
+                    flex-direction: column;
+                    gap: var(--cc-sc-value-desc-gap);
+
+                    &.inline-layout {
+                        flex-direction: row;
+                        align-items: baseline;
+                        flex-wrap: wrap;
+                    }
+
+                    .value {
+                        font-size: var(--cc-sc-value-size);
+                        font-weight: var(--cc-sc-value-weight);
+                        color: var(--cc-sc-value-color);
+                        line-height: var(--cc-sc-value-line-height);
+                        white-space: nowrap;
+
+                        .value-subtext {
+                            font-size: var(--cc-sc-desc-size);
+                            font-weight: var(--cc-sc-desc-weight);
+                            color: var(--cc-sc-desc-color);
+                            margin-left: 4px;
+                        }
+                    }
+
+                    .description {
+                        font-size: var(--cc-sc-desc-size);
+                        font-weight: var(--cc-sc-desc-weight);
+                        color: var(--cc-sc-desc-color);
+                        line-height: var(--cc-sc-desc-line-height);
+                    }
+                }
+            }
+
+            // Meta Section (Aligned with Value)
+            .meta-section {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-end;
+                justify-content: flex-start;
+                flex-shrink: 0;
+                gap: 6px;
+
+                .meta-item {
+                    font-size: 0.8125rem; // ~13px
+                    line-height: 1.4;
+                    white-space: nowrap;
+                    text-align: right;
+                    flex-shrink: 0;
+
+                    &.meta-text {
+                        color: var(--cc-sc-desc-color, #64748b);
+                        font-weight: 500;
+                    }
+
+                    &.meta-pill {
+                        display: inline-flex;
+                        align-items: center;
+                        justify-content: center;
+                        padding: var(--cc-sc-meta-pill-padding, 4px 12px);
+                        border-radius: var(--cc-sc-meta-pill-radius, 20px);
+                        font-size: var(--cc-sc-meta-pill-font-size, 0.75rem);
+                        font-weight: var(--cc-sc-meta-pill-font-weight, 600);
+                        line-height: 1.2;
+                        background-color: var(--cc-sc-meta-pill-bg, #f1f5f9);
+                        color: var(--cc-sc-meta-pill-color, #475569);
+                    }
+                }
+            }
+        }
+    }
+
+    // Responsive Design
+    @media (max-width: 600px) {
+        .icon-section {
+            margin-right: var(--cc-sc-icon-margin-mobile, 0.75rem);
+        }
+
+        .content-section {
+            .header {
+                font-size: var(--cc-sc-header-size-mobile, 0.7rem);
+            }
+
+            .value-row {
+                .value {
+                    font-size: var(--cc-sc-value-size-mobile, 1.25rem);
+                }
+
+                .description {
+                    font-size: var(--cc-sc-desc-size-mobile, 0.7rem);
+                }
+            }
+        }
+    }
+}

package/src/lib/modules/summary-card/components/summary-card/summary-card.component.ts

@@ -0,0 +1,126 @@
+import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core';
+
+export interface SummaryCardConfig {
+    header: string;
+    value: string;
+    description?: string;
+
+    // Icon or Image (mutually exclusive)
+    icon?: string; // Material icon name
+    iconImage?: string; // URL for image icon
+
+    // Layout configurations
+    descriptionPosition?: 'bottom' | 'inline'; // 'bottom' (default) or 'inline' (right side of value)
+
+    // Extended Content
+    valueSubtext?: string; // Text displayed next to the value (e.g. "/ 15 Target")
+    metaData?: SummaryCardMeta[]; // Right-aligned meta information
+
+    // Color configurations
+    valueColor?: string; // Color for the value text
+    headerColor?: string; // Color for the header text
+    descriptionColor?: string; // Color for the description text
+    iconColor?: string; // Color for the icon
+    iconBackgroundColor?: string; // Background color for the icon container
+
+    // Additional styling
+    iconClass?: string; // Additional CSS classes for icon
+    valueClass?: string; // Additional CSS classes for value
+    headerClass?: string; // Additional CSS classes for header
+    descriptionClass?: string; // Additional CSS classes for description
+
+    // Interaction
+    isDisabled?: boolean; // Disable click interaction
+    isClickable?: boolean; // Whether card is clickable (default: true)
+}
+
+export interface SummaryCardMeta {
+    text: string;
+    type?: 'text' | 'pill'; // 'text' (default) or 'pill' (badge style)
+    color?: string; // Text color
+    backgroundColor?: string; // Background color for pill
+    cssClass?: string; // Custom CSS class
+}
+
+export interface SummaryCardLabels {
+    iconAlt: string;
+}
+
+@Component({
+    selector: 'lib-summary-card',
+    templateUrl: './summary-card.component.html',
+    styleUrls: ['./summary-card.component.scss'],
+    standalone: false
+})
+export class SummaryCardComponent {
+    @Input() config!: SummaryCardConfig;
+    @Input() theme?: 'theme-1' | 'theme-2';
+    @Input() labels: any;
+    @Output() cardClick = new EventEmitter<void>();
+
+    constructor() { }
+
+    onCardClick(): void {
+        if (this.config?.isDisabled || this.config?.isClickable === false) {
+            return;
+        }
+        this.cardClick.emit();
+    }
+
+    get cardClasses(): { [key: string]: boolean } {
+        return {
+            'disabled': !!this.config?.isDisabled,
+            'clickable': this.config?.isClickable !== false && !this.config?.isDisabled
+        };
+    }
+
+    get iconStyles(): { [key: string]: string } {
+        const styles: { [key: string]: string } = {};
+        if (this.config.iconBackgroundColor) {
+            styles['backgroundColor'] = this.config.iconBackgroundColor;
+        }
+        if (this.config.iconColor) {
+            styles['color'] = this.config.iconColor;
+        }
+        return styles;
+    }
+
+    get headerStyles(): { [key: string]: string } {
+        const styles: { [key: string]: string } = {};
+        if (this.config.headerColor) {
+            styles['color'] = this.config.headerColor;
+        }
+        return styles;
+    }
+
+    get valueStyles(): { [key: string]: string } {
+        const styles: { [key: string]: string } = {};
+        if (this.config.valueColor) {
+            styles['color'] = this.config.valueColor;
+        }
+        return styles;
+    }
+
+    get descriptionStyles(): { [key: string]: string } {
+        const styles: { [key: string]: string } = {};
+        if (this.config.descriptionColor) {
+            styles['color'] = this.config.descriptionColor;
+        }
+        return styles;
+    }
+
+    get isDescriptionInline(): boolean {
+        return this.config.descriptionPosition === 'inline';
+    }
+
+    getMetaStyles(meta: SummaryCardMeta): { [key: string]: string } {
+        const styles: { [key: string]: string } = {};
+        if (meta.color) {
+            styles['color'] = meta.color;
+        }
+        if (meta.backgroundColor && meta.type === 'pill') {
+            styles['backgroundColor'] = meta.backgroundColor;
+        }
+        return styles;
+    }
+}

package/src/lib/modules/summary-card/summary-card.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { SummaryCardComponent } from './components/summary-card/summary-card.component';
+
+@NgModule({
+    declarations: [
+        SummaryCardComponent
+    ],
+    imports: [
+        CommonModule,
+        MatIconModule
+    ],
+    exports: [
+        SummaryCardComponent
+    ]
+})
+export class SummaryCardModule { }

package/src/lib/modules/table-column-configuration/components/_tcc-controls.scss

@@ -0,0 +1,53 @@
+// Shared, self-contained controls for the table-column-configuration list.
+// Used (via @use) by the column-node component so the pill toggle / lock render
+// consistently in a dense, inline row without depending on the quirks of the
+// generic lib-toggle.
+
+// ── Pill toggle ───────────────────────────────────────────────────────────────
+.tcc-toggle {
+  position: relative;
+  flex-shrink: 0;
+  width: var(--tcc-toggle-width, 38px);
+  height: var(--tcc-toggle-height, 22px);
+  padding: 0;
+  border: none;
+  border-radius: 999px;
+  background: var(--tcc-toggle-off-bg, #cbd2d9);
+  cursor: pointer;
+  transition: background 0.18s ease;
+
+  &__thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: calc(var(--tcc-toggle-height, 22px) - 4px);
+    height: calc(var(--tcc-toggle-height, 22px) - 4px);
+    border-radius: 50%;
+    background: var(--tcc-toggle-thumb, #ffffff);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+    transition: left 0.18s ease;
+  }
+
+  &--on {
+    background: var(--tcc-toggle-on-bg, #2f9e6f);
+
+    .tcc-toggle__thumb {
+      left: calc(100% - (var(--tcc-toggle-height, 22px) - 2px));
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--tcc-focus-ring, #2f9e6f);
+    outline-offset: 2px;
+  }
+}
+
+// ── Lock indicator (occupies the toggle footprint so rows stay aligned) ────────
+.tcc-lock {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--tcc-toggle-width, 38px);
+  color: var(--tcc-lock-color, #9aa2ab);
+}

package/src/lib/modules/table-column-configuration/components/config-column-node/config-column-node.component.html

@@ -0,0 +1,47 @@
+<div
+  class="tcc-col"
+  [class.tcc-col--hidden]="!column.visible"
+  [class.tcc-col--locked]="column.lockVisibility"
+>
+  <!-- Visibility indicator (eye / eye-off) -->
+  <span class="tcc-col__eye" [class.tcc-col__eye--off]="!column.visible" aria-hidden="true">
+    @if (column.visible) {
+      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"></path>
+        <circle cx="12" cy="12" r="3"></circle>
+      </svg>
+    } @else {
+      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+        <line x1="1" y1="1" x2="23" y2="23"></line>
+      </svg>
+    }
+  </span>
+
+  <span class="tcc-col__label" [title]="displayLabel">{{ displayLabel }}</span>
+
+  <!-- Visibility toggle / lock -->
+  @if (column.lockVisibility) {
+    <span class="tcc-lock" title="This column is always visible">
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+        <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+      </svg>
+    </span>
+  } @else {
+    <button
+      type="button"
+      class="tcc-toggle"
+      [class.tcc-toggle--on]="column.visible"
+      role="switch"
+      [attr.aria-checked]="column.visible"
+      [attr.aria-label]="'Show ' + displayLabel"
+      (click)="toggleVisible.emit()"
+    >
+      <span class="tcc-toggle__thumb"></span>
+    </button>
+  }
+</div>

package/src/lib/modules/table-column-configuration/components/config-column-node/config-column-node.component.scss

@@ -0,0 +1,50 @@
+@use '../tcc-controls';
+
+.tcc-col {
+  display: flex;
+  align-items: center;
+  gap: var(--tcc-col-gap, 12px);
+  padding: var(--tcc-col-padding, 10px 14px);
+  border-radius: var(--tcc-col-radius, 8px);
+  background: var(--tcc-col-bg, #ffffff);
+  border: 1px solid var(--tcc-col-border, #eef0f2);
+  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
+
+  &:hover:not(.tcc-col--locked) {
+    background: var(--tcc-col-hover-bg, #f8fafc);
+  }
+
+  // Hidden columns: dim the row and mute the eye/label, but keep the toggle
+  // crisp so it's obvious how to turn the column back on.
+  &--hidden {
+    .tcc-col__eye,
+    .tcc-col__label {
+      opacity: 0.55;
+    }
+  }
+
+  &--locked {
+    background: var(--tcc-col-locked-bg, #f6f7f8);
+  }
+
+  &__eye {
+    display: flex;
+    align-items: center;
+    color: var(--tcc-eye-color, #6b7280);
+    flex-shrink: 0;
+
+    &--off {
+      color: var(--tcc-eye-off-color, #b0b6be);
+    }
+  }
+
+  &__label {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-size: var(--tcc-col-label-size, 14px);
+    color: var(--tcc-col-label-color, #1f2933);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

package/src/lib/modules/table-column-configuration/components/config-column-node/config-column-node.component.ts

@@ -0,0 +1,33 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { ConfigColumnNode } from '../../models/table-column-configuration.models';
+
+/**
+ * A single column row inside the table-column-configuration list.
+ * Shows a visibility indicator + column name on the left and a visibility
+ * toggle (or a lock, when the column is locked visible) on the right.
+ */
+@Component({
+  selector: 'lib-config-column-node',
+  standalone: false,
+  templateUrl: './config-column-node.component.html',
+  styleUrls: ['./config-column-node.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConfigColumnNodeComponent {
+  @Input({ required: true }) column!: ConfigColumnNode;
+  /** Optional label translator (e.g. an ngx-translate instant fn). */
+  @Input() translate?: (key: string) => string;
+
+  @Output() toggleVisible = new EventEmitter<void>();
+
+  get displayLabel(): string {
+    const label = this.column.label;
+    return this.translate ? this.translate(label) : label;
+  }
+}

package/src/lib/modules/table-column-configuration/components/table-column-configuration/table-column-configuration.component.html

@@ -0,0 +1,30 @@
+<div class="tcc-root">
+  @if (showLegend) {
+    <div class="tcc-legend">
+      <span class="tcc-legend__item">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"></path>
+          <circle cx="12" cy="12" r="3"></circle>
+        </svg>
+        <span>Visible</span>
+      </span>
+    </div>
+  }
+
+  <div class="tcc-list">
+    @for (column of store.columns(); track trackByIndex($index); let ci = $index) {
+      <lib-config-column-node
+        [column]="column"
+        [translate]="translate"
+        (toggleVisible)="onToggleVisible(ci)"
+      />
+    }
+
+    @if (store.columns().length === 0) {
+      <div class="tcc-empty">
+        <p>No columns found in the config.</p>
+      </div>
+    }
+  </div>
+</div>

package/src/lib/modules/table-column-configuration/components/table-column-configuration/table-column-configuration.component.scss

@@ -0,0 +1,36 @@
+.tcc-root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tcc-root-gap, 12px);
+  font-family: var(--tcc-font-family, inherit);
+}
+
+.tcc-legend {
+  display: flex;
+  align-items: center;
+  gap: var(--tcc-legend-gap, 24px);
+  padding: var(--tcc-legend-padding, 4px 2px 8px);
+  border-bottom: 1px solid var(--tcc-legend-border, #eef0f2);
+  flex-wrap: wrap;
+
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: var(--tcc-legend-size, 13px);
+    color: var(--tcc-legend-color, #52606d);
+  }
+}
+
+.tcc-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tcc-list-gap, 10px);
+}
+
+.tcc-empty {
+  padding: 24px;
+  text-align: center;
+  color: var(--tcc-empty-color, #9aa2ab);
+  font-size: 13px;
+}

package/src/lib/modules/table-column-configuration/components/table-column-configuration/table-column-configuration.component.ts

@@ -0,0 +1,78 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  inject,
+} from '@angular/core';
+import { TableConfig } from '../../../smart-table/models/table-config.model';
+import { TableColumnConfigurationService } from '../../services/table-column-configuration.service';
+
+/**
+ * Table Column Configuration
+ * --------------------------
+ * Renders a compact list of a table config's columns, each with a **visibility**
+ * toggle. Intended to be embedded inside a `cc-confirmation-modal` on a host page
+ * ("Configure columns").
+ *
+ * Pass a `TableConfig` via `[config]`. The input is deep-cloned, so it is never
+ * mutated. When the user confirms, call `getUpdatedConfig()` to read back the
+ * modified config (isEnabled/visible flags updated per column).
+ *
+ * Columns carrying `lockVisibility: true` cannot be hidden — their toggle is
+ * replaced by a lock icon.
+ *
+ * @example
+ * ```html
+ * <cc-confirmation-modal [isOpen]="open" (confirm)="save()" (cancel)="open = false">
+ *   <lib-table-column-configuration #cfg [config]="tableConfig" [translate]="translateFn" />
+ * </cc-confirmation-modal>
+ * ```
+ * ```ts
+ * @ViewChild('cfg') cfg!: TableColumnConfigurationComponent;
+ * save() { this.updatedConfig = this.cfg.getUpdatedConfig(); }
+ * ```
+ */
+@Component({
+  selector: 'lib-table-column-configuration',
+  standalone: false,
+  providers: [TableColumnConfigurationService],
+  templateUrl: './table-column-configuration.component.html',
+  styleUrls: ['./table-column-configuration.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TableColumnConfigurationComponent implements OnChanges {
+  /** The table config to configure. Deep-cloned internally; never mutated. */
+  @Input({ required: true }) config!: TableConfig;
+
+  /** Optional label translator, e.g. an ngx-translate `instant` function. */
+  @Input() translate?: (key: string) => string;
+
+  /** Show the "Visible" legend row. Default true. */
+  @Input() showLegend = true;
+
+  protected readonly store = inject(TableColumnConfigurationService);
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['config'] && this.config) {
+      this.store.loadConfig(this.config);
+    }
+  }
+
+  /**
+   * Returns a fresh, modified copy of the config with the current visibility
+   * selections applied. Returns null if no config has been loaded.
+   */
+  getUpdatedConfig(): TableConfig | null {
+    return this.store.buildUpdatedConfig();
+  }
+
+  onToggleVisible(index: number): void {
+    this.store.toggleColumnVisible(index);
+  }
+
+  trackByIndex(index: number): number {
+    return index;
+  }
+}

package/src/lib/modules/table-column-configuration/index.ts

@@ -0,0 +1,5 @@
+export * from './table-column-configuration.module';
+export * from './components/table-column-configuration/table-column-configuration.component';
+export * from './components/config-column-node/config-column-node.component';
+export * from './models/table-column-configuration.models';
+export * from './services/table-column-configuration.service';