@rtsee/ngx 0.0.103 → 0.0.104

package/dist/ngx/src/lib/theme/rts-common/inputs.scss

@@ -0,0 +1,109 @@
+// ═══════════════════════════════════════════════════════════════════
+// RTS-COMMON — Input & Textarea Styles
+// ═══════════════════════════════════════════════════════════════════
+@import "./variables-spacing";
+@import "./variables-typography";
+@import "./variables-layout";
+@import "./variables-effects";
+
+.rts-input,
+.rts-textarea {
+  width: 100%;
+  background-color: var(--rts-bg-surface);
+  color: var(--rts-text-primary);
+  border: 1px solid var(--rts-border-med);
+  border-radius: $rtsu-radius-sm;
+  font-family: $rtsu-font-family;
+  font-size: $rtsu-font-size-md;
+  padding: $rtsu-space-sm + $rtsu-space-xs $rtsu-space-md;
+  outline: none;
+  transition: border-color $rtsu-transition-fast,
+              box-shadow $rtsu-transition-fast,
+              background-color $rtsu-transition-fast;
+
+  &::placeholder {
+    color: var(--rts-text-muted);
+  }
+
+  &:hover {
+    border-color: var(--rts-border-bright);
+  }
+
+  &:focus {
+    border-color: var(--rts-accent, #6c5ce7);
+    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
+    background-color: var(--rts-bg-surface-elevated);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.rts-textarea {
+  resize: vertical;
+  min-height: 40px;
+  line-height: $rtsu-line-height-normal;
+
+  // Hide scrollbar for chat-style textareas
+  &.rts-textarea-chat {
+    resize: none;
+    border: none;
+    background: transparent;
+    padding: $rtsu-space-sm;
+    max-height: 130px;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+}
+
+// ── Input Group (input + action button in one row) ──
+.rts-input-group {
+  display: flex;
+  align-items: flex-end;
+  gap: 0;
+  background-color: var(--rts-bg-surface);
+  border: 1px solid var(--rts-border-med);
+  border-radius: $rtsu-radius-md;
+  padding: $rtsu-space-xs;
+  transition: border-color $rtsu-transition-fast,
+              box-shadow $rtsu-transition-fast;
+
+  &:focus-within {
+    border-color: var(--rts-accent, #6c5ce7);
+    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
+  }
+
+  .rts-input,
+  .rts-textarea {
+    border: none;
+    background: transparent;
+    padding: $rtsu-space-sm;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+}
+
+// ── Search Input with icon ──
+.rts-search-input {
+  position: relative;
+
+  .rts-search-input-icon {
+    position: absolute;
+    left: $rtsu-space-md;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--rts-text-muted);
+    font-size: $rtsu-font-size-lg;
+    pointer-events: none;
+  }
+
+  .rts-input {
+    padding-left: $rtsu-space-xl + $rtsu-space-sm;
+  }
+}

package/dist/ngx/src/lib/theme/rts-common/labels.scss

@@ -0,0 +1,80 @@
+// ═══════════════════════════════════════════════════════════════════
+// RTS-COMMON — Label / Badge / Pill Styles
+// ═══════════════════════════════════════════════════════════════════
+@import "./variables-spacing";
+@import "./variables-typography";
+@import "./variables-layout";
+@import "./variables-effects";
+
+.rts-label {
+  display: inline-flex;
+  align-items: center;
+  gap: $rtsu-space-xs;
+  padding: $rtsu-space-xs $rtsu-space-sm;
+  font-size: $rtsu-font-size-2xs;
+  font-weight: $rtsu-font-weight-semibold;
+  letter-spacing: $rtsu-tracking-wide;
+  border-radius: $rtsu-radius-pill;
+  line-height: 1;
+  white-space: nowrap;
+  transition: transform $rtsu-transition-fast,
+              box-shadow $rtsu-transition-fast;
+
+  &:hover {
+    transform: translateY(-1px);
+  }
+}
+
+// ── Variants ──
+
+.rts-label-accent {
+  color: #fff;
+  background: rgba(var(--rts-accent, 108, 92, 231), 0.2);
+  border: 1px solid rgba(var(--rts-accent, 108, 92, 231), 0.4);
+  // Fallback for when CSS vars aren't parsed as rgb
+  background: var(--rts-accent-highlight-dim, rgba(191, 139, 255, 0.15));
+  border-color: rgba(191, 139, 255, 0.35);
+}
+
+.rts-label-primary {
+  color: #fff;
+  background: var(--rts-accent, #6c5ce7);
+}
+
+.rts-label-success {
+  color: #fff;
+  background: var(--rts-success, #2ecc71);
+}
+
+.rts-label-danger {
+  color: #fff;
+  background: var(--rts-danger, #e84118);
+}
+
+.rts-label-warning {
+  color: #1a1a2e;
+  background: var(--rts-warning, #f9ca24);
+}
+
+.rts-label-ghost {
+  color: var(--rts-text-secondary);
+  background: var(--rts-bg-surface-hover);
+  border: 1px solid var(--rts-border-med);
+}
+
+// ── Unread Count Badge ──
+
+.rts-badge-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  border-radius: $rtsu-radius-pill;
+  background: var(--rts-accent-blue, #3b82f7);
+  color: #fff;
+  font-size: $rtsu-font-size-2xs;
+  font-weight: $rtsu-font-weight-medium;
+  padding: 0 5px;
+  line-height: 1;
+}

package/dist/ngx/src/lib/theme/rts-common/messages.scss

@@ -0,0 +1,60 @@
+// ═══════════════════════════════════════════════════════════════════
+// RTS-COMMON — Message Bubble Styles
+// ═══════════════════════════════════════════════════════════════════
+@import "./variables-spacing";
+@import "./variables-typography";
+@import "./variables-layout";
+@import "./variables-effects";
+
+.rts-message-bubble {
+  max-width: 80%;
+  padding: $rtsu-space-sm + $rtsu-space-xs $rtsu-space-md;
+  border-radius: $rtsu-radius-lg;
+  font-size: $rtsu-font-size-base;
+  line-height: $rtsu-line-height-normal;
+  position: relative;
+  animation: rts-fade-up 0.25s ease-out both;
+
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
+}
+
+// ── "Their" Messages (left-aligned) ──
+.rts-message-bubble-theirs {
+  background-color: var(--rts-bg-surface);
+  color: var(--rts-text-primary);
+  border: 1px solid var(--rts-border-dim);
+  border-bottom-left-radius: $rtsu-radius-xs;
+  margin-right: auto;
+}
+
+// ── "My" Messages (right-aligned) ──
+.rts-message-bubble-mine {
+  background: linear-gradient(
+    135deg,
+    var(--rts-accent, #6c5ce7) 0%,
+    var(--rts-accent-light, #a29bfe) 100%
+  );
+  color: #fff;
+  border-bottom-right-radius: $rtsu-radius-xs;
+  margin-left: auto;
+  box-shadow: $rtsu-shadow-accent-sm;
+}
+
+// ── Message Text ──
+.rts-message-text {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+// ── Message Meta (time + status, inline at bottom-right) ──
+.rts-message-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: $rtsu-space-xs;
+  float: right;
+  margin-top: $rtsu-space-xs;
+  margin-left: $rtsu-space-sm;
+}

package/dist/ngx/src/lib/theme/rts-common/user-thumbnails.scss

@@ -0,0 +1,68 @@
+// ═══════════════════════════════════════════════════════════════════
+// RTS-COMMON — User Thumbnail (list-row with avatar + text)
+// ═══════════════════════════════════════════════════════════════════
+@import "./variables-spacing";
+@import "./variables-typography";
+@import "./variables-layout";
+@import "./variables-effects";
+
+.rts-user-thumbnail {
+  display: flex;
+  align-items: center;
+  gap: $rtsu-space-sm + $rtsu-space-xs;
+  padding: $rtsu-space-sm + $rtsu-space-xs $rtsu-space-md;
+  cursor: pointer;
+  border-radius: $rtsu-radius-sm;
+  transition: background-color $rtsu-transition-fast;
+  user-select: none;
+
+  &:hover {
+    background-color: var(--rts-bg-surface-hover);
+  }
+
+  &:active {
+    background-color: var(--rts-bg-surface-elevated);
+  }
+}
+
+.rts-user-thumbnail-content {
+  flex: 1;
+  min-width: 0; // allow text truncation
+  display: flex;
+  flex-direction: column;
+  gap: $rtsu-space-2xs;
+}
+
+.rts-user-thumbnail-name {
+  font-size: $rtsu-font-size-md;
+  font-weight: $rtsu-font-weight-semibold;
+  color: var(--rts-text-primary);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: $rtsu-line-height-snug;
+}
+
+.rts-user-thumbnail-subtitle {
+  font-size: $rtsu-font-size-sm;
+  font-weight: $rtsu-font-weight-regular;
+  color: var(--rts-text-secondary);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  white-space: normal;
+  line-height: $rtsu-line-height-normal;
+}
+
+.rts-user-thumbnail-trailing {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: $rtsu-space-xs;
+}

package/dist/ngx/src/lib/theme/styles.scss

@@ -1,5 +1,6 @@
 @import "./general";
 @import "./common";
+@import "./rts-common/index";
 @import "./messenger/index";
 @import "./events-manager/index";
 @import "./video-chat/index";

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.103",
+  "version": "0.0.104",
   "name": "@rtsee/ngx",
   "module": "./dist/ngx/fesm2022/rtsee-ngx.mjs",
   "types": "./dist/ngx/index.d.ts",
@@ -40,15 +40,15 @@
     "@angular/platform-browser-dynamic": "^20.1.2",
     "@angular/router": "^20.1.2",
     "@primeuix/themes": "^1.2.3",
-    "@rtsee/common": "^0.0.74",
-    "@rtsee/conference": "^0.0.75",
-    "@rtsee/core": "^0.0.118",
-    "@rtsee/events-dashboard": "^0.0.108",
-    "@rtsee/factory": "^0.0.117",
-    "@rtsee/messenger": "^0.0.108",
-    "@rtsee/presentation": "^0.0.107",
-    "@rtsee/signaling-client": "^0.0.121",
-    "@rtsee/utilities-ui": "^0.0.39",
+    "@rtsee/common": "^0.0.75",
+    "@rtsee/conference": "^0.0.76",
+    "@rtsee/core": "^0.0.119",
+    "@rtsee/events-dashboard": "^0.0.109",
+    "@rtsee/factory": "^0.0.118",
+    "@rtsee/messenger": "^0.0.109",
+    "@rtsee/presentation": "^0.0.108",
+    "@rtsee/signaling-client": "^0.0.122",
+    "@rtsee/utilities-ui": "^0.0.40",
     "@stripe/stripe-js": "^8.6.1",
     "@types/gtag.js": "^0.0.20",
     "@types/node": "~24.0.14",
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c1b98c1a7fcf1f7fa194208bb91600dd38953b60"
+  "gitHead": "1fb6aed38987b1640e8f613f385bef7ed186337b"
 }