@adzen/doohbot 1.0.0 → 1.0.2

package/projects/doohbot/src/lib/doohbot.scss

@@ -1,568 +0,0 @@
-@use 'utils/material-override' as *;
-@use 'utils/utility' as *;
-
-@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');
-
-/* Default / system theme fallback */
-:host(.light-theme) {
-  --primary-color: #4f46e5;
-  --secondary-color: #6c757d;
-  --background-color: #f8f9fa;
-  --chat-input-color: var(--background-color);
-  --white: #ffffff;
-  --black: #000000;
-  --text-color: #333;
-  --secondary-text-color: #858585;
-  --hint-text-color: var(--secondary-text-color);
-  --font-family: 'Roboto', Arial, sans-serif;
-  --user-message-color: var(--primary-color);
-  --bot-message-color: #e9ecef;
-  --user-text-color: #fff;
-  --bot-text-color: #333;
-  --border-color: #ccc;
-  --border-shadow-color: 0 4px 16px rgba(0, 0, 0, 0.25);
-  --border-top-color: #dddddd00;
-  --typing-indicator-color: #999;
-  --avatar-filter: invert(48%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(96%) contrast(91%);
-  --red: #ff0000;
-  --light-red: #f28b8b;
-}
-
-/* Dark theme */
-:host(.dark-theme) {
-  --primary-color: #4f46e5;
-  --secondary-color: #9ca3af;
-  --background-color: #1a1a1a;
-  --chat-input-color: var(--background-color);
-  --white: #ffffff;
-  --black: #000000;
-  --text-color: #f5f5f5;
-  --secondary-text-color: #a1a1a1;
-  --hint-text-color: var(--secondary-text-color);
-  --font-family: 'Roboto', Arial, sans-serif;
-  --user-message-color: var(--primary-color);
-  --bot-message-color: #333;
-  --user-text-color: #fff;
-  --bot-text-color: #fff;
-  --border-color: #444;
-  --border-shadow-color: 0 4px 16px rgba(0, 0, 0, 0.75);
-  --border-top-color: #44444400;
-  --typing-indicator-color: #bbb;
-  --avatar-filter: invert(100%) brightness(100%);
-  --red: #ff0000;
-  --light-red: #f28b8b;
-}
-
-:root(.dark-theme) {
-  --tooltip-background: tomato;
-  --tooltip-text-color: white;
-  --tooltip-font-size: 16px;
-}
-
-:root(.dark-theme) {
-  --tooltip-background: tomato;
-  --tooltip-text-color: white;
-  --tooltip-font-size: 16px;
-}
-
-.my-library-tooltip {
-  background-color: var(--my-tooltip-background);
-  color: var(--my-tooltip-text-color);
-  font-size: var(--my-tooltip-font-size);
-}
-
-/* Webkit browsers (Chrome, Edge, Safari) */
-.chat-messages::-webkit-scrollbar {
-  width: 8px; /* width of vertical scrollbar */
-}
-
-.chat-messages::-webkit-scrollbar-track {
-  background: var(--secondary-color); /* track color */
-  border-radius: 4px;
-}
-
-.chat-messages::-webkit-scrollbar-thumb {
-  background-color: var(--primary-color); /* scroll handle color */
-  border-radius: 4px;
-}
-
-.chat-messages::-webkit-scrollbar-thumb:hover {
-  background-color: var(--primary-color);
-}
-
-/* Firefox */
-.chat-messages {
-  scrollbar-width: thin;
-  scrollbar-color: var(--primary-color) var(--background-color);
-}
-
-/* Welcome screen */
-.welcome-screen {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  height: 100%;
-  padding: 0 20px;
-}
-
-.welcome-image {
-  width: 80px;
-  margin-bottom: 30px;
-}
-
-.welcome-screen h3 {
-  margin: 0 0 5px 0;
-  color: var(--text-color);
-  font-family: var(--font-family);
-  font-size: 24px;
-}
-
-.welcome-screen p {
-  margin: 0;
-  color: var(--secondary-text-color);
-  font-size: 14px;
-  font-family: var(--font-family);
-}
-
-/* Chat container */
-.doohbot-container {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  z-index: 1000;
-}
-
-/* Sidebar button */
-.chat-sidebar {
-  position: fixed;
-  right: 0px;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 1000;
-  background: var(--primary-color);
-  color: white;
-  width: 40px;
-  height: 120px;
-  border-radius: 20px 0px 0px 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-/* Existing FAB */
-.chat-fab {
-  position: fixed;
-  bottom: 24px;
-  right: 24px;
-  width: 56px;
-  height: 56px;
-  border-radius: 50%;
-  background: var(--primary-color);
-  color: white;
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
-  border: none;
-  cursor: pointer;
-  z-index: 1000;
-}
-
-.chat-fab svg,
-.chat-fab mat-icon {
-  width: 24px;
-  height: 24px;
-}
-
-.chat-fab:hover {
-  transform: scale(1.1);
-}
-
-.chat-trigger:hover {
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
-  transform: scale(1.05);
-}
-
-.alert-badge {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  background: var(--red);
-  color: var(--white);
-  border-radius: 50%;
-  min-width: 18px;
-  height: 18px;
-  font-size: 11px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  line-height: 1;
-}
-
-/* Chat window */
-.chat-window {
-  width: 410px;
-  height: 550px;
-  background-color: var(--background-color);
-  border-radius: 20px;
-  box-shadow: var(--border-shadow-color);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  animation: slide-in 0.5s ease;
-  position: fixed;
-  right: 20px;
-  bottom: 20px;
-  user-select: none;
-}
-
-@media (max-width: 768px) {
-  .chat-window {
-    width: 95%;
-    height: calc(100vh - 20px);
-  }
-}
-
-@media (max-width: 480px) {
-  .chat-window {
-    width: 90%;
-    height: calc(100vh - 40px);
-  }
-}
-
-.chat-window.fullscreen {
-  width: 98vw;
-  height: 96vh;
-  border-radius: 20px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  user-select: none;
-}
-
-/* Slide-in animation */
-@keyframes slide-in {
-  from {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-/* Chat header */
-.chat-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 20px;
-  background-color: var(--primary-color);
-  color: var(--white);
-  cursor: move;
-  user-select: none;
-}
-
-.chat-header:active {
-  cursor: grabbing;
-}
-
-.chat-title {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-family: var(--font-family);
-}
-
-.chat-logo {
-  width: 45px;
-  height: 45px;
-  object-fit: contain;
-}
-
-.chat-header h2 {
-  margin: 0;
-  font-size: 1.2rem;
-}
-
-/* Header buttons: fullscreen + close (directly in header) */
-.header-button {
-  background: none;
-  border: none;
-  color: var(--white);
-  cursor: pointer;
-  font-size: 1.5rem;
-}
-
-.header-button :hover {
-  transform: scale(1.1);
-}
-
-/* Chat messages */
-.chat-messages {
-  flex-grow: 1;
-  padding: 20px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  scroll-behavior: smooth;
-}
-
-/* Message wrapper */
-.message-wrapper {
-  display: flex;
-  align-items: flex-end;
-  gap: 8px;
-  margin-bottom: 6px;
-}
-
-.message-wrapper.user {
-  justify-content: flex-end;
-}
-
-.message-wrapper.bot {
-  justify-content: flex-start;
-}
-
-/* Message bubbles */
-.message {
-  padding: 10px 15px;
-  border-radius: 20px;
-  max-width: 80%;
-  overflow-y: auto;
-  word-wrap: break-word;
-  font-family: var(--font-family);
-
-  .message-time {
-    font-size: 11px;
-    color: var(--secondary-color);
-    text-align: right;
-    margin-top: 4px;
-  }
-}
-
-.message.user {
-  background-color: var(--primary-color);
-  color: var(--user-text-color);
-  align-self: flex-end;
-}
-
-.message.bot {
-  background-color: var(--bot-message-color);
-  color: var(--bot-text-color);
-  align-self: flex-start;
-}
-
-/* Bot avatar */
-.bot-avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 1px solid var(--border-color);
-  filter: var(--avatar-filter);
-}
-
-.user-avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 1px solid var(--border-color);
-  filter: var(--avatar-filter);
-}
-
-/* Typing indicator */
-.typing-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-}
-
-.typing-indicator span {
-  width: 8px;
-  height: 8px;
-  background-color: var(--typing-indicator-color);
-  border-radius: 50%;
-  animation: blink 1.4s infinite both;
-}
-
-.typing-indicator span:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.typing-indicator span:nth-child(3) {
-  animation-delay: 0.4s;
-}
-
-@keyframes blink {
-  0%,
-  80%,
-  100% {
-    opacity: 0.2;
-  }
-  40% {
-    opacity: 1;
-  }
-}
-
-/* Chat input */
-.chat-input {
-  display: flex;
-  padding: 10px;
-  border-top: 1px solid var(--border-top-color);
-  background-color: var(--background-color);
-}
-
-.chat-input input {
-  flex-grow: 1;
-  background-color: var(--chat-input-color);
-  border: 1px solid var(--border-color);
-  border-radius: 20px;
-  padding: 10px 15px;
-  font-size: 14px;
-  color: var(--text-color);
-  caret-color: var(--hint-text-color);
-  font-family: var(--font-family);
-}
-
-.chat-input button {
-  background-color: var(--primary-color);
-  color: var(--white);
-  border: none;
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  margin-left: 10px;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.chat-input button :hover {
-  transform: scale(1.1);
-}
-
-.terms-conditions {
-  font-size: 0.8rem;
-  color: var(--text-color);
-  margin-top: 5px;
-  margin-bottom: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.terms-conditions a {
-  color: var(--secondary-color);
-  text-decoration: underline;
-  font-family: var(--font-family);
-}
-
-.terms-conditions a:hover {
-  color: var(--primary-color);
-}
-
-// ::ng-deep.mat-menu-override {
-//   .mat-mdc-menu-content {
-//     background-color: #4f46e5 !important; // menu background
-//     border-radius: 12px !important;
-
-//     .mat-mdc-menu-item {
-//       color: white !important; // text color
-//       mat-icon {
-//         color: white !important; // icon color
-//       }
-
-//       &:hover {
-//         background-color: #413abc !important; // hover background
-//         color: whitesmoke !important; // hover text color
-//         mat-icon {
-//           color: whitesmoke !important; // hover icon color
-//         }
-//       }
-//     }
-//   }
-// }
-
-// ***** Material Override Starts Here *****
-
-// < --- MatMenu Override --->
-
-::ng-deep.mat-menu-override {
-  background: #4f46e5 !important;
-  color: white !important;
-  border-radius: 8px !important;
-  padding: 4px 0 !important;
-
-  .mat-mdc-menu-item {
-    color: white !important; // text color
-    mat-icon {
-      color: white !important; // icon color
-    }
-
-    &:hover {
-      background-color: #413abc !important; // hover background
-      color: whitesmoke !important; // hover text color
-      mat-icon {
-        color: whitesmoke !important; // hover icon color
-      }
-    }
-  }
-}
-
-// < --- MatTooltip Override --->
-
-::ng-deep.mat-mdc-tooltip-panel {
-  background-color: #4f46e5 !important;
-  color: white !important;
-  border-radius: 8px !important;
-
-  .mat-mdc-tooltip-content {
-    font-size: 10px !important;
-    padding: 8px 16px !important;
-    font-family: 'Roboto', Arial, sans-serif !important;
-  }
-}
-
-// ***** Material Override Ends Here *****
-
-.theme-item {
-  display: flex !important;
-  align-items: center !important;
-  gap: 1px; // space between dot and text
-}
-
-.check-icon {
-  font-size: 14px;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-// <--- Theme Selector --->
-
-.theme-selector {
-  display: flex;
-  align-items: center;
-  padding: 4px 12px;
-  gap: 8px;
-}
-
-.theme-btn {
-  background: none;
-  border: none;
-  color: white;
-  transition: color 0.2s ease;
-}
-
-.theme-btn.selected {
-  color: black;
-}

package/projects/doohbot/src/lib/doohbot.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Doohbot } from './doohbot';
-
-describe('Doohbot', () => {
-  let component: Doohbot;
-  let fixture: ComponentFixture<Doohbot>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Doohbot],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(Doohbot);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});