commons-shared-web-ui 0.0.28 → 0.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "commons-shared-web-ui",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "peerDependencies": {
     "@angular/animations": "20.3.15",
     "@angular/cdk": "20.2.14",

package/src/lib/modules/filter-table-selector/filter-table-selector.theme.scss

@@ -0,0 +1,36 @@
+@use 'sass:map';
+
+$filter-table-selector-config: (
+  panel-bg: #ffffff,
+  filter-panel-width: 220px,
+  filter-panel-border: 1px solid #dee2e6,
+  header-bg: #ffffff,
+  header-border: 1px solid #dee2e6,
+  header-height: 56px,
+  header-padding: 0 24px,
+  header-title-color: #333333,
+  header-title-font-size: 18px,
+  header-title-font-weight: 600,
+  footer-bg: #ffffff,
+  footer-border: 1px solid #dee2e6,
+  footer-height: 64px,
+  footer-padding: 0 24px,
+  footer-gap: 12px,
+  body-bg: #f8f9fb,
+  filter-section-title-color: #666666,
+  filter-section-title-font-size: 12px,
+  filter-section-title-font-weight: 600,
+  selection-count-color: #666666,
+  selection-count-font-size: 14px,
+  toolbar-border: 1px solid #dee2e6,
+);
+
+@mixin filter-table-selector-theme($user-config: ()) {
+  $config: map.merge($filter-table-selector-config, $user-config);
+
+  :root {
+    @each $key, $value in $config {
+      --fts-#{$key}: #{$value};
+    }
+  }
+}

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

@@ -1,66 +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)};
-}
+@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)};
+}