ng-prime-tools 1.0.81 → 1.0.82
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.
|
@@ -3221,11 +3221,11 @@ class PTFormBuilderComponent {
|
|
|
3221
3221
|
this.formChange.emit(this.form.getRawValue());
|
|
3222
3222
|
}
|
|
3223
3223
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTFormBuilderComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3224
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTFormBuilderComponent, isStandalone: false, selector: "pt-form-builder", inputs: { mainGroup: "mainGroup", buttons: "buttons", title: "title", titleStyle: "titleStyle", inputWidth: "inputWidth", formWidth: "formWidth", language: "language" }, outputs: { formSubmit: "formSubmit", formReady: "formReady", formChange: "formChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"pt-form-builder-wrapper\"\n [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n>\n @if (title) {\n <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n }\n\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n @for (field of mainGroup.fields; track field.name) {\n <pt-dynamic-form-field\n [field]=\"field\"\n [form]=\"form\"\n [inputWidth]=\"inputWidth\"\n ></pt-dynamic-form-field>\n }\n\n @for (group of mainGroup.groups; track $index) {\n <div\n class=\"form-field-group\"\n [ngStyle]=\"{ width: group.width || '100%' }\"\n >\n @for (field of group.fields; track field.name) {\n <pt-dynamic-form-field\n [field]=\"field\"\n [form]=\"form\"\n [inputWidth]=\"inputWidth\"\n class=\"flex-item\"\n ></pt-dynamic-form-field>\n }\n </div>\n }\n\n <div class=\"button-group\">\n @for (button of buttons; track button.text) {\n <button\n type=\"button\"\n pButton\n [label]=\"button.text\"\n [icon]=\"button.icon || ''\"\n [class]=\"button.color || ''\"\n [ngStyle]=\"{\n color: button.fontColor || null,\n 'background-color': button.backgroundColor || null,\n 'border-color':\n button.borderColor || button.backgroundColor || null,\n }\"\n (click)=\"\n button.isSubmit\n ? onSubmit()\n : button.isClear\n ? onClear()\n : button.action\n ? button.action()\n : null\n \"\n ></button>\n }\n </div>\n </form>\n</div>\n", styles: [".pt-form-builder-wrapper{width:100%;margin:0 auto}.form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700}.form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}::ng-deep .p-inputtext,::ng-deep .p-inputtextarea,::ng-deep .p-calendar,::ng-deep .p-inputnumber,::ng-deep .p-multiselect,::ng-deep .p-dropdown{width:100%!important}::ng-deep .p-inputnumber,::ng-deep p-inputnumber{display:flex!important}.button-group{display:flex;gap:1rem;margin-top:1rem;justify-content:space-between}.button-group button{flex:1;display:flex;align-items:center;justify-content:center}.button-group button i{margin-right:.5rem}.button-group button.p-button-primary{background-color
|
|
3224
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTFormBuilderComponent, isStandalone: false, selector: "pt-form-builder", inputs: { mainGroup: "mainGroup", buttons: "buttons", title: "title", titleStyle: "titleStyle", inputWidth: "inputWidth", formWidth: "formWidth", language: "language" }, outputs: { formSubmit: "formSubmit", formReady: "formReady", formChange: "formChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"pt-form-builder-wrapper\"\n [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n>\n @if (title) {\n <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n }\n\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n @for (field of mainGroup.fields; track field.name) {\n <pt-dynamic-form-field\n [field]=\"field\"\n [form]=\"form\"\n [inputWidth]=\"inputWidth\"\n ></pt-dynamic-form-field>\n }\n\n @for (group of mainGroup.groups; track $index) {\n <div\n class=\"form-field-group\"\n [ngStyle]=\"{ width: group.width || '100%' }\"\n >\n @for (field of group.fields; track field.name) {\n <pt-dynamic-form-field\n [field]=\"field\"\n [form]=\"form\"\n [inputWidth]=\"inputWidth\"\n class=\"flex-item\"\n ></pt-dynamic-form-field>\n }\n </div>\n }\n\n <div class=\"button-group\">\n @for (button of buttons; track button.text) {\n <button\n type=\"button\"\n pButton\n [label]=\"button.text\"\n [icon]=\"button.icon || ''\"\n [class]=\"button.color || ''\"\n [ngStyle]=\"{\n color: button.fontColor || null,\n 'background-color': button.backgroundColor || null,\n 'border-color':\n button.borderColor || button.backgroundColor || null,\n }\"\n (click)=\"\n button.isSubmit\n ? onSubmit()\n : button.isClear\n ? onClear()\n : button.action\n ? button.action()\n : null\n \"\n ></button>\n }\n </div>\n </form>\n</div>\n", styles: [".pt-form-builder-wrapper{width:100%;margin:0 auto;color:var(--pt-form-builder-text, inherit)}.form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700;color:var(--pt-form-builder-title, #333333)}.form-field{margin-bottom:1rem;color:var(--pt-form-builder-text, inherit)}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;color:var(--pt-form-builder-label, #333333)}::ng-deep .p-inputtext,::ng-deep .p-inputtextarea,::ng-deep .p-calendar,::ng-deep .p-inputnumber,::ng-deep .p-multiselect,::ng-deep .p-dropdown{width:100%!important}::ng-deep .p-inputnumber,::ng-deep p-inputnumber{display:flex!important}.button-group{display:flex;gap:1rem;margin-top:1rem;justify-content:space-between}.button-group button{flex:1;display:flex;align-items:center;justify-content:center}.button-group button i{margin-right:.5rem}.button-group button.p-button-primary{background-color:var(--pt-form-builder-button-primary-bg, #007bff);color:var(--pt-form-builder-button-primary-text, #ffffff)}.button-group button.p-button-secondary{background-color:var(--pt-form-builder-button-secondary-bg, #6c757d);color:var(--pt-form-builder-button-secondary-text, #ffffff)}.button-group button.p-button-success{background-color:var(--pt-form-builder-button-success-bg, #28a745);color:var(--pt-form-builder-button-success-text, #ffffff)}.button-group button:hover{opacity:.9}.form-field-group{display:flex;gap:1rem}.form-field-group .flex-item{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: i6.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: PTDynamicFormFieldComponent, selector: "pt-dynamic-form-field", inputs: ["field", "form", "inputWidth"] }] }); }
|
|
3225
3225
|
}
|
|
3226
3226
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTFormBuilderComponent, decorators: [{
|
|
3227
3227
|
type: Component,
|
|
3228
|
-
args: [{ selector: 'pt-form-builder', standalone: false, template: "<div\n class=\"pt-form-builder-wrapper\"\n [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n>\n @if (title) {\n <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n }\n\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n @for (field of mainGroup.fields; track field.name) {\n <pt-dynamic-form-field\n [field]=\"field\"\n [form]=\"form\"\n [inputWidth]=\"inputWidth\"\n ></pt-dynamic-form-field>\n }\n\n @for (group of mainGroup.groups; track $index) {\n <div\n class=\"form-field-group\"\n [ngStyle]=\"{ width: group.width || '100%' }\"\n >\n @for (field of group.fields; track field.name) {\n <pt-dynamic-form-field\n [field]=\"field\"\n [form]=\"form\"\n [inputWidth]=\"inputWidth\"\n class=\"flex-item\"\n ></pt-dynamic-form-field>\n }\n </div>\n }\n\n <div class=\"button-group\">\n @for (button of buttons; track button.text) {\n <button\n type=\"button\"\n pButton\n [label]=\"button.text\"\n [icon]=\"button.icon || ''\"\n [class]=\"button.color || ''\"\n [ngStyle]=\"{\n color: button.fontColor || null,\n 'background-color': button.backgroundColor || null,\n 'border-color':\n button.borderColor || button.backgroundColor || null,\n }\"\n (click)=\"\n button.isSubmit\n ? onSubmit()\n : button.isClear\n ? onClear()\n : button.action\n ? button.action()\n : null\n \"\n ></button>\n }\n </div>\n </form>\n</div>\n", styles: [".pt-form-builder-wrapper{width:100%;margin:0 auto}.form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700}.form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}::ng-deep .p-inputtext,::ng-deep .p-inputtextarea,::ng-deep .p-calendar,::ng-deep .p-inputnumber,::ng-deep .p-multiselect,::ng-deep .p-dropdown{width:100%!important}::ng-deep .p-inputnumber,::ng-deep p-inputnumber{display:flex!important}.button-group{display:flex;gap:1rem;margin-top:1rem;justify-content:space-between}.button-group button{flex:1;display:flex;align-items:center;justify-content:center}.button-group button i{margin-right:.5rem}.button-group button.p-button-primary{background-color
|
|
3228
|
+
args: [{ selector: 'pt-form-builder', standalone: false, template: "<div\n class=\"pt-form-builder-wrapper\"\n [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n>\n @if (title) {\n <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n }\n\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n @for (field of mainGroup.fields; track field.name) {\n <pt-dynamic-form-field\n [field]=\"field\"\n [form]=\"form\"\n [inputWidth]=\"inputWidth\"\n ></pt-dynamic-form-field>\n }\n\n @for (group of mainGroup.groups; track $index) {\n <div\n class=\"form-field-group\"\n [ngStyle]=\"{ width: group.width || '100%' }\"\n >\n @for (field of group.fields; track field.name) {\n <pt-dynamic-form-field\n [field]=\"field\"\n [form]=\"form\"\n [inputWidth]=\"inputWidth\"\n class=\"flex-item\"\n ></pt-dynamic-form-field>\n }\n </div>\n }\n\n <div class=\"button-group\">\n @for (button of buttons; track button.text) {\n <button\n type=\"button\"\n pButton\n [label]=\"button.text\"\n [icon]=\"button.icon || ''\"\n [class]=\"button.color || ''\"\n [ngStyle]=\"{\n color: button.fontColor || null,\n 'background-color': button.backgroundColor || null,\n 'border-color':\n button.borderColor || button.backgroundColor || null,\n }\"\n (click)=\"\n button.isSubmit\n ? onSubmit()\n : button.isClear\n ? onClear()\n : button.action\n ? button.action()\n : null\n \"\n ></button>\n }\n </div>\n </form>\n</div>\n", styles: [".pt-form-builder-wrapper{width:100%;margin:0 auto;color:var(--pt-form-builder-text, inherit)}.form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700;color:var(--pt-form-builder-title, #333333)}.form-field{margin-bottom:1rem;color:var(--pt-form-builder-text, inherit)}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;color:var(--pt-form-builder-label, #333333)}::ng-deep .p-inputtext,::ng-deep .p-inputtextarea,::ng-deep .p-calendar,::ng-deep .p-inputnumber,::ng-deep .p-multiselect,::ng-deep .p-dropdown{width:100%!important}::ng-deep .p-inputnumber,::ng-deep p-inputnumber{display:flex!important}.button-group{display:flex;gap:1rem;margin-top:1rem;justify-content:space-between}.button-group button{flex:1;display:flex;align-items:center;justify-content:center}.button-group button i{margin-right:.5rem}.button-group button.p-button-primary{background-color:var(--pt-form-builder-button-primary-bg, #007bff);color:var(--pt-form-builder-button-primary-text, #ffffff)}.button-group button.p-button-secondary{background-color:var(--pt-form-builder-button-secondary-bg, #6c757d);color:var(--pt-form-builder-button-secondary-text, #ffffff)}.button-group button.p-button-success{background-color:var(--pt-form-builder-button-success-bg, #28a745);color:var(--pt-form-builder-button-success-text, #ffffff)}.button-group button:hover{opacity:.9}.form-field-group{display:flex;gap:1rem}.form-field-group .flex-item{flex:1}\n"] }]
|
|
3229
3229
|
}], ctorParameters: () => [{ type: i2.FormBuilder }], propDecorators: { mainGroup: [{
|
|
3230
3230
|
type: Input
|
|
3231
3231
|
}], buttons: [{
|
|
@@ -3880,14 +3880,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
3880
3880
|
}] } });
|
|
3881
3881
|
|
|
3882
3882
|
class PTCardComponent {
|
|
3883
|
-
static { this.DEFAULT_TITLE_COLOR = '#333'; }
|
|
3883
|
+
static { this.DEFAULT_TITLE_COLOR = 'var(--pt-card-title, #333)'; }
|
|
3884
3884
|
static { this.DEFAULT_TITLE_FONT_SIZE = '1.5em'; }
|
|
3885
|
-
static { this.DEFAULT_ICON_COLOR = '#333'; }
|
|
3885
|
+
static { this.DEFAULT_ICON_COLOR = 'var(--pt-card-icon, #333)'; }
|
|
3886
3886
|
static { this.DEFAULT_ICON_FONT_SIZE = '1em'; }
|
|
3887
3887
|
static { this.DEFAULT_ICON_POSITION = 'left'; }
|
|
3888
3888
|
static { this.DEFAULT_TITLE_POSITION = 'left'; }
|
|
3889
3889
|
static { this.DEFAULT_MENU_POSITION = 'right'; }
|
|
3890
|
-
static { this.DEFAULT_BORDER_COLOR = '#ddd'; }
|
|
3890
|
+
static { this.DEFAULT_BORDER_COLOR = 'var(--pt-card-border, #ddd)'; }
|
|
3891
3891
|
static { this.DEFAULT_BORDER_WIDTH = '1px'; }
|
|
3892
3892
|
static { this.DEFAULT_WIDTH = '100%'; }
|
|
3893
3893
|
static { this.DEFAULT_HEIGHT = 'auto'; }
|
|
@@ -3903,7 +3903,7 @@ class PTCardComponent {
|
|
|
3903
3903
|
static { this.DEFAULT_BODY_PADDING = '0'; }
|
|
3904
3904
|
static { this.DEFAULT_MARGIN = '16px 0'; }
|
|
3905
3905
|
static { this.DEFAULT_BORDER_RADIUS = '8px'; }
|
|
3906
|
-
static { this.DEFAULT_BOX_SHADOW = '0 2px 4px rgba(0, 0, 0, 0.1)'; }
|
|
3906
|
+
static { this.DEFAULT_BOX_SHADOW = 'var(--pt-card-shadow, 0 2px 4px rgba(0, 0, 0, 0.1))'; }
|
|
3907
3907
|
constructor(cd) {
|
|
3908
3908
|
this.cd = cd;
|
|
3909
3909
|
this.config = {};
|
|
@@ -3980,10 +3980,13 @@ class PTCardComponent {
|
|
|
3980
3980
|
: 1;
|
|
3981
3981
|
const backgroundColor = this.config.backgroundColor && this.config.transparencyPercentage !== '0'
|
|
3982
3982
|
? this.hexToRgba(this.config.backgroundColor, backgroundTransparency)
|
|
3983
|
-
: 'transparent';
|
|
3983
|
+
: 'var(--pt-card-bg, transparent)';
|
|
3984
3984
|
const backgroundImage = this.config.pattern?.imageUrl &&
|
|
3985
3985
|
this.config.pattern.transparencyPercentage !== '0'
|
|
3986
|
-
? `linear-gradient(
|
|
3986
|
+
? `linear-gradient(
|
|
3987
|
+
rgba(var(--pt-card-pattern-overlay-rgb, 255, 255, 255), ${1 - patternTransparency}),
|
|
3988
|
+
rgba(var(--pt-card-pattern-overlay-rgb, 255, 255, 255), ${1 - patternTransparency})
|
|
3989
|
+
), url('${this.config.pattern.imageUrl}')`
|
|
3987
3990
|
: '';
|
|
3988
3991
|
const patternWidth = this.config.pattern?.width || '100%';
|
|
3989
3992
|
const patternHeight = this.config.pattern?.height || 'auto';
|
|
@@ -4004,6 +4007,7 @@ class PTCardComponent {
|
|
|
4004
4007
|
backgroundSize,
|
|
4005
4008
|
backgroundPosition,
|
|
4006
4009
|
backgroundRepeat,
|
|
4010
|
+
color: 'var(--pt-card-text, inherit)',
|
|
4007
4011
|
width: this.config.width || PTCardComponent.DEFAULT_WIDTH,
|
|
4008
4012
|
height: this.config.height || PTCardComponent.DEFAULT_HEIGHT,
|
|
4009
4013
|
border: this.config.noBorder
|
|
@@ -4031,6 +4035,7 @@ class PTCardComponent {
|
|
|
4031
4035
|
boxSizing: 'border-box',
|
|
4032
4036
|
overflowX: this.isScrollableHorizontal() ? 'auto' : 'hidden',
|
|
4033
4037
|
overflowY: this.isScrollableVertical() ? 'auto' : 'hidden',
|
|
4038
|
+
color: 'var(--pt-card-body-text, inherit)',
|
|
4034
4039
|
};
|
|
4035
4040
|
}
|
|
4036
4041
|
getHeaderStyles() {
|
|
@@ -4042,6 +4047,7 @@ class PTCardComponent {
|
|
|
4042
4047
|
alignItems,
|
|
4043
4048
|
marginBottom: '16px',
|
|
4044
4049
|
position: 'relative',
|
|
4050
|
+
color: 'var(--pt-card-header-text, inherit)',
|
|
4045
4051
|
};
|
|
4046
4052
|
}
|
|
4047
4053
|
isScrollableHorizontal() {
|
|
@@ -4061,18 +4067,18 @@ class PTCardComponent {
|
|
|
4061
4067
|
}
|
|
4062
4068
|
hexToRgba(hex, alpha) {
|
|
4063
4069
|
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
|
4064
|
-
hex = hex.replace(shorthandRegex, (_, r, g, b) => r + r + g +
|
|
4070
|
+
hex = hex.replace(shorthandRegex, (_, r, g, b) => r + r + g + b + b);
|
|
4065
4071
|
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
4066
4072
|
return result
|
|
4067
4073
|
? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`
|
|
4068
4074
|
: hex;
|
|
4069
4075
|
}
|
|
4070
4076
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTCardComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4071
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTCardComponent, isStandalone: false, selector: "pt-card", inputs: { config: "config" }, ngImport: i0, template: "<div\n class=\"pt-card card\"\n [ngClass]=\"getCardClass()\"\n [attr.id]=\"config.identifier\"\n [ngStyle]=\"getCardStyles()\"\n>\n <!-- Card Header -->\n @if (hasTitle()) {\n <div\n class=\"card-header\"\n [ngClass]=\"getHeaderClass()\"\n [ngStyle]=\"getHeaderStyles()\"\n >\n @if (getIconClass() && getIconPosition() === \"left\") {\n <i\n class=\"card-header-icon-left\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n ></i>\n }\n\n <span class=\"card-title\">\n {{ getTitleText() }}\n </span>\n\n @if (getIconClass() && getIconPosition() === \"right\") {\n <i\n class=\"card-header-icon-right\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n ></i>\n }\n\n @if (config.menu) {\n <pt-menu\n class=\"card-menu\"\n [config]=\"config.menu\"\n [ngClass]=\"{\n 'menu-left': getMenuPosition() === 'left',\n 'menu-right': getMenuPosition() === 'right',\n }\"\n ></pt-menu>\n }\n </div>\n }\n\n <!-- Card Body -->\n <div class=\"card-body\" [ngClass]=\"getBodyClass()\" [ngStyle]=\"getBodyStyles()\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".pt-card .card{display:flex;flex-direction:column;padding:16px;margin:0 auto;max-height:100vh;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;justify-content:flex-start;align-items:stretch;background-color:transparent}.pt-card .card.center-align{justify-content:center;align-items:center}.pt-card .card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;pointer-events:none;background-color:var( --background-color, rgba(255, 255, 255, 0) );background-image:var(
|
|
4077
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTCardComponent, isStandalone: false, selector: "pt-card", inputs: { config: "config" }, ngImport: i0, template: "<div\n class=\"pt-card card\"\n [ngClass]=\"getCardClass()\"\n [attr.id]=\"config.identifier\"\n [ngStyle]=\"getCardStyles()\"\n>\n <!-- Card Header -->\n @if (hasTitle()) {\n <div\n class=\"card-header\"\n [ngClass]=\"getHeaderClass()\"\n [ngStyle]=\"getHeaderStyles()\"\n >\n @if (getIconClass() && getIconPosition() === \"left\") {\n <i\n class=\"card-header-icon-left\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n ></i>\n }\n\n <span class=\"card-title\">\n {{ getTitleText() }}\n </span>\n\n @if (getIconClass() && getIconPosition() === \"right\") {\n <i\n class=\"card-header-icon-right\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n ></i>\n }\n\n @if (config.menu) {\n <pt-menu\n class=\"card-menu\"\n [config]=\"config.menu\"\n [ngClass]=\"{\n 'menu-left': getMenuPosition() === 'left',\n 'menu-right': getMenuPosition() === 'right',\n }\"\n ></pt-menu>\n }\n </div>\n }\n\n <!-- Card Body -->\n <div class=\"card-body\" [ngClass]=\"getBodyClass()\" [ngStyle]=\"getBodyStyles()\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".pt-card .card{display:flex;flex-direction:column;padding:16px;margin:0 auto;max-height:100vh;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;justify-content:flex-start;align-items:stretch;background-color:var(--pt-card-bg, transparent);color:var(--pt-card-text, inherit)}.pt-card .card.center-align{justify-content:center;align-items:center}.pt-card .card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;pointer-events:none;background-color:var( --background-color, var(--pt-card-overlay-bg, rgba(255, 255, 255, 0)) );background-image:var(--background-image-url, none);opacity:var(--image-opacity, 1);z-index:-1}.pt-card .card-body{display:flex;flex-direction:column;flex-grow:1;max-width:100%;z-index:1;padding:0;box-sizing:border-box;justify-content:flex-start;align-items:stretch;color:var(--pt-card-body-text, inherit)}.pt-card .card-body.center-align{justify-content:center;align-items:center}.pt-card .card-header{margin-bottom:16px;display:flex;position:relative;justify-content:flex-start;align-items:stretch;color:var(--pt-card-header-text, inherit)}.pt-card .card-header.center-align{justify-content:center;align-items:center}.pt-card .card-header-icon-left{margin-right:6px;color:var(--pt-card-icon, inherit)}.pt-card .card-header-icon-right{margin-left:6px;color:var(--pt-card-icon, inherit)}.pt-card .menu-left{position:absolute;left:0;top:0}.pt-card .menu-right{position:absolute;right:0;top:-2px}.pt-card .card-menu{margin-left:auto;cursor:pointer;color:var(--pt-card-menu-icon, inherit)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTMenuComponent, selector: "pt-menu", inputs: ["config"] }] }); }
|
|
4072
4078
|
}
|
|
4073
4079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTCardComponent, decorators: [{
|
|
4074
4080
|
type: Component,
|
|
4075
|
-
args: [{ selector: 'pt-card', standalone: false, template: "<div\n class=\"pt-card card\"\n [ngClass]=\"getCardClass()\"\n [attr.id]=\"config.identifier\"\n [ngStyle]=\"getCardStyles()\"\n>\n <!-- Card Header -->\n @if (hasTitle()) {\n <div\n class=\"card-header\"\n [ngClass]=\"getHeaderClass()\"\n [ngStyle]=\"getHeaderStyles()\"\n >\n @if (getIconClass() && getIconPosition() === \"left\") {\n <i\n class=\"card-header-icon-left\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n ></i>\n }\n\n <span class=\"card-title\">\n {{ getTitleText() }}\n </span>\n\n @if (getIconClass() && getIconPosition() === \"right\") {\n <i\n class=\"card-header-icon-right\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n ></i>\n }\n\n @if (config.menu) {\n <pt-menu\n class=\"card-menu\"\n [config]=\"config.menu\"\n [ngClass]=\"{\n 'menu-left': getMenuPosition() === 'left',\n 'menu-right': getMenuPosition() === 'right',\n }\"\n ></pt-menu>\n }\n </div>\n }\n\n <!-- Card Body -->\n <div class=\"card-body\" [ngClass]=\"getBodyClass()\" [ngStyle]=\"getBodyStyles()\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".pt-card .card{display:flex;flex-direction:column;padding:16px;margin:0 auto;max-height:100vh;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;justify-content:flex-start;align-items:stretch;background-color:transparent}.pt-card .card.center-align{justify-content:center;align-items:center}.pt-card .card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;pointer-events:none;background-color:var( --background-color, rgba(255, 255, 255, 0) );background-image:var(
|
|
4081
|
+
args: [{ selector: 'pt-card', standalone: false, template: "<div\n class=\"pt-card card\"\n [ngClass]=\"getCardClass()\"\n [attr.id]=\"config.identifier\"\n [ngStyle]=\"getCardStyles()\"\n>\n <!-- Card Header -->\n @if (hasTitle()) {\n <div\n class=\"card-header\"\n [ngClass]=\"getHeaderClass()\"\n [ngStyle]=\"getHeaderStyles()\"\n >\n @if (getIconClass() && getIconPosition() === \"left\") {\n <i\n class=\"card-header-icon-left\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n ></i>\n }\n\n <span class=\"card-title\">\n {{ getTitleText() }}\n </span>\n\n @if (getIconClass() && getIconPosition() === \"right\") {\n <i\n class=\"card-header-icon-right\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n ></i>\n }\n\n @if (config.menu) {\n <pt-menu\n class=\"card-menu\"\n [config]=\"config.menu\"\n [ngClass]=\"{\n 'menu-left': getMenuPosition() === 'left',\n 'menu-right': getMenuPosition() === 'right',\n }\"\n ></pt-menu>\n }\n </div>\n }\n\n <!-- Card Body -->\n <div class=\"card-body\" [ngClass]=\"getBodyClass()\" [ngStyle]=\"getBodyStyles()\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".pt-card .card{display:flex;flex-direction:column;padding:16px;margin:0 auto;max-height:100vh;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;justify-content:flex-start;align-items:stretch;background-color:var(--pt-card-bg, transparent);color:var(--pt-card-text, inherit)}.pt-card .card.center-align{justify-content:center;align-items:center}.pt-card .card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;pointer-events:none;background-color:var( --background-color, var(--pt-card-overlay-bg, rgba(255, 255, 255, 0)) );background-image:var(--background-image-url, none);opacity:var(--image-opacity, 1);z-index:-1}.pt-card .card-body{display:flex;flex-direction:column;flex-grow:1;max-width:100%;z-index:1;padding:0;box-sizing:border-box;justify-content:flex-start;align-items:stretch;color:var(--pt-card-body-text, inherit)}.pt-card .card-body.center-align{justify-content:center;align-items:center}.pt-card .card-header{margin-bottom:16px;display:flex;position:relative;justify-content:flex-start;align-items:stretch;color:var(--pt-card-header-text, inherit)}.pt-card .card-header.center-align{justify-content:center;align-items:center}.pt-card .card-header-icon-left{margin-right:6px;color:var(--pt-card-icon, inherit)}.pt-card .card-header-icon-right{margin-left:6px;color:var(--pt-card-icon, inherit)}.pt-card .menu-left{position:absolute;left:0;top:0}.pt-card .menu-right{position:absolute;right:0;top:-2px}.pt-card .card-menu{margin-left:auto;cursor:pointer;color:var(--pt-card-menu-icon, inherit)}\n"] }]
|
|
4076
4082
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
|
|
4077
4083
|
type: Input
|
|
4078
4084
|
}] } });
|
|
@@ -4577,15 +4583,20 @@ class PTNavbarMenuComponent {
|
|
|
4577
4583
|
const backgroundRepeat = `${repeatX} ${repeatY}`;
|
|
4578
4584
|
const backgroundPosition = this.navBarMenuConfig.pattern?.position || 'center';
|
|
4579
4585
|
const backgroundImage = imageUrl
|
|
4580
|
-
? `linear-gradient(
|
|
4581
|
-
|
|
4586
|
+
? `linear-gradient(
|
|
4587
|
+
rgba(var(--pt-navbar-pattern-overlay-rgb, 255, 255, 255), ${1 - parseFloat(transparency) / 100}),
|
|
4588
|
+
rgba(var(--pt-navbar-pattern-overlay-rgb, 255, 255, 255), ${1 - parseFloat(transparency) / 100})
|
|
4589
|
+
), url(${imageUrl})`
|
|
4582
4590
|
: '';
|
|
4583
4591
|
return {
|
|
4584
|
-
backgroundColor: this.navBarMenuConfig.pattern
|
|
4592
|
+
backgroundColor: this.navBarMenuConfig.pattern
|
|
4593
|
+
? 'var(--pt-navbar-pattern-bg, transparent)'
|
|
4594
|
+
: 'var(--pt-navbar-bg, #ffffff)',
|
|
4585
4595
|
backgroundImage,
|
|
4586
4596
|
backgroundSize: `${patternWidth} ${patternHeight}`,
|
|
4587
4597
|
backgroundPosition,
|
|
4588
4598
|
backgroundRepeat,
|
|
4599
|
+
color: 'var(--pt-navbar-text, #1f2937)',
|
|
4589
4600
|
height: this.navBarMenuConfig.height || 'auto',
|
|
4590
4601
|
minHeight: this.navBarMenuConfig.minHeight || '56px',
|
|
4591
4602
|
paddingTop: this.navBarMenuConfig.paddingTop || '0',
|
|
@@ -4602,23 +4613,23 @@ class PTNavbarMenuComponent {
|
|
|
4602
4613
|
getToggleButtonStyles() {
|
|
4603
4614
|
return {
|
|
4604
4615
|
color: this.navBarMenuConfig.toggleButtonColor ||
|
|
4605
|
-
|
|
4616
|
+
'var(--pt-navbar-toggle-color, #333)',
|
|
4606
4617
|
};
|
|
4607
4618
|
}
|
|
4608
4619
|
getDateTimeTextStyles() {
|
|
4609
4620
|
const s = this.navBarMenuConfig.dateTime?.textStyle;
|
|
4610
4621
|
return {
|
|
4611
|
-
color: s?.color ?? '#222',
|
|
4622
|
+
color: s?.color ?? 'var(--pt-navbar-datetime-text, #222)',
|
|
4612
4623
|
fontSize: s?.fontSize ?? '14px',
|
|
4613
4624
|
fontWeight: s?.fontWeight ?? '600',
|
|
4614
4625
|
};
|
|
4615
4626
|
}
|
|
4616
4627
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4617
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNavbarMenuComponent, isStandalone: false, selector: "pt-nav-bar-menu", inputs: { navBarMenuConfig: "navBarMenuConfig", serverDateTime: "serverDateTime" }, outputs: { toggleSidebar: "toggleSidebar" }, host: { listeners: { "document:click": "closeUserMenu()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n <!-- LEFT -->\n <div class=\"navbar-left\">\n <a\n [routerLink]=\"\n isImageStyle(navBarMenuConfig.logo)\n ? navBarMenuConfig.logo.routerLink\n : '/'\n \"\n class=\"logo-link\"\n >\n <img\n [src]=\"getLogoUrl()\"\n [alt]=\"getLogoAltText()\"\n [ngStyle]=\"getLogoStyles()\"\n class=\"navbar-logo\"\n />\n\n <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n {{ getAppName() }}\n </span>\n </a>\n\n <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n <i\n [class]=\"getToggleButtonIcon()\"\n [ngStyle]=\"getToggleButtonStyles()\"\n ></i>\n </a>\n </div>\n\n <!-- MIDDLE DateTime -->\n @if (hasDateTime()) {\n <div class=\"navbar-middle\" [ngClass]=\"getDateTimePositionClass()\">\n <div class=\"navbar-datetime\">\n <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n {{ dateTimeText }}\n </span>\n\n @if (isFixedMode()) {\n <input\n class=\"dt-input\"\n type=\"datetime-local\"\n step=\"1\"\n [value]=\"manualDateTimeLocal\"\n (input)=\"onManualDateTimeChange($any($event.target).value)\"\n />\n }\n </div>\n </div>\n }\n\n <!-- RIGHT -->\n <div class=\"navbar-actions\">\n <div class=\"navbar-right\">\n @for (menuConfig of navBarMenuConfig.menus; track menuConfig) {\n <pt-menu-fancy [config]=\"menuConfig\"></pt-menu-fancy>\n }\n </div>\n\n @if (hasUser()) {\n <div class=\"navbar-user\" (click)=\"$event.stopPropagation()\">\n @if (showProfileLeftOfAvatar()) {\n <div\n class=\"navbar-user-profile-left\"\n [ngStyle]=\"getUserProfileTextStyles()\"\n >\n {{ getUserProfile() }}\n </div>\n }\n\n <button\n type=\"button\"\n class=\"navbar-user-trigger\"\n (click)=\"toggleUserMenu()\"\n >\n <div class=\"navbar-user-avatar\" [ngStyle]=\"getUserAvatarStyles()\">\n @if (isInitialsAvatar()) {\n <span>{{ getUserInitials() }}</span>\n } @else {\n <i class=\"fa fa-user\"></i>\n }\n </div>\n </button>\n\n @if (isUserMenuOpen) {\n <div class=\"navbar-user-menu\">\n <div class=\"navbar-user-menu-header\">\n <div\n class=\"navbar-user-menu-avatar\"\n [ngStyle]=\"getUserAvatarStyles()\"\n >\n @if (isInitialsAvatar()) {\n <span>{{ getUserInitials() }}</span>\n } @else {\n <i class=\"fa fa-user\"></i>\n }\n </div>\n\n <div class=\"navbar-user-menu-identity\">\n <div class=\"navbar-user-menu-name\">\n {{ getUserFullName() }}\n </div>\n\n @if (showProfileInMenu()) {\n <div\n class=\"navbar-user-menu-profile\"\n [ngStyle]=\"getUserProfileTextStyles()\"\n >\n {{ getUserProfile() }}\n </div>\n }\n\n <div class=\"navbar-user-menu-username\">\n {{ getUsername() }}\n </div>\n </div>\n </div>\n\n @if (hasUserMenuItems()) {\n <div class=\"navbar-user-menu-separator\"></div>\n\n @for (item of getUserMenuItems(); track item) {\n @if (item.separatorBefore) {\n <div class=\"navbar-user-menu-separator\"></div>\n }\n\n <button\n type=\"button\"\n [class]=\"getUserMenuItemClasses(item)\"\n [disabled]=\"item.disabled\"\n (click)=\"onUserMenuItemClick(item)\"\n >\n @if (getUserMenuItemIcon(item)) {\n <i [class]=\"getUserMenuItemIcon(item)\"></i>\n }\n\n <span>{{ item.text }}</span>\n </button>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;align-items:center;justify-content:space-between;padding-right:10px;padding-left:10px;border-bottom:1px solid #ddd;background-color:#fff;background-size:cover;background-position:center;gap:12px;min-width:0;width:100%;box-sizing:border-box}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;text-decoration:none;color:inherit;min-width:0}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-middle{flex:1 1 auto;display:flex;align-items:center;min-width:0;padding:0 12px}.pt-nav-bar-menu .navbar-middle.dt-pos-left{justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-center{justify-content:center}.pt-nav-bar-menu .navbar-middle.dt-pos-right{justify-content:flex-end}.pt-nav-bar-menu .navbar-datetime{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap;max-width:100%}.pt-nav-bar-menu .navbar-datetime .dt-value{white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-input{height:32px;padding:0 8px;border:1px solid rgba(0,0,0,.18);border-radius:6px;background:#fff;font-size:12px;color:#333;outline:none}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:#034c83b3;box-shadow:0 0 0 3px #034c831f}.pt-nav-bar-menu .navbar-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:#333;text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:#000}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:#333}.pt-nav-bar-menu .toggle-btn:hover{background-color:#f1f1f1}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:.65rem;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:170px;color:#334155;font-size:.82rem;font-weight:700;background:#eff6ff;border:1px solid #bfdbfe;border-radius:999px;padding:.28rem .65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-trigger{border:none;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{width:38px;height:38px;min-width:38px;border-radius:999px;background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-avatar i,.pt-nav-bar-menu .navbar-user-menu-avatar i{font-size:1rem}.pt-nav-bar-menu .navbar-user-menu{position:absolute;top:calc(100% + 10px);right:0;width:260px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 18px 45px #0f172a29;z-index:9999;padding:.75rem;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-header{display:flex;align-items:center;gap:.75rem;padding:.35rem .25rem .65rem}.pt-nav-bar-menu .navbar-user-menu-avatar{width:46px;height:46px;min-width:46px;font-size:1.05rem}.pt-nav-bar-menu .navbar-user-menu-identity{min-width:0}.pt-nav-bar-menu .navbar-user-menu-name{color:#0f172a;font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-profile{margin-top:.15rem;color:#2563eb;font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-username{margin-top:.15rem;color:#64748b;font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-separator{height:1px;background:#e5e7eb;margin:.4rem 0}.pt-nav-bar-menu .navbar-user-menu-item{width:100%;min-height:36px;border:none;background:transparent;border-radius:9px;color:#334155;display:flex;align-items:center;gap:.55rem;padding:.5rem .55rem;font-size:.86rem;font-weight:600;cursor:pointer;text-align:left;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-item:hover{background:#f1f5f9;color:#0f172a}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:#dc2626}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover{background:#fef2f2;color:#b91c1c}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px}.pt-nav-bar-menu .navbar-left{width:100%;justify-content:space-between}.pt-nav-bar-menu .navbar-middle{width:100%;padding:0;justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-right .navbar-datetime,.pt-nav-bar-menu .navbar-middle.dt-pos-center .navbar-datetime{padding-left:0;border-left:none}.pt-nav-bar-menu .navbar-actions{width:100%;justify-content:flex-end}.pt-nav-bar-menu .navbar-user-menu{right:0}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:520px){.pt-nav-bar-menu .navbar-datetime .dt-value,.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .navbar-user-menu{width:240px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: PTMenuFancyComponent, selector: "pt-menu-fancy", inputs: ["config"] }] }); }
|
|
4628
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNavbarMenuComponent, isStandalone: false, selector: "pt-nav-bar-menu", inputs: { navBarMenuConfig: "navBarMenuConfig", serverDateTime: "serverDateTime" }, outputs: { toggleSidebar: "toggleSidebar" }, host: { listeners: { "document:click": "closeUserMenu()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n <!-- LEFT -->\n <div class=\"navbar-left\">\n <a\n [routerLink]=\"\n isImageStyle(navBarMenuConfig.logo)\n ? navBarMenuConfig.logo.routerLink\n : '/'\n \"\n class=\"logo-link\"\n >\n <img\n [src]=\"getLogoUrl()\"\n [alt]=\"getLogoAltText()\"\n [ngStyle]=\"getLogoStyles()\"\n class=\"navbar-logo\"\n />\n\n <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n {{ getAppName() }}\n </span>\n </a>\n\n <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n <i\n [class]=\"getToggleButtonIcon()\"\n [ngStyle]=\"getToggleButtonStyles()\"\n ></i>\n </a>\n </div>\n\n <!-- MIDDLE DateTime -->\n @if (hasDateTime()) {\n <div class=\"navbar-middle\" [ngClass]=\"getDateTimePositionClass()\">\n <div class=\"navbar-datetime\">\n <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n {{ dateTimeText }}\n </span>\n\n @if (isFixedMode()) {\n <input\n class=\"dt-input\"\n type=\"datetime-local\"\n step=\"1\"\n [value]=\"manualDateTimeLocal\"\n (input)=\"onManualDateTimeChange($any($event.target).value)\"\n />\n }\n </div>\n </div>\n }\n\n <!-- RIGHT -->\n <div class=\"navbar-actions\">\n <div class=\"navbar-right\">\n @for (menuConfig of navBarMenuConfig.menus; track menuConfig) {\n <pt-menu-fancy [config]=\"menuConfig\"></pt-menu-fancy>\n }\n </div>\n\n @if (hasUser()) {\n <div class=\"navbar-user\" (click)=\"$event.stopPropagation()\">\n @if (showProfileLeftOfAvatar()) {\n <div\n class=\"navbar-user-profile-left\"\n [ngStyle]=\"getUserProfileTextStyles()\"\n >\n {{ getUserProfile() }}\n </div>\n }\n\n <button\n type=\"button\"\n class=\"navbar-user-trigger\"\n (click)=\"toggleUserMenu()\"\n >\n <div class=\"navbar-user-avatar\" [ngStyle]=\"getUserAvatarStyles()\">\n @if (isInitialsAvatar()) {\n <span>{{ getUserInitials() }}</span>\n } @else {\n <i class=\"fa fa-user\"></i>\n }\n </div>\n </button>\n\n @if (isUserMenuOpen) {\n <div class=\"navbar-user-menu\">\n <div class=\"navbar-user-menu-header\">\n <div\n class=\"navbar-user-menu-avatar\"\n [ngStyle]=\"getUserAvatarStyles()\"\n >\n @if (isInitialsAvatar()) {\n <span>{{ getUserInitials() }}</span>\n } @else {\n <i class=\"fa fa-user\"></i>\n }\n </div>\n\n <div class=\"navbar-user-menu-identity\">\n <div class=\"navbar-user-menu-name\">\n {{ getUserFullName() }}\n </div>\n\n @if (showProfileInMenu()) {\n <div\n class=\"navbar-user-menu-profile\"\n [ngStyle]=\"getUserProfileTextStyles()\"\n >\n {{ getUserProfile() }}\n </div>\n }\n\n <div class=\"navbar-user-menu-username\">\n {{ getUsername() }}\n </div>\n </div>\n </div>\n\n @if (hasUserMenuItems()) {\n <div class=\"navbar-user-menu-separator\"></div>\n\n @for (item of getUserMenuItems(); track item) {\n @if (item.separatorBefore) {\n <div class=\"navbar-user-menu-separator\"></div>\n }\n\n <button\n type=\"button\"\n [class]=\"getUserMenuItemClasses(item)\"\n [disabled]=\"item.disabled\"\n (click)=\"onUserMenuItemClick(item)\"\n >\n @if (getUserMenuItemIcon(item)) {\n <i [class]=\"getUserMenuItemIcon(item)\"></i>\n }\n\n <span>{{ item.text }}</span>\n </button>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;align-items:center;justify-content:space-between;padding-right:10px;padding-left:10px;border-bottom:1px solid var(--pt-navbar-border, #ddd);background-color:var(--pt-navbar-bg, #fff);color:var(--pt-navbar-text, #1f2937);background-size:cover;background-position:center;gap:12px;min-width:0;width:100%;box-sizing:border-box}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;text-decoration:none;color:inherit;min-width:0}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-title{color:var(--pt-navbar-title, inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-middle{flex:1 1 auto;display:flex;align-items:center;min-width:0;padding:0 12px}.pt-nav-bar-menu .navbar-middle.dt-pos-left{justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-center{justify-content:center}.pt-nav-bar-menu .navbar-middle.dt-pos-right{justify-content:flex-end}.pt-nav-bar-menu .navbar-datetime{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap;max-width:100%}.pt-nav-bar-menu .navbar-datetime .dt-value{color:var(--pt-navbar-datetime-text, inherit);white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-input{height:32px;padding:0 8px;border:1px solid var(--pt-navbar-input-border, rgba(0, 0, 0, .18));border-radius:6px;background:var(--pt-navbar-input-bg, #fff);font-size:12px;color:var(--pt-navbar-input-text, #333);outline:none}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:var(--pt-navbar-input-focus-border, rgba(3, 76, 131, .7));box-shadow:0 0 0 3px var(--pt-navbar-input-focus-shadow, rgba(3, 76, 131, .12))}.pt-nav-bar-menu .navbar-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:var(--pt-navbar-link, #333);text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:var(--pt-navbar-link-hover, #000)}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:var(--pt-navbar-toggle-color, #333)}.pt-nav-bar-menu .toggle-btn:hover{background-color:var(--pt-navbar-toggle-hover-bg, #f1f1f1)}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:.65rem;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:170px;color:var(--pt-navbar-user-profile-text, #334155);font-size:.82rem;font-weight:700;background:var(--pt-navbar-user-profile-bg, #eff6ff);border:1px solid var(--pt-navbar-user-profile-border, #bfdbfe);border-radius:999px;padding:.28rem .65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-trigger{border:none;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{width:38px;height:38px;min-width:38px;border-radius:999px;background:var(--pt-navbar-user-avatar-bg, #eff6ff);color:var(--pt-navbar-user-avatar-text, #2563eb);border:1px solid var(--pt-navbar-user-avatar-border, #bfdbfe);display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-avatar i,.pt-nav-bar-menu .navbar-user-menu-avatar i{font-size:1rem}.pt-nav-bar-menu .navbar-user-menu{position:absolute;top:calc(100% + 10px);right:0;width:260px;background:var(--pt-navbar-user-menu-bg, #ffffff);color:var(--pt-navbar-user-menu-text, #334155);border:1px solid var(--pt-navbar-user-menu-border, #e5e7eb);border-radius:14px;box-shadow:var( --pt-navbar-user-menu-shadow, 0 18px 45px rgba(15, 23, 42, .16) );z-index:9999;padding:.75rem;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-header{display:flex;align-items:center;gap:.75rem;padding:.35rem .25rem .65rem}.pt-nav-bar-menu .navbar-user-menu-avatar{width:46px;height:46px;min-width:46px;font-size:1.05rem}.pt-nav-bar-menu .navbar-user-menu-identity{min-width:0}.pt-nav-bar-menu .navbar-user-menu-name{color:var(--pt-navbar-user-menu-name, #0f172a);font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-profile{margin-top:.15rem;color:var(--pt-navbar-user-menu-profile, #2563eb);font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-username{margin-top:.15rem;color:var(--pt-navbar-user-menu-username, #64748b);font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-separator{height:1px;background:var(--pt-navbar-user-menu-separator, #e5e7eb);margin:.4rem 0}.pt-nav-bar-menu .navbar-user-menu-item{width:100%;min-height:36px;border:none;background:transparent;border-radius:9px;color:var(--pt-navbar-user-menu-item-text, #334155);display:flex;align-items:center;gap:.55rem;padding:.5rem .55rem;font-size:.86rem;font-weight:600;cursor:pointer;text-align:left;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-item:hover{background:var(--pt-navbar-user-menu-item-hover-bg, #f1f5f9);color:var(--pt-navbar-user-menu-item-hover-text, #0f172a)}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:var(--pt-navbar-user-menu-item-danger-text, #dc2626)}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover{background:var(--pt-navbar-user-menu-item-danger-hover-bg, #fef2f2);color:var(--pt-navbar-user-menu-item-danger-hover-text, #b91c1c)}.pt-nav-bar-menu .navbar-user-menu-item.disabled,.pt-nav-bar-menu .navbar-user-menu-item:disabled{opacity:.55;cursor:not-allowed}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px}.pt-nav-bar-menu .navbar-left{width:100%;justify-content:space-between}.pt-nav-bar-menu .navbar-middle{width:100%;padding:0;justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-right .navbar-datetime,.pt-nav-bar-menu .navbar-middle.dt-pos-center .navbar-datetime{padding-left:0;border-left:none}.pt-nav-bar-menu .navbar-actions{width:100%;justify-content:flex-end}.pt-nav-bar-menu .navbar-user-menu{right:0}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:520px){.pt-nav-bar-menu .navbar-datetime .dt-value,.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .navbar-user-menu{width:240px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: PTMenuFancyComponent, selector: "pt-menu-fancy", inputs: ["config"] }] }); }
|
|
4618
4629
|
}
|
|
4619
4630
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuComponent, decorators: [{
|
|
4620
4631
|
type: Component,
|
|
4621
|
-
args: [{ selector: 'pt-nav-bar-menu', standalone: false, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n <!-- LEFT -->\n <div class=\"navbar-left\">\n <a\n [routerLink]=\"\n isImageStyle(navBarMenuConfig.logo)\n ? navBarMenuConfig.logo.routerLink\n : '/'\n \"\n class=\"logo-link\"\n >\n <img\n [src]=\"getLogoUrl()\"\n [alt]=\"getLogoAltText()\"\n [ngStyle]=\"getLogoStyles()\"\n class=\"navbar-logo\"\n />\n\n <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n {{ getAppName() }}\n </span>\n </a>\n\n <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n <i\n [class]=\"getToggleButtonIcon()\"\n [ngStyle]=\"getToggleButtonStyles()\"\n ></i>\n </a>\n </div>\n\n <!-- MIDDLE DateTime -->\n @if (hasDateTime()) {\n <div class=\"navbar-middle\" [ngClass]=\"getDateTimePositionClass()\">\n <div class=\"navbar-datetime\">\n <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n {{ dateTimeText }}\n </span>\n\n @if (isFixedMode()) {\n <input\n class=\"dt-input\"\n type=\"datetime-local\"\n step=\"1\"\n [value]=\"manualDateTimeLocal\"\n (input)=\"onManualDateTimeChange($any($event.target).value)\"\n />\n }\n </div>\n </div>\n }\n\n <!-- RIGHT -->\n <div class=\"navbar-actions\">\n <div class=\"navbar-right\">\n @for (menuConfig of navBarMenuConfig.menus; track menuConfig) {\n <pt-menu-fancy [config]=\"menuConfig\"></pt-menu-fancy>\n }\n </div>\n\n @if (hasUser()) {\n <div class=\"navbar-user\" (click)=\"$event.stopPropagation()\">\n @if (showProfileLeftOfAvatar()) {\n <div\n class=\"navbar-user-profile-left\"\n [ngStyle]=\"getUserProfileTextStyles()\"\n >\n {{ getUserProfile() }}\n </div>\n }\n\n <button\n type=\"button\"\n class=\"navbar-user-trigger\"\n (click)=\"toggleUserMenu()\"\n >\n <div class=\"navbar-user-avatar\" [ngStyle]=\"getUserAvatarStyles()\">\n @if (isInitialsAvatar()) {\n <span>{{ getUserInitials() }}</span>\n } @else {\n <i class=\"fa fa-user\"></i>\n }\n </div>\n </button>\n\n @if (isUserMenuOpen) {\n <div class=\"navbar-user-menu\">\n <div class=\"navbar-user-menu-header\">\n <div\n class=\"navbar-user-menu-avatar\"\n [ngStyle]=\"getUserAvatarStyles()\"\n >\n @if (isInitialsAvatar()) {\n <span>{{ getUserInitials() }}</span>\n } @else {\n <i class=\"fa fa-user\"></i>\n }\n </div>\n\n <div class=\"navbar-user-menu-identity\">\n <div class=\"navbar-user-menu-name\">\n {{ getUserFullName() }}\n </div>\n\n @if (showProfileInMenu()) {\n <div\n class=\"navbar-user-menu-profile\"\n [ngStyle]=\"getUserProfileTextStyles()\"\n >\n {{ getUserProfile() }}\n </div>\n }\n\n <div class=\"navbar-user-menu-username\">\n {{ getUsername() }}\n </div>\n </div>\n </div>\n\n @if (hasUserMenuItems()) {\n <div class=\"navbar-user-menu-separator\"></div>\n\n @for (item of getUserMenuItems(); track item) {\n @if (item.separatorBefore) {\n <div class=\"navbar-user-menu-separator\"></div>\n }\n\n <button\n type=\"button\"\n [class]=\"getUserMenuItemClasses(item)\"\n [disabled]=\"item.disabled\"\n (click)=\"onUserMenuItemClick(item)\"\n >\n @if (getUserMenuItemIcon(item)) {\n <i [class]=\"getUserMenuItemIcon(item)\"></i>\n }\n\n <span>{{ item.text }}</span>\n </button>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;align-items:center;justify-content:space-between;padding-right:10px;padding-left:10px;border-bottom:1px solid #ddd;background-color:#fff;background-size:cover;background-position:center;gap:12px;min-width:0;width:100%;box-sizing:border-box}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;text-decoration:none;color:inherit;min-width:0}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-middle{flex:1 1 auto;display:flex;align-items:center;min-width:0;padding:0 12px}.pt-nav-bar-menu .navbar-middle.dt-pos-left{justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-center{justify-content:center}.pt-nav-bar-menu .navbar-middle.dt-pos-right{justify-content:flex-end}.pt-nav-bar-menu .navbar-datetime{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap;max-width:100%}.pt-nav-bar-menu .navbar-datetime .dt-value{white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-input{height:32px;padding:0 8px;border:1px solid rgba(0,0,0,.18);border-radius:6px;background:#fff;font-size:12px;color:#333;outline:none}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:#034c83b3;box-shadow:0 0 0 3px #034c831f}.pt-nav-bar-menu .navbar-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:#333;text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:#000}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:#333}.pt-nav-bar-menu .toggle-btn:hover{background-color:#f1f1f1}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:.65rem;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:170px;color:#334155;font-size:.82rem;font-weight:700;background:#eff6ff;border:1px solid #bfdbfe;border-radius:999px;padding:.28rem .65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-trigger{border:none;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{width:38px;height:38px;min-width:38px;border-radius:999px;background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-avatar i,.pt-nav-bar-menu .navbar-user-menu-avatar i{font-size:1rem}.pt-nav-bar-menu .navbar-user-menu{position:absolute;top:calc(100% + 10px);right:0;width:260px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 18px 45px #0f172a29;z-index:9999;padding:.75rem;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-header{display:flex;align-items:center;gap:.75rem;padding:.35rem .25rem .65rem}.pt-nav-bar-menu .navbar-user-menu-avatar{width:46px;height:46px;min-width:46px;font-size:1.05rem}.pt-nav-bar-menu .navbar-user-menu-identity{min-width:0}.pt-nav-bar-menu .navbar-user-menu-name{color:#0f172a;font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-profile{margin-top:.15rem;color:#2563eb;font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-username{margin-top:.15rem;color:#64748b;font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-separator{height:1px;background:#e5e7eb;margin:.4rem 0}.pt-nav-bar-menu .navbar-user-menu-item{width:100%;min-height:36px;border:none;background:transparent;border-radius:9px;color:#334155;display:flex;align-items:center;gap:.55rem;padding:.5rem .55rem;font-size:.86rem;font-weight:600;cursor:pointer;text-align:left;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-item:hover{background:#f1f5f9;color:#0f172a}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:#dc2626}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover{background:#fef2f2;color:#b91c1c}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px}.pt-nav-bar-menu .navbar-left{width:100%;justify-content:space-between}.pt-nav-bar-menu .navbar-middle{width:100%;padding:0;justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-right .navbar-datetime,.pt-nav-bar-menu .navbar-middle.dt-pos-center .navbar-datetime{padding-left:0;border-left:none}.pt-nav-bar-menu .navbar-actions{width:100%;justify-content:flex-end}.pt-nav-bar-menu .navbar-user-menu{right:0}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:520px){.pt-nav-bar-menu .navbar-datetime .dt-value,.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .navbar-user-menu{width:240px}}\n"] }]
|
|
4632
|
+
args: [{ selector: 'pt-nav-bar-menu', standalone: false, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n <!-- LEFT -->\n <div class=\"navbar-left\">\n <a\n [routerLink]=\"\n isImageStyle(navBarMenuConfig.logo)\n ? navBarMenuConfig.logo.routerLink\n : '/'\n \"\n class=\"logo-link\"\n >\n <img\n [src]=\"getLogoUrl()\"\n [alt]=\"getLogoAltText()\"\n [ngStyle]=\"getLogoStyles()\"\n class=\"navbar-logo\"\n />\n\n <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n {{ getAppName() }}\n </span>\n </a>\n\n <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n <i\n [class]=\"getToggleButtonIcon()\"\n [ngStyle]=\"getToggleButtonStyles()\"\n ></i>\n </a>\n </div>\n\n <!-- MIDDLE DateTime -->\n @if (hasDateTime()) {\n <div class=\"navbar-middle\" [ngClass]=\"getDateTimePositionClass()\">\n <div class=\"navbar-datetime\">\n <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n {{ dateTimeText }}\n </span>\n\n @if (isFixedMode()) {\n <input\n class=\"dt-input\"\n type=\"datetime-local\"\n step=\"1\"\n [value]=\"manualDateTimeLocal\"\n (input)=\"onManualDateTimeChange($any($event.target).value)\"\n />\n }\n </div>\n </div>\n }\n\n <!-- RIGHT -->\n <div class=\"navbar-actions\">\n <div class=\"navbar-right\">\n @for (menuConfig of navBarMenuConfig.menus; track menuConfig) {\n <pt-menu-fancy [config]=\"menuConfig\"></pt-menu-fancy>\n }\n </div>\n\n @if (hasUser()) {\n <div class=\"navbar-user\" (click)=\"$event.stopPropagation()\">\n @if (showProfileLeftOfAvatar()) {\n <div\n class=\"navbar-user-profile-left\"\n [ngStyle]=\"getUserProfileTextStyles()\"\n >\n {{ getUserProfile() }}\n </div>\n }\n\n <button\n type=\"button\"\n class=\"navbar-user-trigger\"\n (click)=\"toggleUserMenu()\"\n >\n <div class=\"navbar-user-avatar\" [ngStyle]=\"getUserAvatarStyles()\">\n @if (isInitialsAvatar()) {\n <span>{{ getUserInitials() }}</span>\n } @else {\n <i class=\"fa fa-user\"></i>\n }\n </div>\n </button>\n\n @if (isUserMenuOpen) {\n <div class=\"navbar-user-menu\">\n <div class=\"navbar-user-menu-header\">\n <div\n class=\"navbar-user-menu-avatar\"\n [ngStyle]=\"getUserAvatarStyles()\"\n >\n @if (isInitialsAvatar()) {\n <span>{{ getUserInitials() }}</span>\n } @else {\n <i class=\"fa fa-user\"></i>\n }\n </div>\n\n <div class=\"navbar-user-menu-identity\">\n <div class=\"navbar-user-menu-name\">\n {{ getUserFullName() }}\n </div>\n\n @if (showProfileInMenu()) {\n <div\n class=\"navbar-user-menu-profile\"\n [ngStyle]=\"getUserProfileTextStyles()\"\n >\n {{ getUserProfile() }}\n </div>\n }\n\n <div class=\"navbar-user-menu-username\">\n {{ getUsername() }}\n </div>\n </div>\n </div>\n\n @if (hasUserMenuItems()) {\n <div class=\"navbar-user-menu-separator\"></div>\n\n @for (item of getUserMenuItems(); track item) {\n @if (item.separatorBefore) {\n <div class=\"navbar-user-menu-separator\"></div>\n }\n\n <button\n type=\"button\"\n [class]=\"getUserMenuItemClasses(item)\"\n [disabled]=\"item.disabled\"\n (click)=\"onUserMenuItemClick(item)\"\n >\n @if (getUserMenuItemIcon(item)) {\n <i [class]=\"getUserMenuItemIcon(item)\"></i>\n }\n\n <span>{{ item.text }}</span>\n </button>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;align-items:center;justify-content:space-between;padding-right:10px;padding-left:10px;border-bottom:1px solid var(--pt-navbar-border, #ddd);background-color:var(--pt-navbar-bg, #fff);color:var(--pt-navbar-text, #1f2937);background-size:cover;background-position:center;gap:12px;min-width:0;width:100%;box-sizing:border-box}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;text-decoration:none;color:inherit;min-width:0}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-title{color:var(--pt-navbar-title, inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-middle{flex:1 1 auto;display:flex;align-items:center;min-width:0;padding:0 12px}.pt-nav-bar-menu .navbar-middle.dt-pos-left{justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-center{justify-content:center}.pt-nav-bar-menu .navbar-middle.dt-pos-right{justify-content:flex-end}.pt-nav-bar-menu .navbar-datetime{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap;max-width:100%}.pt-nav-bar-menu .navbar-datetime .dt-value{color:var(--pt-navbar-datetime-text, inherit);white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-input{height:32px;padding:0 8px;border:1px solid var(--pt-navbar-input-border, rgba(0, 0, 0, .18));border-radius:6px;background:var(--pt-navbar-input-bg, #fff);font-size:12px;color:var(--pt-navbar-input-text, #333);outline:none}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:var(--pt-navbar-input-focus-border, rgba(3, 76, 131, .7));box-shadow:0 0 0 3px var(--pt-navbar-input-focus-shadow, rgba(3, 76, 131, .12))}.pt-nav-bar-menu .navbar-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:var(--pt-navbar-link, #333);text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:var(--pt-navbar-link-hover, #000)}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:var(--pt-navbar-toggle-color, #333)}.pt-nav-bar-menu .toggle-btn:hover{background-color:var(--pt-navbar-toggle-hover-bg, #f1f1f1)}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:.65rem;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:170px;color:var(--pt-navbar-user-profile-text, #334155);font-size:.82rem;font-weight:700;background:var(--pt-navbar-user-profile-bg, #eff6ff);border:1px solid var(--pt-navbar-user-profile-border, #bfdbfe);border-radius:999px;padding:.28rem .65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-trigger{border:none;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{width:38px;height:38px;min-width:38px;border-radius:999px;background:var(--pt-navbar-user-avatar-bg, #eff6ff);color:var(--pt-navbar-user-avatar-text, #2563eb);border:1px solid var(--pt-navbar-user-avatar-border, #bfdbfe);display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-avatar i,.pt-nav-bar-menu .navbar-user-menu-avatar i{font-size:1rem}.pt-nav-bar-menu .navbar-user-menu{position:absolute;top:calc(100% + 10px);right:0;width:260px;background:var(--pt-navbar-user-menu-bg, #ffffff);color:var(--pt-navbar-user-menu-text, #334155);border:1px solid var(--pt-navbar-user-menu-border, #e5e7eb);border-radius:14px;box-shadow:var( --pt-navbar-user-menu-shadow, 0 18px 45px rgba(15, 23, 42, .16) );z-index:9999;padding:.75rem;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-header{display:flex;align-items:center;gap:.75rem;padding:.35rem .25rem .65rem}.pt-nav-bar-menu .navbar-user-menu-avatar{width:46px;height:46px;min-width:46px;font-size:1.05rem}.pt-nav-bar-menu .navbar-user-menu-identity{min-width:0}.pt-nav-bar-menu .navbar-user-menu-name{color:var(--pt-navbar-user-menu-name, #0f172a);font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-profile{margin-top:.15rem;color:var(--pt-navbar-user-menu-profile, #2563eb);font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-username{margin-top:.15rem;color:var(--pt-navbar-user-menu-username, #64748b);font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-separator{height:1px;background:var(--pt-navbar-user-menu-separator, #e5e7eb);margin:.4rem 0}.pt-nav-bar-menu .navbar-user-menu-item{width:100%;min-height:36px;border:none;background:transparent;border-radius:9px;color:var(--pt-navbar-user-menu-item-text, #334155);display:flex;align-items:center;gap:.55rem;padding:.5rem .55rem;font-size:.86rem;font-weight:600;cursor:pointer;text-align:left;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-item:hover{background:var(--pt-navbar-user-menu-item-hover-bg, #f1f5f9);color:var(--pt-navbar-user-menu-item-hover-text, #0f172a)}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:var(--pt-navbar-user-menu-item-danger-text, #dc2626)}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover{background:var(--pt-navbar-user-menu-item-danger-hover-bg, #fef2f2);color:var(--pt-navbar-user-menu-item-danger-hover-text, #b91c1c)}.pt-nav-bar-menu .navbar-user-menu-item.disabled,.pt-nav-bar-menu .navbar-user-menu-item:disabled{opacity:.55;cursor:not-allowed}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px}.pt-nav-bar-menu .navbar-left{width:100%;justify-content:space-between}.pt-nav-bar-menu .navbar-middle{width:100%;padding:0;justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-right .navbar-datetime,.pt-nav-bar-menu .navbar-middle.dt-pos-center .navbar-datetime{padding-left:0;border-left:none}.pt-nav-bar-menu .navbar-actions{width:100%;justify-content:flex-end}.pt-nav-bar-menu .navbar-user-menu{right:0}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:520px){.pt-nav-bar-menu .navbar-datetime .dt-value,.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .navbar-user-menu{width:240px}}\n"] }]
|
|
4622
4633
|
}], propDecorators: { navBarMenuConfig: [{
|
|
4623
4634
|
type: Input
|
|
4624
4635
|
}], serverDateTime: [{
|
|
@@ -4669,17 +4680,17 @@ class PTSideBarMenuComponent {
|
|
|
4669
4680
|
width: '250px',
|
|
4670
4681
|
height: '100vh',
|
|
4671
4682
|
scrollable: true,
|
|
4672
|
-
backgroundColor: '
|
|
4673
|
-
fontColor: '#
|
|
4674
|
-
fontColorSubMenu: '#
|
|
4675
|
-
hoverColor: '#f1f1f1',
|
|
4676
|
-
hoverColorSubMenu: '#e0e0e0',
|
|
4683
|
+
backgroundColor: 'var(--pt-sidebar-bg, #ffffff)',
|
|
4684
|
+
fontColor: 'var(--pt-sidebar-menu-text, #333333)',
|
|
4685
|
+
fontColorSubMenu: 'var(--pt-sidebar-submenu-text, #666666)',
|
|
4686
|
+
hoverColor: 'var(--pt-sidebar-menu-hover-bg, #f1f1f1)',
|
|
4687
|
+
hoverColorSubMenu: 'var(--pt-sidebar-submenu-hover-bg, #e0e0e0)',
|
|
4677
4688
|
};
|
|
4678
4689
|
this.searchCardConfig = {
|
|
4679
4690
|
alignContent: 'center',
|
|
4680
4691
|
alignBodyContent: 'center',
|
|
4681
4692
|
identifier: 'pt-side-bar-menu/search',
|
|
4682
|
-
backgroundColor: '
|
|
4693
|
+
backgroundColor: 'var(--pt-sidebar-bg, #ffffff)',
|
|
4683
4694
|
width: '250px',
|
|
4684
4695
|
height: '72px',
|
|
4685
4696
|
padding: '0',
|
|
@@ -4689,7 +4700,7 @@ class PTSideBarMenuComponent {
|
|
|
4689
4700
|
};
|
|
4690
4701
|
this.cardConfig = {
|
|
4691
4702
|
identifier: 'pt-side-bar-menu',
|
|
4692
|
-
backgroundColor: '
|
|
4703
|
+
backgroundColor: 'var(--pt-sidebar-bg, #ffffff)',
|
|
4693
4704
|
padding: '10px 6px',
|
|
4694
4705
|
bodyPadding: '0',
|
|
4695
4706
|
margin: '6px 0px',
|
|
@@ -4729,7 +4740,7 @@ class PTSideBarMenuComponent {
|
|
|
4729
4740
|
const sidebarWidth = this.menuConfig.width || '250px';
|
|
4730
4741
|
this.cardConfig = {
|
|
4731
4742
|
identifier: 'pt-side-bar-menu',
|
|
4732
|
-
backgroundColor: this.menuConfig.backgroundColor || '
|
|
4743
|
+
backgroundColor: this.menuConfig.backgroundColor || 'var(--pt-sidebar-bg, #ffffff)',
|
|
4733
4744
|
width: sidebarWidth,
|
|
4734
4745
|
height: this.menuConfig.height || '100vh',
|
|
4735
4746
|
scrollableVertical: this.menuConfig.scrollable ?? true,
|
|
@@ -4737,12 +4748,14 @@ class PTSideBarMenuComponent {
|
|
|
4737
4748
|
padding: '10px 6px',
|
|
4738
4749
|
bodyPadding: '0',
|
|
4739
4750
|
margin: '0',
|
|
4751
|
+
borderColor: 'var(--pt-sidebar-border, #e5e7eb)',
|
|
4752
|
+
boxShadow: 'var(--pt-sidebar-shadow, none)',
|
|
4740
4753
|
};
|
|
4741
4754
|
this.searchCardConfig = {
|
|
4742
4755
|
alignContent: 'default',
|
|
4743
4756
|
alignBodyContent: 'default',
|
|
4744
4757
|
identifier: 'pt-side-bar-menu/search',
|
|
4745
|
-
backgroundColor: this.menuConfig.backgroundColor || '
|
|
4758
|
+
backgroundColor: this.menuConfig.backgroundColor || 'var(--pt-sidebar-bg, #ffffff)',
|
|
4746
4759
|
width: sidebarWidth,
|
|
4747
4760
|
height: 'auto',
|
|
4748
4761
|
padding: '10px 14px',
|
|
@@ -4751,6 +4764,8 @@ class PTSideBarMenuComponent {
|
|
|
4751
4764
|
pattern: this.menuConfig.pattern,
|
|
4752
4765
|
scrollableVertical: false,
|
|
4753
4766
|
scrollableHorizontal: false,
|
|
4767
|
+
borderColor: 'var(--pt-sidebar-border, #e5e7eb)',
|
|
4768
|
+
boxShadow: 'var(--pt-sidebar-shadow, none)',
|
|
4754
4769
|
};
|
|
4755
4770
|
this.searchField = {
|
|
4756
4771
|
...this.searchField,
|
|
@@ -4784,13 +4799,25 @@ class PTSideBarMenuComponent {
|
|
|
4784
4799
|
getDefaultBadgeColors(type) {
|
|
4785
4800
|
switch (type) {
|
|
4786
4801
|
case BadgeType.Info:
|
|
4787
|
-
return {
|
|
4802
|
+
return {
|
|
4803
|
+
color: 'var(--pt-sidebar-badge-info-text, #ffffff)',
|
|
4804
|
+
backgroundColor: 'var(--pt-sidebar-badge-info-bg, #17a2b8)',
|
|
4805
|
+
};
|
|
4788
4806
|
case BadgeType.Danger:
|
|
4789
|
-
return {
|
|
4807
|
+
return {
|
|
4808
|
+
color: 'var(--pt-sidebar-badge-danger-text, #ffffff)',
|
|
4809
|
+
backgroundColor: 'var(--pt-sidebar-badge-danger-bg, #dc3545)',
|
|
4810
|
+
};
|
|
4790
4811
|
case BadgeType.Warning:
|
|
4791
|
-
return {
|
|
4812
|
+
return {
|
|
4813
|
+
color: 'var(--pt-sidebar-badge-warning-text, #ffffff)',
|
|
4814
|
+
backgroundColor: 'var(--pt-sidebar-badge-warning-bg, #ffc107)',
|
|
4815
|
+
};
|
|
4792
4816
|
default:
|
|
4793
|
-
return {
|
|
4817
|
+
return {
|
|
4818
|
+
color: 'var(--pt-sidebar-badge-default-text, #ffffff)',
|
|
4819
|
+
backgroundColor: 'var(--pt-sidebar-badge-default-bg, #6c757d)',
|
|
4820
|
+
};
|
|
4794
4821
|
}
|
|
4795
4822
|
}
|
|
4796
4823
|
onSearch(searchTerm) {
|
|
@@ -4832,12 +4859,12 @@ class PTSideBarMenuComponent {
|
|
|
4832
4859
|
}
|
|
4833
4860
|
getMenuItemStyles() {
|
|
4834
4861
|
return {
|
|
4835
|
-
color: this.menuConfig.fontColor || '#
|
|
4862
|
+
color: this.menuConfig.fontColor || 'var(--pt-sidebar-menu-text, #333333)',
|
|
4836
4863
|
};
|
|
4837
4864
|
}
|
|
4838
4865
|
getMenuLinkStyles() {
|
|
4839
4866
|
return {
|
|
4840
|
-
color: this.menuConfig.fontColor || '#
|
|
4867
|
+
color: this.menuConfig.fontColor || 'var(--pt-sidebar-menu-text, #333333)',
|
|
4841
4868
|
textDecoration: 'none',
|
|
4842
4869
|
borderRadius: '8px',
|
|
4843
4870
|
padding: '10px 15px',
|
|
@@ -4849,52 +4876,66 @@ class PTSideBarMenuComponent {
|
|
|
4849
4876
|
}
|
|
4850
4877
|
getSubMenuLinkStyles(level = 1) {
|
|
4851
4878
|
return {
|
|
4852
|
-
color: this.menuConfig.fontColorSubMenu ||
|
|
4879
|
+
color: this.menuConfig.fontColorSubMenu ||
|
|
4880
|
+
this.menuConfig.fontColor ||
|
|
4881
|
+
'var(--pt-sidebar-submenu-text, #666666)',
|
|
4853
4882
|
textDecoration: 'none',
|
|
4854
4883
|
borderRadius: '5px',
|
|
4855
4884
|
padding: level === 1 ? '5px 10px' : '4px 10px',
|
|
4856
4885
|
transition: 'background-color 0.2s, color 0.2s',
|
|
4857
|
-
fontSize: level === 1 ? '14px' : '13px',
|
|
4858
4886
|
display: 'flex',
|
|
4859
4887
|
alignItems: 'center',
|
|
4888
|
+
fontSize: level === 1 ? '14px' : '13px',
|
|
4860
4889
|
};
|
|
4861
4890
|
}
|
|
4891
|
+
getMenuHoverBackground() {
|
|
4892
|
+
return (this.menuConfig.hoverColor || 'var(--pt-sidebar-menu-hover-bg, #f1f1f1)');
|
|
4893
|
+
}
|
|
4894
|
+
getSubMenuHoverBackground() {
|
|
4895
|
+
return (this.menuConfig.hoverColorSubMenu ||
|
|
4896
|
+
this.menuConfig.hoverColor ||
|
|
4897
|
+
'var(--pt-sidebar-submenu-hover-bg, #f1f1f1)');
|
|
4898
|
+
}
|
|
4899
|
+
getMenuHoverColor() {
|
|
4900
|
+
return (this.menuConfig.fontColor || 'var(--pt-sidebar-menu-hover-text, #111111)');
|
|
4901
|
+
}
|
|
4902
|
+
getSubMenuHoverColor() {
|
|
4903
|
+
return (this.menuConfig.fontColorSubMenu ||
|
|
4904
|
+
this.menuConfig.fontColor ||
|
|
4905
|
+
'var(--pt-sidebar-submenu-hover-text, #000000)');
|
|
4906
|
+
}
|
|
4862
4907
|
applyHoverEffects() {
|
|
4863
|
-
const menuLinks = this.el.nativeElement.querySelectorAll('
|
|
4864
|
-
const
|
|
4908
|
+
const menuLinks = this.el.nativeElement.querySelectorAll('.menu-link') ?? [];
|
|
4909
|
+
const submenuLinks = this.el.nativeElement.querySelectorAll('.submenu-link') ?? [];
|
|
4865
4910
|
menuLinks.forEach((link) => {
|
|
4866
4911
|
this.renderer.listen(link, 'mouseenter', () => {
|
|
4867
|
-
this.renderer.setStyle(link, 'background-color', this.
|
|
4868
|
-
this.renderer.setStyle(link, 'color', this.
|
|
4912
|
+
this.renderer.setStyle(link, 'background-color', this.getMenuHoverBackground());
|
|
4913
|
+
this.renderer.setStyle(link, 'color', this.getMenuHoverColor());
|
|
4869
4914
|
});
|
|
4870
4915
|
this.renderer.listen(link, 'mouseleave', () => {
|
|
4871
|
-
this.renderer.
|
|
4872
|
-
this.renderer.setStyle(link, 'color', this.menuConfig.fontColor || '#
|
|
4916
|
+
this.renderer.removeStyle(link, 'background-color');
|
|
4917
|
+
this.renderer.setStyle(link, 'color', this.menuConfig.fontColor || 'var(--pt-sidebar-menu-text, #333333)');
|
|
4873
4918
|
});
|
|
4874
4919
|
});
|
|
4875
|
-
|
|
4920
|
+
submenuLinks.forEach((link) => {
|
|
4876
4921
|
this.renderer.listen(link, 'mouseenter', () => {
|
|
4877
|
-
this.renderer.setStyle(link, 'background-color', this.
|
|
4878
|
-
|
|
4879
|
-
'#f1f1f1');
|
|
4880
|
-
this.renderer.setStyle(link, 'color', this.menuConfig.hoverFontColorSubMenu ||
|
|
4881
|
-
this.menuConfig.hoverFontColor ||
|
|
4882
|
-
'#000');
|
|
4922
|
+
this.renderer.setStyle(link, 'background-color', this.getSubMenuHoverBackground());
|
|
4923
|
+
this.renderer.setStyle(link, 'color', this.getSubMenuHoverColor());
|
|
4883
4924
|
});
|
|
4884
4925
|
this.renderer.listen(link, 'mouseleave', () => {
|
|
4885
|
-
this.renderer.
|
|
4926
|
+
this.renderer.removeStyle(link, 'background-color');
|
|
4886
4927
|
this.renderer.setStyle(link, 'color', this.menuConfig.fontColorSubMenu ||
|
|
4887
4928
|
this.menuConfig.fontColor ||
|
|
4888
|
-
'#
|
|
4929
|
+
'var(--pt-sidebar-submenu-text, #666666)');
|
|
4889
4930
|
});
|
|
4890
4931
|
});
|
|
4891
4932
|
}
|
|
4892
4933
|
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 }); }
|
|
4893
|
-
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 (isSearchEnabled()) {\n <pt-card\n [config]=\"searchCardConfig\"\n [ngClass]=\"{ 'sidebar-hidden': menuConfig.isVisible === false }\"\n >\n <div class=\"search-input\">\n <pt-text-input\n [formGroup]=\"formGroup\"\n [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 === false }\"\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 @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\n <span [class.submenu-title]=\"level > 0\">\n {{ item.label }}\n </span>\n\n @if (item.badge) {\n <span [ngStyle]=\"getBadgeStyles(item.badge)\" class=\"badge\">\n {{ item.badge.count }}\n </span>\n }\n </a>\n }\n\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\n <span [class.submenu-title]=\"level > 0\">\n {{ item.label }}\n </span>\n\n @if (item.badge) {\n <span [ngStyle]=\"getBadgeStyles(item.badge)\" class=\"badge\">\n {{ item.badge.count }}\n </span>\n }\n\n <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n </a>\n }\n\n @if (hasChildren(item)) {\n <div class=\"submenu-wrapper\" [class.expanded]=\"item.isExpanded\">\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{display:block;box-sizing:border-box}.pt-side-bar-menu *{box-sizing:border-box}.pt-side-bar-menu .badge{background-color
|
|
4934
|
+
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 (isSearchEnabled()) {\n <pt-card\n [config]=\"searchCardConfig\"\n [ngClass]=\"{ 'sidebar-hidden': menuConfig.isVisible === false }\"\n >\n <div class=\"search-input\">\n <pt-text-input\n [formGroup]=\"formGroup\"\n [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 === false }\"\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 @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\n <span [class.submenu-title]=\"level > 0\">\n {{ item.label }}\n </span>\n\n @if (item.badge) {\n <span [ngStyle]=\"getBadgeStyles(item.badge)\" class=\"badge\">\n {{ item.badge.count }}\n </span>\n }\n </a>\n }\n\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\n <span [class.submenu-title]=\"level > 0\">\n {{ item.label }}\n </span>\n\n @if (item.badge) {\n <span [ngStyle]=\"getBadgeStyles(item.badge)\" class=\"badge\">\n {{ item.badge.count }}\n </span>\n }\n\n <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n </a>\n }\n\n @if (hasChildren(item)) {\n <div class=\"submenu-wrapper\" [class.expanded]=\"item.isExpanded\">\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{display:block;box-sizing:border-box;background:var(--pt-sidebar-bg, transparent);color:var(--pt-sidebar-text, #1f2937)}.pt-side-bar-menu *{box-sizing:border-box}.pt-side-bar-menu .badge{background-color:var(--pt-sidebar-badge-info-bg, #38bdf8);border-radius:5px;color:var(--pt-sidebar-badge-info-text, #ffffff);font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:var(--pt-sidebar-chevron, #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:var(--pt-sidebar-menu-text, #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:var(--pt-sidebar-menu-hover-bg, #f1f1f1);color:var(--pt-sidebar-menu-hover-text, #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;width:100%;box-sizing:border-box}.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}.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 var(--pt-sidebar-submenu-border, #e5e7eb);margin-left:23px;padding-left:25px;padding-top:5px;padding-bottom:5px}.pt-side-bar-menu .submenu-list-root:after{background-color:var(--pt-sidebar-submenu-border, #e5e7eb);bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-list-nested{border-left:1px solid var(--pt-sidebar-submenu-nested-border, #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:var(--pt-sidebar-submenu-border, #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:var(--pt-sidebar-submenu-text, #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:var(--pt-sidebar-submenu-hover-bg, #f1f1f1);color:var(--pt-sidebar-submenu-hover-text, #000)}.pt-side-bar-menu .submenu-title{margin-left:5px}.pt-side-bar-menu .search-input{width:100%;max-width:100%;display:block;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input pt-text-input{display:block;width:100%;max-width:100%;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input ::ng-deep .p-iconfield,.pt-side-bar-menu .search-input ::ng-deep .p-input-icon-left,.pt-side-bar-menu .search-input ::ng-deep .p-input-icon-right,.pt-side-bar-menu .search-input ::ng-deep .p-inputgroup{width:100%;max-width:100%;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input ::ng-deep input,.pt-side-bar-menu .search-input ::ng-deep .p-inputtext{width:100%!important;max-width:100%;height:42px;box-sizing:border-box;background:var(--pt-sidebar-search-bg, #ffffff)!important;color:var(--pt-sidebar-search-text, #111827)!important;border-color:var(--pt-sidebar-search-border, #d1d5db)!important}.pt-side-bar-menu .search-input ::ng-deep input::placeholder,.pt-side-bar-menu .search-input ::ng-deep .p-inputtext::placeholder{color:var(--pt-sidebar-search-placeholder, #94a3b8)!important}.pt-side-bar-menu .search-input ::ng-deep input:focus,.pt-side-bar-menu .search-input ::ng-deep .p-inputtext:focus{outline-offset:0;border-color:var(--pt-sidebar-search-focus-border, #3b82f6)!important;box-shadow:0 0 0 3px var(--pt-sidebar-search-focus-shadow, rgba(59, 130, 246, .15))!important}\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"] }] }); }
|
|
4894
4935
|
}
|
|
4895
4936
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTSideBarMenuComponent, decorators: [{
|
|
4896
4937
|
type: Component,
|
|
4897
|
-
args: [{ selector: 'pt-side-bar-menu', standalone: false, template: "<div class=\"pt-side-bar-menu\">\n @if (isSearchEnabled()) {\n <pt-card\n [config]=\"searchCardConfig\"\n [ngClass]=\"{ 'sidebar-hidden': menuConfig.isVisible === false }\"\n >\n <div class=\"search-input\">\n <pt-text-input\n [formGroup]=\"formGroup\"\n [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 === false }\"\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 @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\n <span [class.submenu-title]=\"level > 0\">\n {{ item.label }}\n </span>\n\n @if (item.badge) {\n <span [ngStyle]=\"getBadgeStyles(item.badge)\" class=\"badge\">\n {{ item.badge.count }}\n </span>\n }\n </a>\n }\n\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\n <span [class.submenu-title]=\"level > 0\">\n {{ item.label }}\n </span>\n\n @if (item.badge) {\n <span [ngStyle]=\"getBadgeStyles(item.badge)\" class=\"badge\">\n {{ item.badge.count }}\n </span>\n }\n\n <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n </a>\n }\n\n @if (hasChildren(item)) {\n <div class=\"submenu-wrapper\" [class.expanded]=\"item.isExpanded\">\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{display:block;box-sizing:border-box}.pt-side-bar-menu *{box-sizing:border-box}.pt-side-bar-menu .badge{background-color
|
|
4938
|
+
args: [{ selector: 'pt-side-bar-menu', standalone: false, template: "<div class=\"pt-side-bar-menu\">\n @if (isSearchEnabled()) {\n <pt-card\n [config]=\"searchCardConfig\"\n [ngClass]=\"{ 'sidebar-hidden': menuConfig.isVisible === false }\"\n >\n <div class=\"search-input\">\n <pt-text-input\n [formGroup]=\"formGroup\"\n [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 === false }\"\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 @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\n <span [class.submenu-title]=\"level > 0\">\n {{ item.label }}\n </span>\n\n @if (item.badge) {\n <span [ngStyle]=\"getBadgeStyles(item.badge)\" class=\"badge\">\n {{ item.badge.count }}\n </span>\n }\n </a>\n }\n\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\n <span [class.submenu-title]=\"level > 0\">\n {{ item.label }}\n </span>\n\n @if (item.badge) {\n <span [ngStyle]=\"getBadgeStyles(item.badge)\" class=\"badge\">\n {{ item.badge.count }}\n </span>\n }\n\n <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n </a>\n }\n\n @if (hasChildren(item)) {\n <div class=\"submenu-wrapper\" [class.expanded]=\"item.isExpanded\">\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{display:block;box-sizing:border-box;background:var(--pt-sidebar-bg, transparent);color:var(--pt-sidebar-text, #1f2937)}.pt-side-bar-menu *{box-sizing:border-box}.pt-side-bar-menu .badge{background-color:var(--pt-sidebar-badge-info-bg, #38bdf8);border-radius:5px;color:var(--pt-sidebar-badge-info-text, #ffffff);font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:var(--pt-sidebar-chevron, #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:var(--pt-sidebar-menu-text, #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:var(--pt-sidebar-menu-hover-bg, #f1f1f1);color:var(--pt-sidebar-menu-hover-text, #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;width:100%;box-sizing:border-box}.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}.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 var(--pt-sidebar-submenu-border, #e5e7eb);margin-left:23px;padding-left:25px;padding-top:5px;padding-bottom:5px}.pt-side-bar-menu .submenu-list-root:after{background-color:var(--pt-sidebar-submenu-border, #e5e7eb);bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-list-nested{border-left:1px solid var(--pt-sidebar-submenu-nested-border, #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:var(--pt-sidebar-submenu-border, #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:var(--pt-sidebar-submenu-text, #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:var(--pt-sidebar-submenu-hover-bg, #f1f1f1);color:var(--pt-sidebar-submenu-hover-text, #000)}.pt-side-bar-menu .submenu-title{margin-left:5px}.pt-side-bar-menu .search-input{width:100%;max-width:100%;display:block;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input pt-text-input{display:block;width:100%;max-width:100%;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input ::ng-deep .p-iconfield,.pt-side-bar-menu .search-input ::ng-deep .p-input-icon-left,.pt-side-bar-menu .search-input ::ng-deep .p-input-icon-right,.pt-side-bar-menu .search-input ::ng-deep .p-inputgroup{width:100%;max-width:100%;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input ::ng-deep input,.pt-side-bar-menu .search-input ::ng-deep .p-inputtext{width:100%!important;max-width:100%;height:42px;box-sizing:border-box;background:var(--pt-sidebar-search-bg, #ffffff)!important;color:var(--pt-sidebar-search-text, #111827)!important;border-color:var(--pt-sidebar-search-border, #d1d5db)!important}.pt-side-bar-menu .search-input ::ng-deep input::placeholder,.pt-side-bar-menu .search-input ::ng-deep .p-inputtext::placeholder{color:var(--pt-sidebar-search-placeholder, #94a3b8)!important}.pt-side-bar-menu .search-input ::ng-deep input:focus,.pt-side-bar-menu .search-input ::ng-deep .p-inputtext:focus{outline-offset:0;border-color:var(--pt-sidebar-search-focus-border, #3b82f6)!important;box-shadow:0 0 0 3px var(--pt-sidebar-search-focus-shadow, rgba(59, 130, 246, .15))!important}\n"] }]
|
|
4898
4939
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { menuConfig: [{
|
|
4899
4940
|
type: Input
|
|
4900
4941
|
}] } });
|
|
@@ -5108,9 +5149,14 @@ class PTPageSkeletonComponent {
|
|
|
5108
5149
|
this.pageSkeletonConfig.backgroundCardConfig = {
|
|
5109
5150
|
identifier: 'pt-page-skeleton/background',
|
|
5110
5151
|
noBorder: this.pageSkeletonConfig.backgroundCardConfig?.noBorder ?? true,
|
|
5111
|
-
backgroundColor: this.pageSkeletonConfig.backgroundCardConfig?.backgroundColor ||
|
|
5152
|
+
backgroundColor: this.pageSkeletonConfig.backgroundCardConfig?.backgroundColor ||
|
|
5153
|
+
'var(--pt-page-skeleton-bg, #ffffff)',
|
|
5112
5154
|
padding: this.pageSkeletonConfig.backgroundCardConfig?.padding || '20px',
|
|
5113
5155
|
margin: this.pageSkeletonConfig.backgroundCardConfig?.margin || '10px',
|
|
5156
|
+
borderColor: this.pageSkeletonConfig.backgroundCardConfig?.borderColor ||
|
|
5157
|
+
'var(--pt-page-skeleton-border, transparent)',
|
|
5158
|
+
boxShadow: this.pageSkeletonConfig.backgroundCardConfig?.boxShadow ||
|
|
5159
|
+
'var(--pt-page-skeleton-shadow, none)',
|
|
5114
5160
|
...this.pageSkeletonConfig.backgroundCardConfig,
|
|
5115
5161
|
};
|
|
5116
5162
|
}
|
|
@@ -5118,19 +5164,24 @@ class PTPageSkeletonComponent {
|
|
|
5118
5164
|
this.pageSkeletonConfig.contentCardConfig = {
|
|
5119
5165
|
identifier: 'pt-page-skeleton/content',
|
|
5120
5166
|
noBorder: this.pageSkeletonConfig.contentCardConfig?.noBorder ?? false,
|
|
5121
|
-
backgroundColor: this.pageSkeletonConfig.contentCardConfig?.backgroundColor ||
|
|
5167
|
+
backgroundColor: this.pageSkeletonConfig.contentCardConfig?.backgroundColor ||
|
|
5168
|
+
'var(--pt-page-skeleton-content-bg, #f0f0f0)',
|
|
5122
5169
|
padding: this.pageSkeletonConfig.contentCardConfig?.padding || '15px',
|
|
5170
|
+
borderColor: this.pageSkeletonConfig.contentCardConfig?.borderColor ||
|
|
5171
|
+
'var(--pt-page-skeleton-content-border, #e5e7eb)',
|
|
5172
|
+
boxShadow: this.pageSkeletonConfig.contentCardConfig?.boxShadow ||
|
|
5173
|
+
'var(--pt-page-skeleton-content-shadow, none)',
|
|
5123
5174
|
scrollableVertical: true,
|
|
5124
5175
|
scrollableHorizontal: true,
|
|
5125
5176
|
...this.pageSkeletonConfig.contentCardConfig,
|
|
5126
5177
|
};
|
|
5127
5178
|
}
|
|
5128
5179
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPageSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5129
|
-
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 -->\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 <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 <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{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"] }] }); }
|
|
5180
|
+
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 -->\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 <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 <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;color:var(--pt-page-skeleton-breadcrumb-text, inherit)}.app-container{display:flex;flex-direction:column;height:100vh;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out;background:var(--pt-page-skeleton-main-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.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;background:var(--pt-page-skeleton-content-area-bg, transparent);color:var(--pt-page-skeleton-content-text, inherit)}.sidebar{transition:all .3s ease-in-out;background:var(--pt-page-skeleton-sidebar-bg, transparent);color:var(--pt-page-skeleton-sidebar-text, inherit)}.content-area.full-width{margin-left:0;width:100%}:host{display:block;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}:host>pt-card{width:100%;min-height:100vh;max-width:100%;overflow:hidden;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.content-area>pt-card{width:100%;height:100%;max-width:100%;overflow:hidden;background:var(--pt-page-skeleton-content-bg, transparent);color:var(--pt-page-skeleton-content-text, inherit)}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{display:block;width:100%;position:relative;z-index:0;margin-top:0;background:var(--pt-page-skeleton-footer-bg, transparent);color:var(--pt-page-skeleton-footer-text, inherit)}:host ::ng-deep .pt-footer .footer-card,:host ::ng-deep .pt-footer pt-card{height:auto!important;overflow:visible!important;background:var(--pt-page-skeleton-footer-bg, transparent)!important;color:var(--pt-page-skeleton-footer-text, inherit)!important}.footer-card{width:100%;background-color:var(--pt-page-skeleton-footer-bg, transparent);color:var(--pt-page-skeleton-footer-text, inherit)}\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"] }] }); }
|
|
5130
5181
|
}
|
|
5131
5182
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPageSkeletonComponent, decorators: [{
|
|
5132
5183
|
type: Component,
|
|
5133
|
-
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 -->\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 <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 <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{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"] }]
|
|
5184
|
+
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 -->\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 <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 <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;color:var(--pt-page-skeleton-breadcrumb-text, inherit)}.app-container{display:flex;flex-direction:column;height:100vh;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out;background:var(--pt-page-skeleton-main-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.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;background:var(--pt-page-skeleton-content-area-bg, transparent);color:var(--pt-page-skeleton-content-text, inherit)}.sidebar{transition:all .3s ease-in-out;background:var(--pt-page-skeleton-sidebar-bg, transparent);color:var(--pt-page-skeleton-sidebar-text, inherit)}.content-area.full-width{margin-left:0;width:100%}:host{display:block;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}:host>pt-card{width:100%;min-height:100vh;max-width:100%;overflow:hidden;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.content-area>pt-card{width:100%;height:100%;max-width:100%;overflow:hidden;background:var(--pt-page-skeleton-content-bg, transparent);color:var(--pt-page-skeleton-content-text, inherit)}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{display:block;width:100%;position:relative;z-index:0;margin-top:0;background:var(--pt-page-skeleton-footer-bg, transparent);color:var(--pt-page-skeleton-footer-text, inherit)}:host ::ng-deep .pt-footer .footer-card,:host ::ng-deep .pt-footer pt-card{height:auto!important;overflow:visible!important;background:var(--pt-page-skeleton-footer-bg, transparent)!important;color:var(--pt-page-skeleton-footer-text, inherit)!important}.footer-card{width:100%;background-color:var(--pt-page-skeleton-footer-bg, transparent);color:var(--pt-page-skeleton-footer-text, inherit)}\n"] }]
|
|
5134
5185
|
}], propDecorators: { pageSkeletonConfig: [{
|
|
5135
5186
|
type: Input
|
|
5136
5187
|
}], serverDateTime: [{
|
|
@@ -5763,11 +5814,11 @@ class PTConfirmDialogComponent {
|
|
|
5763
5814
|
}
|
|
5764
5815
|
}
|
|
5765
5816
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTConfirmDialogComponent, deps: [{ token: i1$1.ConfirmationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5766
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTConfirmDialogComponent, isStandalone: false, selector: "pt-confirm-dialog", inputs: { dialogConfig: "dialogConfig", formGroup: "formGroup" }, outputs: { confirm: "confirm", cancel: "cancel" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, providers: [ConfirmationService], queries: [{ propertyName: "dialogBodyTpl", first: true, predicate: ["dialogBody"], descendants: true }, { propertyName: "projectedFormBuilder", first: true, predicate: PTFormBuilderComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-confirm-dialog\">\n <p-confirmDialog\n #cd\n [styleClass]=\"overlayStyleClass\"\n [appendTo]=\"'body'\"\n [closable]=\"false\"\n [closeOnEscape]=\"false\"\n >\n <ng-template pTemplate=\"header\"></ng-template>\n\n <ng-template pTemplate=\"message\">\n <div class=\"pt-confirm-dialog-wrapper\">\n <div class=\"pt-confirm-dialog-body\" [ngStyle]=\"getDialogBodyStyle()\">\n <button\n type=\"button\"\n class=\"pt-confirm-dialog-close\"\n aria-label=\"Fermer\"\n (click)=\"onCancelClick()\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n\n <div class=\"pt-confirm-dialog-content\">\n <div\n class=\"pt-confirm-dialog-icon-wrapper\"\n [ngStyle]=\"getIconWrapperStyle()\"\n >\n <i\n class=\"pt-confirm-dialog-icon\"\n [class]=\"getDialogIconClass()\"\n [ngStyle]=\"getDialogIconStyle()\"\n ></i>\n </div>\n\n <div class=\"pt-confirm-dialog-text-wrapper\">\n <h3\n class=\"pt-confirm-dialog-title\"\n [ngStyle]=\"getDialogHeaderStyle()\"\n >\n {{ getDialogHeaderText() }}\n </h3>\n\n @if (dialogBodyTpl) {\n <ng-container [ngTemplateOutlet]=\"dialogBodyTpl\"></ng-container>\n } @else {\n <p\n class=\"pt-confirm-dialog-message-text\"\n [ngStyle]=\"getDialogContentStyle()\"\n >\n {{ getDialogContentText() }}\n </p>\n }\n </div>\n </div>\n </div>\n\n @if (hasFooter()) {\n <div class=\"pt-confirm-dialog-custom-footer\">\n <div\n class=\"pt-confirm-dialog-footer-buttons\"\n [ngStyle]=\"getFooterButtonsStyle()\"\n >\n @if (dialogConfig.cancelButtonConfig) {\n <div class=\"pt-confirm-dialog-button-slot\">\n <pt-button\n [buttonConfig]=\"cancelButtonModel\"\n (click)=\"onCancelClick()\"\n ></pt-button>\n </div>\n }\n\n @if (dialogConfig.confirmButtonConfig) {\n <div class=\"pt-confirm-dialog-button-slot\">\n <pt-button\n [buttonConfig]=\"confirmButtonModel\"\n (click)=\"onConfirmClick()\"\n ></pt-button>\n </div>\n }\n </div>\n </div>\n }\n </div>\n </ng-template>\n </p-confirmDialog>\n</div>\n", styles: ["::ng-deep .pt-confirm-dialog-overlay.p-dialog,::ng-deep .p-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirm-dialog,::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirmdialog,::ng-deep .p-confirmdialog.pt-confirm-dialog-overlay{width:560px!important;max-width:calc(100vw - 2rem)!important;height:auto!important;min-height:unset!important;max-height:none!important;border:0!important;border-radius:28px!important;overflow:hidden!important;background
|
|
5817
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTConfirmDialogComponent, isStandalone: false, selector: "pt-confirm-dialog", inputs: { dialogConfig: "dialogConfig", formGroup: "formGroup" }, outputs: { confirm: "confirm", cancel: "cancel" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, providers: [ConfirmationService], queries: [{ propertyName: "dialogBodyTpl", first: true, predicate: ["dialogBody"], descendants: true }, { propertyName: "projectedFormBuilder", first: true, predicate: PTFormBuilderComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-confirm-dialog\">\n <p-confirmDialog\n #cd\n [styleClass]=\"overlayStyleClass\"\n [appendTo]=\"'body'\"\n [closable]=\"false\"\n [closeOnEscape]=\"false\"\n >\n <ng-template pTemplate=\"header\"></ng-template>\n\n <ng-template pTemplate=\"message\">\n <div class=\"pt-confirm-dialog-wrapper\">\n <div class=\"pt-confirm-dialog-body\" [ngStyle]=\"getDialogBodyStyle()\">\n <button\n type=\"button\"\n class=\"pt-confirm-dialog-close\"\n aria-label=\"Fermer\"\n (click)=\"onCancelClick()\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n\n <div class=\"pt-confirm-dialog-content\">\n <div\n class=\"pt-confirm-dialog-icon-wrapper\"\n [ngStyle]=\"getIconWrapperStyle()\"\n >\n <i\n class=\"pt-confirm-dialog-icon\"\n [class]=\"getDialogIconClass()\"\n [ngStyle]=\"getDialogIconStyle()\"\n ></i>\n </div>\n\n <div class=\"pt-confirm-dialog-text-wrapper\">\n <h3\n class=\"pt-confirm-dialog-title\"\n [ngStyle]=\"getDialogHeaderStyle()\"\n >\n {{ getDialogHeaderText() }}\n </h3>\n\n @if (dialogBodyTpl) {\n <ng-container [ngTemplateOutlet]=\"dialogBodyTpl\"></ng-container>\n } @else {\n <p\n class=\"pt-confirm-dialog-message-text\"\n [ngStyle]=\"getDialogContentStyle()\"\n >\n {{ getDialogContentText() }}\n </p>\n }\n </div>\n </div>\n </div>\n\n @if (hasFooter()) {\n <div class=\"pt-confirm-dialog-custom-footer\">\n <div\n class=\"pt-confirm-dialog-footer-buttons\"\n [ngStyle]=\"getFooterButtonsStyle()\"\n >\n @if (dialogConfig.cancelButtonConfig) {\n <div class=\"pt-confirm-dialog-button-slot\">\n <pt-button\n [buttonConfig]=\"cancelButtonModel\"\n (click)=\"onCancelClick()\"\n ></pt-button>\n </div>\n }\n\n @if (dialogConfig.confirmButtonConfig) {\n <div class=\"pt-confirm-dialog-button-slot\">\n <pt-button\n [buttonConfig]=\"confirmButtonModel\"\n (click)=\"onConfirmClick()\"\n ></pt-button>\n </div>\n }\n </div>\n </div>\n }\n </div>\n </ng-template>\n </p-confirmDialog>\n</div>\n", styles: ["::ng-deep .pt-confirm-dialog-overlay.p-dialog,::ng-deep .p-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirm-dialog,::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirmdialog,::ng-deep .p-confirmdialog.pt-confirm-dialog-overlay{width:560px!important;max-width:calc(100vw - 2rem)!important;height:auto!important;min-height:unset!important;max-height:none!important;border:0!important;border-radius:28px!important;overflow:hidden!important;background:var(--pt-confirm-dialog-bg, #ffffff)!important;box-shadow:var( --pt-confirm-dialog-shadow, 0 24px 60px rgba(15, 23, 42, .3) )!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-header{display:none!important;padding:0!important;border:0!important;height:0!important;min-height:0!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-content{padding:0!important;margin:0!important;overflow:hidden!important;background:transparent!important}::ng-deep .pt-confirm-dialog-overlay .p-confirm-dialog-message,::ng-deep .pt-confirm-dialog-overlay .p-confirmdialog-message{display:block!important;width:100%!important;margin:0!important;padding:0!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-footer{display:none!important;padding:0!important;margin:0!important;border:0!important;height:0!important;min-height:0!important;max-height:0!important}.pt-confirm-dialog-wrapper{width:100%;background:var(--pt-confirm-dialog-bg, #ffffff);color:var(--pt-confirm-dialog-text, #0f172a);overflow:hidden}.pt-confirm-dialog-body{position:relative;width:100%;min-height:190px;padding:2rem 2.25rem;border-bottom:1px solid var(--pt-confirm-dialog-border, #e5e7eb);box-sizing:border-box}.pt-confirm-dialog-no-footer .pt-confirm-dialog-body{border-bottom:0!important}.pt-confirm-dialog-content{display:flex;align-items:center;gap:1.25rem;min-height:126px;padding-right:3rem}.pt-confirm-dialog-text-wrapper{flex:1;min-width:0}.pt-confirm-dialog-title{margin:0 0 .45rem;line-height:1.25;color:var(--pt-confirm-dialog-title, #0f172a)}.pt-confirm-dialog-message-text{margin:0;line-height:1.55;font-weight:400;color:var(--pt-confirm-dialog-message, #475569)}.pt-confirm-dialog-close{position:absolute;top:1.25rem;right:1.25rem;z-index:5;width:2.75rem;height:2.75rem;border:2px solid currentColor;border-radius:999px;background:var(--pt-confirm-dialog-close-bg, rgba(255, 255, 255, .85));color:var(--pt-confirm-dialog-close-color, #64748b);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:background-color .2s ease,color .2s ease,transform .2s ease}.pt-confirm-dialog-close:hover{background:var(--pt-confirm-dialog-close-hover-bg, #ffffff);color:var(--pt-confirm-dialog-close-hover-color, #0f172a);transform:scale(1.04)}.pt-confirm-dialog-close i{font-size:1.15rem}.pt-confirm-dialog-icon-wrapper{width:4.25rem;height:4.25rem;min-width:4.25rem;border:1px solid;border-radius:999px;display:flex;align-items:center;justify-content:center}.pt-confirm-dialog-icon{line-height:1}.pt-confirm-dialog-custom-footer{width:100%;padding:1rem 1.5rem 1.35rem;background:var(--pt-confirm-dialog-footer-bg, #ffffff);box-sizing:border-box}.pt-confirm-dialog-footer-buttons{display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;gap:.75rem;width:100%}.pt-confirm-dialog-button-slot{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot>pt-button{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot p-button,::ng-deep .pt-confirm-dialog-button-slot>p-button{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot .p-button,::ng-deep .pt-confirm-dialog-button-slot button{width:auto!important;min-width:7.5rem;max-width:max-content!important;border-radius:999px!important;padding:.7rem 1.35rem!important;font-weight:600!important;white-space:nowrap!important}::ng-deep .pt-confirm-dialog-button-slot .p-button .pi{margin-right:.45rem}@media(max-width:768px){.pt-confirm-dialog-body{min-height:170px;padding:1.5rem}.pt-confirm-dialog-content{gap:.85rem;padding-right:2rem}.pt-confirm-dialog-icon-wrapper{width:3.2rem;height:3.2rem;min-width:3.2rem}.pt-confirm-dialog-footer-buttons{justify-content:center;flex-wrap:wrap!important}::ng-deep .pt-confirm-dialog-button-slot .p-button,::ng-deep .pt-confirm-dialog-button-slot button{min-width:6.5rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$6.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }] }); }
|
|
5767
5818
|
}
|
|
5768
5819
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTConfirmDialogComponent, decorators: [{
|
|
5769
5820
|
type: Component,
|
|
5770
|
-
args: [{ selector: 'pt-confirm-dialog', providers: [ConfirmationService], standalone: false, template: "<div class=\"pt-confirm-dialog\">\n <p-confirmDialog\n #cd\n [styleClass]=\"overlayStyleClass\"\n [appendTo]=\"'body'\"\n [closable]=\"false\"\n [closeOnEscape]=\"false\"\n >\n <ng-template pTemplate=\"header\"></ng-template>\n\n <ng-template pTemplate=\"message\">\n <div class=\"pt-confirm-dialog-wrapper\">\n <div class=\"pt-confirm-dialog-body\" [ngStyle]=\"getDialogBodyStyle()\">\n <button\n type=\"button\"\n class=\"pt-confirm-dialog-close\"\n aria-label=\"Fermer\"\n (click)=\"onCancelClick()\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n\n <div class=\"pt-confirm-dialog-content\">\n <div\n class=\"pt-confirm-dialog-icon-wrapper\"\n [ngStyle]=\"getIconWrapperStyle()\"\n >\n <i\n class=\"pt-confirm-dialog-icon\"\n [class]=\"getDialogIconClass()\"\n [ngStyle]=\"getDialogIconStyle()\"\n ></i>\n </div>\n\n <div class=\"pt-confirm-dialog-text-wrapper\">\n <h3\n class=\"pt-confirm-dialog-title\"\n [ngStyle]=\"getDialogHeaderStyle()\"\n >\n {{ getDialogHeaderText() }}\n </h3>\n\n @if (dialogBodyTpl) {\n <ng-container [ngTemplateOutlet]=\"dialogBodyTpl\"></ng-container>\n } @else {\n <p\n class=\"pt-confirm-dialog-message-text\"\n [ngStyle]=\"getDialogContentStyle()\"\n >\n {{ getDialogContentText() }}\n </p>\n }\n </div>\n </div>\n </div>\n\n @if (hasFooter()) {\n <div class=\"pt-confirm-dialog-custom-footer\">\n <div\n class=\"pt-confirm-dialog-footer-buttons\"\n [ngStyle]=\"getFooterButtonsStyle()\"\n >\n @if (dialogConfig.cancelButtonConfig) {\n <div class=\"pt-confirm-dialog-button-slot\">\n <pt-button\n [buttonConfig]=\"cancelButtonModel\"\n (click)=\"onCancelClick()\"\n ></pt-button>\n </div>\n }\n\n @if (dialogConfig.confirmButtonConfig) {\n <div class=\"pt-confirm-dialog-button-slot\">\n <pt-button\n [buttonConfig]=\"confirmButtonModel\"\n (click)=\"onConfirmClick()\"\n ></pt-button>\n </div>\n }\n </div>\n </div>\n }\n </div>\n </ng-template>\n </p-confirmDialog>\n</div>\n", styles: ["::ng-deep .pt-confirm-dialog-overlay.p-dialog,::ng-deep .p-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirm-dialog,::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirmdialog,::ng-deep .p-confirmdialog.pt-confirm-dialog-overlay{width:560px!important;max-width:calc(100vw - 2rem)!important;height:auto!important;min-height:unset!important;max-height:none!important;border:0!important;border-radius:28px!important;overflow:hidden!important;background
|
|
5821
|
+
args: [{ selector: 'pt-confirm-dialog', providers: [ConfirmationService], standalone: false, template: "<div class=\"pt-confirm-dialog\">\n <p-confirmDialog\n #cd\n [styleClass]=\"overlayStyleClass\"\n [appendTo]=\"'body'\"\n [closable]=\"false\"\n [closeOnEscape]=\"false\"\n >\n <ng-template pTemplate=\"header\"></ng-template>\n\n <ng-template pTemplate=\"message\">\n <div class=\"pt-confirm-dialog-wrapper\">\n <div class=\"pt-confirm-dialog-body\" [ngStyle]=\"getDialogBodyStyle()\">\n <button\n type=\"button\"\n class=\"pt-confirm-dialog-close\"\n aria-label=\"Fermer\"\n (click)=\"onCancelClick()\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n\n <div class=\"pt-confirm-dialog-content\">\n <div\n class=\"pt-confirm-dialog-icon-wrapper\"\n [ngStyle]=\"getIconWrapperStyle()\"\n >\n <i\n class=\"pt-confirm-dialog-icon\"\n [class]=\"getDialogIconClass()\"\n [ngStyle]=\"getDialogIconStyle()\"\n ></i>\n </div>\n\n <div class=\"pt-confirm-dialog-text-wrapper\">\n <h3\n class=\"pt-confirm-dialog-title\"\n [ngStyle]=\"getDialogHeaderStyle()\"\n >\n {{ getDialogHeaderText() }}\n </h3>\n\n @if (dialogBodyTpl) {\n <ng-container [ngTemplateOutlet]=\"dialogBodyTpl\"></ng-container>\n } @else {\n <p\n class=\"pt-confirm-dialog-message-text\"\n [ngStyle]=\"getDialogContentStyle()\"\n >\n {{ getDialogContentText() }}\n </p>\n }\n </div>\n </div>\n </div>\n\n @if (hasFooter()) {\n <div class=\"pt-confirm-dialog-custom-footer\">\n <div\n class=\"pt-confirm-dialog-footer-buttons\"\n [ngStyle]=\"getFooterButtonsStyle()\"\n >\n @if (dialogConfig.cancelButtonConfig) {\n <div class=\"pt-confirm-dialog-button-slot\">\n <pt-button\n [buttonConfig]=\"cancelButtonModel\"\n (click)=\"onCancelClick()\"\n ></pt-button>\n </div>\n }\n\n @if (dialogConfig.confirmButtonConfig) {\n <div class=\"pt-confirm-dialog-button-slot\">\n <pt-button\n [buttonConfig]=\"confirmButtonModel\"\n (click)=\"onConfirmClick()\"\n ></pt-button>\n </div>\n }\n </div>\n </div>\n }\n </div>\n </ng-template>\n </p-confirmDialog>\n</div>\n", styles: ["::ng-deep .pt-confirm-dialog-overlay.p-dialog,::ng-deep .p-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirm-dialog,::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirmdialog,::ng-deep .p-confirmdialog.pt-confirm-dialog-overlay{width:560px!important;max-width:calc(100vw - 2rem)!important;height:auto!important;min-height:unset!important;max-height:none!important;border:0!important;border-radius:28px!important;overflow:hidden!important;background:var(--pt-confirm-dialog-bg, #ffffff)!important;box-shadow:var( --pt-confirm-dialog-shadow, 0 24px 60px rgba(15, 23, 42, .3) )!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-header{display:none!important;padding:0!important;border:0!important;height:0!important;min-height:0!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-content{padding:0!important;margin:0!important;overflow:hidden!important;background:transparent!important}::ng-deep .pt-confirm-dialog-overlay .p-confirm-dialog-message,::ng-deep .pt-confirm-dialog-overlay .p-confirmdialog-message{display:block!important;width:100%!important;margin:0!important;padding:0!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-footer{display:none!important;padding:0!important;margin:0!important;border:0!important;height:0!important;min-height:0!important;max-height:0!important}.pt-confirm-dialog-wrapper{width:100%;background:var(--pt-confirm-dialog-bg, #ffffff);color:var(--pt-confirm-dialog-text, #0f172a);overflow:hidden}.pt-confirm-dialog-body{position:relative;width:100%;min-height:190px;padding:2rem 2.25rem;border-bottom:1px solid var(--pt-confirm-dialog-border, #e5e7eb);box-sizing:border-box}.pt-confirm-dialog-no-footer .pt-confirm-dialog-body{border-bottom:0!important}.pt-confirm-dialog-content{display:flex;align-items:center;gap:1.25rem;min-height:126px;padding-right:3rem}.pt-confirm-dialog-text-wrapper{flex:1;min-width:0}.pt-confirm-dialog-title{margin:0 0 .45rem;line-height:1.25;color:var(--pt-confirm-dialog-title, #0f172a)}.pt-confirm-dialog-message-text{margin:0;line-height:1.55;font-weight:400;color:var(--pt-confirm-dialog-message, #475569)}.pt-confirm-dialog-close{position:absolute;top:1.25rem;right:1.25rem;z-index:5;width:2.75rem;height:2.75rem;border:2px solid currentColor;border-radius:999px;background:var(--pt-confirm-dialog-close-bg, rgba(255, 255, 255, .85));color:var(--pt-confirm-dialog-close-color, #64748b);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:background-color .2s ease,color .2s ease,transform .2s ease}.pt-confirm-dialog-close:hover{background:var(--pt-confirm-dialog-close-hover-bg, #ffffff);color:var(--pt-confirm-dialog-close-hover-color, #0f172a);transform:scale(1.04)}.pt-confirm-dialog-close i{font-size:1.15rem}.pt-confirm-dialog-icon-wrapper{width:4.25rem;height:4.25rem;min-width:4.25rem;border:1px solid;border-radius:999px;display:flex;align-items:center;justify-content:center}.pt-confirm-dialog-icon{line-height:1}.pt-confirm-dialog-custom-footer{width:100%;padding:1rem 1.5rem 1.35rem;background:var(--pt-confirm-dialog-footer-bg, #ffffff);box-sizing:border-box}.pt-confirm-dialog-footer-buttons{display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;gap:.75rem;width:100%}.pt-confirm-dialog-button-slot{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot>pt-button{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot p-button,::ng-deep .pt-confirm-dialog-button-slot>p-button{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot .p-button,::ng-deep .pt-confirm-dialog-button-slot button{width:auto!important;min-width:7.5rem;max-width:max-content!important;border-radius:999px!important;padding:.7rem 1.35rem!important;font-weight:600!important;white-space:nowrap!important}::ng-deep .pt-confirm-dialog-button-slot .p-button .pi{margin-right:.45rem}@media(max-width:768px){.pt-confirm-dialog-body{min-height:170px;padding:1.5rem}.pt-confirm-dialog-content{gap:.85rem;padding-right:2rem}.pt-confirm-dialog-icon-wrapper{width:3.2rem;height:3.2rem;min-width:3.2rem}.pt-confirm-dialog-footer-buttons{justify-content:center;flex-wrap:wrap!important}::ng-deep .pt-confirm-dialog-button-slot .p-button,::ng-deep .pt-confirm-dialog-button-slot button{min-width:6.5rem}}\n"] }]
|
|
5771
5822
|
}], ctorParameters: () => [{ type: i1$1.ConfirmationService }], propDecorators: { dialogConfig: [{
|
|
5772
5823
|
type: Input
|
|
5773
5824
|
}], formGroup: [{
|
|
@@ -5990,11 +6041,11 @@ class PTDialogComponent {
|
|
|
5990
6041
|
return this.removeTextUtilityClasses(this.config.headerIconClass);
|
|
5991
6042
|
}
|
|
5992
6043
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5993
|
-
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"] }] }); }
|
|
6044
|
+
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:var(--pt-dialog-shadow, 0 20px 45px rgba(15, 23, 42, .35));background:var(--pt-dialog-bg, #ffffff);color:var(--pt-dialog-text, #0f172a);z-index:1200!important}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-header{overflow:hidden!important;flex:0 0 auto;background:var(--pt-dialog-header-bg, #ffffff);color:var(--pt-dialog-header-text, #0f172a)}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-content{overflow:hidden!important;position:relative;z-index:1;background:var(--pt-dialog-bg, #ffffff);color:var(--pt-dialog-text, #0f172a)}: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:var(--pt-dialog-info-header-bg, #e0f2fe);border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-success .p-dialog-header{background-color:var(--pt-dialog-success-header-bg, #dcfce7);border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-warning .p-dialog-header{background-color:var(--pt-dialog-warning-header-bg, #fff4d1);border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-danger .p-dialog-header{background-color:var(--pt-dialog-danger-header-bg, #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 var(--pt-dialog-header-btn-border, rgba(148, 163, 184, .3));background:var(--pt-dialog-header-btn-bg, rgba(255, 255, 255, .65));color:var(--pt-dialog-header-btn-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:var(--pt-dialog-header-btn-hover-bg, rgba(255, 255, 255, .9));border-color:var( --pt-dialog-header-btn-hover-border, rgba(100, 116, 139, .5) );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:var(--pt-dialog-info-header-text, #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:var(--pt-dialog-success-header-text, #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:var(--pt-dialog-warning-header-text, #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:var(--pt-dialog-danger-header-text, #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;background:var(--pt-dialog-bg, #ffffff);color:var(--pt-dialog-text, #0f172a)}.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:var(--pt-dialog-footer-bg, #ffffff)!important;border-top:1px solid var(--pt-dialog-footer-border, 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:var(--pt-dialog-danger-button-bg, #ffffff)!important;border-color:var(--pt-dialog-danger-button-border, #dc2626)!important;color:var(--pt-dialog-danger-button-text, #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:var(--pt-dialog-warning-button-bg, #ffffff)!important;border-color:var(--pt-dialog-warning-button-border, #d97706)!important;color:var(--pt-dialog-warning-button-text, #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:var(--pt-dialog-success-button-bg, #ffffff)!important;border-color:var(--pt-dialog-success-button-border, #16a34a)!important;color:var(--pt-dialog-success-button-text, #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:var(--pt-dialog-info-button-bg, #ffffff)!important;border-color:var(--pt-dialog-info-button-border, #2563eb)!important;color:var(--pt-dialog-info-button-text, #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:var(--pt-dialog-info-button-hover-bg, #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"] }] }); }
|
|
5994
6045
|
}
|
|
5995
6046
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDialogComponent, decorators: [{
|
|
5996
6047
|
type: Component,
|
|
5997
|
-
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 #
|
|
6048
|
+
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:var(--pt-dialog-shadow, 0 20px 45px rgba(15, 23, 42, .35));background:var(--pt-dialog-bg, #ffffff);color:var(--pt-dialog-text, #0f172a);z-index:1200!important}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-header{overflow:hidden!important;flex:0 0 auto;background:var(--pt-dialog-header-bg, #ffffff);color:var(--pt-dialog-header-text, #0f172a)}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-content{overflow:hidden!important;position:relative;z-index:1;background:var(--pt-dialog-bg, #ffffff);color:var(--pt-dialog-text, #0f172a)}: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:var(--pt-dialog-info-header-bg, #e0f2fe);border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-success .p-dialog-header{background-color:var(--pt-dialog-success-header-bg, #dcfce7);border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-warning .p-dialog-header{background-color:var(--pt-dialog-warning-header-bg, #fff4d1);border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-danger .p-dialog-header{background-color:var(--pt-dialog-danger-header-bg, #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 var(--pt-dialog-header-btn-border, rgba(148, 163, 184, .3));background:var(--pt-dialog-header-btn-bg, rgba(255, 255, 255, .65));color:var(--pt-dialog-header-btn-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:var(--pt-dialog-header-btn-hover-bg, rgba(255, 255, 255, .9));border-color:var( --pt-dialog-header-btn-hover-border, rgba(100, 116, 139, .5) );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:var(--pt-dialog-info-header-text, #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:var(--pt-dialog-success-header-text, #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:var(--pt-dialog-warning-header-text, #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:var(--pt-dialog-danger-header-text, #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;background:var(--pt-dialog-bg, #ffffff);color:var(--pt-dialog-text, #0f172a)}.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:var(--pt-dialog-footer-bg, #ffffff)!important;border-top:1px solid var(--pt-dialog-footer-border, 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:var(--pt-dialog-danger-button-bg, #ffffff)!important;border-color:var(--pt-dialog-danger-button-border, #dc2626)!important;color:var(--pt-dialog-danger-button-text, #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:var(--pt-dialog-warning-button-bg, #ffffff)!important;border-color:var(--pt-dialog-warning-button-border, #d97706)!important;color:var(--pt-dialog-warning-button-text, #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:var(--pt-dialog-success-button-bg, #ffffff)!important;border-color:var(--pt-dialog-success-button-border, #16a34a)!important;color:var(--pt-dialog-success-button-text, #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:var(--pt-dialog-info-button-bg, #ffffff)!important;border-color:var(--pt-dialog-info-button-border, #2563eb)!important;color:var(--pt-dialog-info-button-text, #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:var(--pt-dialog-info-button-hover-bg, #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"] }]
|
|
5998
6049
|
}], propDecorators: { config: [{
|
|
5999
6050
|
type: Input
|
|
6000
6051
|
}], visible: [{
|