ngx-pk-ui 1.1.2 → 1.1.4
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 +61 -10
- package/fesm2022/ngx-pk-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/pk-table.css +153 -0
- package/styles/pk-tooltip.css +9 -0
- package/styles/pk-ui.css +1 -0
- package/types/ngx-pk-ui.d.ts +23 -2
package/fesm2022/ngx-pk-ui.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, viewChild, Component, contentChildren,
|
|
2
|
+
import { input, signal, viewChild, Component, contentChildren, 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
4
|
import { NgTemplateOutlet, isPlatformBrowser, NgStyle, CommonModule, NgClass } from '@angular/common';
|
|
5
5
|
import * as i3 from '@angular/forms';
|
|
@@ -9,6 +9,51 @@ import { Subject, of } from 'rxjs';
|
|
|
9
9
|
import * as i1$1 from '@angular/router';
|
|
10
10
|
import { RouterModule } from '@angular/router';
|
|
11
11
|
|
|
12
|
+
class PkAccordionItem {
|
|
13
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
14
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
15
|
+
open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
16
|
+
/** Internal open state — managed by PkAccordion parent */
|
|
17
|
+
_isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
|
|
18
|
+
content = viewChild.required('content');
|
|
19
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: PkAccordionItem, isStandalone: true, selector: "pk-accordion-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #content><ng-content /></ng-template>`, isInline: true });
|
|
21
|
+
}
|
|
22
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkAccordionItem, decorators: [{
|
|
23
|
+
type: Component,
|
|
24
|
+
args: [{
|
|
25
|
+
selector: 'pk-accordion-item',
|
|
26
|
+
template: `<ng-template #content><ng-content /></ng-template>`,
|
|
27
|
+
}]
|
|
28
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
|
|
29
|
+
|
|
30
|
+
class PkAccordion {
|
|
31
|
+
items = contentChildren(PkAccordionItem, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
32
|
+
/** Allow multiple panels to be open simultaneously */
|
|
33
|
+
multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []));
|
|
34
|
+
ngAfterContentInit() {
|
|
35
|
+
this.items().forEach(item => item._isOpen.set(item.open()));
|
|
36
|
+
}
|
|
37
|
+
toggle(index) {
|
|
38
|
+
const items = this.items();
|
|
39
|
+
const item = items[index];
|
|
40
|
+
if (item.disabled())
|
|
41
|
+
return;
|
|
42
|
+
const next = !item._isOpen();
|
|
43
|
+
if (!this.multi()) {
|
|
44
|
+
items.forEach((it, i) => { if (i !== index)
|
|
45
|
+
it._isOpen.set(false); });
|
|
46
|
+
}
|
|
47
|
+
item._isOpen.set(next);
|
|
48
|
+
}
|
|
49
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
50
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkAccordion, isStandalone: true, selector: "pk-accordion", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "items", predicate: PkAccordionItem, isSignal: true }], ngImport: i0, template: "<div class=\"pk-accordion\">\n @for (item of items(); track $index) {\n <div\n class=\"pk-accordion-item\"\n [class.pk-accordion-item--open]=\"item._isOpen()\"\n [class.pk-accordion-item--disabled]=\"item.disabled()\"\n >\n <button\n class=\"pk-accordion-item__header\"\n type=\"button\"\n [attr.aria-expanded]=\"item._isOpen()\"\n [attr.aria-disabled]=\"item.disabled() || null\"\n [disabled]=\"item.disabled() || null\"\n (click)=\"toggle($index)\"\n >\n <span class=\"pk-accordion-item__label\">{{ item.label() }}</span>\n <svg\n class=\"pk-accordion-item__chevron\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </button>\n\n <div class=\"pk-accordion-item__body\" role=\"region\">\n <div class=\"pk-accordion-item__body-inner\">\n <div class=\"pk-accordion-item__content\">\n <ng-container *ngTemplateOutlet=\"item.content()\" />\n </div>\n </div>\n </div>\n </div>\n }\n</div>\n", styles: [".pk-accordion{border:1px solid #e0e0e0;border-radius:6px;overflow:hidden}.pk-accordion-item{border-bottom:1px solid #e0e0e0}.pk-accordion-item:last-child{border-bottom:none}.pk-accordion-item__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 16px;background:#fff;border:none;cursor:pointer;text-align:left;font-size:.95rem;font-weight:500;color:#333;transition:background .15s,color .15s}.pk-accordion-item__header:hover:not(:disabled){background:#f5f5f5;color:var(--pk-btn-primary, #1976d2)}.pk-accordion-item--open .pk-accordion-item__header{color:var(--pk-btn-primary, #1976d2)}.pk-accordion-item--disabled .pk-accordion-item__header{cursor:not-allowed;color:#bdbdbd}.pk-accordion-item__chevron{flex-shrink:0;width:18px;height:18px;transition:transform .25s ease;color:#888}.pk-accordion-item--open .pk-accordion-item__chevron{transform:rotate(180deg);color:var(--pk-btn-primary, #1976d2)}.pk-accordion-item__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}.pk-accordion-item--open .pk-accordion-item__body{grid-template-rows:1fr}.pk-accordion-item__body-inner{overflow:hidden}.pk-accordion-item__content{padding:4px 16px 16px;color:#555;font-size:.9rem;line-height:1.6}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
51
|
+
}
|
|
52
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkAccordion, decorators: [{
|
|
53
|
+
type: Component,
|
|
54
|
+
args: [{ selector: 'pk-accordion', imports: [NgTemplateOutlet], template: "<div class=\"pk-accordion\">\n @for (item of items(); track $index) {\n <div\n class=\"pk-accordion-item\"\n [class.pk-accordion-item--open]=\"item._isOpen()\"\n [class.pk-accordion-item--disabled]=\"item.disabled()\"\n >\n <button\n class=\"pk-accordion-item__header\"\n type=\"button\"\n [attr.aria-expanded]=\"item._isOpen()\"\n [attr.aria-disabled]=\"item.disabled() || null\"\n [disabled]=\"item.disabled() || null\"\n (click)=\"toggle($index)\"\n >\n <span class=\"pk-accordion-item__label\">{{ item.label() }}</span>\n <svg\n class=\"pk-accordion-item__chevron\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </button>\n\n <div class=\"pk-accordion-item__body\" role=\"region\">\n <div class=\"pk-accordion-item__body-inner\">\n <div class=\"pk-accordion-item__content\">\n <ng-container *ngTemplateOutlet=\"item.content()\" />\n </div>\n </div>\n </div>\n </div>\n }\n</div>\n", styles: [".pk-accordion{border:1px solid #e0e0e0;border-radius:6px;overflow:hidden}.pk-accordion-item{border-bottom:1px solid #e0e0e0}.pk-accordion-item:last-child{border-bottom:none}.pk-accordion-item__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 16px;background:#fff;border:none;cursor:pointer;text-align:left;font-size:.95rem;font-weight:500;color:#333;transition:background .15s,color .15s}.pk-accordion-item__header:hover:not(:disabled){background:#f5f5f5;color:var(--pk-btn-primary, #1976d2)}.pk-accordion-item--open .pk-accordion-item__header{color:var(--pk-btn-primary, #1976d2)}.pk-accordion-item--disabled .pk-accordion-item__header{cursor:not-allowed;color:#bdbdbd}.pk-accordion-item__chevron{flex-shrink:0;width:18px;height:18px;transition:transform .25s ease;color:#888}.pk-accordion-item--open .pk-accordion-item__chevron{transform:rotate(180deg);color:var(--pk-btn-primary, #1976d2)}.pk-accordion-item__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}.pk-accordion-item--open .pk-accordion-item__body{grid-template-rows:1fr}.pk-accordion-item__body-inner{overflow:hidden}.pk-accordion-item__content{padding:4px 16px 16px;color:#555;font-size:.9rem;line-height:1.6}\n"] }]
|
|
55
|
+
}], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PkAccordionItem), { isSignal: true }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }] } });
|
|
56
|
+
|
|
12
57
|
class PkTab {
|
|
13
58
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
14
59
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
@@ -102,11 +147,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
102
147
|
class PkToastr {
|
|
103
148
|
toastr = inject(PkToastrService);
|
|
104
149
|
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
|
|
150
|
+
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
151
|
}
|
|
107
152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkToastr, decorators: [{
|
|
108
153
|
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
|
|
154
|
+
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
155
|
}] });
|
|
111
156
|
|
|
112
157
|
var pkToastr = /*#__PURE__*/Object.freeze({
|
|
@@ -296,11 +341,11 @@ class PkModal {
|
|
|
296
341
|
}
|
|
297
342
|
}
|
|
298
343
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
299
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkModal, isStandalone: true, selector: "pk-modal", inputs: { openModal: { classPropertyName: "openModal", publicName: "openModal", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, blur: { classPropertyName: "blur", publicName: "blur", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, closeAny: { classPropertyName: "closeAny", publicName: "closeAny", isSignal: true, isRequired: false, transformFunction: null }, closeMarker: { classPropertyName: "closeMarker", publicName: "closeMarker", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, ngImport: i0, template: "@if (openModal()) {\n <div\n class=\"pk-modal-overlay\"\n [class.pk-modal-overlay--blur]=\"blur()\"\n (click)=\"onOverlayClick()\"\n >\n <div\n [class]=\"dialogClass()\"\n [ngStyle]=\"customStyle()\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (closeMarker()) {\n <button\n class=\"pk-modal-close-btn\"\n type=\"button\"\n aria-label=\"Close modal\"\n (click)=\"close()\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n </button>\n }\n\n <ng-content select=\"pk-modal-header\" />\n <ng-content select=\"pk-modal-body\" />\n <ng-content select=\"pk-modal-footer\" />\n <!-- fallback for unslotted content -->\n <ng-content />\n </div>\n </div>\n}\n", styles: [".pk-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:
|
|
344
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkModal, isStandalone: true, selector: "pk-modal", inputs: { openModal: { classPropertyName: "openModal", publicName: "openModal", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, blur: { classPropertyName: "blur", publicName: "blur", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, closeAny: { classPropertyName: "closeAny", publicName: "closeAny", isSignal: true, isRequired: false, transformFunction: null }, closeMarker: { classPropertyName: "closeMarker", publicName: "closeMarker", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, ngImport: i0, template: "@if (openModal()) {\n <div\n class=\"pk-modal-overlay\"\n [class.pk-modal-overlay--blur]=\"blur()\"\n (click)=\"onOverlayClick()\"\n >\n <div\n [class]=\"dialogClass()\"\n [ngStyle]=\"customStyle()\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (closeMarker()) {\n <button\n class=\"pk-modal-close-btn\"\n type=\"button\"\n aria-label=\"Close modal\"\n (click)=\"close()\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n </button>\n }\n\n <ng-content select=\"pk-modal-header\" />\n <ng-content select=\"pk-modal-body\" />\n <ng-content select=\"pk-modal-footer\" />\n <!-- fallback for unslotted content -->\n <ng-content />\n </div>\n </div>\n}\n", styles: [".pk-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:9001;padding:16px;animation:pkModalFadeIn .18s ease}.pk-modal-overlay--blur{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.pk-modal-dialog{background:#fff;border:1px solid #eceff3;border-radius:10px;box-shadow:0 20px 60px #00000038,0 4px 16px #0000001a;position:relative;display:flex;flex-direction:column;width:100%;max-height:calc(100vh - 32px);animation:pkModalSlideIn .18s ease;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.pk-modal-dialog:before{content:\"\";position:absolute;top:0;left:0;right:0;height:5px;border-radius:10px 10px 0 0;background:transparent;pointer-events:none}.pk-modal-dialog--xs{max-width:280px}.pk-modal-dialog--sm{max-width:360px}.pk-modal-dialog--md{max-width:520px}.pk-modal-dialog--lg{max-width:760px}.pk-modal-dialog--xl{max-width:1020px}.pk-modal-dialog--2xl{max-width:1280px}.pk-modal-dialog--full{max-width:100%;height:calc(100vh - 32px);border-radius:0}.pk-modal-dialog--full:before{border-radius:0}.pk-modal-dialog--theme-white,.pk-modal-dialog--theme-none{background:#fff;border-color:#eceff3}.pk-modal-dialog--theme-success{background:linear-gradient(180deg,#f6fff9,#fff 22%);border-color:#b7e8cb;box-shadow:0 22px 60px #00000029,0 4px 14px #16a34a29}.pk-modal-dialog--theme-success:before{background:linear-gradient(90deg,#16a34a,#22c55e)}.pk-modal-dialog--theme-warn{background:linear-gradient(180deg,#fffdf5,#fff 22%);border-color:#f7d9a6;box-shadow:0 22px 60px #00000029,0 4px 14px #f59e0b2b}.pk-modal-dialog--theme-warn:before{background:linear-gradient(90deg,#f59e0b,#fbbf24)}.pk-modal-dialog--theme-error{background:linear-gradient(180deg,#fff8f8,#fff 22%);border-color:#f5b6b6;box-shadow:0 22px 60px #00000029,0 4px 14px #dc262629}.pk-modal-dialog--theme-error:before{background:linear-gradient(90deg,#dc2626,#ef4444)}.pk-modal-dialog--theme-sky{background:linear-gradient(180deg,#f4fbff,#fff 22%);border-color:#b8e4fd;box-shadow:0 22px 60px #00000029,0 4px 14px #0ea5e92b}.pk-modal-dialog--theme-sky:before{background:linear-gradient(90deg,#0ea5e9,#38bdf8)}.pk-modal-dialog--theme-blue{background:linear-gradient(180deg,#f5f8ff,#fff 22%);border-color:#b7c9fa;box-shadow:0 22px 60px #00000029,0 4px 14px #2563eb2b}.pk-modal-dialog--theme-blue:before{background:linear-gradient(90deg,#2563eb,#3b82f6)}.pk-modal-dialog--theme-gray{background:linear-gradient(180deg,#f8fafc,#fff 22%);border-color:#d2d8e1;box-shadow:0 22px 60px #00000029,0 4px 14px #47556929}.pk-modal-dialog--theme-gray:before{background:linear-gradient(90deg,#475569,#64748b)}.pk-modal-close-btn{position:absolute;top:12px;right:12px;width:32px;height:32px;padding:0;background:transparent;border:none;border-radius:6px;cursor:pointer;color:#999;display:flex;align-items:center;justify-content:center;z-index:1;transition:background .15s,color .15s}.pk-modal-close-btn:hover{background:#f0f0f0;color:#333}.pk-modal-close-btn:active{background:#e0e0e0}@keyframes pkModalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes pkModalSlideIn{0%{opacity:0;transform:scale(.96) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
300
345
|
}
|
|
301
346
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkModal, decorators: [{
|
|
302
347
|
type: Component,
|
|
303
|
-
args: [{ selector: 'pk-modal', imports: [NgStyle], template: "@if (openModal()) {\n <div\n class=\"pk-modal-overlay\"\n [class.pk-modal-overlay--blur]=\"blur()\"\n (click)=\"onOverlayClick()\"\n >\n <div\n [class]=\"dialogClass()\"\n [ngStyle]=\"customStyle()\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (closeMarker()) {\n <button\n class=\"pk-modal-close-btn\"\n type=\"button\"\n aria-label=\"Close modal\"\n (click)=\"close()\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n </button>\n }\n\n <ng-content select=\"pk-modal-header\" />\n <ng-content select=\"pk-modal-body\" />\n <ng-content select=\"pk-modal-footer\" />\n <!-- fallback for unslotted content -->\n <ng-content />\n </div>\n </div>\n}\n", styles: [".pk-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:
|
|
348
|
+
args: [{ selector: 'pk-modal', imports: [NgStyle], template: "@if (openModal()) {\n <div\n class=\"pk-modal-overlay\"\n [class.pk-modal-overlay--blur]=\"blur()\"\n (click)=\"onOverlayClick()\"\n >\n <div\n [class]=\"dialogClass()\"\n [ngStyle]=\"customStyle()\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (closeMarker()) {\n <button\n class=\"pk-modal-close-btn\"\n type=\"button\"\n aria-label=\"Close modal\"\n (click)=\"close()\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n </button>\n }\n\n <ng-content select=\"pk-modal-header\" />\n <ng-content select=\"pk-modal-body\" />\n <ng-content select=\"pk-modal-footer\" />\n <!-- fallback for unslotted content -->\n <ng-content />\n </div>\n </div>\n}\n", styles: [".pk-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:9001;padding:16px;animation:pkModalFadeIn .18s ease}.pk-modal-overlay--blur{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.pk-modal-dialog{background:#fff;border:1px solid #eceff3;border-radius:10px;box-shadow:0 20px 60px #00000038,0 4px 16px #0000001a;position:relative;display:flex;flex-direction:column;width:100%;max-height:calc(100vh - 32px);animation:pkModalSlideIn .18s ease;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.pk-modal-dialog:before{content:\"\";position:absolute;top:0;left:0;right:0;height:5px;border-radius:10px 10px 0 0;background:transparent;pointer-events:none}.pk-modal-dialog--xs{max-width:280px}.pk-modal-dialog--sm{max-width:360px}.pk-modal-dialog--md{max-width:520px}.pk-modal-dialog--lg{max-width:760px}.pk-modal-dialog--xl{max-width:1020px}.pk-modal-dialog--2xl{max-width:1280px}.pk-modal-dialog--full{max-width:100%;height:calc(100vh - 32px);border-radius:0}.pk-modal-dialog--full:before{border-radius:0}.pk-modal-dialog--theme-white,.pk-modal-dialog--theme-none{background:#fff;border-color:#eceff3}.pk-modal-dialog--theme-success{background:linear-gradient(180deg,#f6fff9,#fff 22%);border-color:#b7e8cb;box-shadow:0 22px 60px #00000029,0 4px 14px #16a34a29}.pk-modal-dialog--theme-success:before{background:linear-gradient(90deg,#16a34a,#22c55e)}.pk-modal-dialog--theme-warn{background:linear-gradient(180deg,#fffdf5,#fff 22%);border-color:#f7d9a6;box-shadow:0 22px 60px #00000029,0 4px 14px #f59e0b2b}.pk-modal-dialog--theme-warn:before{background:linear-gradient(90deg,#f59e0b,#fbbf24)}.pk-modal-dialog--theme-error{background:linear-gradient(180deg,#fff8f8,#fff 22%);border-color:#f5b6b6;box-shadow:0 22px 60px #00000029,0 4px 14px #dc262629}.pk-modal-dialog--theme-error:before{background:linear-gradient(90deg,#dc2626,#ef4444)}.pk-modal-dialog--theme-sky{background:linear-gradient(180deg,#f4fbff,#fff 22%);border-color:#b8e4fd;box-shadow:0 22px 60px #00000029,0 4px 14px #0ea5e92b}.pk-modal-dialog--theme-sky:before{background:linear-gradient(90deg,#0ea5e9,#38bdf8)}.pk-modal-dialog--theme-blue{background:linear-gradient(180deg,#f5f8ff,#fff 22%);border-color:#b7c9fa;box-shadow:0 22px 60px #00000029,0 4px 14px #2563eb2b}.pk-modal-dialog--theme-blue:before{background:linear-gradient(90deg,#2563eb,#3b82f6)}.pk-modal-dialog--theme-gray{background:linear-gradient(180deg,#f8fafc,#fff 22%);border-color:#d2d8e1;box-shadow:0 22px 60px #00000029,0 4px 14px #47556929}.pk-modal-dialog--theme-gray:before{background:linear-gradient(90deg,#475569,#64748b)}.pk-modal-close-btn{position:absolute;top:12px;right:12px;width:32px;height:32px;padding:0;background:transparent;border:none;border-radius:6px;cursor:pointer;color:#999;display:flex;align-items:center;justify-content:center;z-index:1;transition:background .15s,color .15s}.pk-modal-close-btn:hover{background:#f0f0f0;color:#333}.pk-modal-close-btn:active{background:#e0e0e0}@keyframes pkModalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes pkModalSlideIn{0%{opacity:0;transform:scale(.96) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"] }]
|
|
304
349
|
}], propDecorators: { openModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "openModal", required: false }] }], customStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyle", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], blur: [{ type: i0.Input, args: [{ isSignal: true, alias: "blur", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], closeAny: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAny", required: false }] }], closeMarker: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeMarker", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }] } });
|
|
305
350
|
|
|
306
351
|
const PK_ICONS = {
|
|
@@ -2720,11 +2765,17 @@ class PkTooltip {
|
|
|
2720
2765
|
if (!text || this.tooltipEl)
|
|
2721
2766
|
return;
|
|
2722
2767
|
const tooltip = document.createElement('div');
|
|
2723
|
-
|
|
2768
|
+
const rawType = this.pkTooltipType();
|
|
2769
|
+
const isOutline = rawType.endsWith('-outline');
|
|
2770
|
+
const baseType = isOutline ? rawType.slice(0, -'-outline'.length) : rawType;
|
|
2771
|
+
const classes = [
|
|
2724
2772
|
'pk-tooltip-box',
|
|
2725
2773
|
`pk-tooltip-box--${this.pkTooltipPosition()}`,
|
|
2726
|
-
`pk-tooltip-box--${
|
|
2727
|
-
]
|
|
2774
|
+
`pk-tooltip-box--${baseType}`,
|
|
2775
|
+
];
|
|
2776
|
+
if (isOutline)
|
|
2777
|
+
classes.push('pk-tooltip-box--outline');
|
|
2778
|
+
tooltip.className = classes.join(' ');
|
|
2728
2779
|
tooltip.textContent = text;
|
|
2729
2780
|
tooltip.style.visibility = 'hidden';
|
|
2730
2781
|
document.body.appendChild(tooltip);
|
|
@@ -3320,11 +3371,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3320
3371
|
/*
|
|
3321
3372
|
* Public API Surface of ngx-pk-ui
|
|
3322
3373
|
*/
|
|
3323
|
-
// pk-
|
|
3374
|
+
// pk-accordion
|
|
3324
3375
|
|
|
3325
3376
|
/**
|
|
3326
3377
|
* Generated bundle index. Do not edit.
|
|
3327
3378
|
*/
|
|
3328
3379
|
|
|
3329
|
-
export { DatepickerService, HolidayService, NowrapDirective, PK_ICONS, PkAlert, PkAlertService, PkAutocompleteComponent, PkDatagridComponent, PkDatagridModule, PkDatepickerComponent, PkDgActionComponent, PkDgCellComponent, PkDgFooterComponent, PkDgHeaderComponent, PkDgPageSizeComponent, PkDgPaginationComponent, PkDgRowComponent, PkDgRowExpandComponent, PkDgRowIsExpandDirective, PkDgRowsDirective, PkIcon, PkModal, PkModalBody, PkModalFooter, PkModalHeader, PkProgressComponent, PkSelectComponent, PkTab, PkTabs, PkToastr, PkToastrService, PkTooltip, PkTreeviewComponent, PkTreeviewModule, PkTreeviewNodeComponent, PkTypeaheadComponent };
|
|
3380
|
+
export { DatepickerService, HolidayService, NowrapDirective, PK_ICONS, PkAccordion, PkAccordionItem, PkAlert, PkAlertService, PkAutocompleteComponent, PkDatagridComponent, PkDatagridModule, PkDatepickerComponent, PkDgActionComponent, PkDgCellComponent, PkDgFooterComponent, PkDgHeaderComponent, PkDgPageSizeComponent, PkDgPaginationComponent, PkDgRowComponent, PkDgRowExpandComponent, PkDgRowIsExpandDirective, PkDgRowsDirective, PkIcon, PkModal, PkModalBody, PkModalFooter, PkModalHeader, PkProgressComponent, PkSelectComponent, PkTab, PkTabs, PkToastr, PkToastrService, PkTooltip, PkTreeviewComponent, PkTreeviewModule, PkTreeviewNodeComponent, PkTypeaheadComponent };
|
|
3330
3381
|
//# sourceMappingURL=ngx-pk-ui.mjs.map
|