@adzen/doohbot 1.0.6 → 1.0.8

package/src/lib/shared/notification-banner/notification-banner.component.scss

@@ -0,0 +1,342 @@
+.banner-wrapper {
+  padding: 12px 16px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.glass-banner {
+  position: relative;
+  background: rgba(var(--db-bg-color-rgb), 0.7);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(var(--db-primary-rgb), 0.2);
+  border-radius: 24px;
+  overflow: hidden;
+  box-shadow:
+    0 8px 32px rgba(var(--black-rgb), 0.08),
+    inset 0 0 0 1px rgba(var(--white-rgb), 0.1);
+  animation: banner-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.banner-glow {
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(
+    circle at center,
+    rgba(var(--db-primary-rgb), 0.05) 0%,
+    transparent 70%
+  );
+  pointer-events: none;
+  animation: rotate-glow 10s linear infinite;
+}
+
+.banner-inner {
+  position: relative;
+  z-index: 1;
+  padding: 20px;
+}
+
+.header-section {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 24px;
+  padding: 0 20px; // Match .status-card horizontal padding
+
+  .icon-orb {
+    width: 36px;
+    height: 36px;
+    background: linear-gradient(135deg, var(--db-primary), rgba(var(--db-primary-rgb), 0.6));
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(var(--db-primary-rgb), 0.3);
+
+    mat-icon {
+      color: white;
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .text-content {
+    text-align: left;
+
+    h3 {
+      margin: 0;
+      font-size: 0.95rem;
+      font-weight: 700;
+      color: var(--db-text-primary);
+      letter-spacing: -0.01em;
+    }
+    p {
+      margin: 2px 0 0 0;
+      font-size: 0.75rem;
+      color: var(--db-text-secondary);
+      opacity: 0.8;
+    }
+  }
+}
+
+.status-section {
+  margin-bottom: 24px;
+  padding: 0 20px;
+
+  .status-card {
+    background: rgba(var(--db-primary-rgb), 0.03); // Default subtle background
+    border: 1px solid rgba(var(--db-border-color-rgb), 0.2);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+    padding: 16px;
+    border-radius: 16px;
+    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    animation: banner-reveal 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+
+    &.error {
+      background: rgba(239, 68, 68, 0.05);
+      border-color: rgba(239, 68, 68, 0.2);
+
+      .icon-orb {
+        background: rgba(239, 68, 68, 0.1);
+        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1);
+        mat-icon {
+          color: #ef4444;
+        }
+      }
+    }
+
+    &.updating {
+      background: rgba(var(--db-primary-rgb), 0.05);
+      border-color: rgba(var(--db-primary-rgb), 0.2);
+
+      .icon-orb {
+        background: rgba(var(--db-primary-rgb), 0.1);
+        box-shadow: 0 4px 12px rgba(var(--db-primary-rgb), 0.1);
+        mat-icon {
+          color: var(--db-primary);
+          animation: rotate-glow 2s linear infinite;
+        }
+      }
+    }
+
+    &.success {
+      background: rgba(16, 185, 129, 0.05);
+      border-color: rgba(16, 185, 129, 0.2);
+
+      .icon-orb {
+        background: rgba(16, 185, 129, 0.1);
+        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
+        mat-icon {
+          color: #10b981;
+        }
+      }
+    }
+
+    .icon-orb {
+      width: 40px;
+      height: 40px;
+      background: rgba(var(--db-border-color-rgb), 0.1);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+
+      mat-icon {
+        color: var(--db-text-secondary);
+        font-size: 24px;
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .status-text {
+      text-align: left;
+      flex: 1;
+
+      h4 {
+        margin: 0;
+        font-size: 0.9rem;
+        font-weight: 600;
+        color: var(--db-text-primary);
+        letter-spacing: -0.01em;
+      }
+      p {
+        margin: 2px 0 0 0;
+        font-size: 0.8rem;
+        color: var(--db-text-secondary);
+        line-height: 1.4;
+        opacity: 0.9;
+      }
+    }
+  }
+}
+
+.status-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.status-card {
+  position: relative;
+  background: rgba(var(--black-rgb), 0.03);
+  border: 1px solid transparent;
+  padding: 14px 20px;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  overflow: hidden;
+
+  mat-icon {
+    font-size: 24px;
+    width: 36px; // Match .icon-orb width for text alignment
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--db-border-color);
+    transition: all 0.4s ease;
+    flex-shrink: 0;
+  }
+
+  .status-label {
+    flex: 1;
+    font-size: 0.75rem;
+    font-weight: 500;
+    // text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--db-text-secondary);
+    text-align: left;
+    white-space: nowrap;
+  }
+
+  .status-tag {
+    font-size: 0.6rem;
+    padding: 2px 6px;
+    border-radius: 10px;
+    text-transform: uppercase;
+    font-weight: 800;
+    letter-spacing: 0.5px;
+    background: rgba(var(--black-rgb), 0.05);
+  }
+
+  &.success {
+    background: var(--db-bg-color-rgb);
+    border-color: rgba(16, 185, 129, 0.15);
+    box-shadow: 0 4px 12px rgba(var(--black-rgb), 0.05);
+
+    mat-icon {
+      color: var(--db-text-primary);
+      font-size: 16px;
+      transform: scale(1.1);
+      filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.2));
+    }
+
+    .status-label {
+      color: var(--db-text-primary);
+    }
+
+    .status-tag {
+      background: rgba(16, 185, 129, 0.1);
+      color: #10b981;
+      border: 1px solid rgba(16, 185, 129, 0.2);
+    }
+
+    .card-glow {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), transparent);
+    }
+  }
+
+  &.failed {
+    background: rgba(239, 68, 68, 0.02);
+    border-color: rgba(239, 68, 68, 0.2);
+
+    mat-icon {
+      color: var(--db-text-primary);
+      font-size: 16px;
+      animation: shake 0.5s ease-in-out;
+    }
+
+    .status-tag {
+      background: rgba(239, 68, 68, 0.1);
+      color: #ef4444;
+      border: 1px solid rgba(239, 68, 68, 0.2);
+    }
+  }
+
+  &.pending {
+    background: rgba(245, 158, 11, 0.02);
+    border-color: rgba(245, 158, 11, 0.2);
+
+    mat-icon {
+      color: var(--db-text-primary);
+      font-size: 16px;
+      animation: pulse-icon 2s infinite ease-in-out;
+    }
+
+    .status-tag {
+      background: rgba(245, 158, 11, 0.1);
+      color: #f59e0b;
+      border: 1px solid rgba(245, 158, 11, 0.2);
+    }
+  }
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-2px);
+  }
+  75% {
+    transform: translateX(2px);
+  }
+}
+
+@keyframes banner-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes rotate-glow {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse-icon {
+  0%,
+  100% {
+    opacity: 0.5;
+    transform: scale(0.95);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1);
+  }
+}

package/src/lib/shared/snackbar/snackbar.component.scss

@@ -7,12 +7,12 @@
   border-radius: 6px;
   color: var(--white);
   font-size: 12px;
-  box-shadow: var(--border-shadow-color);
-  font-family: var(--font-family);
+  box-shadow: var(--db-border-shadow);
+  font-family: var(--db-font);
   width: 100%;
   max-width: 360px;
   box-sizing: border-box;
-  background-color: var(--background-color); // Fallback
+  background-color: var(--db-bg-color); // Fallback
   border: 1px solid transparent;
 
   &.type-error {

package/src/lib/styles/_theme.scss

@@ -1,4 +1,4 @@
-// Include theming for Angular Material with `mat.theme()`.
+// Include theming for Angular Material with `mat.theme()`./
 @use 'sass:meta';
 @use '@angular/material' as mat;
 
@@ -7,63 +7,119 @@
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 // Light theme
-$light-theme: mat.define-theme((color: (theme-type: light,
-        primary: mat.$violet-palette,
-        tertiary: mat.$orange-palette,
-      ),
-      typography: (brand-family: 'Roboto',
-        plain-family: 'Roboto',
-      ),
-    ));
+$light-theme: mat.define-theme(
+  (
+    color: (
+      theme-type: light,
+      primary: mat.$violet-palette,
+      tertiary: mat.$orange-palette,
+    ),
+    typography: (
+      brand-family: 'Roboto',
+      plain-family: 'Roboto',
+    ),
+  )
+);
 
 // Dark theme
-$dark-theme: mat.define-theme((color: (theme-type: dark,
-        primary: mat.$orange-palette,
-        tertiary: mat.$violet-palette,
-      ),
-      typography: (brand-family: 'Roboto',
-        plain-family: 'Roboto',
-      ),
-    ));
+$dark-theme: mat.define-theme(
+  (
+    color: (
+      theme-type: dark,
+      primary: mat.$violet-palette,
+      tertiary: mat.$orange-palette,
+    ),
+    typography: (
+      brand-family: 'Roboto',
+      plain-family: 'Roboto',
+    ),
+  )
+);
 
+// ----------------------------------------------------------------
+// :root — real default values (NOT self-references).
+// Palette classes (.db-theme-*) will override these on their element.
+// ----------------------------------------------------------------
 :root {
-  // Default: system preference
-  @include mat.all-component-themes($light-theme);
+  --db-font: 'Roboto', Arial, sans-serif;
+  --db-primary: #4f46e5;
+  --db-primary-rgb: 79, 70, 229;
+  --db-secondary: #6366f1;
+  --db-bg-color: #ffffff;
+  --db-bg-chat-input: #f9fafb;
+  --db-bg-user-msg: #f3f4f6;
+  --db-bg-bot-msg: #f3f4f6;
+  --db-text-primary: #1f2937;
+  --db-text-secondary: #9ca3af;
+  --db-text-tertiary: #1f2937;
+  --db-text-hint: #9ca3af;
+  --db-text-user-msg: #111827;
+  --db-text-bot-msg: #111827;
+  --db-border-color: #cbd5e1;
+  --db-border-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --db-border-top: #ffffff00;
+  --db-color-button: #4f46e5;
+  --db-color-typing: #cbd5e1;
+  --db-avatar-filter: none;
+  --white: #ffffff;
+  --black: #000000;
+  --grey: #6b7280;
+  --red: #fe0000;
+  --green: #00ce4b;
+  --orange: #ff6a00;
+  --blue: #0062ff;
+  --white-rgb: 255, 255, 255;
+  --black-rgb: 0, 0, 0;
+}
 
-  // ---------- Global Theme Variables / Fallbacks ----------
-  // We use these fallbacks to ensure the app looks decent even before 
-  // the ThemeService applies the specific palette class to the HTML element.
-  --font-family: var(--db-font-family, 'Roboto', Arial, sans-serif);
-  --primary-color: var(--db-primary, #4f46e5);
-  --background-color: var(--db-bg-app, #ffffff);
-  --text-color: var(--db-text-main, #111827);
+// ----------------------------------------------------------------
+// Theme classes — Material applied ONLY here, not at :root.
+// Palette class (.db-theme-*) is added alongside these by ThemeService.
+// ----------------------------------------------------------------
+.light-theme {
+  @include mat.all-component-themes($light-theme);
 
-  // Global overrides for Material components
-  @include mat.theme-overrides((button-container-shape: 5px,
+  // Wire Material color roles to our palette variables
+  @include mat.theme-overrides(
+    (
+      button-container-shape: 5px,
       dialog-container-shape: 12px,
       menu-container-shape: 5px,
       card-container-shape: 12px,
       form-field-container-shape: 5px,
 
-      // Bridge: Link Material roles to our custom variables
-      primary: var(--primary-color),
-      on-primary: var(--user-text-color, #ffffff),
-      surface: var(--background-color),
-      on-surface: var(--text-color),
-      outline: var(--border-color, #e5e7eb),
-    ));
-}
-
-// ---------- Theme classes (apply to html or body) ----------
-.light-theme {
-  @include mat.all-component-themes($light-theme);
+      primary: var(--db-primary),
+      on-primary: #ffffff,
+      surface: var(--db-bg-color),
+      on-surface: var(--db-text-primary),
+      outline: var(--db-border-color),
+    )
+  );
 }
 
 .dark-theme {
   @include mat.all-component-themes($dark-theme);
 
-  // Dark mode fallbacks for :root variables when .dark-theme is present
-  --primary-color: var(--db-primary, #818cf8);
-  --background-color: var(--db-bg-app, #161616);
-  --text-color: var(--db-text-main, #f9fafb);
-}
+  @include mat.theme-overrides(
+    (
+      button-container-shape: 5px,
+      dialog-container-shape: 12px,
+      menu-container-shape: 5px,
+      card-container-shape: 12px,
+      form-field-container-shape: 5px,
+
+      primary: var(--db-primary),
+      on-primary: #ffffff,
+      surface: var(--db-bg-color),
+      on-surface: var(--db-text-primary),
+      outline: var(--db-border-color),
+    )
+  );
+}
+
+// ----------------------------------------------------------------
+// CDK Overlay
+// ----------------------------------------------------------------
+.cdk-overlay-container {
+  z-index: 1000000 !important; // Must be higher than fullscreen chat window (999999)
+}

package/src/lib/styles/material-override.scss

@@ -32,7 +32,8 @@
 // ==========================================
 
 .mat-mdc-button-base {
-  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),
+  transition:
+    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),
     box-shadow 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
 
   &:hover {
@@ -86,25 +87,35 @@
 // Global Dialog Styling
 .mat-mdc-dialog-container {
   border-radius: 12px !important;
-  --mdc-dialog-container-color: var(--background-color) !important;
-  background-color: var(--background-color) !important;
+  --mdc-dialog-container-color: var(--db-bg-color) !important;
+  background-color: var(--db-bg-color) !important;
+
+  // Remove animations
+  transition: none !important;
 
   .mdc-dialog__surface {
     border-radius: 12px !important;
     overflow: hidden;
-    background-color: var(--background-color) !important;
-    --mdc-dialog-surface-container-color: var(--background-color) !important;
+    background-color: var(--db-bg-color) !important;
+    --mdc-dialog-surface-container-color: var(--db-bg-color) !important;
   }
 }
 
+// Disable global Material Dialog animations
+.cdk-overlay-pane,
+.cdk-overlay-backdrop {
+  transition: none !important;
+  animation: none !important;
+}
+
 // Global Select & Dropdown Styling
 .mat-mdc-select-panel {
   border-radius: 12px !important;
   padding: 8px 0 !important;
   box-shadow: 0 8px 24px rgba(var(--black-rgb), 0.12) !important;
   border: 1px solid rgba(var(--black-rgb), 0.05) !important;
-  background-color: var(--background-color) !important;
-  --mdc-select-panel-container-color: var(--background-color) !important;
+  background-color: var(--db-bg-color) !important;
+  --mdc-select-panel-container-color: var(--db-bg-color) !important;
 
   // Hide scrollbar for cleaner look
   &::-webkit-scrollbar {
@@ -116,7 +127,7 @@
 
     &.mdc-list-item--selected:not(.mdc-list-item--disabled) {
       .mdc-list-item__primary-text {
-        color: var(--primary-color) !important;
+        color: var(--db-primary) !important;
       }
     }
   }
@@ -128,11 +139,11 @@
   overflow: hidden !important;
   border: 1px solid rgba(var(--black-rgb), 0.1) !important;
   box-shadow: 0 8px 24px rgba(var(--black-rgb), 0.12) !important;
-  background-color: var(--background-color) !important;
-  --mdc-menu-container-color: var(--background-color) !important;
+  background-color: var(--db-bg-color) !important;
+  --mdc-menu-container-color: var(--db-bg-color) !important;
 
   .mat-mdc-menu-item:hover {
-    background-color: color-mix(in srgb, var(--primary-color), transparent 92%) !important;
+    background-color: color-mix(in srgb, var(--db-primary), transparent 92%) !important;
   }
 
   // Consistent item styling
@@ -146,7 +157,7 @@
       font-size: 20px !important;
       width: 20px !important;
       height: 20px !important;
-      color: var(--secondary-text-color) !important;
+      color: var(--db-text-secondary) !important;
     }
   }
 }
@@ -186,7 +197,7 @@
   }
 
   .reset-btn {
-    background-color: var(--secondary-text-color) !important;
+    background-color: var(--db-text-secondary) !important;
     color: var(--white) !important;
     border-radius: 8px !important;
     padding: 0 24px !important;
@@ -194,12 +205,12 @@
     font-weight: 500;
 
     &:hover {
-      background-color: var(--text-color) !important;
+      background-color: var(--db-text-primary) !important;
     }
   }
 
   .save-btn {
-    background-color: var(--primary-color) !important;
+    background-color: var(--db-primary) !important;
     color: var(--white) !important;
     border-radius: 8px !important;
     padding: 0 24px !important;
@@ -222,7 +233,7 @@
 // Global Slide Toggle Styling
 .mat-mdc-slide-toggle {
   --mdc-switch-selected-handle-color: var(--white);
-  --mdc-switch-selected-track-color: var(--primary-color);
+  --mdc-switch-selected-track-color: var(--db-primary);
   --mdc-switch-selected-focus-handle-color: var(--white);
   --mdc-switch-selected-hover-handle-color: var(--white);
   --mdc-switch-selected-pressed-handle-color: var(--white);
@@ -236,7 +247,6 @@
 
 // Sleek Form Field Overrides (Personalization Hub Style)
 .mat-mdc-form-field {
-
   // Container & Interaction
   .mat-mdc-text-field-wrapper {
     background: rgba(var(--black-rgb), 0.04) !important;
@@ -252,9 +262,9 @@
   }
 
   &.mat-focused .mat-mdc-text-field-wrapper {
-    border-color: var(--primary-color) !important;
-    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1) !important;
-    background: var(--background-color) !important;
+    border-color: var(--db-primary) !important;
+    box-shadow: 0 0 0 3px rgba(var(--db-primary-rgb), 0.1) !important;
+    background: var(--db-bg-color) !important;
   }
 
   // Input & Select Content Styling
@@ -269,10 +279,10 @@
     .mat-mdc-select-value {
       font-size: 0.95rem !important;
       font-weight: 400 !important;
-      color: var(--text-color) !important;
+      color: var(--db-text-primary) !important;
 
       &::placeholder {
-        color: var(--secondary-text-color) !important;
+        color: var(--db-text-secondary) !important;
         opacity: 0.6;
       }
     }
@@ -331,8 +341,8 @@ input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
-  -webkit-box-shadow: 0 0 0 30px var(--background-color) inset !important;
-  -webkit-text-fill-color: var(--text-color) !important;
-  caret-color: var(--text-color) !important;
+  -webkit-box-shadow: 0 0 0 30px var(--db-bg-color) inset !important;
+  -webkit-text-fill-color: var(--db-text-primary) !important;
+  caret-color: var(--db-text-primary) !important;
   transition: background-color 5000s ease-in-out 0s;
-}
+}