ngx-pk-ui 1.1.2 → 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
|
@@ -102,11 +102,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
102
102
|
class PkToastr {
|
|
103
103
|
toastr = inject(PkToastrService);
|
|
104
104
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkToastr, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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 @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"] });
|
|
106
106
|
}
|
|
107
107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkToastr, decorators: [{
|
|
108
108
|
type: Component,
|
|
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 @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"] }]
|
|
110
110
|
}] });
|
|
111
111
|
|
|
112
112
|
var pkToastr = /*#__PURE__*/Object.freeze({
|
|
@@ -2720,11 +2720,17 @@ class PkTooltip {
|
|
|
2720
2720
|
if (!text || this.tooltipEl)
|
|
2721
2721
|
return;
|
|
2722
2722
|
const tooltip = document.createElement('div');
|
|
2723
|
-
|
|
2723
|
+
const rawType = this.pkTooltipType();
|
|
2724
|
+
const isOutline = rawType.endsWith('-outline');
|
|
2725
|
+
const baseType = isOutline ? rawType.slice(0, -'-outline'.length) : rawType;
|
|
2726
|
+
const classes = [
|
|
2724
2727
|
'pk-tooltip-box',
|
|
2725
2728
|
`pk-tooltip-box--${this.pkTooltipPosition()}`,
|
|
2726
|
-
`pk-tooltip-box--${
|
|
2727
|
-
]
|
|
2729
|
+
`pk-tooltip-box--${baseType}`,
|
|
2730
|
+
];
|
|
2731
|
+
if (isOutline)
|
|
2732
|
+
classes.push('pk-tooltip-box--outline');
|
|
2733
|
+
tooltip.className = classes.join(' ');
|
|
2728
2734
|
tooltip.textContent = text;
|
|
2729
2735
|
tooltip.style.visibility = 'hidden';
|
|
2730
2736
|
document.body.appendChild(tooltip);
|