@adzen/doohbot 1.0.0 → 1.0.2

package/src/lib/theme/palettes/slate.scss

@@ -0,0 +1,88 @@
+/* 
+Slate Palette (Light Mode) 
+*/
+.db-theme-slate {
+    /* Fonts */
+    --db-font: 'Roboto', Arial, sans-serif;
+
+    /* Brand Colors */
+    --db-primary: #455a64;
+    --db-primary-rgb: 69, 90, 100;
+    --db-secondary: #90a4ae;
+
+    /* Backgrounds */
+    --db-bg-app: #ffffff;
+    --db-bg-chat-input: #ffffff;
+    --db-bg-user-msg: #e2e8f0;
+    --db-bg-bot-msg: #e2e8f0;
+
+    /* Text Colors */
+    --db-text-primary: #263238;
+    --db-text-secondary: #607d8b;
+    --db-text-tertiary: #263238;
+    --db-text-hint: #90a4ae;
+    --db-text-user-msg: #263238;
+    --db-text-bot-msg: #263238;
+
+    /* UI Elements */
+    --db-border-color: #cfd8dc;
+    --db-border-shadow: 0 4px 12px rgba(38, 50, 56, .12);
+    --db-border-top: #ffffff00;
+
+    /* Interaction */
+    --db-color-button: var(--db-primary);
+    --db-color-typing: #cfd8dc;
+
+    /* Colors */
+    --db-white-rgb: 255, 255, 255;
+    --db-black-rgb: 0, 0, 0;
+
+     /* Media/Filters */
+    --db-avatar-filter: none;
+}
+
+/* 
+Slate Palette (Dark Mode) 
+*/
+.dark-theme.db-theme-slate,
+.dark-theme .db-theme-slate,
+.dark-theme.cdk-overlay-container .db-theme-slate,
+.dark-theme .cdk-overlay-container .db-theme-slate {
+        /* Fonts */
+    --db-font: 'Roboto', Arial, sans-serif;
+
+    /* Brand Colors */
+    --db-primary: #90a4ae;
+    --db-primary-rgb: 144, 164, 174;
+    --db-secondary: #90a4ae;
+
+    /* Backgrounds */
+    --db-bg-app: #12181b;
+    --db-bg-chat-input: #1e272c;
+    --db-bg-user-msg: #2f3e46;
+    --db-bg-bot-msg: #2f3e46;
+
+    /* Text Colors */
+    --db-text-primary: #eceff1;
+    --db-text-secondary: #b0bec5;
+    --db-text-tertiary: #eceff1;
+    --db-text-hint: #78909c;
+    --db-text-user-msg: #eceff1;
+    --db-text-bot-msg: #eceff1;
+
+    /* UI Elements */
+    --db-border-color: #2f3e46;
+    --db-border-shadow: 0 4px 20px rgba(0, 0, 0, .4);
+    --db-border-top: #ffffff00;
+
+    /* Interaction */
+    --db-color-button: var(--db-primary);
+    --db-color-typing: #2f3e46;
+
+    /* Colors */
+    --db-white-rgb: 0, 0, 0;
+    --db-black-rgb: 255, 255, 255;
+
+    /* Media/Filters */
+    --db-avatar-filter: brightness(1.1);
+}

package/src/lib/theme/palettes/sunset.scss

@@ -0,0 +1,86 @@
+/* 
+Sunset Palette (Light Mode) 
+*/
+.db-theme-sunset {
+    /* Fonts */
+    --db-font: 'Roboto', Arial, sans-serif;
+
+    /* Brand Colors */
+    --db-primary: #ff7043;
+    --db-primary-rgb: 255, 112, 67;
+    --db-secondary: #ffb74d;
+
+    /* Backgrounds */
+    --db-bg-app: #ffffff;
+    --db-bg-chat-input: #ffffff;
+    --db-bg-user-msg: #ffe0b2;
+    --db-bg-bot-msg: #ffe0b2;
+
+    /* Text Colors */
+    --db-text-primary: #4e342e;
+    --db-text-secondary: #8d6e63;
+    --db-text-tertiary: #4e342e;
+    --db-text-hint: #a1887f;
+    --db-text-user-msg: #4e342e;
+    --db-text-bot-msg: #4e342e;
+
+    /* UI Elements */
+    --db-border-color: #ffccbc;
+    --db-border-shadow: 0 4px 12px rgba(78, 52, 46, .12);
+    --db-border-top: #ffffff00;
+    
+    /* Interaction */
+    --db-color-button: var(--db-primary);
+    --db-color-typing: #ffccbc;
+
+    /* Colors */
+    --db-white-rgb: 255, 255, 255;
+    --db-black-rgb: 0, 0, 0;
+
+    /* Media/Filters */
+    --db-avatar-filter: none;
+}
+
+/* 
+Sunset Palette (Dark Mode) 
+*/
+.dark-theme.db-theme-sunset,
+.dark-theme .db-theme-sunset,
+.dark-theme.cdk-overlay-container .db-theme-sunset,
+.dark-theme .cdk-overlay-container .db-theme-sunset {
+    /* Brand Colors */
+    --db-primary: #ff8a65;
+    --db-primary-rgb: 255, 138, 101;
+    --db-secondary: #ffb74d;
+
+    /* Backgrounds */
+    --db-bg-app: #2b1b16;
+    --db-bg-chat-input: #3e2723;
+    --db-bg-user-msg: #4e342e;
+    --db-bg-bot-msg: #4e342e;
+
+    /* Text Colors */
+    --db-text-primary: #fff3e0;
+    --db-text-secondary: #ffccbc;
+    --db-text-tertiary: #fff3e0;
+    --db-text-hint: #d7ccc8;
+    --db-text-user-msg: #fff3e0;
+    --db-text-bot-msg: #fff3e0;
+
+    /* UI Elements */
+    --db-border-color: #5d4037;
+    --db-border-shadow: 0 4px 20px rgba(0, 0, 0, .4);
+    --db-border-top: #3e2723;
+    --db-border-top: #ffffff00;
+
+    /* Interaction */
+    --db-color-button: var(--db-primary);
+    --db-color-typing: #5d4037;
+
+    /* Colors */
+    --db-white-rgb: 0, 0, 0;
+    --db-black-rgb: 255, 255, 255;
+
+    /* Media/Filters */
+    --db-avatar-filter: brightness(1.1);
+}

package/src/lib/theme/themes.scss

@@ -0,0 +1,7 @@
+@use './palettes/aqua.scss';
+@use './palettes/doohbot.scss';
+@use './palettes/candy.scss';
+@use './palettes/forest.scss';
+@use './palettes/sunset.scss';
+@use './palettes/midnight.scss';
+@use './palettes/slate.scss';

package/src/lib/theme/tokens/semantic.scss

@@ -0,0 +1,102 @@
+/* 
+  Semantic Tokens & Logic 
+  Bridges palette-specific variables to functional tokens used by components.
+*/
+
+.db-theme-doohbot,
+.db-theme-aqua,
+.db-theme-candy,
+.db-theme-forest,
+.db-theme-midnight,
+.db-theme-sunset,
+.db-theme-slate,
+app-doohbot {
+    /* Fonts */
+    --db-font: var(--db-font);
+
+    /* Brand */
+    --db-primary: var(--db-primary);
+    --db-primary-rgb: var(--db-primary-rgb);
+    --db-secondary: var(--db-secondary);
+
+    /* Backgrounds */
+    --db-bg-app: var(--db-bg-app);
+    --db-bg-chat-input: var(--db-bg-chat-input);
+    --db-bg-user-msg: var(--db-bg-user-msg);
+    --db-bg-bot-msg: var(--db-bg-bot-msg);
+
+    /* Text */
+    --db-text-primary: var(--db-text-primary);
+    --db-text-secondary: var(--db-text-secondary);
+    --db-text-tertiary: var(--db-text-tertiary);
+    --db-text-hint: var(--db-text-hint);
+    --db-text-user-msg: var(--db-text-primary);
+    --db-text-bot-msg: var(--db-text-bot-msg);
+
+    /* UI Elements */
+    --db-border-color: var(--db-border-color);
+    --db-border-shadow: var(--db-border-shadow);
+    --db-border-top: var(--db-transparent);
+
+    /* Interaction */
+    --db-button-color: var(--db-primary);
+    --db-typing-indicator-color: var(--db-color-typing);
+
+    /* Media/Filters */
+    --db-avatar-filter: var(--db-avatar-filter);
+
+    /* Colors */
+    --db-white-rgb: var(--db-white-rgb);
+    --db-black-rgb: var(--db-black-rgb);
+
+
+    /* ===============================
+      Bridge to Legacy / Public Variables   
+    =============================== */
+
+    /* Fonts */
+    --font-family: var(--db-font);
+
+    /* Brand */
+    --primary-color: var(--db-primary);
+    --primary-color-rgb: var(--db-primary-rgb);
+    --secondary-color: var(--db-secondary);
+
+    /* Backgrounds */
+    --background-color: var(--db-bg-app);
+    --chat-input-color: var(--db-bg-chat-input);
+    --user-message-color: var(--db-bg-user-msg);
+    --bot-message-color: var(--db-bg-bot-msg);
+
+    /* Text */
+    --text-color: var(--db-text-primary);
+    --secondary-text-color: var(--db-text-secondary);
+    --text-alt-color: var(--db-text-tertiary);
+    --hint-text-color: var(--db-text-hint);
+    --user-text-color: var(--db-text-primary);
+    --bot-text-color: var(--db-text-bot-msg);
+
+    /* UI Elements */
+    --border-color: var(--db-border-color);
+    --border-shadow-color: var(--db-border-shadow);
+    --border-top-color: var(--db-transparent);
+
+    /* Interaction */
+    --button-color: var(--db-primary);
+    --typing-indicator-color: var(--db-color-typing);
+
+    /* Media/Filters */
+    --avatar-filter: var(--db-avatar-filter, none);
+
+    /* Colors */
+    --white: var(--db-color-white, #ffffff);
+    --black: var(--db-color-black, #000000);
+    --grey: var(--db-color-grey, #6b7280);
+    --red: var(--db-color-error, #fe0000);
+    --green: var(--db-color-success, #00ce4b);
+    --orange: var(--db-color-warning, #ff6a00);
+    --blue: var(--db-color-info, #0062ff);
+    --white-rgb: var(--db-white-rgb);
+    --black-rgb: var(--db-black-rgb);
+}
+

package/.editorconfig

@@ -1,17 +0,0 @@
-# Editor configuration, see https://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.ts]
-quote_type = single
-ij_typescript_use_double_quotes = false
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false

package/.vscode/extensions.json

@@ -1,4 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
-  "recommendations": ["angular.ng-template"]
-}

package/.vscode/launch.json

@@ -1,26 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "ng serve",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: start",
-      "url": "http://localhost:4200/",
-      "webRoot": "${workspaceFolder}",
-      "sourceMaps": true,
-      "sourceMapPathOverrides": {
-        "webpack:///src/*": "${webRoot}/src/*"
-      }
-    },
-    {
-      "name": "ng test",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: test",
-      "url": "http://localhost:9876/debug.html",
-      "webRoot": "${workspaceFolder}"
-    }
-  ]
-}

package/.vscode/settings.json

@@ -1,13 +0,0 @@
-{
-  "cSpell.words": [
-    "adzen",
-    "Bottomsheet",
-    "conditons",
-    "contenteditable",
-    "Doohbot",
-    "packagr",
-    "Pannel",
-    "spinbutton",
-    "thum"
-  ]
-}

package/.vscode/tasks.json

@@ -1,42 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "type": "npm",
-      "script": "start",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "(.*?)"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation complete"
-          }
-        }
-      }
-    },
-    {
-      "type": "npm",
-      "script": "test",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "(.*?)"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation complete"
-          }
-        }
-      }
-    }
-  ]
-}

package/angular.json

@@ -1,119 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "doohbot": {
-      "projectType": "library",
-      "root": "projects/doohbot",
-      "sourceRoot": "projects/doohbot/src",
-      "prefix": "lib",
-      "architect": {
-        "build": {
-          "builder": "@angular/build:ng-packagr",
-          "configurations": {
-            "production": {
-              "tsConfig": "projects/doohbot/tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "projects/doohbot/tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "builder": "@angular/build:karma",
-          "options": {
-            "tsConfig": "projects/doohbot/tsconfig.spec.json"
-          }
-        }
-      }
-    },
-
-    "doohbot-element": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        }
-      },
-      "root": "projects/doohbot-element",
-      "sourceRoot": "projects/doohbot-element/src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular/build:application",
-          "options": {
-            "browser": "projects/doohbot-element/src/main.ts",
-            "polyfills": ["zone.js"],
-            "tsConfig": "projects/doohbot-element/tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "projects/doohbot-element/public"
-              }
-            ],
-            "styles": ["projects/doohbot-element/src/styles.scss"]
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "development": {
-              "optimization": false,
-              "extractLicenses": false,
-              "sourceMap": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular/build:dev-server",
-          "configurations": {
-            "production": {
-              "buildTarget": "doohbot-element:build:production"
-            },
-            "development": {
-              "buildTarget": "doohbot-element:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "extract-i18n": {
-          "builder": "@angular/build:extract-i18n"
-        },
-        "test": {
-          "builder": "@angular/build:karma",
-          "options": {
-            "polyfills": ["zone.js", "zone.js/testing"],
-            "tsConfig": "projects/doohbot-element/tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "projects/doohbot-element/public"
-              }
-            ],
-            "styles": ["projects/doohbot-element/src/styles.scss"]
-          }
-        }
-      }
-    }
-  },
-  "cli": {
-    "analytics": false
-  }
-}

package/projects/doohbot/README.md

@@ -1,63 +0,0 @@
-# Chatbot
-
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
-
-## Code scaffolding
-
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
-
-```bash
-ng generate component component-name
-```
-
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
-```
-
-## Building
-
-To build the library, run:
-
-```bash
-ng build chatbot
-```
-
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
-
-### Publishing the Library
-
-Once the project is built, you can publish your library by following these steps:
-
-1. Navigate to the `dist` directory:
-   ```bash
-   cd dist/chatbot
-   ```
-
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
-
-## Running unit tests
-
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-
-## Additional Resources
-
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/projects/doohbot/ng-package.json

@@ -1,16 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/doohbot",
-  "lib": {
-    "entryFile": "src/public-api.ts",
-    "styleIncludePaths": ["src/lib"]
-  },
-  "assets": [
-    "src/assets",
-    {
-      "glob": "**/*",
-      "input": "node_modules/doohbot/assets/",
-      "output": "/assets/"
-    }
-  ]
-}

package/projects/doohbot/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "doohbot",
-  "version": "0.0.1",
-  "peerDependencies": {
-    "@angular/common": "^20.3.0",
-    "@angular/core": "^20.3.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false
-}

package/projects/doohbot/src/lib/directives/draggable/draggable-dialog.directive.ts

@@ -1,62 +0,0 @@
-import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from '@angular/core';
-
-@Directive({
-  selector: '[draggableDialog]',
-})
-export class DraggableDialogDirective implements OnInit {
-  private isDragging = false;
-  private startX = 0;
-  private startY = 0;
-  private offsetX = 0;
-  private offsetY = 0;
-
-  @Input('dragHandle') dragHandleSelector: string | undefined;
-
-  private dragHandle: HTMLElement | undefined;
-
-  constructor(
-    private el: ElementRef,
-    private renderer: Renderer2,
-  ) {}
-
-  ngOnInit() {
-    if (this.dragHandleSelector) {
-      this.dragHandle = this.el.nativeElement.querySelector(this.dragHandleSelector);
-    } else {
-      this.dragHandle = this.el.nativeElement; // fallback
-    }
-    if (this.dragHandle) {
-      this.renderer.setStyle(this.dragHandle, 'cursor', 'move');
-    }
-  }
-
-  @HostListener('mousedown', ['$event'])
-  onMouseDown(event: MouseEvent) {
-    if (!this.dragHandle || event.target !== this.dragHandle) return;
-
-    this.isDragging = true;
-    this.startX = event.clientX - this.offsetX;
-    this.startY = event.clientY - this.offsetY;
-
-    event.preventDefault();
-  }
-
-  @HostListener('document:mousemove', ['$event'])
-  onMouseMove(event: MouseEvent) {
-    if (!this.isDragging) return;
-
-    this.offsetX = event.clientX - this.startX;
-    this.offsetY = event.clientY - this.startY;
-
-    this.renderer.setStyle(
-      this.el.nativeElement,
-      'transform',
-      `translate(${this.offsetX}px, ${this.offsetY}px)`,
-    );
-  }
-
-  @HostListener('document:mouseup', [])
-  onMouseUp() {
-    this.isDragging = false;
-  }
-}

package/projects/doohbot/src/lib/directives/draggable/draggable-dialog.module.ts

@@ -1,9 +0,0 @@
-import { NgModule } from '@angular/core';
-import { DraggableDialogDirective } from './draggable-dialog.directive';
-
-@NgModule({
-  declarations: [],
-  imports: [DraggableDialogDirective],
-  exports: [DraggableDialogDirective],
-})
-export default class DraggableDialogModule {}