ng-prime-tools 1.0.76 → 1.0.77
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.
|
@@ -2704,12 +2704,22 @@ class PTTextInputComponent {
|
|
|
2704
2704
|
}
|
|
2705
2705
|
return '';
|
|
2706
2706
|
}
|
|
2707
|
+
hasError() {
|
|
2708
|
+
const control = this.formGroup.get(this.formField.name);
|
|
2709
|
+
return !!(control?.invalid && (control.touched || control.dirty));
|
|
2710
|
+
}
|
|
2711
|
+
hasCharacterCounter() {
|
|
2712
|
+
return !this.formField.disabled && this.formField.maxLength !== undefined;
|
|
2713
|
+
}
|
|
2714
|
+
hasInfoRow() {
|
|
2715
|
+
return this.hasError() || this.hasCharacterCounter();
|
|
2716
|
+
}
|
|
2707
2717
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2708
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTTextInputComponent, isStandalone: false, selector: "pt-text-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "@if (!formField.hidden) {\n <div\n [formGroup]=\"formGroup\"\n class=\"form-field\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n margin: formField.margin || null,\n }\"\n >\n @if (formField.label) {\n <label [for]=\"inputId\" class=\"field-label\">\n {{ formField.label }}\n </label>\n }\n\n @if (formField.iconClass) {\n <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n <p-inputIcon [styleClass]=\"formField.iconClass\"></p-inputIcon>\n\n @if (isPasswordInput()) {\n <p-password\n [inputId]=\"inputId\"\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [toggleMask]=\"getPasswordToggleMask()\"\n [feedback]=\"getPasswordFeedback()\"\n [attr.name]=\"formField.name\"\n [inputStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n }\"\n styleClass=\"pt-password-input\"\n ></p-password>\n } @else {\n <input\n [id]=\"inputId\"\n [attr.name]=\"formField.name\"\n [type]=\"getInputType()\"\n pInputText\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [attr.minlength]=\"formField.minLength\"\n [attr.maxlength]=\"formField.maxLength\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n }\"\n />\n }\n </p-iconField>\n } @else {\n @if (isPasswordInput()) {\n <p-password\n [inputId]=\"inputId\"\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [toggleMask]=\"getPasswordToggleMask()\"\n [feedback]=\"getPasswordFeedback()\"\n [attr.name]=\"formField.name\"\n [inputStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n }\"\n styleClass=\"pt-password-input\"\n ></p-password>\n } @else {\n <input\n [id]=\"inputId\"\n [attr.name]=\"formField.name\"\n [type]=\"getInputType()\"\n pInputText\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [attr.minlength]=\"formField.minLength\"\n [attr.maxlength]=\"formField.maxLength\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n }\"\n />\n }\n }\n\n <div class=\"form-info-row\">\n
|
|
2718
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTTextInputComponent, isStandalone: false, selector: "pt-text-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "@if (!formField.hidden) {\n <div\n [formGroup]=\"formGroup\"\n class=\"form-field\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n margin: formField.margin || null,\n }\"\n >\n @if (formField.label) {\n <label [for]=\"inputId\" class=\"field-label\">\n {{ formField.label }}\n </label>\n }\n\n @if (formField.iconClass) {\n <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n <p-inputIcon [styleClass]=\"formField.iconClass\"></p-inputIcon>\n\n @if (isPasswordInput()) {\n <p-password\n [inputId]=\"inputId\"\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [toggleMask]=\"getPasswordToggleMask()\"\n [feedback]=\"getPasswordFeedback()\"\n [attr.name]=\"formField.name\"\n [inputStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n }\"\n styleClass=\"pt-password-input\"\n ></p-password>\n } @else {\n <input\n [id]=\"inputId\"\n [attr.name]=\"formField.name\"\n [type]=\"getInputType()\"\n pInputText\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [attr.minlength]=\"formField.minLength\"\n [attr.maxlength]=\"formField.maxLength\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n }\"\n />\n }\n </p-iconField>\n } @else {\n @if (isPasswordInput()) {\n <p-password\n [inputId]=\"inputId\"\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [toggleMask]=\"getPasswordToggleMask()\"\n [feedback]=\"getPasswordFeedback()\"\n [attr.name]=\"formField.name\"\n [inputStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n }\"\n styleClass=\"pt-password-input\"\n ></p-password>\n } @else {\n <input\n [id]=\"inputId\"\n [attr.name]=\"formField.name\"\n [type]=\"getInputType()\"\n pInputText\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [attr.minlength]=\"formField.minLength\"\n [attr.maxlength]=\"formField.maxLength\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n }\"\n />\n }\n }\n\n @if (hasInfoRow()) {\n <div class=\"form-info-row\">\n @if (hasError()) {\n <small class=\"field-error\">\n {{ getErrorMessage() }}\n </small>\n }\n\n <div class=\"spacer\"></div>\n\n @if (hasCharacterCounter()) {\n <div class=\"character-counter\">\n {{ characterCount }}/{{ formField.maxLength }} characters\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:block;width:100%}.form-field{width:100%}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.form-info-row{display:flex;align-items:center;gap:.5rem;min-height:1.25rem;margin-top:.35rem}.spacer{flex:1 1 auto}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.character-counter{font-size:.8rem;font-weight:500;color:#64748b;white-space:nowrap}.form-field input.ng-invalid.ng-touched,.form-field input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input{width:100%!important;display:block!important}::ng-deep .pt-password-input .p-password{width:100%!important;display:block!important}::ng-deep .pt-password-input .p-password-input{width:100%!important}::ng-deep .pt-password-input input{width:100%!important;box-sizing:border-box}::ng-deep .pt-password-input.ng-invalid.ng-touched input,::ng-deep .pt-password-input.ng-invalid.ng-dirty input,::ng-deep .pt-password-input input.ng-invalid.ng-touched,::ng-deep .pt-password-input input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input .p-password-toggle-mask-icon,::ng-deep .pt-password-input .p-password-toggle-mask{right:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i6$1.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }] }); }
|
|
2709
2719
|
}
|
|
2710
2720
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTTextInputComponent, decorators: [{
|
|
2711
2721
|
type: Component,
|
|
2712
|
-
args: [{ selector: 'pt-text-input', standalone: false, template: "@if (!formField.hidden) {\n <div\n [formGroup]=\"formGroup\"\n class=\"form-field\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n margin: formField.margin || null,\n }\"\n >\n @if (formField.label) {\n <label [for]=\"inputId\" class=\"field-label\">\n {{ formField.label }}\n </label>\n }\n\n @if (formField.iconClass) {\n <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n <p-inputIcon [styleClass]=\"formField.iconClass\"></p-inputIcon>\n\n @if (isPasswordInput()) {\n <p-password\n [inputId]=\"inputId\"\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [toggleMask]=\"getPasswordToggleMask()\"\n [feedback]=\"getPasswordFeedback()\"\n [attr.name]=\"formField.name\"\n [inputStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n }\"\n styleClass=\"pt-password-input\"\n ></p-password>\n } @else {\n <input\n [id]=\"inputId\"\n [attr.name]=\"formField.name\"\n [type]=\"getInputType()\"\n pInputText\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [attr.minlength]=\"formField.minLength\"\n [attr.maxlength]=\"formField.maxLength\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n }\"\n />\n }\n </p-iconField>\n } @else {\n @if (isPasswordInput()) {\n <p-password\n [inputId]=\"inputId\"\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [toggleMask]=\"getPasswordToggleMask()\"\n [feedback]=\"getPasswordFeedback()\"\n [attr.name]=\"formField.name\"\n [inputStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n }\"\n styleClass=\"pt-password-input\"\n ></p-password>\n } @else {\n <input\n [id]=\"inputId\"\n [attr.name]=\"formField.name\"\n [type]=\"getInputType()\"\n pInputText\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [attr.minlength]=\"formField.minLength\"\n [attr.maxlength]=\"formField.maxLength\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n }\"\n />\n }\n }\n\n <div class=\"form-info-row\">\n
|
|
2722
|
+
args: [{ selector: 'pt-text-input', standalone: false, template: "@if (!formField.hidden) {\n <div\n [formGroup]=\"formGroup\"\n class=\"form-field\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n margin: formField.margin || null,\n }\"\n >\n @if (formField.label) {\n <label [for]=\"inputId\" class=\"field-label\">\n {{ formField.label }}\n </label>\n }\n\n @if (formField.iconClass) {\n <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n <p-inputIcon [styleClass]=\"formField.iconClass\"></p-inputIcon>\n\n @if (isPasswordInput()) {\n <p-password\n [inputId]=\"inputId\"\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [toggleMask]=\"getPasswordToggleMask()\"\n [feedback]=\"getPasswordFeedback()\"\n [attr.name]=\"formField.name\"\n [inputStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n }\"\n styleClass=\"pt-password-input\"\n ></p-password>\n } @else {\n <input\n [id]=\"inputId\"\n [attr.name]=\"formField.name\"\n [type]=\"getInputType()\"\n pInputText\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [attr.minlength]=\"formField.minLength\"\n [attr.maxlength]=\"formField.maxLength\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n }\"\n />\n }\n </p-iconField>\n } @else {\n @if (isPasswordInput()) {\n <p-password\n [inputId]=\"inputId\"\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [toggleMask]=\"getPasswordToggleMask()\"\n [feedback]=\"getPasswordFeedback()\"\n [attr.name]=\"formField.name\"\n [inputStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n }\"\n styleClass=\"pt-password-input\"\n ></p-password>\n } @else {\n <input\n [id]=\"inputId\"\n [attr.name]=\"formField.name\"\n [type]=\"getInputType()\"\n pInputText\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [attr.minlength]=\"formField.minLength\"\n [attr.maxlength]=\"formField.maxLength\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n }\"\n />\n }\n }\n\n @if (hasInfoRow()) {\n <div class=\"form-info-row\">\n @if (hasError()) {\n <small class=\"field-error\">\n {{ getErrorMessage() }}\n </small>\n }\n\n <div class=\"spacer\"></div>\n\n @if (hasCharacterCounter()) {\n <div class=\"character-counter\">\n {{ characterCount }}/{{ formField.maxLength }} characters\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:block;width:100%}.form-field{width:100%}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.form-info-row{display:flex;align-items:center;gap:.5rem;min-height:1.25rem;margin-top:.35rem}.spacer{flex:1 1 auto}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.character-counter{font-size:.8rem;font-weight:500;color:#64748b;white-space:nowrap}.form-field input.ng-invalid.ng-touched,.form-field input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input{width:100%!important;display:block!important}::ng-deep .pt-password-input .p-password{width:100%!important;display:block!important}::ng-deep .pt-password-input .p-password-input{width:100%!important}::ng-deep .pt-password-input input{width:100%!important;box-sizing:border-box}::ng-deep .pt-password-input.ng-invalid.ng-touched input,::ng-deep .pt-password-input.ng-invalid.ng-dirty input,::ng-deep .pt-password-input input.ng-invalid.ng-touched,::ng-deep .pt-password-input input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input .p-password-toggle-mask-icon,::ng-deep .pt-password-input .p-password-toggle-mask{right:1rem}\n"] }]
|
|
2713
2723
|
}], propDecorators: { formGroup: [{
|
|
2714
2724
|
type: Input
|
|
2715
2725
|
}], formField: [{
|
|
@@ -4537,7 +4547,11 @@ class PTSideBarMenuComponent {
|
|
|
4537
4547
|
this.searchField = {
|
|
4538
4548
|
name: 'search',
|
|
4539
4549
|
placeholder: 'Search...',
|
|
4550
|
+
type: FormInputTypeEnum.TEXT,
|
|
4540
4551
|
iconClass: 'pi pi-search',
|
|
4552
|
+
iconPosition: 'left',
|
|
4553
|
+
width: '240px',
|
|
4554
|
+
height: '42px',
|
|
4541
4555
|
};
|
|
4542
4556
|
this.filteredMenus = [];
|
|
4543
4557
|
}
|
|
@@ -4696,11 +4710,11 @@ class PTSideBarMenuComponent {
|
|
|
4696
4710
|
}));
|
|
4697
4711
|
}
|
|
4698
4712
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTSideBarMenuComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4699
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTSideBarMenuComponent, isStandalone: false, selector: "pt-side-bar-menu", inputs: { menuConfig: "menuConfig" }, ngImport: i0, template: "<div class=\"pt-side-bar-menu\">\n @if (menuConfig.searchable) {\n <pt-card\n [config]=\"searchCardConfig\"\n [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n >\n <div class=\"search-input\">\n <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n </pt-text-input>\n </div>\n </pt-card>\n }\n\n <pt-card\n [config]=\"cardConfig\"\n [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n >\n <ul class=\"menu-list\">\n <ng-container\n *ngTemplateOutlet=\"\n recursiveMenu;\n context: { $implicit: filteredMenus, level: 0 }\n \"\n ></ng-container>\n </ul>\n </pt-card>\n</div>\n\n<ng-template #recursiveMenu let-menus let-level=\"level\">\n @for (item of menus; track item) {\n <li\n class=\"menu-item\"\n [ngClass]=\"{\n 'menu-item-expanded': item.isExpanded,\n 'submenu-level-item': level > 0,\n }\"\n [attr.data-level]=\"level\"\n [ngStyle]=\"getMenuItemStyles()\"\n >\n <!-- item without children -->\n @if (!hasChildren(item)) {\n <a\n [routerLink]=\"item.url\"\n [class.menu-link]=\"level === 0\"\n [class.submenu-link]=\"level > 0\"\n [ngStyle]=\"\n level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n \"\n >\n <i [ngClass]=\"item.icon\"></i>\n <span [class.submenu-title]=\"level > 0\">{{ item.label }}</span>\n @if (item.badge) {\n <span\n [ngStyle]=\"getBadgeStyles(item.badge)\"\n class=\"badge\"\n >\n {{ item.badge.count }}\n </span>\n }\n </a>\n }\n <!-- item with children -->\n @if (hasChildren(item)) {\n <a\n href=\"#\"\n [class.menu-link]=\"level === 0\"\n [class.submenu-link]=\"level > 0\"\n (click)=\"toggleMenu(item, $event)\"\n [ngStyle]=\"\n level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n \"\n >\n <i [ngClass]=\"item.icon\"></i>\n <span [class.submenu-title]=\"level > 0\">{{ item.label }}</span>\n @if (item.badge) {\n <span\n [ngStyle]=\"getBadgeStyles(item.badge)\"\n class=\"badge\"\n >\n {{ item.badge.count }}\n </span>\n }\n <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n </a>\n }\n @if (hasChildren(item)) {\n <div\n class=\"submenu-wrapper\"\n [class.expanded]=\"item.isExpanded\"\n >\n <ul\n class=\"submenu-list\"\n [ngClass]=\"{\n 'submenu-list-root': level === 0,\n 'submenu-list-nested': level > 0,\n }\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n recursiveMenu;\n context: { $implicit: item.children, level: level + 1 }\n \"\n ></ng-container>\n </ul>\n </div>\n }\n </li>\n }\n</ng-template>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:6px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0;margin:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out;width:250px}.pt-side-bar-menu .submenu-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;min-height:0}.pt-side-bar-menu .submenu-wrapper.expanded{grid-template-rows:1fr}.pt-side-bar-menu .submenu-wrapper:not(.expanded){margin:0!important;padding:0!important}.pt-side-bar-menu .submenu-list{overflow:hidden;min-height:0;list-style-type:none;margin-top:5px;margin-bottom:0;position:relative}.pt-side-bar-menu .submenu-wrapper:not(.expanded) .submenu-list{margin:0!important;padding-top:0!important;padding-bottom:0!important;border-left:none!important}.pt-side-bar-menu .submenu-list-root{border-left:1px solid #e5e7eb;margin-left:23px;padding-left:25px;padding-top:5px;padding-bottom:5px}.pt-side-bar-menu .submenu-list-root:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-list-nested{border-left:1px solid #2f3b46;margin-left:18px;padding-left:20px;padding-top:4px;padding-bottom:4px}.pt-side-bar-menu .submenu-item,.pt-side-bar-menu .submenu-level-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-level-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:22px;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-title{margin-left:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
|
|
4713
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTSideBarMenuComponent, isStandalone: false, selector: "pt-side-bar-menu", inputs: { menuConfig: "menuConfig" }, ngImport: i0, template: "<div class=\"pt-side-bar-menu\">\n @if (menuConfig.searchable) {\n <pt-card\n [config]=\"searchCardConfig\"\n [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n >\n <div class=\"search-input\">\n <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n </pt-text-input>\n </div>\n </pt-card>\n }\n\n <pt-card\n [config]=\"cardConfig\"\n [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n >\n <ul class=\"menu-list\">\n <ng-container\n *ngTemplateOutlet=\"\n recursiveMenu;\n context: { $implicit: filteredMenus, level: 0 }\n \"\n ></ng-container>\n </ul>\n </pt-card>\n</div>\n\n<ng-template #recursiveMenu let-menus let-level=\"level\">\n @for (item of menus; track item) {\n <li\n class=\"menu-item\"\n [ngClass]=\"{\n 'menu-item-expanded': item.isExpanded,\n 'submenu-level-item': level > 0,\n }\"\n [attr.data-level]=\"level\"\n [ngStyle]=\"getMenuItemStyles()\"\n >\n <!-- item without children -->\n @if (!hasChildren(item)) {\n <a\n [routerLink]=\"item.url\"\n [class.menu-link]=\"level === 0\"\n [class.submenu-link]=\"level > 0\"\n [ngStyle]=\"\n level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n \"\n >\n <i [ngClass]=\"item.icon\"></i>\n <span [class.submenu-title]=\"level > 0\">{{ item.label }}</span>\n @if (item.badge) {\n <span\n [ngStyle]=\"getBadgeStyles(item.badge)\"\n class=\"badge\"\n >\n {{ item.badge.count }}\n </span>\n }\n </a>\n }\n <!-- item with children -->\n @if (hasChildren(item)) {\n <a\n href=\"#\"\n [class.menu-link]=\"level === 0\"\n [class.submenu-link]=\"level > 0\"\n (click)=\"toggleMenu(item, $event)\"\n [ngStyle]=\"\n level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n \"\n >\n <i [ngClass]=\"item.icon\"></i>\n <span [class.submenu-title]=\"level > 0\">{{ item.label }}</span>\n @if (item.badge) {\n <span\n [ngStyle]=\"getBadgeStyles(item.badge)\"\n class=\"badge\"\n >\n {{ item.badge.count }}\n </span>\n }\n <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n </a>\n }\n @if (hasChildren(item)) {\n <div\n class=\"submenu-wrapper\"\n [class.expanded]=\"item.isExpanded\"\n >\n <ul\n class=\"submenu-list\"\n [ngClass]=\"{\n 'submenu-list-root': level === 0,\n 'submenu-list-nested': level > 0,\n }\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n recursiveMenu;\n context: { $implicit: item.children, level: level + 1 }\n \"\n ></ng-container>\n </ul>\n </div>\n }\n </li>\n }\n</ng-template>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:6px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0;margin:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out;width:250px}.pt-side-bar-menu .submenu-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;min-height:0}.pt-side-bar-menu .submenu-wrapper.expanded{grid-template-rows:1fr}.pt-side-bar-menu .submenu-wrapper:not(.expanded){margin:0!important;padding:0!important}.pt-side-bar-menu .submenu-list{overflow:hidden;min-height:0;list-style-type:none;margin-top:5px;margin-bottom:0;position:relative}.pt-side-bar-menu .submenu-wrapper:not(.expanded) .submenu-list{margin:0!important;padding-top:0!important;padding-bottom:0!important;border-left:none!important}.pt-side-bar-menu .submenu-list-root{border-left:1px solid #e5e7eb;margin-left:23px;padding-left:25px;padding-top:5px;padding-bottom:5px}.pt-side-bar-menu .submenu-list-root:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-list-nested{border-left:1px solid #2f3b46;margin-left:18px;padding-left:20px;padding-top:4px;padding-bottom:4px}.pt-side-bar-menu .submenu-item,.pt-side-bar-menu .submenu-level-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-level-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:22px;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-title{margin-left:5px}.pt-side-bar-menu .search-input{width:100%;display:flex;align-items:center;justify-content:center}.pt-side-bar-menu .search-input pt-text-input{display:block;width:240px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
|
|
4700
4714
|
}
|
|
4701
4715
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTSideBarMenuComponent, decorators: [{
|
|
4702
4716
|
type: Component,
|
|
4703
|
-
args: [{ selector: 'pt-side-bar-menu', standalone: false, template: "<div class=\"pt-side-bar-menu\">\n @if (menuConfig.searchable) {\n <pt-card\n [config]=\"searchCardConfig\"\n [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n >\n <div class=\"search-input\">\n <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n </pt-text-input>\n </div>\n </pt-card>\n }\n\n <pt-card\n [config]=\"cardConfig\"\n [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n >\n <ul class=\"menu-list\">\n <ng-container\n *ngTemplateOutlet=\"\n recursiveMenu;\n context: { $implicit: filteredMenus, level: 0 }\n \"\n ></ng-container>\n </ul>\n </pt-card>\n</div>\n\n<ng-template #recursiveMenu let-menus let-level=\"level\">\n @for (item of menus; track item) {\n <li\n class=\"menu-item\"\n [ngClass]=\"{\n 'menu-item-expanded': item.isExpanded,\n 'submenu-level-item': level > 0,\n }\"\n [attr.data-level]=\"level\"\n [ngStyle]=\"getMenuItemStyles()\"\n >\n <!-- item without children -->\n @if (!hasChildren(item)) {\n <a\n [routerLink]=\"item.url\"\n [class.menu-link]=\"level === 0\"\n [class.submenu-link]=\"level > 0\"\n [ngStyle]=\"\n level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n \"\n >\n <i [ngClass]=\"item.icon\"></i>\n <span [class.submenu-title]=\"level > 0\">{{ item.label }}</span>\n @if (item.badge) {\n <span\n [ngStyle]=\"getBadgeStyles(item.badge)\"\n class=\"badge\"\n >\n {{ item.badge.count }}\n </span>\n }\n </a>\n }\n <!-- item with children -->\n @if (hasChildren(item)) {\n <a\n href=\"#\"\n [class.menu-link]=\"level === 0\"\n [class.submenu-link]=\"level > 0\"\n (click)=\"toggleMenu(item, $event)\"\n [ngStyle]=\"\n level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n \"\n >\n <i [ngClass]=\"item.icon\"></i>\n <span [class.submenu-title]=\"level > 0\">{{ item.label }}</span>\n @if (item.badge) {\n <span\n [ngStyle]=\"getBadgeStyles(item.badge)\"\n class=\"badge\"\n >\n {{ item.badge.count }}\n </span>\n }\n <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n </a>\n }\n @if (hasChildren(item)) {\n <div\n class=\"submenu-wrapper\"\n [class.expanded]=\"item.isExpanded\"\n >\n <ul\n class=\"submenu-list\"\n [ngClass]=\"{\n 'submenu-list-root': level === 0,\n 'submenu-list-nested': level > 0,\n }\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n recursiveMenu;\n context: { $implicit: item.children, level: level + 1 }\n \"\n ></ng-container>\n </ul>\n </div>\n }\n </li>\n }\n</ng-template>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:6px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0;margin:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out;width:250px}.pt-side-bar-menu .submenu-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;min-height:0}.pt-side-bar-menu .submenu-wrapper.expanded{grid-template-rows:1fr}.pt-side-bar-menu .submenu-wrapper:not(.expanded){margin:0!important;padding:0!important}.pt-side-bar-menu .submenu-list{overflow:hidden;min-height:0;list-style-type:none;margin-top:5px;margin-bottom:0;position:relative}.pt-side-bar-menu .submenu-wrapper:not(.expanded) .submenu-list{margin:0!important;padding-top:0!important;padding-bottom:0!important;border-left:none!important}.pt-side-bar-menu .submenu-list-root{border-left:1px solid #e5e7eb;margin-left:23px;padding-left:25px;padding-top:5px;padding-bottom:5px}.pt-side-bar-menu .submenu-list-root:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-list-nested{border-left:1px solid #2f3b46;margin-left:18px;padding-left:20px;padding-top:4px;padding-bottom:4px}.pt-side-bar-menu .submenu-item,.pt-side-bar-menu .submenu-level-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-level-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:22px;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-title{margin-left:5px}\n"] }]
|
|
4717
|
+
args: [{ selector: 'pt-side-bar-menu', standalone: false, template: "<div class=\"pt-side-bar-menu\">\n @if (menuConfig.searchable) {\n <pt-card\n [config]=\"searchCardConfig\"\n [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n >\n <div class=\"search-input\">\n <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n </pt-text-input>\n </div>\n </pt-card>\n }\n\n <pt-card\n [config]=\"cardConfig\"\n [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n >\n <ul class=\"menu-list\">\n <ng-container\n *ngTemplateOutlet=\"\n recursiveMenu;\n context: { $implicit: filteredMenus, level: 0 }\n \"\n ></ng-container>\n </ul>\n </pt-card>\n</div>\n\n<ng-template #recursiveMenu let-menus let-level=\"level\">\n @for (item of menus; track item) {\n <li\n class=\"menu-item\"\n [ngClass]=\"{\n 'menu-item-expanded': item.isExpanded,\n 'submenu-level-item': level > 0,\n }\"\n [attr.data-level]=\"level\"\n [ngStyle]=\"getMenuItemStyles()\"\n >\n <!-- item without children -->\n @if (!hasChildren(item)) {\n <a\n [routerLink]=\"item.url\"\n [class.menu-link]=\"level === 0\"\n [class.submenu-link]=\"level > 0\"\n [ngStyle]=\"\n level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n \"\n >\n <i [ngClass]=\"item.icon\"></i>\n <span [class.submenu-title]=\"level > 0\">{{ item.label }}</span>\n @if (item.badge) {\n <span\n [ngStyle]=\"getBadgeStyles(item.badge)\"\n class=\"badge\"\n >\n {{ item.badge.count }}\n </span>\n }\n </a>\n }\n <!-- item with children -->\n @if (hasChildren(item)) {\n <a\n href=\"#\"\n [class.menu-link]=\"level === 0\"\n [class.submenu-link]=\"level > 0\"\n (click)=\"toggleMenu(item, $event)\"\n [ngStyle]=\"\n level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n \"\n >\n <i [ngClass]=\"item.icon\"></i>\n <span [class.submenu-title]=\"level > 0\">{{ item.label }}</span>\n @if (item.badge) {\n <span\n [ngStyle]=\"getBadgeStyles(item.badge)\"\n class=\"badge\"\n >\n {{ item.badge.count }}\n </span>\n }\n <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n </a>\n }\n @if (hasChildren(item)) {\n <div\n class=\"submenu-wrapper\"\n [class.expanded]=\"item.isExpanded\"\n >\n <ul\n class=\"submenu-list\"\n [ngClass]=\"{\n 'submenu-list-root': level === 0,\n 'submenu-list-nested': level > 0,\n }\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n recursiveMenu;\n context: { $implicit: item.children, level: level + 1 }\n \"\n ></ng-container>\n </ul>\n </div>\n }\n </li>\n }\n</ng-template>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:6px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0;margin:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out;width:250px}.pt-side-bar-menu .submenu-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;min-height:0}.pt-side-bar-menu .submenu-wrapper.expanded{grid-template-rows:1fr}.pt-side-bar-menu .submenu-wrapper:not(.expanded){margin:0!important;padding:0!important}.pt-side-bar-menu .submenu-list{overflow:hidden;min-height:0;list-style-type:none;margin-top:5px;margin-bottom:0;position:relative}.pt-side-bar-menu .submenu-wrapper:not(.expanded) .submenu-list{margin:0!important;padding-top:0!important;padding-bottom:0!important;border-left:none!important}.pt-side-bar-menu .submenu-list-root{border-left:1px solid #e5e7eb;margin-left:23px;padding-left:25px;padding-top:5px;padding-bottom:5px}.pt-side-bar-menu .submenu-list-root:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-list-nested{border-left:1px solid #2f3b46;margin-left:18px;padding-left:20px;padding-top:4px;padding-bottom:4px}.pt-side-bar-menu .submenu-item,.pt-side-bar-menu .submenu-level-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-level-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:22px;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-title{margin-left:5px}.pt-side-bar-menu .search-input{width:100%;display:flex;align-items:center;justify-content:center}.pt-side-bar-menu .search-input pt-text-input{display:block;width:240px}\n"] }]
|
|
4704
4718
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { menuConfig: [{
|
|
4705
4719
|
type: Input
|
|
4706
4720
|
}] } });
|
|
@@ -4925,11 +4939,11 @@ class PTPageSkeletonComponent {
|
|
|
4925
4939
|
};
|
|
4926
4940
|
}
|
|
4927
4941
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPageSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4928
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTPageSkeletonComponent, isStandalone: false, selector: "pt-page-skeleton", inputs: { pageSkeletonConfig: "pageSkeletonConfig", serverDateTime: "serverDateTime" }, outputs: { toggleSidebar: "toggleSidebar" }, ngImport: i0, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n <!-- Navbar -->\n <pt-nav-bar-menu\n [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n [serverDateTime]=\"serverDateTime\"\n (toggleSidebar)=\"onToggleSidebar()\"\n ></pt-nav-bar-menu>\n\n <div class=\"main-content\">\n <!-- Sidebar (use *ngIf to toggle visibility) -->\n @if (isSidebarVisible) {\n <pt-side-bar-menu\n [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n class=\"sidebar\"\n ></pt-side-bar-menu>\n }\n\n <!-- Main View Area -->\n <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n <!-- Content Card Wrapper -->\n <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n <!-- Breadcrumb -->\n @if (pageSkeletonConfig.breadCrumbConfig) {\n <pt-bread-crumb\n [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n class=\"bread-crumb\"\n ></pt-bread-crumb>\n }\n\n <!-- Background Card -->\n\n <router-outlet></router-outlet>\n </pt-card>\n </div>\n </div>\n\n <!-- Footer -->\n @if (pageSkeletonConfig.footerConfig) {\n <pt-footer\n [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n class=\"pt-footer\"\n ></pt-footer>\n }\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px}.app-container{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden}.sidebar{width:300px;transition:all .3s ease-in-out}.content-area.full-width{margin-left:0;width:100%}pt-card{width:100%;height:100%;max-width:100%;overflow:hidden}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{margin-top:0}.footer-card{width:100%;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PTNavbarMenuComponent, selector: "pt-nav-bar-menu", inputs: ["navBarMenuConfig", "serverDateTime"], outputs: ["toggleSidebar"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTSideBarMenuComponent, selector: "pt-side-bar-menu", inputs: ["menuConfig"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: PTFooterComponent, selector: "pt-footer", inputs: ["footerConfig"] }, { kind: "component", type: PTBreadCrumbComponent, selector: "pt-bread-crumb", inputs: ["breadCrumbConfig"] }] }); }
|
|
4942
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTPageSkeletonComponent, isStandalone: false, selector: "pt-page-skeleton", inputs: { pageSkeletonConfig: "pageSkeletonConfig", serverDateTime: "serverDateTime" }, outputs: { toggleSidebar: "toggleSidebar" }, ngImport: i0, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n <!-- Navbar -->\n <pt-nav-bar-menu\n [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n [serverDateTime]=\"serverDateTime\"\n (toggleSidebar)=\"onToggleSidebar()\"\n ></pt-nav-bar-menu>\n\n <div class=\"main-content\">\n <!-- Sidebar (use *ngIf to toggle visibility) -->\n @if (isSidebarVisible) {\n <pt-side-bar-menu\n [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n class=\"sidebar\"\n ></pt-side-bar-menu>\n }\n\n <!-- Main View Area -->\n <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n <!-- Content Card Wrapper -->\n <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n <!-- Breadcrumb -->\n @if (pageSkeletonConfig.breadCrumbConfig) {\n <pt-bread-crumb\n [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n class=\"bread-crumb\"\n ></pt-bread-crumb>\n }\n\n <!-- Background Card -->\n\n <router-outlet></router-outlet>\n </pt-card>\n </div>\n </div>\n\n <!-- Footer -->\n @if (pageSkeletonConfig.footerConfig) {\n <pt-footer\n [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n class=\"pt-footer\"\n ></pt-footer>\n }\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px}.app-container{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden}.sidebar{width:300px;transition:all .3s ease-in-out}.content-area.full-width{margin-left:0;width:100%}:host>pt-card{width:100%;min-height:100vh;max-width:100%;overflow:hidden}.content-area>pt-card{width:100%;height:100%;max-width:100%;overflow:hidden}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{display:block;width:100%;position:relative;z-index:0;margin-top:0}:host ::ng-deep .pt-footer .footer-card,:host ::ng-deep .pt-footer pt-card{height:auto!important;overflow:visible!important}.footer-card{width:100%;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PTNavbarMenuComponent, selector: "pt-nav-bar-menu", inputs: ["navBarMenuConfig", "serverDateTime"], outputs: ["toggleSidebar"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTSideBarMenuComponent, selector: "pt-side-bar-menu", inputs: ["menuConfig"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: PTFooterComponent, selector: "pt-footer", inputs: ["footerConfig"] }, { kind: "component", type: PTBreadCrumbComponent, selector: "pt-bread-crumb", inputs: ["breadCrumbConfig"] }] }); }
|
|
4929
4943
|
}
|
|
4930
4944
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPageSkeletonComponent, decorators: [{
|
|
4931
4945
|
type: Component,
|
|
4932
|
-
args: [{ selector: 'pt-page-skeleton', standalone: false, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n <!-- Navbar -->\n <pt-nav-bar-menu\n [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n [serverDateTime]=\"serverDateTime\"\n (toggleSidebar)=\"onToggleSidebar()\"\n ></pt-nav-bar-menu>\n\n <div class=\"main-content\">\n <!-- Sidebar (use *ngIf to toggle visibility) -->\n @if (isSidebarVisible) {\n <pt-side-bar-menu\n [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n class=\"sidebar\"\n ></pt-side-bar-menu>\n }\n\n <!-- Main View Area -->\n <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n <!-- Content Card Wrapper -->\n <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n <!-- Breadcrumb -->\n @if (pageSkeletonConfig.breadCrumbConfig) {\n <pt-bread-crumb\n [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n class=\"bread-crumb\"\n ></pt-bread-crumb>\n }\n\n <!-- Background Card -->\n\n <router-outlet></router-outlet>\n </pt-card>\n </div>\n </div>\n\n <!-- Footer -->\n @if (pageSkeletonConfig.footerConfig) {\n <pt-footer\n [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n class=\"pt-footer\"\n ></pt-footer>\n }\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px}.app-container{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden}.sidebar{width:300px;transition:all .3s ease-in-out}.content-area.full-width{margin-left:0;width:100%}pt-card{width:100%;height:100%;max-width:100%;overflow:hidden}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{margin-top:0}.footer-card{width:100%;background-color:transparent}\n"] }]
|
|
4946
|
+
args: [{ selector: 'pt-page-skeleton', standalone: false, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n <!-- Navbar -->\n <pt-nav-bar-menu\n [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n [serverDateTime]=\"serverDateTime\"\n (toggleSidebar)=\"onToggleSidebar()\"\n ></pt-nav-bar-menu>\n\n <div class=\"main-content\">\n <!-- Sidebar (use *ngIf to toggle visibility) -->\n @if (isSidebarVisible) {\n <pt-side-bar-menu\n [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n class=\"sidebar\"\n ></pt-side-bar-menu>\n }\n\n <!-- Main View Area -->\n <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n <!-- Content Card Wrapper -->\n <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n <!-- Breadcrumb -->\n @if (pageSkeletonConfig.breadCrumbConfig) {\n <pt-bread-crumb\n [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n class=\"bread-crumb\"\n ></pt-bread-crumb>\n }\n\n <!-- Background Card -->\n\n <router-outlet></router-outlet>\n </pt-card>\n </div>\n </div>\n\n <!-- Footer -->\n @if (pageSkeletonConfig.footerConfig) {\n <pt-footer\n [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n class=\"pt-footer\"\n ></pt-footer>\n }\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px}.app-container{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden}.sidebar{width:300px;transition:all .3s ease-in-out}.content-area.full-width{margin-left:0;width:100%}:host>pt-card{width:100%;min-height:100vh;max-width:100%;overflow:hidden}.content-area>pt-card{width:100%;height:100%;max-width:100%;overflow:hidden}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{display:block;width:100%;position:relative;z-index:0;margin-top:0}:host ::ng-deep .pt-footer .footer-card,:host ::ng-deep .pt-footer pt-card{height:auto!important;overflow:visible!important}.footer-card{width:100%;background-color:transparent}\n"] }]
|
|
4933
4947
|
}], propDecorators: { pageSkeletonConfig: [{
|
|
4934
4948
|
type: Input
|
|
4935
4949
|
}], serverDateTime: [{
|
|
@@ -5789,11 +5803,11 @@ class PTDialogComponent {
|
|
|
5789
5803
|
return this.removeTextUtilityClasses(this.config.headerIconClass);
|
|
5790
5804
|
}
|
|
5791
5805
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5792
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDialogComponent, isStandalone: false, selector: "pt-dialog", inputs: { config: "config", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<p-dialog\n [visible]=\"_internalVisible\"\n (visibleChange)=\"onInternalVisibleChange($event)\"\n [header]=\"config.header\"\n [modal]=\"config.modal\"\n [style]=\"config.style\"\n [breakpoints]=\"config.breakpoints\"\n [closable]=\"config.closable\"\n [draggable]=\"config.draggable && !isFullscreen\"\n [resizable]=\"config.resizable && !isFullscreen\"\n [maximizable]=\"false\"\n [dismissableMask]=\"config.dismissableMask\"\n [closeOnEscape]=\"false\"\n [blockScroll]=\"config.blockScroll\"\n [position]=\"primePosition\"\n [contentStyle]=\"config.contentStyle\"\n [styleClass]=\"dialogStyleClass\"\n >\n <ng-template pTemplate=\"header\">\n <div class=\"pt-dialog-header-inner\">\n <div class=\"pt-dialog-header-left\">\n @if (config.headerIconClass) {\n <i\n class=\"pt-dialog-header-icon\"\n [ngClass]=\"safeHeaderIconClass\"\n [ngStyle]=\"headerIconStyle\"\n ></i>\n }\n\n <ng-content select=\"[ptDialogHeader]\"></ng-content>\n\n @if (config.header) {\n <span\n class=\"pt-dialog-header-title\"\n [ngStyle]=\"headerTitleStyle\"\n >\n {{ config.header }}\n </span>\n }\n </div>\n\n <div class=\"pt-dialog-header-actions\">\n <button\n type=\"button\"\n class=\"pt-dialog-header-btn\"\n [title]=\"isFullscreen ? 'R\u00E9duire' : 'Plein \u00E9cran'\"\n (click)=\"toggleFullscreen()\"\n >\n <i\n class=\"pi\"\n [ngClass]=\"\n isFullscreen ? 'pi-window-minimize' : 'pi-window-maximize'\n \"\n ></i>\n </button>\n </div>\n </div>\n </ng-template>\n\n <div class=\"pt-dialog-body\" [ngStyle]=\"bodyStyle\">\n <div class=\"pt-dialog-body-inner\">\n <ng-content select=\"[ptDialogContent]\"></ng-content>\n <ng-content></ng-content>\n </div>\n </div>\n\n @if (config.showFooter !== false) {\n <ng-template pTemplate=\"footer\">\n <div class=\"pt-dialog-footer-buttons\">\n <ng-content select=\"[ptDialogFooter]\"></ng-content>\n </div>\n </ng-template>\n }\n</p-dialog>\n", styles: [":host ::ng-deep .p-dialog.pt-dialog-overlay{border-radius:18px;overflow:
|
|
5806
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDialogComponent, isStandalone: false, selector: "pt-dialog", inputs: { config: "config", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<p-dialog\n [visible]=\"_internalVisible\"\n (visibleChange)=\"onInternalVisibleChange($event)\"\n [header]=\"config.header\"\n [modal]=\"config.modal\"\n [style]=\"config.style\"\n [breakpoints]=\"config.breakpoints\"\n [closable]=\"config.closable\"\n [draggable]=\"config.draggable && !isFullscreen\"\n [resizable]=\"config.resizable && !isFullscreen\"\n [maximizable]=\"false\"\n [dismissableMask]=\"config.dismissableMask\"\n [closeOnEscape]=\"false\"\n [blockScroll]=\"config.blockScroll\"\n [position]=\"primePosition\"\n [contentStyle]=\"config.contentStyle\"\n [styleClass]=\"dialogStyleClass\"\n >\n <ng-template pTemplate=\"header\">\n <div class=\"pt-dialog-header-inner\">\n <div class=\"pt-dialog-header-left\">\n @if (config.headerIconClass) {\n <i\n class=\"pt-dialog-header-icon\"\n [ngClass]=\"safeHeaderIconClass\"\n [ngStyle]=\"headerIconStyle\"\n ></i>\n }\n\n <ng-content select=\"[ptDialogHeader]\"></ng-content>\n\n @if (config.header) {\n <span\n class=\"pt-dialog-header-title\"\n [ngStyle]=\"headerTitleStyle\"\n >\n {{ config.header }}\n </span>\n }\n </div>\n\n <div class=\"pt-dialog-header-actions\">\n <button\n type=\"button\"\n class=\"pt-dialog-header-btn\"\n [title]=\"isFullscreen ? 'R\u00E9duire' : 'Plein \u00E9cran'\"\n (click)=\"toggleFullscreen()\"\n >\n <i\n class=\"pi\"\n [ngClass]=\"\n isFullscreen ? 'pi-window-minimize' : 'pi-window-maximize'\n \"\n ></i>\n </button>\n </div>\n </div>\n </ng-template>\n\n <div class=\"pt-dialog-body\" [ngStyle]=\"bodyStyle\">\n <div class=\"pt-dialog-body-inner\">\n <ng-content select=\"[ptDialogContent]\"></ng-content>\n <ng-content></ng-content>\n </div>\n </div>\n\n @if (config.showFooter !== false) {\n <ng-template pTemplate=\"footer\">\n <div class=\"pt-dialog-footer-buttons\">\n <ng-content select=\"[ptDialogFooter]\"></ng-content>\n </div>\n </ng-template>\n }\n</p-dialog>\n", styles: [":host ::ng-deep .p-dialog.pt-dialog-overlay{border-radius:18px;overflow:hidden!important;box-shadow:0 20px 45px #0f172a59;z-index:1200!important}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-header{overflow:hidden!important;flex:0 0 auto}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-content{overflow:hidden!important;position:relative;z-index:1}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer{overflow:hidden!important;flex:0 0 auto}:host ::ng-deep .p-datepicker,:host ::ng-deep .p-datepicker-panel,:host ::ng-deep .p-calendar-panel{z-index:99999!important}:host ::ng-deep .p-dialog.pt-dialog-info .p-dialog-header{background-color:#e0f2fe;border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-success .p-dialog-header{background-color:#dcfce7;border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-warning .p-dialog-header{background-color:#fff4d1;border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-danger .p-dialog-header{background-color:#fde4e4;border-bottom:0}.pt-dialog-header-inner{width:100%;padding:1rem 1rem .75rem;display:flex;align-items:center;justify-content:space-between}.pt-dialog-header-left{min-width:0;display:flex;align-items:center}.pt-dialog-header-icon{margin-right:.5rem;flex:0 0 auto}.pt-dialog-header-title{font-weight:700;font-size:1.125rem;overflow-wrap:anywhere}.pt-dialog-header-actions{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex:0 0 auto}.pt-dialog-header-btn{width:34px;height:34px;border-radius:10px;border:1px solid rgba(148,163,184,.3);background:#ffffffa6;color:#334155;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease,transform .2s ease}.pt-dialog-header-btn:hover{background:#ffffffe6;border-color:#64748b80;transform:translateY(-1px)}.pt-dialog-header-btn i{font-size:.95rem}:host ::ng-deep .p-dialog.pt-dialog-info .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-info .pt-dialog-header-icon{color:#2563eb}:host ::ng-deep .p-dialog.pt-dialog-success .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-success .pt-dialog-header-icon{color:#15803d}:host ::ng-deep .p-dialog.pt-dialog-warning .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-warning .pt-dialog-header-icon{color:#b45309}:host ::ng-deep .p-dialog.pt-dialog-danger .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-danger .pt-dialog-header-icon{color:#b91c1c}.pt-dialog-body{padding:1.25rem 1rem 1rem;display:flex;justify-content:center;width:100%;max-width:100%;box-sizing:border-box;overflow:auto!important}.pt-dialog-body-inner{width:100%;max-width:100%;min-width:0;display:flex;flex-direction:column;gap:.75rem;box-sizing:border-box;overflow:visible}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer{background:#fff!important;border-top:1px solid rgba(148,163,184,.25)!important;padding:16px 32px 22px!important}.pt-dialog-footer-buttons{display:flex;justify-content:center;gap:16px}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer .p-button{border-radius:9999px;padding:.75rem 1.8rem;font-weight:600}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer .p-button i.pi,:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer .p-button i.fa{margin-right:.5rem}:host ::ng-deep .p-dialog.pt-dialog-danger .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#dc2626!important;color:#dc2626!important}:host ::ng-deep .p-dialog.pt-dialog-warning .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#d97706!important;color:#b45309!important}:host ::ng-deep .p-dialog.pt-dialog-success .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#16a34a!important;color:#15803d!important}:host ::ng-deep .p-dialog.pt-dialog-info .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#2563eb!important;color:#2563eb!important}:host ::ng-deep .p-dialog.pt-dialog-info .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help):hover{background:#eff6ff!important}:host ::ng-deep .p-dialog.pt-dialog-fullscreen{position:fixed!important;inset:1rem!important;width:auto!important;max-width:none!important;height:calc(100vh - 2rem)!important;max-height:calc(100vh - 2rem)!important;margin:0!important;transform:none!important;display:flex!important;flex-direction:column!important}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .p-dialog-header{flex:0 0 auto}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .p-dialog-content{flex:1 1 auto!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important;display:flex;flex-direction:column}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .pt-dialog-body{flex:1 1 auto;min-height:0;height:auto!important;max-height:none!important;overflow:auto!important}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .pt-dialog-body-inner{flex:1 1 auto;min-height:0;height:auto!important;overflow:visible}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .p-dialog-footer{flex:0 0 auto}@media(max-width:768px){.pt-dialog-header-inner{padding:.85rem .85rem .65rem}.pt-dialog-header-title{font-size:1rem}.pt-dialog-body{padding:.85rem}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer{padding:14px 20px 18px!important}.pt-dialog-footer-buttons{flex-wrap:wrap;gap:10px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
|
|
5793
5807
|
}
|
|
5794
5808
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDialogComponent, decorators: [{
|
|
5795
5809
|
type: Component,
|
|
5796
|
-
args: [{ selector: 'pt-dialog', standalone: false, template: "<p-dialog\n [visible]=\"_internalVisible\"\n (visibleChange)=\"onInternalVisibleChange($event)\"\n [header]=\"config.header\"\n [modal]=\"config.modal\"\n [style]=\"config.style\"\n [breakpoints]=\"config.breakpoints\"\n [closable]=\"config.closable\"\n [draggable]=\"config.draggable && !isFullscreen\"\n [resizable]=\"config.resizable && !isFullscreen\"\n [maximizable]=\"false\"\n [dismissableMask]=\"config.dismissableMask\"\n [closeOnEscape]=\"false\"\n [blockScroll]=\"config.blockScroll\"\n [position]=\"primePosition\"\n [contentStyle]=\"config.contentStyle\"\n [styleClass]=\"dialogStyleClass\"\n >\n <ng-template pTemplate=\"header\">\n <div class=\"pt-dialog-header-inner\">\n <div class=\"pt-dialog-header-left\">\n @if (config.headerIconClass) {\n <i\n class=\"pt-dialog-header-icon\"\n [ngClass]=\"safeHeaderIconClass\"\n [ngStyle]=\"headerIconStyle\"\n ></i>\n }\n\n <ng-content select=\"[ptDialogHeader]\"></ng-content>\n\n @if (config.header) {\n <span\n class=\"pt-dialog-header-title\"\n [ngStyle]=\"headerTitleStyle\"\n >\n {{ config.header }}\n </span>\n }\n </div>\n\n <div class=\"pt-dialog-header-actions\">\n <button\n type=\"button\"\n class=\"pt-dialog-header-btn\"\n [title]=\"isFullscreen ? 'R\u00E9duire' : 'Plein \u00E9cran'\"\n (click)=\"toggleFullscreen()\"\n >\n <i\n class=\"pi\"\n [ngClass]=\"\n isFullscreen ? 'pi-window-minimize' : 'pi-window-maximize'\n \"\n ></i>\n </button>\n </div>\n </div>\n </ng-template>\n\n <div class=\"pt-dialog-body\" [ngStyle]=\"bodyStyle\">\n <div class=\"pt-dialog-body-inner\">\n <ng-content select=\"[ptDialogContent]\"></ng-content>\n <ng-content></ng-content>\n </div>\n </div>\n\n @if (config.showFooter !== false) {\n <ng-template pTemplate=\"footer\">\n <div class=\"pt-dialog-footer-buttons\">\n <ng-content select=\"[ptDialogFooter]\"></ng-content>\n </div>\n </ng-template>\n }\n</p-dialog>\n", styles: [":host ::ng-deep .p-dialog.pt-dialog-overlay{border-radius:18px;overflow:
|
|
5810
|
+
args: [{ selector: 'pt-dialog', standalone: false, template: "<p-dialog\n [visible]=\"_internalVisible\"\n (visibleChange)=\"onInternalVisibleChange($event)\"\n [header]=\"config.header\"\n [modal]=\"config.modal\"\n [style]=\"config.style\"\n [breakpoints]=\"config.breakpoints\"\n [closable]=\"config.closable\"\n [draggable]=\"config.draggable && !isFullscreen\"\n [resizable]=\"config.resizable && !isFullscreen\"\n [maximizable]=\"false\"\n [dismissableMask]=\"config.dismissableMask\"\n [closeOnEscape]=\"false\"\n [blockScroll]=\"config.blockScroll\"\n [position]=\"primePosition\"\n [contentStyle]=\"config.contentStyle\"\n [styleClass]=\"dialogStyleClass\"\n >\n <ng-template pTemplate=\"header\">\n <div class=\"pt-dialog-header-inner\">\n <div class=\"pt-dialog-header-left\">\n @if (config.headerIconClass) {\n <i\n class=\"pt-dialog-header-icon\"\n [ngClass]=\"safeHeaderIconClass\"\n [ngStyle]=\"headerIconStyle\"\n ></i>\n }\n\n <ng-content select=\"[ptDialogHeader]\"></ng-content>\n\n @if (config.header) {\n <span\n class=\"pt-dialog-header-title\"\n [ngStyle]=\"headerTitleStyle\"\n >\n {{ config.header }}\n </span>\n }\n </div>\n\n <div class=\"pt-dialog-header-actions\">\n <button\n type=\"button\"\n class=\"pt-dialog-header-btn\"\n [title]=\"isFullscreen ? 'R\u00E9duire' : 'Plein \u00E9cran'\"\n (click)=\"toggleFullscreen()\"\n >\n <i\n class=\"pi\"\n [ngClass]=\"\n isFullscreen ? 'pi-window-minimize' : 'pi-window-maximize'\n \"\n ></i>\n </button>\n </div>\n </div>\n </ng-template>\n\n <div class=\"pt-dialog-body\" [ngStyle]=\"bodyStyle\">\n <div class=\"pt-dialog-body-inner\">\n <ng-content select=\"[ptDialogContent]\"></ng-content>\n <ng-content></ng-content>\n </div>\n </div>\n\n @if (config.showFooter !== false) {\n <ng-template pTemplate=\"footer\">\n <div class=\"pt-dialog-footer-buttons\">\n <ng-content select=\"[ptDialogFooter]\"></ng-content>\n </div>\n </ng-template>\n }\n</p-dialog>\n", styles: [":host ::ng-deep .p-dialog.pt-dialog-overlay{border-radius:18px;overflow:hidden!important;box-shadow:0 20px 45px #0f172a59;z-index:1200!important}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-header{overflow:hidden!important;flex:0 0 auto}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-content{overflow:hidden!important;position:relative;z-index:1}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer{overflow:hidden!important;flex:0 0 auto}:host ::ng-deep .p-datepicker,:host ::ng-deep .p-datepicker-panel,:host ::ng-deep .p-calendar-panel{z-index:99999!important}:host ::ng-deep .p-dialog.pt-dialog-info .p-dialog-header{background-color:#e0f2fe;border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-success .p-dialog-header{background-color:#dcfce7;border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-warning .p-dialog-header{background-color:#fff4d1;border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-danger .p-dialog-header{background-color:#fde4e4;border-bottom:0}.pt-dialog-header-inner{width:100%;padding:1rem 1rem .75rem;display:flex;align-items:center;justify-content:space-between}.pt-dialog-header-left{min-width:0;display:flex;align-items:center}.pt-dialog-header-icon{margin-right:.5rem;flex:0 0 auto}.pt-dialog-header-title{font-weight:700;font-size:1.125rem;overflow-wrap:anywhere}.pt-dialog-header-actions{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex:0 0 auto}.pt-dialog-header-btn{width:34px;height:34px;border-radius:10px;border:1px solid rgba(148,163,184,.3);background:#ffffffa6;color:#334155;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease,transform .2s ease}.pt-dialog-header-btn:hover{background:#ffffffe6;border-color:#64748b80;transform:translateY(-1px)}.pt-dialog-header-btn i{font-size:.95rem}:host ::ng-deep .p-dialog.pt-dialog-info .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-info .pt-dialog-header-icon{color:#2563eb}:host ::ng-deep .p-dialog.pt-dialog-success .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-success .pt-dialog-header-icon{color:#15803d}:host ::ng-deep .p-dialog.pt-dialog-warning .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-warning .pt-dialog-header-icon{color:#b45309}:host ::ng-deep .p-dialog.pt-dialog-danger .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-danger .pt-dialog-header-icon{color:#b91c1c}.pt-dialog-body{padding:1.25rem 1rem 1rem;display:flex;justify-content:center;width:100%;max-width:100%;box-sizing:border-box;overflow:auto!important}.pt-dialog-body-inner{width:100%;max-width:100%;min-width:0;display:flex;flex-direction:column;gap:.75rem;box-sizing:border-box;overflow:visible}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer{background:#fff!important;border-top:1px solid rgba(148,163,184,.25)!important;padding:16px 32px 22px!important}.pt-dialog-footer-buttons{display:flex;justify-content:center;gap:16px}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer .p-button{border-radius:9999px;padding:.75rem 1.8rem;font-weight:600}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer .p-button i.pi,:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer .p-button i.fa{margin-right:.5rem}:host ::ng-deep .p-dialog.pt-dialog-danger .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#dc2626!important;color:#dc2626!important}:host ::ng-deep .p-dialog.pt-dialog-warning .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#d97706!important;color:#b45309!important}:host ::ng-deep .p-dialog.pt-dialog-success .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#16a34a!important;color:#15803d!important}:host ::ng-deep .p-dialog.pt-dialog-info .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#2563eb!important;color:#2563eb!important}:host ::ng-deep .p-dialog.pt-dialog-info .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help):hover{background:#eff6ff!important}:host ::ng-deep .p-dialog.pt-dialog-fullscreen{position:fixed!important;inset:1rem!important;width:auto!important;max-width:none!important;height:calc(100vh - 2rem)!important;max-height:calc(100vh - 2rem)!important;margin:0!important;transform:none!important;display:flex!important;flex-direction:column!important}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .p-dialog-header{flex:0 0 auto}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .p-dialog-content{flex:1 1 auto!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important;display:flex;flex-direction:column}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .pt-dialog-body{flex:1 1 auto;min-height:0;height:auto!important;max-height:none!important;overflow:auto!important}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .pt-dialog-body-inner{flex:1 1 auto;min-height:0;height:auto!important;overflow:visible}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .p-dialog-footer{flex:0 0 auto}@media(max-width:768px){.pt-dialog-header-inner{padding:.85rem .85rem .65rem}.pt-dialog-header-title{font-size:1rem}.pt-dialog-body{padding:.85rem}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer{padding:14px 20px 18px!important}.pt-dialog-footer-buttons{flex-wrap:wrap;gap:10px}}\n"] }]
|
|
5797
5811
|
}], propDecorators: { config: [{
|
|
5798
5812
|
type: Input
|
|
5799
5813
|
}], visible: [{
|