ngx-pk-ui 1.1.1 → 1.1.2

package/fesm2022/ngx-pk-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, viewChild, Component, contentChildren, signal, Injectable, inject, effect, output, computed, Input, EventEmitter, Output, ContentChild, Host, Optional, forwardRef, Inject, Directive, HostListener, ContentChildren, NgModule, ChangeDetectionStrategy, ElementRef } from '@angular/core';
+import { input, viewChild, Component, contentChildren, signal, inject, PLATFORM_ID, ApplicationRef, EnvironmentInjector, createComponent, Injectable, effect, output, computed, Input, EventEmitter, Output, ContentChild, Host, Optional, forwardRef, Inject, Directive, HostListener, ContentChildren, NgModule, ChangeDetectionStrategy, ElementRef } from '@angular/core';
 import * as i1 from '@angular/common';
-import { NgTemplateOutlet, NgStyle, CommonModule, NgClass } from '@angular/common';
+import { NgTemplateOutlet, isPlatformBrowser, NgStyle, CommonModule, NgClass } from '@angular/common';
 import * as i3 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -47,6 +47,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class PkToastrService {
     _counter = 0;
     toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (!isPlatformBrowser(inject(PLATFORM_ID)))
+            return;
+        const appRef = inject(ApplicationRef);
+        const injector = inject(EnvironmentInjector);
+        // Lazily import PkToastr to break the circular-reference at parse time.
+        Promise.resolve().then(function () { return pkToastr; }).then(({ PkToastr }) => {
+            try {
+                if (document.querySelector('pk-toastr'))
+                    return; // already in DOM (manual tag)
+                const ref = createComponent(PkToastr, { environmentInjector: injector });
+                appRef.attachView(ref.hostView);
+                document.body.appendChild(ref.location.nativeElement);
+            }
+            catch {
+                // Injector was destroyed before the dynamic import resolved (e.g., during tests).
+            }
+        });
+    }
     show(type, message, title, duration = 4000) {
         const toast = { id: ++this._counter, type, message, title, duration };
         this.toasts.update((list) => [...list, toast]);
@@ -78,7 +97,7 @@ class PkToastrService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkToastrService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class PkToastr {
     toastr = inject(PkToastrService);
@@ -90,9 +109,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{ selector: 'pk-toastr', template: "<div class=\"pk-toastr-container\" aria-live=\"polite\" aria-atomic=\"false\">\n  @for (toast of toastr.toasts(); track toast.id) {\n    <div\n      class=\"pk-toast pk-toast--{{ toast.type }}\"\n      role=\"alert\"\n    >\n      @if (toast.title) {\n        <strong class=\"pk-toast__title\">{{ toast.title }}</strong>\n      }\n      <span class=\"pk-toast__message\">{{ toast.message }}</span>\n      <button\n        class=\"pk-toast__close\"\n        aria-label=\"Dismiss\"\n        (click)=\"toastr.dismiss(toast.id)\"\n      >\u2715</button>\n    </div>\n  }\n</div>\n", styles: [".pk-toastr-container{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:360px;pointer-events:none}.pk-toast{display:flex;align-items:flex-start;gap:8px;padding:12px 16px;border-radius:6px;box-shadow:0 4px 12px #00000026;color:#fff;pointer-events:all;animation:pk-toast-in .25s ease}@keyframes pk-toast-in{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}.pk-toast--success{background:#43a047}.pk-toast--error{background:#e53935}.pk-toast--info{background:#1e88e5}.pk-toast--warning{background:#fb8c00}.pk-toast__title{display:block;font-weight:700;margin-bottom:2px}.pk-toast__message{flex:1;font-size:14px}.pk-toast__close{background:none;border:none;color:#fffc;cursor:pointer;font-size:14px;padding:0;line-height:1;margin-left:auto;flex-shrink:0}.pk-toast__close:hover{color:#fff}\n"] }]
         }] });
 
+var pkToastr = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    PkToastr: PkToastr
+});
+
 class PkAlertService {
     /** The component reads this signal to know what (if anything) to display. */
     slot = signal(null, ...(ngDevMode ? [{ debugName: "slot" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (!isPlatformBrowser(inject(PLATFORM_ID)))
+            return;
+        const appRef = inject(ApplicationRef);
+        const injector = inject(EnvironmentInjector);
+        Promise.resolve().then(function () { return pkAlert; }).then(({ PkAlert }) => {
+            try {
+                if (document.querySelector('pk-alert'))
+                    return; // already in DOM (manual tag)
+                const ref = createComponent(PkAlert, { environmentInjector: injector });
+                appRef.attachView(ref.hostView);
+                document.body.appendChild(ref.location.nativeElement);
+            }
+            catch {
+                // Injector was destroyed before the dynamic import resolved (e.g., during tests).
+            }
+        });
+    }
     _open(config) {
         return new Promise((resolve) => {
             this.slot.set({ config, resolve });
@@ -139,7 +181,7 @@ class PkAlertService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkAlertService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class PkAlert {
     svc = inject(PkAlertService);
@@ -192,6 +234,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{ selector: 'pk-alert', imports: [FormsModule], template: "@if (svc.slot(); as slot) {\n  <div class=\"pk-alert-backdrop\" (click)=\"cancel()\">\n    <div class=\"pk-alert-card pk-alert-card--{{ slot.config.type }}\"\n         role=\"dialog\"\n         aria-modal=\"true\"\n         (click)=\"$event.stopPropagation()\">\n\n      <div class=\"pk-alert-icon\">\n        @switch (slot.config.type) {\n          @case ('success') { \u2705 }\n          @case ('warn')    { \u26A0\uFE0F }\n          @case ('error')   { \u274C }\n          @case ('confirm') { \uD83E\uDD14 }\n          @case ('input')   { \u270F\uFE0F }\n        }\n      </div>\n\n      @if (slot.config.title) {\n        <h2 class=\"pk-alert-title\">{{ slot.config.title }}</h2>\n      }\n\n      <p class=\"pk-alert-message\">{{ slot.config.message }}</p>\n\n      @if (slot.config.type === 'input') {\n        <div class=\"pk-alert-input-wrap\">\n          @switch (slot.config.inputType) {\n            @case ('boolean') {\n              <label class=\"pk-alert-toggle\">\n                <input type=\"checkbox\" [checked]=\"!!inputValue()\"\n                       (change)=\"inputValue.set($any($event.target).checked)\" />\n                <span>{{ inputValue() ? 'Yes' : 'No' }}</span>\n              </label>\n            }\n            @case ('number') {\n              <input class=\"pk-alert-field\" type=\"number\"\n                     [value]=\"inputValue()\"\n                     (input)=\"inputValue.set(+$any($event.target).value)\"\n                     autofocus />\n            }\n            @case ('date') {\n              <input class=\"pk-alert-field\" type=\"date\"\n                     [value]=\"inputValue()\"\n                     (input)=\"inputValue.set($any($event.target).value)\"\n                     autofocus />\n            }\n            @default {\n              <input class=\"pk-alert-field\" type=\"text\"\n                     [value]=\"inputValue()\"\n                     (input)=\"inputValue.set($any($event.target).value)\"\n                     autofocus />\n            }\n          }\n        </div>\n      }\n\n      <div class=\"pk-alert-actions\">\n        @if (slot.config.type === 'confirm' || slot.config.type === 'input') {\n          <button class=\"pk-alert-btn pk-alert-btn--cancel\" (click)=\"cancel()\">\n            {{ slot.config.cancelLabel ?? 'Cancel' }}\n          </button>\n        }\n        <button class=\"pk-alert-btn pk-alert-btn--confirm pk-alert-btn--{{ slot.config.type }}\"\n                (click)=\"confirm()\">\n          {{ slot.config.confirmLabel ?? 'OK' }}\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".pk-alert-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:10000;animation:pk-backdrop-in .15s ease}@keyframes pk-backdrop-in{0%{opacity:0}to{opacity:1}}.pk-alert-card{background:#fff;border-radius:10px;padding:32px 28px 24px;min-width:320px;max-width:480px;width:90vw;box-shadow:0 8px 32px #0003;text-align:center;animation:pk-card-in .2s ease}@keyframes pk-card-in{0%{opacity:0;transform:scale(.92) translateY(-12px)}to{opacity:1;transform:scale(1) translateY(0)}}.pk-alert-icon{font-size:40px;line-height:1;margin-bottom:12px}.pk-alert-title{margin:0 0 8px;font-size:18px;font-weight:700;color:#222}.pk-alert-message{margin:0 0 20px;font-size:15px;color:#555;line-height:1.5}.pk-alert-input-wrap{margin-bottom:20px}.pk-alert-field{width:100%;padding:9px 12px;border:1px solid #ccc;border-radius:6px;font-size:15px;outline:none;transition:border-color .15s;box-sizing:border-box}.pk-alert-field:focus{border-color:#1976d2;box-shadow:0 0 0 2px #1976d22e}.pk-alert-toggle{display:inline-flex;align-items:center;gap:10px;font-size:15px;cursor:pointer}.pk-alert-toggle input[type=checkbox]{width:18px;height:18px;cursor:pointer}.pk-alert-actions{display:flex;justify-content:center;gap:12px}.pk-alert-btn{padding:9px 24px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s}.pk-alert-btn:hover{opacity:.85}.pk-alert-btn--cancel{background:#f0f0f0;color:#444}.pk-alert-btn--confirm{color:#fff}.pk-alert-btn--confirm.pk-alert-btn--success{background:#43a047}.pk-alert-btn--confirm.pk-alert-btn--warn{background:#fb8c00}.pk-alert-btn--confirm.pk-alert-btn--error{background:#e53935}.pk-alert-btn--confirm.pk-alert-btn--confirm,.pk-alert-btn--confirm.pk-alert-btn--input{background:#1976d2}\n"] }]
         }], ctorParameters: () => [] });
 
+var pkAlert = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    PkAlert: PkAlert
+});
+
 class PkModalHeader {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkModalHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: PkModalHeader, isStandalone: true, selector: "pk-modal-header", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;padding:16px 48px 16px 20px;border-bottom:1px solid #e0e0e0;font-size:17px;font-weight:600;color:#1a1a2e;line-height:1.4}\n"] });