commons-shared-web-ui 0.0.1

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "commons-shared-web-ui",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/animations": "20.3.15",
+    "@angular/cdk": "20.2.14",
+    "@angular/common": "20.3.15",
+    "@angular/compiler": "20.3.15",
+    "@angular/core": "20.3.15",
+    "@angular/forms": "20.3.15",
+    "@angular/material": "20.2.14",
+    "@angular/platform-browser": "20.3.15",
+    "@angular/platform-browser-dynamic": "20.3.15",
+    "@angular/router": "20.3.15",
+    "rxjs": "7.8.0",
+    "zone.js": "0.14.10"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "module": "fesm2022/commons-shared-web-ui.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/commons-shared-web-ui.mjs"
+    }
+  },
+  "sideEffects": false
+}

package/src/lib/modules/alert/alert.theme.scss

@@ -0,0 +1,85 @@
+@use 'sass:map';
+
+$default-alert-config: (
+    font-family: ('Roboto', sans-serif),
+
+    // Structure (Default values in rem, assuming 16px root)
+    padding: 1rem 2rem,
+    // 16px 32px
+    radius: 0.75rem,
+    // 12px
+    gap: 1rem,
+    // 16px
+
+    // Icon
+    icon-size: 1.25rem,
+    // 20px
+    icon-margin-top: 0.125rem,
+    // 2px
+
+    // Text
+    title-size: 1rem,
+    // 16px
+    title-line-height: 1.5rem,
+    // 24px
+    message-size: 0.875rem,
+    // 14px
+
+    // Info
+    info-bg: #F1F3F4,
+    info-color: #3C4043,
+
+    // Warning
+    warning-bg: #F9C80E1F,
+    warning-color: #3C4043,
+    // Default text color for warning usually dark
+    warning-title-color: #3C4043,
+    // Making title dark for better contrast with light yellow bg
+    warning-shadow: none,
+    // Removing shadow as per clean flat design, or keeping if specified. User said "warning-shadow" variant exists.
+
+    // Success
+    success-bg: #E6F4EA,
+    // Light green similar to Info/Error pattern
+    success-color: #16A34A,
+
+    // Error
+    error-bg: #FCE8E6,
+    // Light red
+    error-color: #D93025
+);
+
+@mixin alert-theme($user-config: ()) {
+    $config: map.merge($default-alert-config, $user-config);
+
+    --cc-alert-font-family: #{map.get($config, font-family)};
+
+    // Structure
+    --cc-alert-padding: #{map.get($config, padding)};
+    --cc-alert-radius: #{map.get($config, radius)};
+    --cc-alert-gap: #{map.get($config, gap)};
+
+    // Icon
+    --cc-alert-icon-size: #{map.get($config, icon-size)};
+    --cc-alert-icon-margin-top: #{map.get($config, icon-margin-top)};
+
+    // Text
+    --cc-alert-title-size: #{map.get($config, title-size)};
+    --cc-alert-title-line-height: #{map.get($config, title-line-height)};
+    --cc-alert-message-size: #{map.get($config, message-size)};
+
+    // Colors
+    --cc-alert-info-bg: #{map.get($config, info-bg)};
+    --cc-alert-info-color: #{map.get($config, info-color)};
+
+    --cc-alert-warning-bg: #{map.get($config, warning-bg)};
+    --cc-alert-warning-color: #{map.get($config, warning-color)};
+    --cc-alert-warning-title-color: #{map.get($config, warning-title-color)};
+    --cc-alert-warning-shadow: #{map.get($config, warning-shadow)};
+    --cc-alert-success-bg: #{map.get($config, success-bg)};
+    --cc-alert-success-color: #{map.get($config, success-color)};
+
+    --cc-alert-error-bg: #{map.get($config, error-bg)};
+    --cc-alert-error-color: #{map.get($config, error-color)};
+    --cc-alert-warning-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25); // 0px 4px 4px
+}

package/src/lib/modules/button/button.theme.scss

@@ -0,0 +1,121 @@
+@use 'sass:map';
+
+// Default Button Configuration
+$default-button-config: (
+    // Common
+    font-family: ('Roboto', sans-serif),
+    font-weight: 500,
+    font-size: 1rem,
+    // 16px
+    padding: 0.5rem 1rem,
+    // 8px 16px
+
+    // Primary (Dark)
+    primary-bg: #262125,
+    primary-color: #FFFFFF,
+    primary-radius: 0.5rem,
+    // 8px
+    primary-border: none,
+
+    // Warning (Yellow)
+    warning-bg: #F9C80E,
+    warning-color: #000000,
+    warning-radius: 0.25rem,
+    // 4px
+    warning-border: none,
+
+    // Outline (Grey Outline)
+    outline-bg: transparent,
+    outline-color: #000000,
+    outline-radius: 0.25rem,
+    // 4px
+    outline-border: 0.0625rem solid #BDC1C6,
+    // 1px solid
+
+    // Secondary (Light Grey)
+    secondary-bg: #E8EAED,
+    secondary-color: #000000,
+    secondary-radius: 0.25rem,
+    // 4px
+    secondary-border: none,
+
+    // Success (Green)
+    success-bg: #16A34A,
+    success-color: #FFFFFF,
+    success-radius: 0.5rem,
+    // 8px
+    success-border: none,
+
+    // Danger (Red)
+    danger-bg: #E63E30,
+    danger-color: #FFFFFF,
+    danger-radius: 0.25rem,
+    // 4px
+    danger-border: none,
+
+    // Danger Outline (Red Outline)
+    danger-outline-bg: transparent,
+    danger-outline-color: #E63E30,
+    danger-outline-radius: 0.5rem,
+    // 8px
+    danger-outline-border: 0.0625rem solid #E63E30,
+    // 1px solid
+
+    // Disabled State
+    disabled-opacity: 0.6,
+    disabled-cursor: not-allowed
+);
+
+@mixin button-theme($user-config: ()) {
+    $config: map.merge($default-button-config, $user-config);
+
+    // Common
+    --cc-btn-font-family: #{map.get($config, font-family)};
+    --cc-btn-font-weight: #{map.get($config, font-weight)};
+    --cc-btn-font-size: #{map.get($config, font-size)};
+    --cc-btn-padding: #{map.get($config, padding)};
+    --cc-btn-disabled-opacity: #{map.get($config, disabled-opacity)};
+    --cc-btn-disabled-cursor: #{map.get($config, disabled-cursor)};
+
+    // Primary
+    --cc-btn-primary-bg: #{map.get($config, primary-bg)};
+    --cc-btn-primary-color: #{map.get($config, primary-color)};
+    --cc-btn-primary-radius: #{map.get($config, primary-radius)};
+    --cc-btn-primary-border: #{map.get($config, primary-border)};
+
+    // Warning
+    --cc-btn-warning-bg: #{map.get($config, warning-bg)};
+    --cc-btn-warning-color: #{map.get($config, warning-color)};
+    --cc-btn-warning-radius: #{map.get($config, warning-radius)};
+    --cc-btn-warning-border: #{map.get($config, warning-border)};
+
+    // Outline
+    --cc-btn-outline-bg: #{map.get($config, outline-bg)};
+    --cc-btn-outline-color: #{map.get($config, outline-color)};
+    --cc-btn-outline-radius: #{map.get($config, outline-radius)};
+    --cc-btn-outline-border: #{map.get($config, outline-border)};
+
+    // Secondary
+    --cc-btn-secondary-bg: #{map.get($config, secondary-bg)};
+    --cc-btn-secondary-color: #{map.get($config, secondary-color)};
+    --cc-btn-secondary-radius: #{map.get($config, secondary-radius)};
+    --cc-btn-secondary-border: #{map.get($config, secondary-border)};
+
+    // Success
+    --cc-btn-success-bg: #{map.get($config, success-bg)};
+    --cc-btn-success-color: #{map.get($config, success-color)};
+    --cc-btn-success-radius: #{map.get($config, success-radius)};
+    --cc-btn-success-border: #{map.get($config, success-border)};
+
+    // Danger
+    --cc-btn-danger-bg: #{map.get($config, danger-bg)};
+    --cc-btn-danger-color: #{map.get($config, danger-color)};
+    --cc-btn-danger-radius: #{map.get($config, danger-radius)};
+    --cc-btn-danger-border: #{map.get($config, danger-border)};
+
+    // Danger Outline
+    --cc-btn-danger-outline-bg: #{map.get($config, danger-outline-bg)};
+    --cc-btn-danger-outline-color: #{map.get($config, danger-outline-color)};
+    --cc-btn-danger-outline-radius: #{map.get($config, danger-outline-radius)};
+    --cc-btn-danger-outline-border: #{map.get($config, danger-outline-border)};
+}

package/src/lib/modules/configurable-form/configurable-form.theme.scss

@@ -0,0 +1,78 @@
+@use 'sass:map';
+
+// Default configuration for the configurable form theme
+$default-configurable-form-config: (
+    // Colors
+    primary-color: #3B82F6,
+    surface-background: #ffffff,
+    border-color: #D1D5DB,
+    text-primary: #111827,
+    text-secondary: #6B7280,
+    error-color: #DC2626,
+    disabled-background: #F3F4F6,
+    hover-background: #F9FAFB,
+
+    // Inputs specific
+    input-border-color: #D1D5DB,
+    input-focus-border-color: #3B82F6,
+    input-hover-border-color: #9CA3AF,
+    input-bg: #ffffff,
+
+    // Dimensions
+    section-radius: 12px,
+    section-padding: 2rem,
+    section-spacing: 1.5rem,
+    input-radius: 8px,
+    input-padding-y: 0.625rem,
+    input-padding-x: 0.875rem,
+
+    // Typography
+    font-family: (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif),
+    section-title-size: 1.25rem,
+    section-title-weight: 600,
+    label-size: 0.875rem,
+    label-weight: 600,
+    input-font-size: 0.875rem,
+    hint-size: 0.75rem,
+
+    // Shadows
+    section-shadow: (0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)),
+);
+
+// Mixin to generate CSS variables for the configurable form component
+@mixin configurable-form-theme($user-config: ()) {
+    // Merge user config with defaults
+    $config: map.merge($default-configurable-form-config, $user-config);
+
+    // Generate CSS Variables
+    --cf-primary-color: #{map.get($config, primary-color)};
+    --cf-surface-background: #{map.get($config, surface-background)};
+    --cf-border-color: #{map.get($config, border-color)};
+    --cf-text-primary: #{map.get($config, text-primary)};
+    --cf-text-secondary: #{map.get($config, text-secondary)};
+    --cf-error-color: #{map.get($config, error-color)};
+    --cf-disabled-background: #{map.get($config, disabled-background)};
+    --cf-hover-background: #{map.get($config, hover-background)};
+
+    --cf-input-border-color: #{map.get($config, input-border-color)};
+    --cf-input-focus-border-color: #{map.get($config, input-focus-border-color)};
+    --cf-input-hover-border-color: #{map.get($config, input-hover-border-color)};
+    --cf-input-bg: #{map.get($config, input-bg)};
+
+    --cf-section-radius: #{map.get($config, section-radius)};
+    --cf-section-padding: #{map.get($config, section-padding)};
+    --cf-section-spacing: #{map.get($config, section-spacing)};
+    --cf-input-radius: #{map.get($config, input-radius)};
+    --cf-input-padding-y: #{map.get($config, input-padding-y)};
+    --cf-input-padding-x: #{map.get($config, input-padding-x)};
+
+    --cf-font-family: #{map.get($config, font-family)};
+    --cf-section-title-size: #{map.get($config, section-title-size)};
+    --cf-section-title-weight: #{map.get($config, section-title-weight)};
+    --cf-label-size: #{map.get($config, label-size)};
+    --cf-label-weight: #{map.get($config, label-weight)};
+    --cf-input-font-size: #{map.get($config, input-font-size)};
+    --cf-hint-size: #{map.get($config, hint-size)};
+
+    --cf-section-shadow: #{map.get($config, section-shadow)};
+}

package/src/lib/modules/confirmation-modal/confirmation-modal.theme.scss

@@ -0,0 +1,87 @@
+@use 'sass:map';
+
+$default-confirmation-modal-config: (
+    bg: #FFFFFF,
+    radius: 0.75rem,
+    // 12px
+    shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.15),
+    // 0 4px 24px
+    border: none,
+
+    // Header
+    header-padding: 0.5rem 1rem,
+    // 24px
+    header-border-bottom: 0.0625rem solid #E5E7EB,
+    // 1px
+    title-font-size: 1.25rem,
+    // 20px
+    title-font-weight: 600,
+    title-color: #111827,
+    icon-size: 1.5rem,
+    // 24px
+    close-icon-size: 1.25rem,
+    // 20px
+
+    // Body
+    body-padding: 1.5rem,
+    // 24px
+    body-text-color: #374151,
+
+    // Inputs (Defaults)
+    input-padding: 0.625rem 0.75rem,
+    // 10px 12px
+    input-radius: 0.375rem,
+    // 6px
+    input-font-size: 0.875rem,
+    // 14px
+    label-margin-bottom: 0.5rem,
+    // 8px
+    textarea-min-height: 6.25rem,
+    // 100px
+
+    // Footer
+    footer-bg: #F9FAFB,
+    footer-padding: 1rem 1.5rem,
+    // 24px
+    footer-border-top: 0.0625rem solid #E5E7EB,
+    // 1px
+
+    // Spinner
+    spinner-size: 1rem // 16px
+);
+
+@mixin confirmation-modal-theme($user-config: ()) {
+    $config: map.merge($default-confirmation-modal-config, $user-config);
+
+    --cc-modal-bg: #{map.get($config, bg)};
+    --cc-modal-radius: #{map.get($config, radius)};
+    --cc-modal-shadow: #{map.get($config, shadow)};
+    --cc-modal-border: #{map.get($config, border)};
+
+    // Header Themes
+    --cc-modal-header-bg-dark: #262125;
+    --cc-modal-header-title-color-dark: #FFFFFF;
+
+    --cc-modal-header-padding: #{map.get($config, header-padding)};
+    --cc-modal-header-border-bottom: #{map.get($config, header-border-bottom)};
+    --cc-modal-title-size: #{map.get($config, title-font-size)};
+    --cc-modal-title-weight: #{map.get($config, title-font-weight)};
+    --cc-modal-title-color: #{map.get($config, title-color)};
+    --cc-modal-icon-size: #{map.get($config, icon-size)};
+    --cc-modal-close-icon-size: #{map.get($config, close-icon-size)};
+
+    --cc-modal-body-padding: #{map.get($config, body-padding)};
+    --cc-modal-body-color: #{map.get($config, body-text-color)};
+
+    --cc-modal-input-padding: #{map.get($config, input-padding)};
+    --cc-modal-input-radius: #{map.get($config, input-radius)};
+    --cc-modal-input-font-size: #{map.get($config, input-font-size)};
+    --cc-modal-label-margin-bottom: #{map.get($config, label-margin-bottom)};
+    --cc-modal-textarea-min-height: #{map.get($config, textarea-min-height)};
+
+    --cc-modal-footer-bg: #{map.get($config, footer-bg)};
+    --cc-modal-footer-padding: #{map.get($config, footer-padding)};
+    --cc-modal-footer-border-top: #{map.get($config, footer-border-top)};
+
+    --cc-modal-spinner-size: #{map.get($config, spinner-size)};
+}

package/src/lib/modules/filter-sidebar/filter-sidebar.theme.scss

@@ -0,0 +1,50 @@
+@use 'sass:map';
+
+// Default Filter Sidebar Configuration
+$default-filter-config: (
+    // Sidebar Container
+    bg-color: #ffffff,
+    border-color: #E5E7EB,
+    width: 300px,
+
+    // Tabs
+    tab-bg: transparent,
+    tab-color: #6B7280,
+    tab-active-bg: #FEF2F2,
+    tab-active-color: #EF4444,
+    tab-active-border: #FECACA,
+    tab-hover-bg: #F3F4F6,
+
+    // Sections
+    section-title-color: #374151,
+    accordion-title-color: #111827,
+
+    // Actions Footer
+    footer-bg: #ffffff,
+    footer-border-color: #E5E7EB
+);
+
+@mixin filter-sidebar-theme($user-config: ()) {
+    $config: map.merge($default-filter-config, $user-config);
+
+    // Sidebar
+    --cc-filter-bg: #{map.get($config, bg-color)};
+    --cc-filter-border-color: #{map.get($config, border-color)};
+    --cc-filter-width: #{map.get($config, width)};
+
+    // Tabs
+    --cc-filter-tab-bg: #{map.get($config, tab-bg)};
+    --cc-filter-tab-color: #{map.get($config, tab-color)};
+    --cc-filter-tab-active-bg: #{map.get($config, tab-active-bg)};
+    --cc-filter-tab-active-color: #{map.get($config, tab-active-color)};
+    --cc-filter-tab-active-border: #{map.get($config, tab-active-border)};
+    --cc-filter-tab-hover-bg: #{map.get($config, tab-hover-bg)};
+
+    // Sections
+    --cc-filter-section-title-color: #{map.get($config, section-title-color)};
+    --cc-filter-accordion-title-color: #{map.get($config, accordion-title-color)};
+
+    // Footer
+    --cc-filter-footer-bg: #{map.get($config, footer-bg)};
+    --cc-filter-footer-border-color: #{map.get($config, footer-border-color)};
+}

package/src/lib/modules/nav/nav.theme.scss

@@ -0,0 +1,86 @@
+@use 'sass:map';
+
+// Default configuration for the nav theme
+$default-nav-config: (
+  // Container
+  container-bg: #f5f5f5,
+  container-padding: 4px,
+  container-radius: 6px,
+  container-border: none,
+  container-gap: 4px,
+
+  // Item - Font & Text
+  font-family: ('Roboto', sans-serif),
+  font-size: 14px,
+  font-weight: 500,
+  item-color: #666666,
+  item-bg: transparent,
+  item-padding: 8px 16px,
+  item-radius: 4px,
+  item-border: none,
+
+  // Item - Active State
+  item-active-bg: #ffffff,
+  item-active-color: #1a1a1a,
+  item-active-font-weight: 600,
+  item-active-border-color: transparent,
+  item-active-border-width: 2px,
+  item-active-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
+
+  // Item - Hover State
+  item-hover-bg: #eeeeee,
+  item-hover-color: #333333,
+
+  // Item - Disabled State
+  disabled-opacity: 0.5,
+
+  // Badge
+  badge-bg: #e74c3c,
+  badge-color: #ffffff,
+  badge-size: 18px,
+  badge-font-size: 10px
+);
+
+// Mixin to generate CSS variables for the nav component
+@mixin nav-theme($user-config: ()) {
+  // Merge user config with defaults
+  $config: map.merge($default-nav-config, $user-config);
+
+  // Container
+  --cc-nav-container-bg: #{map.get($config, container-bg)};
+  --cc-nav-container-padding: #{map.get($config, container-padding)};
+  --cc-nav-container-radius: #{map.get($config, container-radius)};
+  --cc-nav-container-border: #{map.get($config, container-border)};
+  --cc-nav-container-gap: #{map.get($config, container-gap)};
+
+  // Item - Font & Text
+  --cc-nav-font-family: #{map.get($config, font-family)};
+  --cc-nav-font-size: #{map.get($config, font-size)};
+  --cc-nav-font-weight: #{map.get($config, font-weight)};
+  --cc-nav-item-color: #{map.get($config, item-color)};
+  --cc-nav-item-bg: #{map.get($config, item-bg)};
+  --cc-nav-item-padding: #{map.get($config, item-padding)};
+  --cc-nav-item-radius: #{map.get($config, item-radius)};
+  --cc-nav-item-border: #{map.get($config, item-border)};
+
+  // Item - Active State
+  --cc-nav-item-active-bg: #{map.get($config, item-active-bg)};
+  --cc-nav-item-active-color: #{map.get($config, item-active-color)};
+  --cc-nav-item-active-font-weight: #{map.get($config, item-active-font-weight)};
+  --cc-nav-item-active-border-color: #{map.get($config, item-active-border-color)};
+  --cc-nav-item-active-border-width: #{map.get($config, item-active-border-width)};
+  --cc-nav-item-active-shadow: #{map.get($config, item-active-shadow)};
+
+  // Item - Hover State
+  --cc-nav-item-hover-bg: #{map.get($config, item-hover-bg)};
+  --cc-nav-item-hover-color: #{map.get($config, item-hover-color)};
+
+  // Item - Disabled State
+  --cc-nav-disabled-opacity: #{map.get($config, disabled-opacity)};
+
+  // Badge
+  --cc-nav-badge-bg: #{map.get($config, badge-bg)};
+  --cc-nav-badge-color: #{map.get($config, badge-color)};
+  --cc-nav-badge-size: #{map.get($config, badge-size)};
+  --cc-nav-badge-font-size: #{map.get($config, badge-font-size)};
+}

package/src/lib/modules/pagination/pagination.theme.scss

@@ -0,0 +1,66 @@
+@use 'sass:map';
+
+// Default configuration for the pagination theme
+$default-pagination-config: (
+  // Font & Text
+  font-family: ('Roboto', sans-serif),
+  text-color: #757575,
+  font-size: 14px,
+
+  // Select Dropdown
+  select-bg: #f5f5f5,
+  select-border: none,
+  select-radius: 4px,
+  select-padding: 6px 12px,
+  select-text-color: #333,
+  select-arrow-color: #f44336, // Red arrow
+
+  // Buttons
+  btn-size: 32px,
+  btn-bg: #ffffff,
+  btn-border: 1px solid #e0e0e0,
+  btn-radius: 4px,
+  btn-text-color: #333,
+  
+  // States
+  btn-hover-bg: #f5f5f5,
+  btn-active-bg: #fff,
+  btn-active-border: 1px solid #ff4081, // Pinkish red
+  btn-active-text: #ff4081,
+  
+  // Disabled
+  disabled-opacity: 0.5,
+  disabled-bg: #f9f9f9
+);
+
+// Mixin to generate CSS variables for the pagination component
+@mixin pagination-theme($user-config: ()) {
+  // Merge user config with defaults
+  $config: map.merge($default-pagination-config, $user-config);
+
+  // Generate CSS Variables
+  --cc-pagination-font-family: #{map.get($config, font-family)};
+  --cc-pagination-text-color: #{map.get($config, text-color)};
+  --cc-pagination-font-size: #{map.get($config, font-size)};
+
+  --cc-pagination-select-bg: #{map.get($config, select-bg)};
+  --cc-pagination-select-border: #{map.get($config, select-border)};
+  --cc-pagination-select-radius: #{map.get($config, select-radius)};
+  --cc-pagination-select-padding: #{map.get($config, select-padding)};
+  --cc-pagination-select-text-color: #{map.get($config, select-text-color)};
+  --cc-pagination-select-arrow-color: #{map.get($config, select-arrow-color)};
+
+  --cc-pagination-btn-size: #{map.get($config, btn-size)};
+  --cc-pagination-btn-bg: #{map.get($config, btn-bg)};
+  --cc-pagination-btn-border: #{map.get($config, btn-border)};
+  --cc-pagination-btn-radius: #{map.get($config, btn-radius)};
+  --cc-pagination-btn-text-color: #{map.get($config, btn-text-color)};
+  
+  --cc-pagination-btn-hover-bg: #{map.get($config, btn-hover-bg)};
+  --cc-pagination-btn-active-bg: #{map.get($config, btn-active-bg)};
+  --cc-pagination-btn-active-border: #{map.get($config, btn-active-border)};
+  --cc-pagination-btn-active-text: #{map.get($config, btn-active-text)};
+  
+  --cc-pagination-disabled-opacity: #{map.get($config, disabled-opacity)};
+  --cc-pagination-disabled-bg: #{map.get($config, disabled-bg)};
+}