@brickclay-org/ui 0.1.61 → 0.1.63

package/index.d.ts

@@ -2006,6 +2006,7 @@ interface ToastConfig {
     timeOut?: number;
     sticky?: boolean;
     icon?: boolean;
+    inline?: boolean;
     actionLabel?: string;
     actionCallback?: () => void;
 }
@@ -2019,6 +2020,7 @@ interface ToastMessage extends ToastConfig {
     readonly timeOut: number;
     readonly sticky: boolean;
     readonly icon: boolean;
+    readonly inline?: boolean;
     leaving: boolean;
 }
 declare class BkToastrService {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.1.61",
+  "version": "0.1.63",
   "schematics": "./schematics/collection.json",
   "ng-add": {
     "save": "dependencies"

package/src/lib/toastr/toastr.css

@@ -11,12 +11,29 @@
 }
 
 /* ── Positions ── */
-.toast-container[data-position="top-right"]    { @apply top-4 right-4; }
-.toast-container[data-position="top-left"]     { @apply top-4 left-4; }
-.toast-container[data-position="top-center"]   { @apply top-4 left-1/2 -translate-x-1/2; }
-.toast-container[data-position="bottom-right"] { @apply bottom-4 right-4; }
-.toast-container[data-position="bottom-left"]  { @apply bottom-4 left-4; }
-.toast-container[data-position="bottom-center"]{ @apply bottom-4 left-1/2 -translate-x-1/2; }
+.toast-container[data-position="top-right"] {
+  @apply top-4 right-4;
+}
+
+.toast-container[data-position="top-left"] {
+  @apply top-4 left-4;
+}
+
+.toast-container[data-position="top-center"] {
+  @apply top-4 left-1/2 -translate-x-1/2;
+}
+
+.toast-container[data-position="bottom-right"] {
+  @apply bottom-4 right-4;
+}
+
+.toast-container[data-position="bottom-left"] {
+  @apply bottom-4 left-4;
+}
+
+.toast-container[data-position="bottom-center"] {
+  @apply bottom-4 left-1/2 -translate-x-1/2;
+}
 
 /* ─── Toast item (base) ───────────────────────────────────────────────────── */
 .toast-item {
@@ -29,66 +46,125 @@
 .toast-item[data-severity="info"] {
   @apply bg-[#1434CB] border-[#E5F3FF];
 }
-.toast-item[data-severity="info"] .toast-icon path   { stroke: white; }
-.toast-item[data-severity="info"] .toast-summary     { @apply text-white; }
-.toast-item[data-severity="info"] .toast-detail      { @apply text-gray-200 text-xs; }
+
+.toast-item[data-severity="info"] .toast-icon path {
+  stroke: white;
+}
+
+.toast-item[data-severity="info"] .toast-summary {
+  @apply text-white;
+}
+
+.toast-item[data-severity="info"] .toast-detail {
+  @apply text-gray-200 text-xs;
+}
+
 .toast-item[data-severity="info"] .toast-action {
   @apply bg-white text-[#1434CB] border border-[#1434CB];
 }
+
 /* .toast-item[data-severity="info"] .toast-action:hover { @apply bg-blue-800; } */
-.toast-item[data-severity="info"] .toast-close path   { stroke: white; }
+.toast-item[data-severity="info"] .toast-close path {
+  stroke: white;
+}
 
 /* ─── Severity – DEFAULT (gray) ───────────────────────────────────────────── */
 .toast-item[data-severity="default"] {
-  @apply bg-black border-gray-200;
+  @apply bg-gray-500 border-gray-50;
+}
+
+.toast-item[data-severity="default"] .toast-icon path {
+  stroke: white;
+}
+
+.toast-item[data-severity="default"] .toast-summary {
+  @apply text-white;
 }
-.toast-item[data-severity="default"] .toast-icon path   { stroke: white; }
-.toast-item[data-severity="default"] .toast-summary     { @apply text-white; }
+
 /* .toast-item[data-severity="default"] .toast-detail      { @apply text-gray-600; } */
 .toast-item[data-severity="default"] .toast-action {
-  @apply bg-white text-black;
+  @apply bg-white text-gray-500;
 }
+
 /* .toast-item[data-severity="default"] .toast-action:hover { @apply bg-gray-600; } */
-.toast-item[data-severity="default"] .toast-close path   { stroke: white; }
+.toast-item[data-severity="default"] .toast-close path {
+  stroke: white;
+}
 
 /* ─── Severity – ERROR (red) ──────────────────────────────────────────────── */
 .toast-item[data-severity="error"] {
   @apply bg-[#C84144] border-[#FFF1F1];
 }
-.toast-item[data-severity="error"] .toast-icon path   { stroke: white; }
-.toast-item[data-severity="error"] .toast-summary     { @apply text-white; }
-.toast-item[data-severity="error"] .toast-detail      { @apply text-gray-200 text-xs; }
+
+.toast-item[data-severity="error"] .toast-icon path {
+  stroke: white;
+}
+
+.toast-item[data-severity="error"] .toast-summary {
+  @apply text-white;
+}
+
+.toast-item[data-severity="error"] .toast-detail {
+  @apply text-gray-200 text-xs;
+}
+
 .toast-item[data-severity="error"] .toast-action {
   @apply bg-white text-[#CB1432];
 }
+
 /* .toast-item[data-severity="error"] .toast-action:hover { @apply bg-red-800; } */
-.toast-item[data-severity="error"] .toast-close path   { stroke: white; }
+.toast-item[data-severity="error"] .toast-close path {
+  stroke: white;
+}
 
 /* ─── Severity – WARN (orange / amber) ────────────────────────────────────── */
 .toast-item[data-severity="warn"] {
   @apply bg-[#CC6401] border-[#FFEED7];
 }
-.toast-item[data-severity="warn"] .toast-icon path   { stroke: white; }
-.toast-item[data-severity="warn"] .toast-summary     { @apply text-white; }
+
+.toast-item[data-severity="warn"] .toast-icon path {
+  stroke: white;
+}
+
+.toast-item[data-severity="warn"] .toast-summary {
+  @apply text-white;
+}
+
 /* .toast-item[data-severity="warn"] .toast-detail      { @apply text-amber-700; } */
 .toast-item[data-severity="warn"] .toast-action {
   @apply bg-white text-[#CC6401];
 }
+
 /* .toast-item[data-severity="warn"] .toast-action:hover { @apply bg-amber-800; } */
-.toast-item[data-severity="warn"] .toast-close path   { stroke: white; }
+.toast-item[data-severity="warn"] .toast-close path {
+  stroke: white;
+}
 
 /* ─── Severity – SUCCESS (green) ──────────────────────────────────────────── */
 .toast-item[data-severity="success"] {
   @apply bg-[#1E7735] border-[#F1FCF3];
 }
-.toast-item[data-severity="success"] .toast-icon path   { stroke: white; }
-.toast-item[data-severity="success"] .toast-summary     { @apply text-white; }
+
+.toast-item[data-severity="success"] .toast-icon path {
+  stroke: white;
+}
+
+.toast-item[data-severity="success"] .toast-summary {
+  @apply text-white;
+}
+
 /* .toast-item[data-severity="success"] .toast-detail      { @apply text-green-700; } */
 .toast-item[data-severity="success"] .toast-action {
   @apply bg-white text-[#22973F];
 }
-.toast-item[data-severity="success"] .toast-action:hover { @apply bg-[#22973F]; }
-.toast-item[data-severity="success"] .toast-close path   { stroke: white; }
+
+.toast-item[data-severity="success"] .toast-action:hover {
+  @apply bg-[#22973F];
+}
+
+.toast-item[data-severity="success"] .toast-close path {
+  stroke: white;
+}
 
 /* ─── Summary / Detail / Action / Close (base) ───────────────────────────── */
 .toast-summary {
@@ -110,6 +186,7 @@
   position: relative;
   z-index: 1;
 }
+
 .toast-close:hover {
   @apply opacity-60;
 }
@@ -119,6 +196,7 @@
   display: block;
   pointer-events: none;
 }
+
 .toast-close * {
   cursor: pointer;
 }
@@ -138,7 +216,7 @@
     align-items: center;
   }
 
-  .toast-item {
+  .toast-item:not(.toast-item-inline) {
     display: grid;
     grid-template-areas:
       "icon action close"
@@ -148,10 +226,22 @@
     row-gap: 6px;
   }
 
-  .toast-icon    { grid-area: icon; }
-  .toast-content { grid-area: content; }
-  .toast-action  { grid-area: action; justify-self: end; }
-  .toast-close   { grid-area: close; }
+  .toast-icon {
+    grid-area: icon;
+  }
+
+  .toast-content {
+    grid-area: content;
+  }
+
+  .toast-action {
+    grid-area: action;
+    justify-self: end;
+  }
+
+  .toast-close {
+    grid-area: close;
+  }
 }
 
 /* ─── Animations ──────────────────────────────────────────────────────────── */
@@ -168,6 +258,7 @@
     opacity: 0;
     transform: translateY(-10px) scale(0.96);
   }
+
   to {
     opacity: 1;
     transform: translateY(0) scale(1);
@@ -179,6 +270,7 @@
     opacity: 1;
     transform: translateY(0) scale(1);
   }
+
   to {
     opacity: 0;
     transform: translateY(-10px) scale(0.96);