ng-prime-tools 1.0.17 → 1.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -0
- package/esm2022/lib/models/card-config.model.mjs +1 -1
- package/esm2022/lib/models/form-text-field.model.mjs +1 -1
- package/esm2022/lib/pt-card/pt-card.component.mjs +32 -12
- package/esm2022/lib/pt-side-bar-menu/pt-side-bar-menu.component.mjs +10 -7
- package/esm2022/lib/pt-text-input/pt-text-input.component.mjs +3 -3
- package/fesm2022/ng-prime-tools.mjs +42 -19
- package/fesm2022/ng-prime-tools.mjs.map +1 -1
- package/lib/models/card-config.model.d.ts +1 -0
- package/lib/models/card-config.model.d.ts.map +1 -1
- package/lib/models/form-text-field.model.d.ts +1 -0
- package/lib/models/form-text-field.model.d.ts.map +1 -1
- package/lib/pt-card/pt-card.component.d.ts +5 -4
- package/lib/pt-card/pt-card.component.d.ts.map +1 -1
- package/lib/pt-side-bar-menu/pt-side-bar-menu.component.d.ts.map +1 -1
- package/lib/pt-text-input/pt-text-input.component.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1337,11 +1337,11 @@ class PTTextInputComponent {
|
|
|
1337
1337
|
return '';
|
|
1338
1338
|
}
|
|
1339
1339
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1340
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTTextInputComponent, selector: "pt-text-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "<div\n [formGroup]=\"formGroup\"\n class=\"form-field\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto'\n }\"\n *ngIf=\"!formField.hidden\"\n>\n <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n\n <ng-container *ngIf=\"formField.iconClass; else noIcon\">\n <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n <p-inputIcon\n *ngIf=\"formField.iconClass\"\n [styleClass]=\"formField.iconClass\"\n ></p-inputIcon>\n <input\n [type]=\"getInputType()\"\n pInputText\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [attr.minlength]=\"formField.minLength\"\n [attr.maxlength]=\"formField.maxLength\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto'\n }\"\n />\n </p-iconField>\n </ng-container>\n\n <ng-template #noIcon>\n <input\n [type]=\"getInputType()\"\n pInputText\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [attr.minlength]=\"formField.minLength\"\n [attr.maxlength]=\"formField.maxLength\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto'\n }\"\n />\n </ng-template>\n\n <div class=\"form-info-row\">\n <small\n *ngIf=\"\n formGroup.get(formField.name)?.invalid &&\n formGroup.get(formField.name)?.touched\n \"\n class=\"p-error\"\n >\n {{ getErrorMessage() }}\n </small>\n <div class=\"spacer\"></div>\n <div\n *ngIf=\"!formField.disabled && formField.maxLength !== undefined\"\n class=\"character-counter\"\n >\n {{ characterCount }}/{{ formField.maxLength }} characters\n </div>\n </div>\n</div>\n", styles: [".form-field{position:relative
|
|
1340
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTTextInputComponent, selector: "pt-text-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "<div\n [formGroup]=\"formGroup\"\n class=\"form-field\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto'\n }\"\n *ngIf=\"!formField.hidden\"\n>\n <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n\n <ng-container *ngIf=\"formField.iconClass; else noIcon\">\n <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n <p-inputIcon\n *ngIf=\"formField.iconClass\"\n [styleClass]=\"formField.iconClass\"\n ></p-inputIcon>\n <input\n [type]=\"getInputType()\"\n pInputText\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [attr.minlength]=\"formField.minLength\"\n [attr.maxlength]=\"formField.maxLength\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto'\n }\"\n />\n </p-iconField>\n </ng-container>\n\n <ng-template #noIcon>\n <input\n [type]=\"getInputType()\"\n pInputText\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [attr.minlength]=\"formField.minLength\"\n [attr.maxlength]=\"formField.maxLength\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto'\n }\"\n />\n </ng-template>\n\n <div class=\"form-info-row\">\n <small\n *ngIf=\"\n formGroup.get(formField.name)?.invalid &&\n formGroup.get(formField.name)?.touched\n \"\n class=\"p-error\"\n >\n {{ getErrorMessage() }}\n </small>\n <div class=\"spacer\"></div>\n <div\n *ngIf=\"!formField.disabled && formField.maxLength !== undefined\"\n class=\"character-counter\"\n >\n {{ characterCount }}/{{ formField.maxLength }} characters\n </div>\n </div>\n</div>\n", styles: [".form-field{position:relative}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.form-info-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.spacer{flex-grow:1}.character-counter{font-size:.8rem;color:#888;text-align:right;margin-left:auto}.p-error{font-size:.8rem;color:#f44336}input:focus{outline:none;box-shadow:none;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: i10.IconField, selector: "p-iconField", inputs: ["iconPosition"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputIcon", inputs: ["styleClass"] }] }); }
|
|
1341
1341
|
}
|
|
1342
1342
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTTextInputComponent, decorators: [{
|
|
1343
1343
|
type: Component,
|
|
1344
|
-
args: [{ selector: 'pt-text-input', template: "<div\n [formGroup]=\"formGroup\"\n class=\"form-field\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto'\n }\"\n *ngIf=\"!formField.hidden\"\n>\n <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n\n <ng-container *ngIf=\"formField.iconClass; else noIcon\">\n <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n <p-inputIcon\n *ngIf=\"formField.iconClass\"\n [styleClass]=\"formField.iconClass\"\n ></p-inputIcon>\n <input\n [type]=\"getInputType()\"\n pInputText\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [attr.minlength]=\"formField.minLength\"\n [attr.maxlength]=\"formField.maxLength\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto'\n }\"\n />\n </p-iconField>\n </ng-container>\n\n <ng-template #noIcon>\n <input\n [type]=\"getInputType()\"\n pInputText\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [attr.minlength]=\"formField.minLength\"\n [attr.maxlength]=\"formField.maxLength\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto'\n }\"\n />\n </ng-template>\n\n <div class=\"form-info-row\">\n <small\n *ngIf=\"\n formGroup.get(formField.name)?.invalid &&\n formGroup.get(formField.name)?.touched\n \"\n class=\"p-error\"\n >\n {{ getErrorMessage() }}\n </small>\n <div class=\"spacer\"></div>\n <div\n *ngIf=\"!formField.disabled && formField.maxLength !== undefined\"\n class=\"character-counter\"\n >\n {{ characterCount }}/{{ formField.maxLength }} characters\n </div>\n </div>\n</div>\n", styles: [".form-field{position:relative
|
|
1344
|
+
args: [{ selector: 'pt-text-input', template: "<div\n [formGroup]=\"formGroup\"\n class=\"form-field\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto'\n }\"\n *ngIf=\"!formField.hidden\"\n>\n <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n\n <ng-container *ngIf=\"formField.iconClass; else noIcon\">\n <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n <p-inputIcon\n *ngIf=\"formField.iconClass\"\n [styleClass]=\"formField.iconClass\"\n ></p-inputIcon>\n <input\n [type]=\"getInputType()\"\n pInputText\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [attr.minlength]=\"formField.minLength\"\n [attr.maxlength]=\"formField.maxLength\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto'\n }\"\n />\n </p-iconField>\n </ng-container>\n\n <ng-template #noIcon>\n <input\n [type]=\"getInputType()\"\n pInputText\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [attr.minlength]=\"formField.minLength\"\n [attr.maxlength]=\"formField.maxLength\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto'\n }\"\n />\n </ng-template>\n\n <div class=\"form-info-row\">\n <small\n *ngIf=\"\n formGroup.get(formField.name)?.invalid &&\n formGroup.get(formField.name)?.touched\n \"\n class=\"p-error\"\n >\n {{ getErrorMessage() }}\n </small>\n <div class=\"spacer\"></div>\n <div\n *ngIf=\"!formField.disabled && formField.maxLength !== undefined\"\n class=\"character-counter\"\n >\n {{ characterCount }}/{{ formField.maxLength }} characters\n </div>\n </div>\n</div>\n", styles: [".form-field{position:relative}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.form-info-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.spacer{flex-grow:1}.character-counter{font-size:.8rem;color:#888;text-align:right;margin-left:auto}.p-error{font-size:.8rem;color:#f44336}input:focus{outline:none;box-shadow:none;border-color:inherit}\n"] }]
|
|
1345
1345
|
}], propDecorators: { formGroup: [{
|
|
1346
1346
|
type: Input
|
|
1347
1347
|
}], formField: [{
|
|
@@ -2259,12 +2259,23 @@ class PTCardComponent {
|
|
|
2259
2259
|
return this.config.menuPosition || PTCardComponent.DEFAULT_MENU_POSITION;
|
|
2260
2260
|
}
|
|
2261
2261
|
getCardStyles() {
|
|
2262
|
-
|
|
2262
|
+
// Transparency for the background color
|
|
2263
|
+
const backgroundTransparency = this.config.transparencyPercentage
|
|
2264
|
+
? parseFloat(this.config.transparencyPercentage) / 100
|
|
2265
|
+
: 1;
|
|
2266
|
+
// Transparency for the pattern image
|
|
2267
|
+
const patternTransparency = this.config.pattern?.transparencyPercentage
|
|
2263
2268
|
? parseFloat(this.config.pattern.transparencyPercentage) / 100
|
|
2264
2269
|
: 1;
|
|
2265
|
-
|
|
2266
|
-
const backgroundColor = this.config.
|
|
2267
|
-
|
|
2270
|
+
// Background color with transparency
|
|
2271
|
+
const backgroundColor = this.config.backgroundColor && this.config.transparencyPercentage !== '0'
|
|
2272
|
+
? this.hexToRgba(this.config.backgroundColor, backgroundTransparency)
|
|
2273
|
+
: 'transparent';
|
|
2274
|
+
// Pattern image with transparency applied via linear-gradient
|
|
2275
|
+
const backgroundImage = this.config.pattern?.imageUrl &&
|
|
2276
|
+
this.config.pattern.transparencyPercentage !== '0'
|
|
2277
|
+
? `linear-gradient(rgba(255, 255, 255, ${1 - patternTransparency}), rgba(255, 255, 255, ${1 - patternTransparency})), url('${this.config.pattern.imageUrl}')`
|
|
2278
|
+
: '';
|
|
2268
2279
|
const patternWidth = this.config.pattern?.width || '100%';
|
|
2269
2280
|
const patternHeight = this.config.pattern?.height || 'auto';
|
|
2270
2281
|
// Determine background-repeat value
|
|
@@ -2285,7 +2296,11 @@ class PTCardComponent {
|
|
|
2285
2296
|
flexDirection: 'column',
|
|
2286
2297
|
justifyContent, // Apply conditional vertical alignment
|
|
2287
2298
|
alignItems, // Apply conditional horizontal alignment
|
|
2288
|
-
backgroundColor,
|
|
2299
|
+
backgroundColor, // Background color with transparency
|
|
2300
|
+
backgroundImage, // Pattern image with transparency
|
|
2301
|
+
backgroundSize,
|
|
2302
|
+
backgroundPosition,
|
|
2303
|
+
backgroundRepeat,
|
|
2289
2304
|
width: this.config.width || PTCardComponent.DEFAULT_WIDTH,
|
|
2290
2305
|
height: this.config.height || PTCardComponent.DEFAULT_HEIGHT,
|
|
2291
2306
|
border: this.config.noBorder
|
|
@@ -2296,13 +2311,18 @@ class PTCardComponent {
|
|
|
2296
2311
|
borderRadius: this.config.borderRadius || '8px',
|
|
2297
2312
|
boxShadow: this.config.boxShadow || '0 2px 4px rgba(0, 0, 0, 0.1)',
|
|
2298
2313
|
position: 'relative',
|
|
2299
|
-
backgroundImage: imageUrl ? `url(${imageUrl})` : 'none',
|
|
2300
|
-
backgroundSize,
|
|
2301
|
-
backgroundPosition,
|
|
2302
|
-
backgroundRepeat,
|
|
2303
2314
|
zIndex: this.config.zIndex !== undefined ? this.config.zIndex : 'auto',
|
|
2304
2315
|
};
|
|
2305
2316
|
}
|
|
2317
|
+
// Utility function to convert hex color to rgba
|
|
2318
|
+
hexToRgba(hex, alpha) {
|
|
2319
|
+
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
|
2320
|
+
hex = hex.replace(shorthandRegex, (_, r, g, b) => r + r + g + g + b + b);
|
|
2321
|
+
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
2322
|
+
return result
|
|
2323
|
+
? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`
|
|
2324
|
+
: hex;
|
|
2325
|
+
}
|
|
2306
2326
|
getBodyStyles() {
|
|
2307
2327
|
const justifyContent = this.config.alignBodyContent === 'center' ? 'center' : 'flex-start';
|
|
2308
2328
|
const alignItems = this.config.alignBodyContent === 'center' ? 'center' : 'stretch';
|
|
@@ -2344,11 +2364,11 @@ class PTCardComponent {
|
|
|
2344
2364
|
return this.config.alignHeaderContent === 'center' ? 'center-align' : '';
|
|
2345
2365
|
}
|
|
2346
2366
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTCardComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2347
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTCardComponent, 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 <div\n *ngIf=\"hasTitle()\"\n class=\"card-header\"\n [ngClass]=\"getHeaderClass()\"\n [ngStyle]=\"getHeaderStyles()\"\n >\n <i\n *ngIf=\"getIconClass() && getIconPosition() === 'left'\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n class=\"card-header-icon-left\"\n ></i>\n <span>{{ getTitleText() }}</span>\n <i\n *ngIf=\"getIconClass() && getIconPosition() === 'right'\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n class=\"card-header-icon-right\"\n ></i>\n <pt-menu\n *ngIf=\"config.menu\"\n [config]=\"config.menu\"\n [ngClass]=\"{\n 'menu-left': getMenuPosition() === 'left',\n 'menu-right': getMenuPosition() === 'right'\n }\"\n ></pt-menu>\n </div>\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}.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}.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}.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}.pt-card .card-header.center-align{justify-content:center;align-items:center}.pt-card .card-header-icon-left{margin-right:6px}.pt-card .card-header-icon-right{margin-left:6px}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTMenuComponent, selector: "pt-menu", inputs: ["config"] }] }); }
|
|
2367
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTCardComponent, 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 <div\n *ngIf=\"hasTitle()\"\n class=\"card-header\"\n [ngClass]=\"getHeaderClass()\"\n [ngStyle]=\"getHeaderStyles()\"\n >\n <i\n *ngIf=\"getIconClass() && getIconPosition() === 'left'\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n class=\"card-header-icon-left\"\n ></i>\n <span>{{ getTitleText() }}</span>\n <i\n *ngIf=\"getIconClass() && getIconPosition() === 'right'\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n class=\"card-header-icon-right\"\n ></i>\n <pt-menu\n *ngIf=\"config.menu\"\n [config]=\"config.menu\"\n [ngClass]=\"{\n 'menu-left': getMenuPosition() === 'left',\n 'menu-right': getMenuPosition() === 'right'\n }\"\n ></pt-menu>\n </div>\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( --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}.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}.pt-card .card-header.center-align{justify-content:center;align-items:center}.pt-card .card-header-icon-left{margin-right:6px}.pt-card .card-header-icon-right{margin-left:6px}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTMenuComponent, selector: "pt-menu", inputs: ["config"] }] }); }
|
|
2348
2368
|
}
|
|
2349
2369
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTCardComponent, decorators: [{
|
|
2350
2370
|
type: Component,
|
|
2351
|
-
args: [{ selector: 'pt-card', template: "<div\n class=\"pt-card card\"\n [ngClass]=\"getCardClass()\"\n [attr.id]=\"config.identifier\"\n [ngStyle]=\"getCardStyles()\"\n>\n <!-- Card Header -->\n <div\n *ngIf=\"hasTitle()\"\n class=\"card-header\"\n [ngClass]=\"getHeaderClass()\"\n [ngStyle]=\"getHeaderStyles()\"\n >\n <i\n *ngIf=\"getIconClass() && getIconPosition() === 'left'\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n class=\"card-header-icon-left\"\n ></i>\n <span>{{ getTitleText() }}</span>\n <i\n *ngIf=\"getIconClass() && getIconPosition() === 'right'\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n class=\"card-header-icon-right\"\n ></i>\n <pt-menu\n *ngIf=\"config.menu\"\n [config]=\"config.menu\"\n [ngClass]=\"{\n 'menu-left': getMenuPosition() === 'left',\n 'menu-right': getMenuPosition() === 'right'\n }\"\n ></pt-menu>\n </div>\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}.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}.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}.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}.pt-card .card-header.center-align{justify-content:center;align-items:center}.pt-card .card-header-icon-left{margin-right:6px}.pt-card .card-header-icon-right{margin-left:6px}.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}\n"] }]
|
|
2371
|
+
args: [{ selector: 'pt-card', template: "<div\n class=\"pt-card card\"\n [ngClass]=\"getCardClass()\"\n [attr.id]=\"config.identifier\"\n [ngStyle]=\"getCardStyles()\"\n>\n <!-- Card Header -->\n <div\n *ngIf=\"hasTitle()\"\n class=\"card-header\"\n [ngClass]=\"getHeaderClass()\"\n [ngStyle]=\"getHeaderStyles()\"\n >\n <i\n *ngIf=\"getIconClass() && getIconPosition() === 'left'\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n class=\"card-header-icon-left\"\n ></i>\n <span>{{ getTitleText() }}</span>\n <i\n *ngIf=\"getIconClass() && getIconPosition() === 'right'\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n class=\"card-header-icon-right\"\n ></i>\n <pt-menu\n *ngIf=\"config.menu\"\n [config]=\"config.menu\"\n [ngClass]=\"{\n 'menu-left': getMenuPosition() === 'left',\n 'menu-right': getMenuPosition() === 'right'\n }\"\n ></pt-menu>\n </div>\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( --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}.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}.pt-card .card-header.center-align{justify-content:center;align-items:center}.pt-card .card-header-icon-left{margin-right:6px}.pt-card .card-header-icon-right{margin-left:6px}.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}\n"] }]
|
|
2352
2372
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
|
|
2353
2373
|
type: Input
|
|
2354
2374
|
}] } });
|
|
@@ -2632,15 +2652,18 @@ class PTSideBarMenuComponent {
|
|
|
2632
2652
|
height: '100vh',
|
|
2633
2653
|
scrollable: true,
|
|
2634
2654
|
backgroundColor: 'white',
|
|
2635
|
-
fontColor: '#333',
|
|
2636
|
-
fontColorSubMenu: '#666',
|
|
2637
|
-
hoverColor: '#f1f1f1',
|
|
2638
|
-
hoverColorSubMenu: '#e0e0e0',
|
|
2655
|
+
fontColor: '#333',
|
|
2656
|
+
fontColorSubMenu: '#666',
|
|
2657
|
+
hoverColor: '#f1f1f1',
|
|
2658
|
+
hoverColorSubMenu: '#e0e0e0',
|
|
2639
2659
|
};
|
|
2640
2660
|
this.searchCardConfig = {
|
|
2661
|
+
alignContent: 'center',
|
|
2662
|
+
alignBodyContent: 'center',
|
|
2641
2663
|
identifier: 'pt-side-bar-menu/search',
|
|
2642
2664
|
backgroundColor: 'white',
|
|
2643
2665
|
height: '72px',
|
|
2666
|
+
padding: '0',
|
|
2644
2667
|
};
|
|
2645
2668
|
this.cardConfig = {
|
|
2646
2669
|
identifier: 'pt-side-bar-menu',
|
|
@@ -2812,11 +2835,11 @@ class PTSideBarMenuComponent {
|
|
|
2812
2835
|
});
|
|
2813
2836
|
}
|
|
2814
2837
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTSideBarMenuComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2815
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTSideBarMenuComponent, selector: "pt-side-bar-menu", inputs: { menuConfig: "menuConfig" }, ngImport: i0, template: "<div class=\"pt-side-bar-menu\">\n <pt-card\n *ngIf=\"menuConfig.searchable\"\n [config]=\"searchCardConfig\"\n [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n >\n <div class=\"search-input\">\n <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n </pt-text-input>\n </div>\n </pt-card>\n\n <pt-card\n [config]=\"cardConfig\"\n [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n >\n <ul class=\"menu-list\">\n <li\n *ngFor=\"let item of filteredMenus\"\n class=\"menu-item\"\n [ngClass]=\"{ 'menu-item-expanded': item.isExpanded }\"\n [ngStyle]=\"getMenuItemStyles()\"\n >\n <!-- Main menu items without children -->\n <a\n *ngIf=\"!item.children?.length\"\n [routerLink]=\"item.url\"\n class=\"menu-link\"\n [ngStyle]=\"getMenuLinkStyles()\"\n >\n <i [ngClass]=\"item.icon\"></i>\n <span>{{ item.label }}</span>\n <span\n *ngIf=\"item.badge\"\n [ngStyle]=\"getBadgeStyles(item.badge)\"\n class=\"badge\"\n >\n {{ item.badge.count }}\n </span>\n </a>\n\n <!-- Menu items with children -->\n <a\n *ngIf=\"item.children?.length\"\n class=\"menu-link\"\n (click)=\"toggleMenu(item, $event)\"\n [ngStyle]=\"getMenuLinkStyles()\"\n >\n <i [ngClass]=\"item.icon\"></i>\n <span>{{ item.label }}</span>\n <span\n *ngIf=\"item.badge\"\n [ngStyle]=\"getBadgeStyles(item.badge)\"\n class=\"badge\"\n >\n {{ item.badge.count }}\n </span>\n <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n </a>\n\n <!-- Submenu -->\n <ul class=\"submenu-list\">\n <li *ngFor=\"let child of item.children\" class=\"submenu-item\">\n <a\n [routerLink]=\"child.url\"\n class=\"submenu-link\"\n [ngStyle]=\"getSubMenuLinkStyles()\"\n >\n <i [ngClass]=\"child.icon\"></i>\n <span class=\"submenu-title\">{{ child.label }}</span>\n <span\n *ngIf=\"child.badge\"\n [ngStyle]=\"getBadgeStyles(child.badge)\"\n class=\"badge\"\n >\n {{ child.badge.count }}\n </span>\n </a>\n </li>\n </ul>\n </li>\n </ul>\n </pt-card>\n</div>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-item-expanded .submenu-list{max-height:500px;padding-bottom:5px;padding-top:5px}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:15px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .
|
|
2838
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTSideBarMenuComponent, selector: "pt-side-bar-menu", inputs: { menuConfig: "menuConfig" }, ngImport: i0, template: "<div class=\"pt-side-bar-menu\">\n <pt-card\n *ngIf=\"menuConfig.searchable\"\n [config]=\"searchCardConfig\"\n [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n >\n <div class=\"search-input\">\n <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n </pt-text-input>\n </div>\n </pt-card>\n\n <pt-card\n [config]=\"cardConfig\"\n [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n >\n <ul class=\"menu-list\">\n <li\n *ngFor=\"let item of filteredMenus\"\n class=\"menu-item\"\n [ngClass]=\"{ 'menu-item-expanded': item.isExpanded }\"\n [ngStyle]=\"getMenuItemStyles()\"\n >\n <!-- Main menu items without children -->\n <a\n *ngIf=\"!item.children?.length\"\n [routerLink]=\"item.url\"\n class=\"menu-link\"\n [ngStyle]=\"getMenuLinkStyles()\"\n >\n <i [ngClass]=\"item.icon\"></i>\n <span>{{ item.label }}</span>\n <span\n *ngIf=\"item.badge\"\n [ngStyle]=\"getBadgeStyles(item.badge)\"\n class=\"badge\"\n >\n {{ item.badge.count }}\n </span>\n </a>\n\n <!-- Menu items with children -->\n <a\n *ngIf=\"item.children?.length\"\n class=\"menu-link\"\n (click)=\"toggleMenu(item, $event)\"\n [ngStyle]=\"getMenuLinkStyles()\"\n >\n <i [ngClass]=\"item.icon\"></i>\n <span>{{ item.label }}</span>\n <span\n *ngIf=\"item.badge\"\n [ngStyle]=\"getBadgeStyles(item.badge)\"\n class=\"badge\"\n >\n {{ item.badge.count }}\n </span>\n <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n </a>\n\n <!-- Submenu -->\n <ul class=\"submenu-list\">\n <li *ngFor=\"let child of item.children\" class=\"submenu-item\">\n <a\n [routerLink]=\"child.url\"\n class=\"submenu-link\"\n [ngStyle]=\"getSubMenuLinkStyles()\"\n >\n <i [ngClass]=\"child.icon\"></i>\n <span class=\"submenu-title\">{{ child.label }}</span>\n <span\n *ngIf=\"child.badge\"\n [ngStyle]=\"getBadgeStyles(child.badge)\"\n class=\"badge\"\n >\n {{ child.badge.count }}\n </span>\n </a>\n </li>\n </ul>\n </li>\n </ul>\n </pt-card>\n</div>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-item-expanded .submenu-list{max-height:500px;padding-bottom:5px;padding-top:5px}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:15px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out;width:250px}.pt-side-bar-menu .submenu-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:50%;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-item:last-child:after{content:none}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-list{border-left:1px solid #e5e7eb;list-style-type:none;margin-left:23px;margin-top:5px;max-height:0;overflow:hidden;padding-left:25px;position:relative;transition:max-height .3s ease-out,padding .3s ease-out}.pt-side-bar-menu .submenu-list:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-title{margin-left:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$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"] }] }); }
|
|
2816
2839
|
}
|
|
2817
2840
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTSideBarMenuComponent, decorators: [{
|
|
2818
2841
|
type: Component,
|
|
2819
|
-
args: [{ selector: 'pt-side-bar-menu', template: "<div class=\"pt-side-bar-menu\">\n <pt-card\n *ngIf=\"menuConfig.searchable\"\n [config]=\"searchCardConfig\"\n [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n >\n <div class=\"search-input\">\n <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n </pt-text-input>\n </div>\n </pt-card>\n\n <pt-card\n [config]=\"cardConfig\"\n [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n >\n <ul class=\"menu-list\">\n <li\n *ngFor=\"let item of filteredMenus\"\n class=\"menu-item\"\n [ngClass]=\"{ 'menu-item-expanded': item.isExpanded }\"\n [ngStyle]=\"getMenuItemStyles()\"\n >\n <!-- Main menu items without children -->\n <a\n *ngIf=\"!item.children?.length\"\n [routerLink]=\"item.url\"\n class=\"menu-link\"\n [ngStyle]=\"getMenuLinkStyles()\"\n >\n <i [ngClass]=\"item.icon\"></i>\n <span>{{ item.label }}</span>\n <span\n *ngIf=\"item.badge\"\n [ngStyle]=\"getBadgeStyles(item.badge)\"\n class=\"badge\"\n >\n {{ item.badge.count }}\n </span>\n </a>\n\n <!-- Menu items with children -->\n <a\n *ngIf=\"item.children?.length\"\n class=\"menu-link\"\n (click)=\"toggleMenu(item, $event)\"\n [ngStyle]=\"getMenuLinkStyles()\"\n >\n <i [ngClass]=\"item.icon\"></i>\n <span>{{ item.label }}</span>\n <span\n *ngIf=\"item.badge\"\n [ngStyle]=\"getBadgeStyles(item.badge)\"\n class=\"badge\"\n >\n {{ item.badge.count }}\n </span>\n <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n </a>\n\n <!-- Submenu -->\n <ul class=\"submenu-list\">\n <li *ngFor=\"let child of item.children\" class=\"submenu-item\">\n <a\n [routerLink]=\"child.url\"\n class=\"submenu-link\"\n [ngStyle]=\"getSubMenuLinkStyles()\"\n >\n <i [ngClass]=\"child.icon\"></i>\n <span class=\"submenu-title\">{{ child.label }}</span>\n <span\n *ngIf=\"child.badge\"\n [ngStyle]=\"getBadgeStyles(child.badge)\"\n class=\"badge\"\n >\n {{ child.badge.count }}\n </span>\n </a>\n </li>\n </ul>\n </li>\n </ul>\n </pt-card>\n</div>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-item-expanded .submenu-list{max-height:500px;padding-bottom:5px;padding-top:5px}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:15px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .
|
|
2842
|
+
args: [{ selector: 'pt-side-bar-menu', template: "<div class=\"pt-side-bar-menu\">\n <pt-card\n *ngIf=\"menuConfig.searchable\"\n [config]=\"searchCardConfig\"\n [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n >\n <div class=\"search-input\">\n <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n </pt-text-input>\n </div>\n </pt-card>\n\n <pt-card\n [config]=\"cardConfig\"\n [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n >\n <ul class=\"menu-list\">\n <li\n *ngFor=\"let item of filteredMenus\"\n class=\"menu-item\"\n [ngClass]=\"{ 'menu-item-expanded': item.isExpanded }\"\n [ngStyle]=\"getMenuItemStyles()\"\n >\n <!-- Main menu items without children -->\n <a\n *ngIf=\"!item.children?.length\"\n [routerLink]=\"item.url\"\n class=\"menu-link\"\n [ngStyle]=\"getMenuLinkStyles()\"\n >\n <i [ngClass]=\"item.icon\"></i>\n <span>{{ item.label }}</span>\n <span\n *ngIf=\"item.badge\"\n [ngStyle]=\"getBadgeStyles(item.badge)\"\n class=\"badge\"\n >\n {{ item.badge.count }}\n </span>\n </a>\n\n <!-- Menu items with children -->\n <a\n *ngIf=\"item.children?.length\"\n class=\"menu-link\"\n (click)=\"toggleMenu(item, $event)\"\n [ngStyle]=\"getMenuLinkStyles()\"\n >\n <i [ngClass]=\"item.icon\"></i>\n <span>{{ item.label }}</span>\n <span\n *ngIf=\"item.badge\"\n [ngStyle]=\"getBadgeStyles(item.badge)\"\n class=\"badge\"\n >\n {{ item.badge.count }}\n </span>\n <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n </a>\n\n <!-- Submenu -->\n <ul class=\"submenu-list\">\n <li *ngFor=\"let child of item.children\" class=\"submenu-item\">\n <a\n [routerLink]=\"child.url\"\n class=\"submenu-link\"\n [ngStyle]=\"getSubMenuLinkStyles()\"\n >\n <i [ngClass]=\"child.icon\"></i>\n <span class=\"submenu-title\">{{ child.label }}</span>\n <span\n *ngIf=\"child.badge\"\n [ngStyle]=\"getBadgeStyles(child.badge)\"\n class=\"badge\"\n >\n {{ child.badge.count }}\n </span>\n </a>\n </li>\n </ul>\n </li>\n </ul>\n </pt-card>\n</div>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-item-expanded .submenu-list{max-height:500px;padding-bottom:5px;padding-top:5px}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:15px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out;width:250px}.pt-side-bar-menu .submenu-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:50%;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-item:last-child:after{content:none}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-list{border-left:1px solid #e5e7eb;list-style-type:none;margin-left:23px;margin-top:5px;max-height:0;overflow:hidden;padding-left:25px;position:relative;transition:max-height .3s ease-out,padding .3s ease-out}.pt-side-bar-menu .submenu-list:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-title{margin-left:5px}\n"] }]
|
|
2820
2843
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { menuConfig: [{
|
|
2821
2844
|
type: Input
|
|
2822
2845
|
}] } });
|