@adzen/doohbot 1.0.1 → 1.0.2

package/src/lib/shared/input-dialog/input-dialog.component.scss

@@ -0,0 +1,71 @@
+.dialog-container {
+  padding: 8px;
+}
+
+.dialog-message {
+  color: var(--secondary-text-color);
+  margin-bottom: 20px;
+  font-size: 14px;
+}
+
+.input-group {
+  margin-bottom: 20px;
+}
+
+.dialog-input {
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--background-color);
+  color: var(--text-color);
+  font-size: 14px;
+  font-family: inherit;
+  transition: all 0.2s;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: var(--border-shadow-color);
+  }
+}
+
+.cancel-btn {
+  border-radius: 8px;
+  font-weight: 500;
+}
+
+.confirm-btn {
+  border-radius: 8px;
+  font-weight: 500;
+  margin-left: 8px;
+  transition: all 0.2s ease;
+
+  &.warn-btn {
+    background-color: var(--red);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--red);
+    }
+  }
+
+  &.primary-btn {
+    background-color: var(--primary-color);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--primary-color);
+    }
+  }
+
+  &.accent-btn {
+    background-color: var(--light-red);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--light-red);
+    }
+  }
+}

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

@@ -0,0 +1,125 @@
+.snackbar-message {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  border-radius: 6px;
+  color: var(--white);
+  font-size: 12px;
+  box-shadow: var(--border-shadow-color);
+  font-family: var(--font-family);
+  width: 100%;
+  max-width: 360px;
+  box-sizing: border-box;
+  background-color: var(--background-color); // Fallback
+  border: 1px solid transparent;
+
+  &.type-error {
+    background-color: color-mix(in srgb, var(--red), var(--white) 60%);
+    border-color: var(--red);
+
+    .alert-icon {
+      color: var(--red);
+    }
+
+    .close-icon:hover {
+      background-color: var(--red);
+    }
+  }
+
+  &.type-success {
+    background-color: color-mix(in srgb, var(--green), var(--white) 60%);
+    border-color: var(--green);
+
+    .alert-icon {
+      color: var(--green);
+    }
+
+    .close-icon:hover {
+      background-color: var(--green);
+    }
+  }
+
+  &.type-warn {
+    background-color: color-mix(in srgb, var(--orange), var(--white) 60%);
+    border-color: var(--orange);
+
+    .alert-icon {
+      color: var(--orange);
+    }
+
+    .close-icon:hover {
+      background-color: var(--orange);
+    }
+  }
+
+  &.type-info {
+    // using primary color or a blue
+    background-color: color-mix(in srgb, var(--blue), var(--white) 60%);
+    border-color: var(--blue);
+
+    .alert-icon {
+      color: var(--blue);
+    }
+
+    .close-icon:hover {
+      background-color: var(--blue);
+    }
+  }
+}
+
+.error-content {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  flex: 1;
+}
+
+.alert-icon {
+  font-size: 18px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.error-text {
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--black); // Ensure text is visible on light bg
+}
+
+.close-icon {
+  color: var(--black);
+  cursor: pointer;
+  font-size: 18px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  opacity: 0.7;
+  flex-shrink: 0;
+}
+
+.close-icon:hover {
+  opacity: 1;
+  background-color: var(--red);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/lib/styles/_theme.scss

@@ -0,0 +1,69 @@
+// Include theming for Angular Material with `mat.theme()`.
+@use 'sass:meta';
+@use '@angular/material' as mat;
+
+// Standard CSS @imports are safest for browser font/icon loading in compiled SCSS
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
+@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',
+      ),
+    ));
+
+// 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',
+      ),
+    ));
+
+:root {
+  // Default: system preference
+  @include mat.all-component-themes($light-theme);
+
+  // ---------- 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);
+
+  // Global overrides for Material components
+  @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);
+}
+
+.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);
+}

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

@@ -0,0 +1,338 @@
+@use '@angular/material' as mat;
+
+// ================================
+//      Manual CSS Overrides
+// ================================
+
+// ================================
+//      Custom Snackbar Overrides
+// ================================
+
+.mat-mdc-snack-bar-container {
+  &.mdc-snackbar {
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+
+  .mdc-snackbar__surface {
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    min-width: 0 !important;
+  }
+
+  .mdc-snackbar__label {
+    padding: 0 !important;
+    width: 100%;
+  }
+}
+
+// ==========================================
+//      Global Material Button Overrides
+// ==========================================
+
+.mat-mdc-button-base {
+  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 {
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+// Raised and Flat variant elevation enhancements
+.mat-mdc-raised-button,
+.mat-mdc-unelevated-button {
+  &:hover:not(:disabled) {
+    box-shadow: 0 4px 12px rgba(var(--black-rgb), 0.15) !important;
+  }
+}
+
+// Icon button specific interaction
+.mat-mdc-icon-button {
+  transition: transform 0.2s ease !important;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+// Consistency for all variants
+.mdc-button,
+.mat-mdc-button,
+.mat-mdc-raised-button,
+.mat-mdc-unelevated-button,
+.mat-mdc-stroked-button {
+  border-radius: var(--button-container-shape, 5px) !important;
+
+  // Link state layers to theme
+  .mat-ripple {
+    opacity: 0.1 !important;
+  }
+}
+
+// ==========================================
+//      Shared Component Overrides
+// ==========================================
+
+// 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__surface {
+    border-radius: 12px !important;
+    overflow: hidden;
+    background-color: var(--background-color) !important;
+    --mdc-dialog-surface-container-color: var(--background-color) !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;
+
+  // Hide scrollbar for cleaner look
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .mat-mdc-option {
+    min-height: 44px !important;
+
+    &.mdc-list-item--selected:not(.mdc-list-item--disabled) {
+      .mdc-list-item__primary-text {
+        color: var(--primary-color) !important;
+      }
+    }
+  }
+}
+
+// Global Menu & Context Actions
+.mat-mdc-menu-panel {
+  border-radius: 12px !important;
+  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;
+
+  .mat-mdc-menu-item:hover {
+    background-color: color-mix(in srgb, var(--primary-color), transparent 92%) !important;
+  }
+
+  // Consistent item styling
+  .mat-mdc-menu-item {
+    min-height: 44px !important;
+    font-size: 0.95rem !important;
+    font-weight: 500 !important;
+
+    .mat-icon {
+      margin-right: 12px !important;
+      font-size: 20px !important;
+      width: 20px !important;
+      height: 20px !important;
+      color: var(--secondary-text-color) !important;
+    }
+  }
+}
+
+// Basic Form Field resets (overridden below by more specific cases)
+.mat-mdc-form-field {
+  width: 100%;
+
+  .mat-mdc-text-field-wrapper {
+    background: transparent !important;
+  }
+}
+
+// Global Tooltip Styling
+.mat-mdc-tooltip {
+  --mdc-plain-tooltip-container-color: var(--black); // Standard dark tooltip
+  --mdc-plain-tooltip-supporting-text-color: var(--white);
+  border-radius: 6px !important;
+  font-size: 12px !important;
+  font-weight: 500 !important;
+  padding: 6px 10px !important;
+  backdrop-filter: blur(4px);
+  border: 1px solid rgba(var(--white-rgb), 0.1);
+}
+
+// --- Section Actions Pattern (Shared for Personalization Sections) ---
+.section-actions {
+  display: flex;
+  align-items: center;
+  padding: 32px 0 0 0;
+  border-top: 1px solid rgba(var(--black-rgb), 0.05);
+  margin-top: auto; // Push to bottom of flex container
+  padding-top: 24px;
+
+  .spacer {
+    flex: 1;
+  }
+
+  .reset-btn {
+    background-color: var(--secondary-text-color) !important;
+    color: var(--white) !important;
+    border-radius: 8px !important;
+    padding: 0 24px !important;
+    height: 44px !important;
+    font-weight: 500;
+
+    &:hover {
+      background-color: var(--text-color) !important;
+    }
+  }
+
+  .save-btn {
+    background-color: var(--primary-color) !important;
+    color: var(--white) !important;
+    border-radius: 8px !important;
+    padding: 0 24px !important;
+    height: 44px !important;
+    font-weight: 500;
+
+    &:disabled {
+      background-color: rgba(var(--black-rgb), 0.05) !important;
+      color: rgba(var(--black-rgb), 0.3) !important;
+      box-shadow: none !important;
+    }
+  }
+}
+
+// Remove default padding from dialog content globally for custom layouts
+.mat-mdc-dialog-content.no-padding {
+  padding: 0 !important;
+}
+
+// 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-focus-handle-color: var(--white);
+  --mdc-switch-selected-hover-handle-color: var(--white);
+  --mdc-switch-selected-pressed-handle-color: var(--white);
+  --mdc-switch-unselected-handle-color: var(--white);
+  --mdc-switch-unselected-track-color: rgba(var(--black-rgb), 0.1);
+
+  .mdc-switch__handle-track {
+    filter: drop-shadow(0 2px 4px rgba(var(--black-rgb), 0.1));
+  }
+}
+
+// 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;
+    border: 1px solid rgba(var(--black-rgb), 0.08);
+    border-radius: 8px !important;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: text;
+
+    &:hover {
+      border-color: rgba(var(--black-rgb), 0.15);
+      background: rgba(var(--black-rgb), 0.05) !important;
+    }
+  }
+
+  &.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;
+  }
+
+  // Input & Select Content Styling
+  .mat-mdc-form-field-infix {
+    padding-top: 10px !important;
+    padding-bottom: 10px !important;
+    min-height: auto !important;
+    display: flex;
+    align-items: center;
+
+    .mat-mdc-input-element,
+    .mat-mdc-select-value {
+      font-size: 0.95rem !important;
+      font-weight: 400 !important;
+      color: var(--text-color) !important;
+
+      &::placeholder {
+        color: var(--secondary-text-color) !important;
+        opacity: 0.6;
+      }
+    }
+  }
+
+  // Handle "No Label" variant (removing Material's label layout)
+  &.no-label {
+    .mdc-notched-outline__notch {
+      display: none !important;
+    }
+
+    .mdc-floating-label {
+      display: none !important;
+    }
+
+    .mat-mdc-text-field-wrapper {
+      padding-top: 0 !important;
+    }
+  }
+
+  // Remove the bottom space reserved for error/hints if subscriptSizing is ignored or dynamic
+  .mat-mdc-form-field-subscript-wrapper {
+    display: none !important;
+  }
+
+  // Specific height for select to match inputs
+  &.mat-form-field-type-mat-select {
+    .mat-mdc-text-field-wrapper {
+      min-height: 44px !important;
+      height: 44px !important;
+    }
+  }
+}
+
+// ==========================================
+//      Shared Animations
+// ==========================================
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// ==========================================
+//      Autofill Overrides
+// ==========================================
+
+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;
+  transition: background-color 5000s ease-in-out 0s;
+}