@adzen/doohbot 1.0.0

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

@@ -0,0 +1,536 @@
+/*
+================================
+    Custom Utility Class
+================================
+*/
+
+$colors: (
+  'blue': '#2196F3',
+  'blue-dark': '#1333bc',
+  'blue-grey': '#7b7781',
+  'sky-blue': '#87ceeb',
+  'green': '#619361',
+  'green-dark-1': '#538353',
+  'green-light': 'rgb(13, 155, 13)',
+  'green-light-1': '#76bd76',
+  'orange': '#cc7e33',
+  'yellow': '#ffff00',
+  'yellow-dark-1': '#bdbd28',
+  'red': '#cc5133',
+  'red-light': 'rgb(249 3 3)',
+  'red-dark': 'rgb(160, 5, 5)',
+  'white': '#fff',
+  'grey': 'grey',
+  'purple': '#800080',
+  'grey-dark': '#695e5e',
+  'grey-light': '#b2a6a6',
+  'black': '#000',
+  'pink': '#e91e63',
+  'pink-dark-1': '#d81b60',
+);
+
+// Text Color
+@each $color-name, $value in $colors {
+  .txt-#{$color-name} {
+    color: #{$value} !important;
+  }
+}
+
+// Bg Color
+@each $color-name, $value in $colors {
+  .bg-#{$color-name} {
+    background-color: #{$value} !important;
+
+    @if $color-name == white {
+      color: #000 !important;
+    } @else if $color-name == 'sky-blue' {
+      color: #000 !important;
+    } @else {
+      color: #fff !important;
+    }
+  }
+}
+
+// Border
+$border-position: (
+  top: 't',
+  right: 'r',
+  left: 'l',
+  bottom: 'b',
+);
+
+@for $size from 1 through 10 {
+  @each $color, $col in $colors {
+    @each $position, $pos in $border-position {
+      .border-#{$pos}-#{$color}-#{$size}px {
+        border-#{$position}: solid #{$size}px #{$col} !important;
+      }
+    }
+
+    .border-#{$color}-#{$size}px {
+      border: solid #{$size}px #{$col} !important;
+    }
+    .border-t-b-#{$color}-#{$size}px {
+      border-top: solid #{$size}px #{$col} !important;
+      border-bottom: solid #{$size}px #{$col} !important;
+    }
+    .border-l-r-#{$color}-#{$size}px {
+      border-left: solid #{$size}px #{$col} !important;
+      border-right: solid #{$size}px #{$col} !important;
+    }
+  }
+}
+
+// Height, Width
+$unit: (
+  rem: 'rem',
+  per: '%',
+  px: 'px',
+);
+
+@for $size from 0 through 50 {
+  @each $unit, $ut in $unit {
+    .h-#{$size}#{$unit} {
+      height: #{$size}#{$ut} !important;
+    }
+    .w-#{$size}#{$unit} {
+      width: #{$size}#{$ut} !important;
+    }
+  }
+}
+
+// Margin, Padding
+$position: (
+  top: 't',
+  right: 'r',
+  left: 'l',
+  bottom: 'b',
+);
+
+$unit: (
+  rem: 'rem',
+  per: '%',
+  px: 'px',
+);
+
+@for $size from 0 through 100 {
+  @each $unit, $ut in $unit {
+    @each $position, $pos in $position {
+      .m-#{$pos}-#{$size}#{$unit} {
+        margin-#{$position}: #{$size}#{$ut} !important;
+      }
+      .p-#{$pos}-#{$size}#{$unit} {
+        padding-#{$position}: #{$size}#{$ut} !important;
+      }
+    }
+
+    .m-#{$size}#{$unit} {
+      margin: #{$size}#{$ut} !important;
+    }
+
+    .p-#{$size}#{$unit} {
+      padding: #{$size}#{$ut} !important;
+    }
+  }
+}
+
+// Font Size
+$unit: (
+  rem: 'rem',
+  px: 'px',
+  pt: 'pt',
+);
+
+@for $size from 0 through 50 {
+  @each $unit, $ut in $unit {
+    .f-s-#{$size}#{$unit} {
+      font-size: #{$size}#{$ut} !important;
+    }
+  }
+}
+
+/*
+================================
+    Utility Css
+================================
+*/
+
+// Gradient | Background | Color
+.gradient-green-linear {
+  background-image: linear-gradient(to right, green, rgb(16, 180, 16)) !important;
+
+  // mat.define-palette(mat.$green-palette, 900),
+  // mat.define-palette(mat.$green-palette, 500)
+}
+.gradient-orange-linear {
+  background-image: linear-gradient(to right, rgb(179, 120, 10), rgb(245, 164, 14)) !important;
+  // mat.define-palette(mat.$orange-palette, 900),
+  // mat.define-palette(mat.$orange-palette, 500)
+}
+.gradient-red-linear {
+  background-image: linear-gradient(to right, red, rgb(255, 60, 0)) !important;
+  // mat.define-palette(mat.$red-palette, 900),
+  // mat.define-palette(mat.$red-palette, 500)
+}
+.gradient-blue-linear {
+  background-image: linear-gradient(to right, blue, rgb(22, 86, 224)) !important;
+
+  // mat.define-palette(mat.$blue-palette, 900),
+  // mat.define-palette(mat.$blue-palette, 500)
+}
+// Gradient | Background | Color
+
+// Flex
+.d-flex {
+  display: -ms-flexbox !important;
+  display: flex !important;
+}
+
+.flex-none {
+  flex: none !important;
+}
+
+.flex-0-0-16vw {
+  flex: 0 0 16vw !important;
+}
+
+.flex-1 {
+  flex: 1 !important;
+}
+
+.flex-dir-col {
+  flex-direction: column !important;
+}
+
+.flex-dir-row {
+  flex-direction: row !important;
+}
+
+.flex-spacer {
+  flex-grow: 1;
+}
+
+.center-wrapper-column {
+  display: flex !important;
+  align-items: center !important;
+  flex-direction: column !important;
+  justify-content: center !important;
+}
+
+.center-wrapper-row {
+  display: flex !important;
+  align-items: center !important;
+  flex-direction: row !important;
+  justify-content: center !important;
+}
+
+.justify-start {
+  -ms-flex-pack: start !important;
+  justify-content: flex-start !important;
+}
+
+.justify-end {
+  -ms-flex-pack: end !important;
+  justify-content: flex-end !important;
+}
+
+.justify-center {
+  -ms-flex-pack: center !important;
+  justify-content: center !important;
+}
+
+.justify-space-between {
+  -ms-flex-pack: justify !important;
+  justify-content: space-between !important;
+}
+
+.justify-around {
+  -ms-flex-pack: distribute !important;
+  justify-content: space-around !important;
+}
+
+// Input
+.input-prefix {
+  font-weight: 500;
+  margin-right: 5px;
+}
+.input-suffix {
+  font-weight: 500;
+  margin-left: 5px;
+}
+
+// Text
+.text-right {
+  text-align: right !important;
+}
+.text-left {
+  text-align: left !important;
+}
+.text-center {
+  text-align: center !important;
+}
+.float-right {
+  float: right !important;
+}
+.float-left {
+  float: left !important;
+}
+.text-end {
+  text-align: end !important;
+}
+.text-start {
+  text-align: start !important;
+}
+.txt-center {
+  text-align: center !important;
+}
+.txt-decoration-none {
+  text-decoration: none !important;
+}
+
+.f-w-b {
+  font-weight: bold !important;
+}
+.f-w-500 {
+  font-weight: 500 !important;
+}
+
+// Width & Height
+.w-100 {
+  width: 100% !important;
+}
+.h-100 {
+  height: 100% !important;
+}
+.vw-100 {
+  width: 100vw !important;
+}
+.vh-100 {
+  height: 100vh !important;
+}
+.h-auto {
+  height: auto !important;
+}
+
+// Alignment
+.align-items-center {
+  align-items: center !important;
+}
+
+.card-title-text {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+  color: #6f766c;
+}
+
+.pointer-event-none {
+  pointer-events: none !important;
+}
+
+.d-none {
+  display: none !important;
+}
+
+.d-none-1 {
+  display: none;
+}
+
+.radius-none {
+  border-radius: 0;
+}
+
+.radius-round {
+  border-radius: 2px;
+}
+
+.rad-full {
+  border-radius: 100%;
+}
+
+.radius-circle {
+  border-radius: 50%;
+}
+
+.overflow-visible {
+  overflow: visible;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.block {
+  display: block;
+}
+
+.button-block {
+  display: block;
+  width: 100%;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.center-block {
+  display: block;
+  margin: 0 auto;
+}
+
+.relative {
+  position: relative;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.shadow-none {
+  box-shadow: none !important;
+}
+
+.border-none {
+  border: 0 !important;
+}
+
+.background-none {
+  background-color: transparent !important;
+}
+
+.d-block {
+  display: block !important;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.align-items-start {
+  -ms-flex-align: start !important;
+  align-items: flex-start !important;
+}
+
+.align-items-end {
+  -ms-flex-align: end !important;
+  align-items: flex-end !important;
+}
+
+.align-items-center {
+  -ms-flex-align: center !important;
+  align-items: center !important;
+}
+
+.align-items-baseline {
+  -ms-flex-align: baseline !important;
+  align-items: baseline !important;
+}
+
+.align-items-stretch {
+  -ms-flex-align: stretch !important;
+  align-items: stretch !important;
+}
+
+.align-content-start {
+  -ms-flex-line-pack: start !important;
+  align-content: flex-start !important;
+}
+
+.align-content-end {
+  -ms-flex-line-pack: end !important;
+  align-content: flex-end !important;
+}
+
+.align-content-center {
+  -ms-flex-line-pack: center !important;
+  align-content: center !important;
+}
+
+.align-content-between {
+  -ms-flex-line-pack: justify !important;
+  align-content: space-between !important;
+}
+
+.align-content-around {
+  -ms-flex-line-pack: distribute !important;
+  align-content: space-around !important;
+}
+
+.align-content-stretch {
+  -ms-flex-line-pack: stretch !important;
+  align-content: stretch !important;
+}
+
+.align-self-auto {
+  -ms-flex-item-align: auto !important;
+  align-self: auto !important;
+}
+
+.align-self-start {
+  -ms-flex-item-align: start !important;
+  align-self: flex-start !important;
+}
+
+.align-self-end {
+  -ms-flex-item-align: end !important;
+  align-self: flex-end !important;
+}
+
+.align-self-center {
+  -ms-flex-item-align: center !important;
+  align-self: center !important;
+}
+
+.align-self-baseline {
+  -ms-flex-item-align: baseline !important;
+  align-self: baseline !important;
+}
+
+.align-self-stretch {
+  -ms-flex-item-align: stretch !important;
+  align-self: stretch !important;
+}
+
+.h-300px {
+  height: 300px;
+}
+
+.transition {
+  -webkit-transition:
+    width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
+    transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
+  transition:
+    width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
+    transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
+}
+
+.fade-in {
+  animation: fadeIn 5s;
+}
+
+.fade-out {
+  animation: fadeOut 5s;
+}
+
+.opacity-1 {
+  opacity: 1 !important;
+}
+
+.show {
+  opacity: 1 !important;
+  transition: opacity 0.3s ease-in !important;
+  pointer-events: auto !important;
+}
+
+.hide {
+  opacity: 0 !important;
+  transition: opacity 0.3s ease-out !important;
+  pointer-events: none !important;
+}

package/projects/doohbot/src/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of chatbot
+ */
+
+export * from './lib/doohbot';

package/projects/doohbot/tsconfig.lib.json

@@ -0,0 +1,19 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "sourceMap": true,
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/projects/doohbot/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/projects/doohbot/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}

package/projects/doohbot-element/src/app/app.config.ts

@@ -0,0 +1,12 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes)
+  ]
+};

package/projects/doohbot-element/src/app/app.html

@@ -0,0 +1 @@
+<app-doohbot></app-doohbot>

package/projects/doohbot-element/src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

package/projects/doohbot-element/src/app/app.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { App } from './app';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, chatbot-element');
+  });
+});

package/projects/doohbot-element/src/app/app.ts

@@ -0,0 +1,10 @@
+import { Component, signal } from '@angular/core';
+import { Doohbot } from 'doohbot';
+
+@Component({
+  selector: 'app-root',
+  imports: [Doohbot],
+  templateUrl: './app.html',
+  styleUrl: './app.scss',
+})
+export class App {}

package/projects/doohbot-element/src/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>ChatbotElement</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

package/projects/doohbot-element/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig)
+  .catch((err) => console.error(err));

package/projects/doohbot-element/src/styles.scss

@@ -0,0 +1,15 @@
+// /* You can add global styles to this file, and also import other style files */
+// :root {
+//   --primary-color: #4F46E5;
+//   --secondary-color: #6c757d;
+//   --background-color: #f8f9fa;
+//   --white: #ffffff;
+//   --text-color: #333;
+//   --font-family: Arial, sans-serif;
+// }
+
+// body {
+//   font-family: var(--font-family);
+//   background-color: var(--background-color);
+//   color: var(--text-color);
+// }

package/projects/doohbot-element/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
+  ]
+}