@brickclay-org/ui 0.1.86 → 0.1.87

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { EventEmitter, OnInit, OnDestroy, OnChanges, ElementRef, Renderer2, SimpleChanges, AfterViewInit, QueryList, ComponentRef, Type, InjectionToken, NgZone, ApplicationRef, EnvironmentInjector, ChangeDetectorRef, TemplateRef, WritableSignal } from '@angular/core';
+import { EventEmitter, OnInit, OnDestroy, OnChanges, ElementRef, Renderer2, SimpleChanges, AfterViewInit, QueryList, ComponentRef, Type, InjectionToken, NgZone, ChangeDetectorRef, TemplateRef, WritableSignal } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors, NgControl, NgModel } from '@angular/forms';
 import * as rxjs from 'rxjs';
 import { Observable } from 'rxjs';
@@ -1067,7 +1067,7 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     dropdownView: _angular_core.InputSignal<"list" | "grid">;
     gridColumns: _angular_core.InputSignal<BkSelectGridColumn[]>;
     /** Grid density. `inherit` follows the trigger's existing `variation`. */
-    gridVariation: _angular_core.InputSignal<"inherit" | "default" | "sm">;
+    gridVariation: _angular_core.InputSignal<"default" | "sm" | "inherit">;
     /** Stage multi-grid changes until Apply is clicked. */
     gridSelectionActions: _angular_core.InputSignal<boolean>;
     gridMinWidth: _angular_core.InputSignal<string>;
@@ -2658,15 +2658,26 @@ interface ToastMessage extends ToastConfig {
     readonly inline?: boolean;
     leaving: boolean;
 }
+/**
+ * Renders through Angular CDK's Overlay (same primitive `bk-select` / `bk-dialog` / `bk-popover`
+ * already use), positioned with a `GlobalPositionStrategy` rather than a connected one — a toast
+ * has no trigger element to anchor to, it docks to a viewport corner, which is exactly what the
+ * global strategy is for (Angular Material's own snack bar is built the same way).
+ *
+ * The win over the old `document.body.appendChild()` approach isn't just consistency: CDK sets
+ * top/left/right/bottom as inline styles from JS at runtime, via its own prebuilt overlay CSS
+ * (`@angular/cdk/overlay-prebuilt.css`, already imported by consumers) — positioning no longer
+ * depends on this library's own Tailwind `@apply` classes surviving the build pipeline at all.
+ */
 declare class BkToastrService {
-    private readonly appRef;
-    private readonly injector;
+    private readonly overlay;
     private readonly _toasts;
     readonly toasts: _angular_core.Signal<ToastMessage[]>;
     private readonly _position;
     readonly position: _angular_core.Signal<ToastPosition>;
+    private overlayRef;
     private componentRef;
-    constructor(appRef: ApplicationRef, injector: EnvironmentInjector);
+    private buildPositionStrategy;
     private initializeContainer;
     /** Show a toast with full config */
     show(config: ToastConfig): string;
@@ -4101,7 +4112,7 @@ declare class BkTd extends BkCellBase implements AfterViewInit, OnDestroy {
      */
     protected readonly truncatedTooltip: _angular_core.WritableSignal<string>;
     /** Forwarded to the content wrapper's `bkTooltip`. Override on a column whose default 'right' would run into its neighbour. */
-    tooltipPosition: _angular_core.InputSignal<"left" | "right" | "top" | "bottom">;
+    tooltipPosition: _angular_core.InputSignal<"top" | "bottom" | "left" | "right">;
     /** Only present when `ellipsis()` is true — see the `@else` branch in the template. */
     private ellipsisTextRef?;
     checkbox: _angular_core.InputSignal<boolean>;

package/package.json

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

package/src/lib/input/input.css

@@ -58,7 +58,7 @@
 
 /* Phone Input Field - Add padding-left for selector space */
 .input-field--phone {
-  @apply pl-[80px];
+  @apply !pl-[80px];
 }
 
 /* URL Input Field - Add padding-left for prefix space */

package/src/lib/toastr/toastr.css

@@ -3,36 +3,21 @@
    ═══════════════════════════════════════════════════════════════════════════ */
 
 /* ─── Container ───────────────────────────────────────────────────────────── */
+/*
+ * Positioning (fixed + top/left/right/bottom/centering per corner) is owned entirely by CDK's
+ * GlobalPositionStrategy now (see toastr.service.ts) — it sets those as inline styles on the
+ * `.cdk-global-overlay-wrapper` it creates around this component, from its own prebuilt CSS.
+ * This class only lays out the toast stack *within* that wrapper.
+ */
 .toast-container {
-  @apply fixed flex flex-col gap-3 max-w-[calc(100vw-2rem)];
-  /* Make sure nothing in the app sits above the toast + allow only toast items to capture clicks */
-  z-index: 2147483647 !important;
+  @apply flex flex-col gap-3 max-w-[calc(100vw-2rem)];
   pointer-events: none;
 }
 
-/* ── 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;
+/* Guarantee toasts stack above dialogs/popovers/etc. that also use CDK overlays — CDK's own
+   z-index otherwise just reflects creation order. Targets the pane CDK wraps this panel in. */
+.cdk-overlay-pane.bk-toastr-panel {
+  z-index: 2147483647 !important;
 }
 
 /* ─── Toast item (base) ───────────────────────────────────────────────────── */
@@ -208,11 +193,11 @@
     max-width: 100%;
   }
 
+  /* Center positions hug their own content width and float centered rather than stretching
+     full-bleed like the corner positions — CDK only owns the container's outer placement,
+     this inner alignment is still ours to keep. */
   .toast-container[data-position="top-center"],
   .toast-container[data-position="bottom-center"] {
-    left: 50% !important;
-    right: auto !important;
-    transform: translateX(-50%) !important;
     align-items: center;
   }