ngx-pk-ui 1.1.3 → 1.1.5
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 +50 -5
- package/fesm2022/ngx-pk-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/pk-table.css +153 -0
- package/styles/pk-toggle.css +190 -0
- package/styles/pk-ui.css +2 -0
- package/types/ngx-pk-ui.d.ts +22 -1
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 */ []));
|
|
@@ -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 = {
|
|
@@ -3326,11 +3371,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3326
3371
|
/*
|
|
3327
3372
|
* Public API Surface of ngx-pk-ui
|
|
3328
3373
|
*/
|
|
3329
|
-
// pk-
|
|
3374
|
+
// pk-accordion
|
|
3330
3375
|
|
|
3331
3376
|
/**
|
|
3332
3377
|
* Generated bundle index. Do not edit.
|
|
3333
3378
|
*/
|
|
3334
3379
|
|
|
3335
|
-
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 };
|
|
3336
3381
|
//# sourceMappingURL=ngx-pk-ui.mjs.map
|