commons-shared-web-ui 0.0.55 → 0.0.56

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +0,0 @@
-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';