@rtsee/ngx 0.0.18 → 0.0.21

package/dist/ngx/src/lib/common/compiled-scss/styles.scss

@@ -0,0 +1,528 @@
+* {
+  box-sizing: border-box;
+}
+
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+
+$rts-active-bg-color-light: #eeffde;
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+
+.rts-section {
+  padding: $rts-offset-sm;
+  background-color: $rts-main-bg-color-light;
+}
+
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+
+$rts-active-bg-color-light: #eeffde;
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+
+$rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
+
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+
+$rts-active-bg-color-light: #eeffde;
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+
+* {
+  box-sizing: border-box;
+}
+
+.rtsee-messenger {
+  height: 100%;
+  width: 100%;
+  padding-top: $rts-messenger-header-height;
+  color: $rts-font-color-dark;
+  position: relative;
+  border-radius: $rts-default-border-radius;
+  overflow: hidden;
+  background-color: $rts-main-bg-color-light;
+
+
+  .rtsee-messenger-header-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: $rts-messenger-header-height;
+  }
+
+  .rtsee-messenger-body-container {
+    height: 100%;
+    overflow: auto;
+  }
+}
+
+.rtsee-chats-list {
+  .rtsee-chat-thumbnail-container {
+
+  }
+  .rtsee-chat-separator {
+
+  }
+}
+
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+
+$rts-active-bg-color-light: #eeffde;
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+
+$rtsee-chat-input-height: 60px;
+
+.rtsee-chat {
+  height: 100%;
+  padding-bottom: $rtsee-chat-input-height;
+
+  .rtsee-chat-body-container {
+    height: 100%;
+    overflow: auto;
+    background-color: $rts-secondary-bg-color-light;
+    padding-top: $rts-offset-sm;
+  }
+
+  .rtsee-chat-footer-container {
+    position: absolute;
+    width: 100%;
+    height: $rtsee-chat-input-height;
+    box-shadow: 0 -1px 5px -1px rgb(0 0 0 / 21%);
+  }
+}
+
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+
+$rts-active-bg-color-light: #eeffde;
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+
+$rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
+
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+
+$rts-active-bg-color-light: #eeffde;
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+
+.rtsee-chat-thumbnail {
+  position: relative;
+  height: $rts-user-avatar-d-md + $rts-offset-sm * 2;
+  padding: $rts-offset-sm $rts-offset-sm $rts-offset-sm $rts-offset-sm * 2 + $rts-user-avatar-d-md;
+
+  .rtsee-chat-thumbnail-image {
+    position: absolute;
+    left: $rts-offset-sm;
+    top: $rts-offset-sm;
+
+    img {
+      border-radius: 50%;
+      overflow: hidden;
+      width: $rts-user-avatar-d-md;
+    }
+  }
+
+  .rtsee-chat-thumbnail-info {
+    height: $rts-user-avatar-d-md;
+
+    .rtsee-chat-thumbnail-name {
+      height: $rts-user-avatar-d-md * 0.5;
+      line-height: $rts-user-avatar-d-md * 0.5;;
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: #000;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .rtsee-chat-thumbnail-last-message {
+      height: $rts-user-avatar-d-md * 0.5;
+      line-height: $rts-user-avatar-d-md * 0.5;
+      margin: 0;
+      font-size: 16px;
+      font-weight: 400;
+      color: #707579;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+
+}
+
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+
+$rts-active-bg-color-light: #eeffde;
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+
+.rtsee-messenger-message-container {
+  width: 100%;
+  margin-bottom: $rts-offset-sm;
+  padding: 0 $rts-offset-sm;
+
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  &.rtsee-message-from-me {
+    .rtsee-messenger-message {
+      float: right;
+      background-color: $rts-active-bg-color-light;
+    }
+  }
+
+  .rtsee-messenger-message {
+    max-width: 80%;
+    float: left;
+    background-color: $rts-main-bg-color-light;
+    border-radius: $rts-default-border-radius;
+    padding: 8px;
+
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+
+    .rtsee-messenger-message-text {
+      margin: 0;
+      white-space: pre-wrap;
+    }
+  }
+}
+
+.rtsee-messenger-messages-list {
+  .rtsee-messenger-message-wrapper {
+
+  }
+}
+
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+
+$rts-active-bg-color-light: #eeffde;
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+
+$rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
+
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+
+$rts-active-bg-color-light: #eeffde;
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+
+.rtsee-messenger-header {
+  position: relative;
+  height: $rts-messenger-header-height;
+  padding-left: $rts-messenger-header-height;
+  padding-right: $rts-messenger-header-height;
+  overflow: hidden;
+  box-shadow: 0 1px 5px -1px rgb(0 0 0 / 21%);
+  background-color: $rts-main-bg-color-light;
+
+  &.rtsee-messenger-header-chat-opened {
+    padding-left: $rts-messenger-header-height;
+
+    .rtsee-messenger-profile-image {
+      padding-left: 0;
+    }
+
+    .rtsee-messenger-header-chat-title {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      font-size: 16px;
+      font-weight: 600;
+      margin: 0;
+    }
+  }
+
+  .rtsee-messenger-header-opened-chat-info {
+    position: relative;
+    padding: $rts-offset-sm $rts-messenger-header-height $rts-offset-sm $rts-messenger-header-height - $rts-offset-sm;
+    height: $rts-messenger-header-height;
+  }
+
+
+  .rtsee-messenger-close-chat {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: $rts-messenger-header-height;
+    width: $rts-messenger-header-height;
+    overflow: hidden;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    padding: 8px;
+    font-size: 18px;
+  }
+
+  .rtsee-messenger-profile-image {
+    height: $rts-messenger-header-height;
+    width: $rts-messenger-header-height;
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding: $rts-offset-sm;
+
+    img {
+      width: $rts-user-avatar-d-sm;
+      height: $rts-user-avatar-d-sm;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+  }
+
+
+
+
+  .rtsee-messenger-call-button {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: $rts-messenger-header-height;
+    overflow: hidden;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    padding: 8px;
+  }
+
+  .rtsee-messenger-header-title {
+    margin: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    line-height: $rts-messenger-header-height;
+    text-align: center;
+    font-weight: 600;
+  }
+
+
+
+
+
+}
+
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+
+$rts-active-bg-color-light: #eeffde;
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+
+$rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
+
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+
+$rts-active-bg-color-light: #eeffde;
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+
+.rtsee-chat-input {
+  height: 100%;
+  padding-right: $rts-messenger-header-height;
+  position: relative;
+  overflow: hidden;
+
+  .rtsee-send-message {
+    height: 100%;
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .rtsee-chat-input-field {
+      width: 100%;
+      border: none;
+      outline: none;
+      resize: none;
+      overflow: auto;
+      padding: $rts-offset-sm;
+
+      &::-webkit-input-placeholder {
+        font-family: "Work Sans", sans-serif;;
+      }
+    }
+  }
+
+  .rtsee-send-message-button {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: $rts-messenger-header-height;
+    background: none;
+    border: none;
+    outline: none;
+  }
+}
+
+
+
+
+
+
+

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.18",
+  "version": "0.0.21",
   "name": "@rtsee/ngx",
   "module": "./dist/ngx/esm2015/public-api.js",
   "types": "./dist/ngx/rtsee-ngx.d.ts",
@@ -14,7 +14,8 @@
     "test": "ng test",
     "prepublishOnly": "yarn build",
     "clean": "rm -rf ./dist",
-    "build": "yarn clean && yarn compile",
+    "build": "yarn build-scss && yarn clean && yarn compile",
+    "build-scss": "scss-bundle -p scss-bundle.config.json",
     "compile": "ng build",
     "lint-file:eslint": "yarn eslint",
     "lint-file:prettier": "yarn prettier --check",
@@ -34,7 +35,10 @@
     "@angular/platform-browser-dynamic": "~12.1.2",
     "@angular/router": "~12.1.2",
     "dayjs": "^1.10.7",
+    "ngx-autosize": "^1.8.7",
+    "ngx-infinite-scroll": "10.0.1",
     "rxjs": "~6.6.0",
+    "scss-bundle": "^3.1.2",
     "tslib": "^2.2.0",
     "zone.js": "~0.11.4"
   },
@@ -59,5 +63,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9e4769ba5f3e38d68324ffd4bd55cb262f4a51e3"
+  "gitHead": "c0743e7b7d694efc1813f95a8f02d5c01fd41c24"
 }