ngx-pk-ui 1.1.1 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/ngx-pk-ui.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, viewChild, Component, contentChildren, signal,
|
|
2
|
+
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';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
|
-
import { NgTemplateOutlet, NgStyle, CommonModule, NgClass } from '@angular/common';
|
|
4
|
+
import { NgTemplateOutlet, isPlatformBrowser, NgStyle, CommonModule, NgClass } from '@angular/common';
|
|
5
5
|
import * as i3 from '@angular/forms';
|
|
6
6
|
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
7
7
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
@@ -47,6 +47,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
47
47
|
class PkToastrService {
|
|
48
48
|
_counter = 0;
|
|
49
49
|
toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []));
|
|
50
|
+
constructor() {
|
|
51
|
+
if (!isPlatformBrowser(inject(PLATFORM_ID)))
|
|
52
|
+
return;
|
|
53
|
+
const appRef = inject(ApplicationRef);
|
|
54
|
+
const injector = inject(EnvironmentInjector);
|
|
55
|
+
// Lazily import PkToastr to break the circular-reference at parse time.
|
|
56
|
+
Promise.resolve().then(function () { return pkToastr; }).then(({ PkToastr }) => {
|
|
57
|
+
try {
|
|
58
|
+
if (document.querySelector('pk-toastr'))
|
|
59
|
+
return; // already in DOM (manual tag)
|
|
60
|
+
const ref = createComponent(PkToastr, { environmentInjector: injector });
|
|
61
|
+
appRef.attachView(ref.hostView);
|
|
62
|
+
document.body.appendChild(ref.location.nativeElement);
|
|
63
|
+
}
|
|
64
|
+
catch {
|
|
65
|
+
// Injector was destroyed before the dynamic import resolved (e.g., during tests).
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
}
|
|
50
69
|
show(type, message, title, duration = 4000) {
|
|
51
70
|
const toast = { id: ++this._counter, type, message, title, duration };
|
|
52
71
|
this.toasts.update((list) => [...list, toast]);
|
|
@@ -78,21 +97,44 @@ class PkToastrService {
|
|
|
78
97
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkToastrService, decorators: [{
|
|
79
98
|
type: Injectable,
|
|
80
99
|
args: [{ providedIn: 'root' }]
|
|
81
|
-
}] });
|
|
100
|
+
}], ctorParameters: () => [] });
|
|
82
101
|
|
|
83
102
|
class PkToastr {
|
|
84
103
|
toastr = inject(PkToastrService);
|
|
85
104
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkToastr, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
86
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkToastr, isStandalone: true, selector: "pk-toastr", ngImport: i0, 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
|
|
105
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkToastr, isStandalone: true, selector: "pk-toastr", ngImport: i0, 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 <div class=\"pk-toast__body\">\n @if (toast.title) {\n <strong class=\"pk-toast__title\">{{ toast.title }}</strong>\n }\n <span class=\"pk-toast__message\">{{ toast.message }}</span>\n </div>\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__body{flex:1;display:flex;flex-direction:column}.pk-toast__title{font-weight:700;margin-bottom:2px}.pk-toast__message{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"] });
|
|
87
106
|
}
|
|
88
107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkToastr, decorators: [{
|
|
89
108
|
type: Component,
|
|
90
|
-
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
|
|
109
|
+
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 <div class=\"pk-toast__body\">\n @if (toast.title) {\n <strong class=\"pk-toast__title\">{{ toast.title }}</strong>\n }\n <span class=\"pk-toast__message\">{{ toast.message }}</span>\n </div>\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__body{flex:1;display:flex;flex-direction:column}.pk-toast__title{font-weight:700;margin-bottom:2px}.pk-toast__message{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"] }]
|
|
91
110
|
}] });
|
|
92
111
|
|
|
112
|
+
var pkToastr = /*#__PURE__*/Object.freeze({
|
|
113
|
+
__proto__: null,
|
|
114
|
+
PkToastr: PkToastr
|
|
115
|
+
});
|
|
116
|
+
|
|
93
117
|
class PkAlertService {
|
|
94
118
|
/** The component reads this signal to know what (if anything) to display. */
|
|
95
119
|
slot = signal(null, ...(ngDevMode ? [{ debugName: "slot" }] : /* istanbul ignore next */ []));
|
|
120
|
+
constructor() {
|
|
121
|
+
if (!isPlatformBrowser(inject(PLATFORM_ID)))
|
|
122
|
+
return;
|
|
123
|
+
const appRef = inject(ApplicationRef);
|
|
124
|
+
const injector = inject(EnvironmentInjector);
|
|
125
|
+
Promise.resolve().then(function () { return pkAlert; }).then(({ PkAlert }) => {
|
|
126
|
+
try {
|
|
127
|
+
if (document.querySelector('pk-alert'))
|
|
128
|
+
return; // already in DOM (manual tag)
|
|
129
|
+
const ref = createComponent(PkAlert, { environmentInjector: injector });
|
|
130
|
+
appRef.attachView(ref.hostView);
|
|
131
|
+
document.body.appendChild(ref.location.nativeElement);
|
|
132
|
+
}
|
|
133
|
+
catch {
|
|
134
|
+
// Injector was destroyed before the dynamic import resolved (e.g., during tests).
|
|
135
|
+
}
|
|
136
|
+
});
|
|
137
|
+
}
|
|
96
138
|
_open(config) {
|
|
97
139
|
return new Promise((resolve) => {
|
|
98
140
|
this.slot.set({ config, resolve });
|
|
@@ -139,7 +181,7 @@ class PkAlertService {
|
|
|
139
181
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkAlertService, decorators: [{
|
|
140
182
|
type: Injectable,
|
|
141
183
|
args: [{ providedIn: 'root' }]
|
|
142
|
-
}] });
|
|
184
|
+
}], ctorParameters: () => [] });
|
|
143
185
|
|
|
144
186
|
class PkAlert {
|
|
145
187
|
svc = inject(PkAlertService);
|
|
@@ -192,6 +234,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
192
234
|
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"] }]
|
|
193
235
|
}], ctorParameters: () => [] });
|
|
194
236
|
|
|
237
|
+
var pkAlert = /*#__PURE__*/Object.freeze({
|
|
238
|
+
__proto__: null,
|
|
239
|
+
PkAlert: PkAlert
|
|
240
|
+
});
|
|
241
|
+
|
|
195
242
|
class PkModalHeader {
|
|
196
243
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkModalHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
197
244
|
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"] });
|
|
@@ -2673,11 +2720,17 @@ class PkTooltip {
|
|
|
2673
2720
|
if (!text || this.tooltipEl)
|
|
2674
2721
|
return;
|
|
2675
2722
|
const tooltip = document.createElement('div');
|
|
2676
|
-
|
|
2723
|
+
const rawType = this.pkTooltipType();
|
|
2724
|
+
const isOutline = rawType.endsWith('-outline');
|
|
2725
|
+
const baseType = isOutline ? rawType.slice(0, -'-outline'.length) : rawType;
|
|
2726
|
+
const classes = [
|
|
2677
2727
|
'pk-tooltip-box',
|
|
2678
2728
|
`pk-tooltip-box--${this.pkTooltipPosition()}`,
|
|
2679
|
-
`pk-tooltip-box--${
|
|
2680
|
-
]
|
|
2729
|
+
`pk-tooltip-box--${baseType}`,
|
|
2730
|
+
];
|
|
2731
|
+
if (isOutline)
|
|
2732
|
+
classes.push('pk-tooltip-box--outline');
|
|
2733
|
+
tooltip.className = classes.join(' ');
|
|
2681
2734
|
tooltip.textContent = text;
|
|
2682
2735
|
tooltip.style.visibility = 'hidden';
|
|
2683
2736
|
document.body.appendChild(tooltip);
|