@brickclay-org/ui 0.0.53 → 0.0.55

package/fesm2022/brickclay-org-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, HostListener, ViewChildren, Output, Input, Injectable, NgModule, forwardRef, ViewEncapsulation, Optional, Self, Directive, ViewChild, input, model, output, signal, computed, effect, inject, ElementRef, InjectionToken } from '@angular/core';
+import { Component, EventEmitter, HostListener, ViewChildren, Output, Input, Injectable, NgModule, forwardRef, ViewEncapsulation, Optional, Self, Directive, ViewChild, input, model, output, signal, computed, effect, inject, ElementRef, InjectionToken, createComponent } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass } from '@angular/common';
 import * as i1$1 from '@angular/forms';
@@ -14,6 +14,7 @@ import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
 import { DIALOG_DATA, CdkDialogContainer, Dialog, DialogModule } from '@angular/cdk/dialog';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 // Icon paths that will be resolved relative to the library's assets folder
 // When published to npm, users will need to configure their angular.json to include these assets
@@ -6080,6 +6081,137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
+// ─── Service ─────────────────────────────────────────────────────────────────
+let _toastId = 0;
+class BkToastrService {
+    appRef;
+    injector;
+    _toasts = signal([], ...(ngDevMode ? [{ debugName: "_toasts" }] : []));
+    toasts = computed(() => this._toasts(), ...(ngDevMode ? [{ debugName: "toasts" }] : []));
+    _position = signal('top-right', ...(ngDevMode ? [{ debugName: "_position" }] : []));
+    position = computed(() => this._position(), ...(ngDevMode ? [{ debugName: "position" }] : []));
+    componentRef = null;
+    constructor(appRef, injector) {
+        this.appRef = appRef;
+        this.injector = injector;
+    }
+    initializeContainer() {
+        if (this.componentRef)
+            return;
+        // Check if we're in browser environment
+        if (typeof document === 'undefined' || !document.body) {
+            // If document.body doesn't exist yet, wait for it
+            setTimeout(() => this.initializeContainer(), 0);
+            return;
+        }
+        // Create component dynamically
+        this.componentRef = createComponent(BkToastr, {
+            environmentInjector: this.injector,
+        });
+        // Attach to DOM
+        document.body.appendChild(this.componentRef.location.nativeElement);
+        // Register for change detection
+        // Note: We don't call appRef.tick() here to avoid recursive tick calls
+        // Angular will automatically detect changes for the attached view
+        this.appRef.attachView(this.componentRef.hostView);
+    }
+    /** Show a toast with full config */
+    show(config) {
+        // Initialize container on first toast
+        this.initializeContainer();
+        const id = `toast-${++_toastId}`;
+        const toast = {
+            ...config,
+            id,
+            severity: config.severity ?? 'info',
+            timeOut: config.timeOut ?? 3000,
+            sticky: config.sticky ?? false,
+            icon: config.icon !== false,
+            leaving: false,
+        };
+        this._toasts.update(list => [...list, toast]);
+        if (!toast.sticky) {
+            setTimeout(() => this.close(id), toast.timeOut);
+        }
+        return id;
+    }
+    info(summaryOrOptions, detail, extra) {
+        if (typeof summaryOrOptions === 'string') {
+            return this.show({ ...extra, summary: summaryOrOptions, detail, severity: 'info' });
+        }
+        return this.show({ ...summaryOrOptions, severity: 'info' });
+    }
+    success(summaryOrOptions, detail, extra) {
+        if (typeof summaryOrOptions === 'string') {
+            return this.show({ ...extra, summary: summaryOrOptions, detail, severity: 'success' });
+        }
+        return this.show({ ...summaryOrOptions, severity: 'success' });
+    }
+    error(summaryOrOptions, detail, extra) {
+        if (typeof summaryOrOptions === 'string') {
+            return this.show({ ...extra, summary: summaryOrOptions, detail, severity: 'error' });
+        }
+        return this.show({ ...summaryOrOptions, severity: 'error' });
+    }
+    warn(summaryOrOptions, detail, extra) {
+        if (typeof summaryOrOptions === 'string') {
+            return this.show({ ...extra, summary: summaryOrOptions, detail, severity: 'warn' });
+        }
+        return this.show({ ...summaryOrOptions, severity: 'warn' });
+    }
+    default(summaryOrOptions, detail, extra) {
+        if (typeof summaryOrOptions === 'string') {
+            return this.show({ ...extra, summary: summaryOrOptions, detail, severity: 'default' });
+        }
+        return this.show({ ...summaryOrOptions, severity: 'default' });
+    }
+    /** Close a single toast (triggers leave animation first) */
+    close(id) {
+        this._toasts.update(list => list.map(t => (t.id === id ? { ...t, leaving: true } : t)));
+        setTimeout(() => {
+            this._toasts.update(list => list.filter(t => t.id !== id));
+        }, 300);
+    }
+    /** Clear every toast */
+    clear() {
+        this._toasts.update(list => list.map(t => ({ ...t, leaving: true })));
+        setTimeout(() => this._toasts.set([]), 300);
+    }
+    /** Set the position for toast notifications */
+    setPosition(position) {
+        // Initialize container if not already created
+        this.initializeContainer();
+        this._position.set(position);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToastrService, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToastrService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToastrService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }] });
+
+class BkToastr {
+    svc = inject(BkToastrService);
+    /** Convert signal → Observable so AsyncPipe triggers change detection reliably */
+    toasts$ = toObservable(this.svc.toasts);
+    position$ = toObservable(this.svc.position);
+    onClose(event, id) {
+        event.stopPropagation();
+        this.svc.close(id);
+    }
+    onAction(event, t) {
+        event.stopPropagation();
+        t.actionCallback?.();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToastr, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkToastr, isStandalone: true, selector: "bk-toastr", ngImport: i0, template: "<!-- Toast Container \u2013 fixed overlay -->\r\n<div class=\"toast-container\" [attr.data-position]=\"position$ | async\">\r\n\r\n  @for (toast of (toasts$ | async) ?? []; track toast.id) {\r\n    <div\r\n      class=\"toast-item\"\r\n      [attr.data-severity]=\"toast.severity\"\r\n      [class.toast-enter]=\"!toast.leaving\"\r\n      [class.toast-leave]=\"toast.leaving\">\r\n\r\n      <!-- \u2500\u2500 Icon \u2500\u2500 -->\r\n      @if (toast.icon) {\r\n        <svg class=\"toast-icon shrink-0\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <g [attr.clip-path]=\"'url(#clip_' + toast.id + ')'\">\r\n            <path\r\n              d=\"M10.0001 13.3334V10M10.0001 6.66671H10.0084M18.3334 10C18.3334 5.39767 14.6025 1.66671 10.0001 1.66671C5.39771 1.66671 1.66675 5.39767 1.66675 10C1.66675 14.6024 5.39771 18.3334 10.0001 18.3334C14.6025 18.3334 18.3334 14.6024 18.3334 10Z\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" />\r\n          </g>\r\n          <defs>\r\n            <clipPath [attr.id]=\"'clip_' + toast.id\">\r\n              <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n            </clipPath>\r\n          </defs>\r\n        </svg>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Content \u2500\u2500 -->\r\n      <div class=\"flex-1 min-w-0\">\r\n        <p class=\"toast-summary\">{{ toast.summary }}</p>\r\n        @if (toast.detail) {\r\n          <p class=\"toast-detail\">{{ toast.detail }}</p>\r\n        }\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Action button \u2500\u2500 -->\r\n      @if (toast.actionLabel) {\r\n        <button type=\"button\" class=\"toast-action\" (click)=\"onAction($event, toast)\">\r\n          {{ toast.actionLabel }}\r\n        </button>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Close button \u2500\u2500 -->\r\n      <button type=\"button\" class=\"toast-close\" (click)=\"onClose($event, toast.id)\">\r\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n             xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M10.625 0.625L0.625 10.625M0.625 0.625L10.625 10.625\"\r\n            stroke-width=\"1.25\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" />\r\n        </svg>\r\n      </button>\r\n\r\n    </div>\r\n  }\r\n\r\n</div>\r\n", styles: [".toast-container{@apply fixed flex flex-col gap-3 max-w-[100vw-2rem];z-index:2147483647!important;pointer-events:none}.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{@apply flex items-center justify-start gap-3 py-2 px-4 rounded-lg border;box-shadow:0 4px 12px #00000014,0 1px 3px #0000000f;pointer-events:auto}.toast-item[data-severity=info]{@apply bg-[#E5F3FF] border-[#E5F3FF];}.toast-item[data-severity=info] .toast-icon path{stroke:#1434cb}.toast-item[data-severity=info] .toast-summary{@apply text-[#0D227F];}.toast-item[data-severity=info] .toast-action{@apply bg-[#1434CB] text-white border border-[#1434CB];}.toast-item[data-severity=info] .toast-close path{stroke:#2563eb}.toast-item[data-severity=default]{@apply bg-white border-gray-200;}.toast-item[data-severity=default] .toast-icon path{stroke:#6b7080}.toast-item[data-severity=default] .toast-summary{@apply text-[#363C51];}.toast-item[data-severity=default] .toast-action{@apply bg-[#A1A3AE] text-white;}.toast-item[data-severity=default] .toast-close path{stroke:#6b7080}.toast-item[data-severity=error]{@apply bg-[#FFF1F1] border-[#FFF1F1];}.toast-item[data-severity=error] .toast-icon path{stroke:#cb1432}.toast-item[data-severity=error] .toast-summary{@apply text-[#B41E32];}.toast-item[data-severity=error] .toast-action{@apply bg-[#CB1432] text-white;}.toast-item[data-severity=error] .toast-close path{stroke:#cb1432}.toast-item[data-severity=warn]{@apply bg-[#FFEED7] border-[#FFEED7];}.toast-item[data-severity=warn] .toast-icon path{stroke:#f97c00}.toast-item[data-severity=warn] .toast-summary{@apply text-[#A04C02];}.toast-item[data-severity=warn] .toast-action{@apply bg-[#CC6401] text-white;}.toast-item[data-severity=warn] .toast-close path{stroke:#f97c00}.toast-item[data-severity=success]{@apply bg-[#F1FCF3] border-[#F1FCF3];}.toast-item[data-severity=success] .toast-icon path{stroke:#22973f}.toast-item[data-severity=success] .toast-summary{@apply text-[#1E7735];}.toast-item[data-severity=success] .toast-action{@apply bg-[#22973F] text-white;}.toast-item[data-severity=success] .toast-action:hover{@apply bg-green-800;}.toast-item[data-severity=success] .toast-close path{stroke:#22973f}.toast-summary{@apply text-sm font-medium;}.toast-action{@apply shrink-0 py-1 px-2 text-xs font-medium leading-[18px] rounded-lg cursor-pointer border-none transition-colors;pointer-events:auto}.toast-close{@apply shrink-0 p-1 rounded cursor-pointer border-none bg-transparent transition-opacity;pointer-events:auto;position:relative;z-index:1}.toast-close:hover{@apply opacity-60;}.toast-close svg{display:block;pointer-events:none}.toast-close *{cursor:pointer}.toast-enter{animation:toastIn .3s ease-out forwards}.toast-leave{animation:toastOut .3s ease-in forwards}@keyframes toastIn{0%{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.96)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToastr, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-toastr', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<!-- Toast Container \u2013 fixed overlay -->\r\n<div class=\"toast-container\" [attr.data-position]=\"position$ | async\">\r\n\r\n  @for (toast of (toasts$ | async) ?? []; track toast.id) {\r\n    <div\r\n      class=\"toast-item\"\r\n      [attr.data-severity]=\"toast.severity\"\r\n      [class.toast-enter]=\"!toast.leaving\"\r\n      [class.toast-leave]=\"toast.leaving\">\r\n\r\n      <!-- \u2500\u2500 Icon \u2500\u2500 -->\r\n      @if (toast.icon) {\r\n        <svg class=\"toast-icon shrink-0\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <g [attr.clip-path]=\"'url(#clip_' + toast.id + ')'\">\r\n            <path\r\n              d=\"M10.0001 13.3334V10M10.0001 6.66671H10.0084M18.3334 10C18.3334 5.39767 14.6025 1.66671 10.0001 1.66671C5.39771 1.66671 1.66675 5.39767 1.66675 10C1.66675 14.6024 5.39771 18.3334 10.0001 18.3334C14.6025 18.3334 18.3334 14.6024 18.3334 10Z\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" />\r\n          </g>\r\n          <defs>\r\n            <clipPath [attr.id]=\"'clip_' + toast.id\">\r\n              <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n            </clipPath>\r\n          </defs>\r\n        </svg>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Content \u2500\u2500 -->\r\n      <div class=\"flex-1 min-w-0\">\r\n        <p class=\"toast-summary\">{{ toast.summary }}</p>\r\n        @if (toast.detail) {\r\n          <p class=\"toast-detail\">{{ toast.detail }}</p>\r\n        }\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Action button \u2500\u2500 -->\r\n      @if (toast.actionLabel) {\r\n        <button type=\"button\" class=\"toast-action\" (click)=\"onAction($event, toast)\">\r\n          {{ toast.actionLabel }}\r\n        </button>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Close button \u2500\u2500 -->\r\n      <button type=\"button\" class=\"toast-close\" (click)=\"onClose($event, toast.id)\">\r\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n             xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M10.625 0.625L0.625 10.625M0.625 0.625L10.625 10.625\"\r\n            stroke-width=\"1.25\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" />\r\n        </svg>\r\n      </button>\r\n\r\n    </div>\r\n  }\r\n\r\n</div>\r\n", styles: [".toast-container{@apply fixed flex flex-col gap-3 max-w-[100vw-2rem];z-index:2147483647!important;pointer-events:none}.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{@apply flex items-center justify-start gap-3 py-2 px-4 rounded-lg border;box-shadow:0 4px 12px #00000014,0 1px 3px #0000000f;pointer-events:auto}.toast-item[data-severity=info]{@apply bg-[#E5F3FF] border-[#E5F3FF];}.toast-item[data-severity=info] .toast-icon path{stroke:#1434cb}.toast-item[data-severity=info] .toast-summary{@apply text-[#0D227F];}.toast-item[data-severity=info] .toast-action{@apply bg-[#1434CB] text-white border border-[#1434CB];}.toast-item[data-severity=info] .toast-close path{stroke:#2563eb}.toast-item[data-severity=default]{@apply bg-white border-gray-200;}.toast-item[data-severity=default] .toast-icon path{stroke:#6b7080}.toast-item[data-severity=default] .toast-summary{@apply text-[#363C51];}.toast-item[data-severity=default] .toast-action{@apply bg-[#A1A3AE] text-white;}.toast-item[data-severity=default] .toast-close path{stroke:#6b7080}.toast-item[data-severity=error]{@apply bg-[#FFF1F1] border-[#FFF1F1];}.toast-item[data-severity=error] .toast-icon path{stroke:#cb1432}.toast-item[data-severity=error] .toast-summary{@apply text-[#B41E32];}.toast-item[data-severity=error] .toast-action{@apply bg-[#CB1432] text-white;}.toast-item[data-severity=error] .toast-close path{stroke:#cb1432}.toast-item[data-severity=warn]{@apply bg-[#FFEED7] border-[#FFEED7];}.toast-item[data-severity=warn] .toast-icon path{stroke:#f97c00}.toast-item[data-severity=warn] .toast-summary{@apply text-[#A04C02];}.toast-item[data-severity=warn] .toast-action{@apply bg-[#CC6401] text-white;}.toast-item[data-severity=warn] .toast-close path{stroke:#f97c00}.toast-item[data-severity=success]{@apply bg-[#F1FCF3] border-[#F1FCF3];}.toast-item[data-severity=success] .toast-icon path{stroke:#22973f}.toast-item[data-severity=success] .toast-summary{@apply text-[#1E7735];}.toast-item[data-severity=success] .toast-action{@apply bg-[#22973F] text-white;}.toast-item[data-severity=success] .toast-action:hover{@apply bg-green-800;}.toast-item[data-severity=success] .toast-close path{stroke:#22973f}.toast-summary{@apply text-sm font-medium;}.toast-action{@apply shrink-0 py-1 px-2 text-xs font-medium leading-[18px] rounded-lg cursor-pointer border-none transition-colors;pointer-events:auto}.toast-close{@apply shrink-0 p-1 rounded cursor-pointer border-none bg-transparent transition-opacity;pointer-events:auto;position:relative;z-index:1}.toast-close:hover{@apply opacity-60;}.toast-close svg{display:block;pointer-events:none}.toast-close *{cursor:pointer}.toast-enter{animation:toastIn .3s ease-out forwards}.toast-leave{animation:toastOut .3s ease-in forwards}@keyframes toastIn{0%{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.96)}}\n"] }]
+        }] });
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -6089,5 +6221,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarProfile, BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, getDialogBackdropAnimation, getDialogPanelAnimation };
+export { AvatarProfile, BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, getDialogBackdropAnimation, getDialogPanelAnimation };
 //# sourceMappingURL=brickclay-org-ui.mjs.map