commons-shared-web-ui 0.0.12 → 0.0.14
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { NgModule, Input, Component, EventEmitter, HostListener, Output, forwardRef, Directive, ViewChild, Injectable, inject, LOCALE_ID, ViewChildren } from '@angular/core';
|
|
2
|
+
import { NgModule, Input, Component, EventEmitter, HostListener, Output, forwardRef, Directive, ViewChild, Injectable, inject, HostBinding, LOCALE_ID, ViewChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, formatDate } from '@angular/common';
|
|
5
5
|
import { MatCardModule } from '@angular/material/card';
|
|
@@ -26,6 +26,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
|
26
26
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
27
27
|
import * as i5 from '@angular/material/select';
|
|
28
28
|
import { MatSelectModule } from '@angular/material/select';
|
|
29
|
+
import * as i2$3 from '@angular/material/tooltip';
|
|
29
30
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
30
31
|
import { MatSliderModule } from '@angular/material/slider';
|
|
31
32
|
import { MatListModule } from '@angular/material/list';
|
|
@@ -42,6 +43,7 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
|
42
43
|
import * as i1$2 from '@angular/forms';
|
|
43
44
|
import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, Validators, FormControl, FormArray, FormGroup } from '@angular/forms';
|
|
44
45
|
import * as i1$1 from '@angular/router';
|
|
46
|
+
import { RouterModule } from '@angular/router';
|
|
45
47
|
import * as i2$1 from '@angular/cdk/scrolling';
|
|
46
48
|
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
|
|
47
49
|
import { Subject, BehaviorSubject, combineLatest, forkJoin, of } from 'rxjs';
|
|
@@ -3947,10 +3949,18 @@ class FormFieldComponent {
|
|
|
3947
3949
|
if (this.config.sectionConfig?.allowMulti) {
|
|
3948
3950
|
this.groupFormArray = this.fb.array([]);
|
|
3949
3951
|
this.formGroup.addControl(this.groupKey, this.groupFormArray);
|
|
3950
|
-
|
|
3951
|
-
|
|
3952
|
-
|
|
3953
|
-
|
|
3952
|
+
const initialData = this.controller.getFieldValue(this.groupKey);
|
|
3953
|
+
if (Array.isArray(initialData) && initialData.length > 0) {
|
|
3954
|
+
initialData.forEach((item) => {
|
|
3955
|
+
this.addGroupInstance(item);
|
|
3956
|
+
});
|
|
3957
|
+
}
|
|
3958
|
+
else {
|
|
3959
|
+
// We always start with at least one instance.
|
|
3960
|
+
// If multi-save is active, it starts in editing mode and is NOT
|
|
3961
|
+
// added to the main form value until the user actually saves it.
|
|
3962
|
+
this.addGroupInstance();
|
|
3963
|
+
}
|
|
3954
3964
|
}
|
|
3955
3965
|
else {
|
|
3956
3966
|
this.groupFormGroup = this.fb.group({});
|
|
@@ -3988,20 +3998,35 @@ class FormFieldComponent {
|
|
|
3988
3998
|
}
|
|
3989
3999
|
});
|
|
3990
4000
|
}
|
|
3991
|
-
addGroupInstance() {
|
|
4001
|
+
addGroupInstance(initialData) {
|
|
3992
4002
|
const fg = this.fb.group({});
|
|
3993
4003
|
const isMultiSave = !!this.config.sectionConfig?.multiSaveConfig?.active;
|
|
4004
|
+
// If initialData exists, treat the instance as already submitted/saved to form
|
|
4005
|
+
const isEditing = initialData ? false : isMultiSave;
|
|
4006
|
+
const isSaved = initialData ? true : !isMultiSave;
|
|
3994
4007
|
const instance = {
|
|
3995
4008
|
id: this._nextInstanceId++,
|
|
3996
4009
|
fg,
|
|
3997
|
-
isEditing
|
|
3998
|
-
isSaved
|
|
3999
|
-
isExpanded: false
|
|
4010
|
+
isEditing,
|
|
4011
|
+
isSaved,
|
|
4012
|
+
isExpanded: false,
|
|
4013
|
+
initialValue: initialData ? { ...initialData } : undefined
|
|
4000
4014
|
};
|
|
4001
|
-
if (
|
|
4015
|
+
if (isSaved) {
|
|
4002
4016
|
this.groupFormArray.push(fg);
|
|
4003
4017
|
}
|
|
4004
4018
|
this.instanceList = [...this.instanceList, instance];
|
|
4019
|
+
if (initialData) {
|
|
4020
|
+
setTimeout(() => {
|
|
4021
|
+
// Ensure that controls exist for all keys in initialData so we don't drop fields like ID!
|
|
4022
|
+
Object.keys(initialData).forEach(key => {
|
|
4023
|
+
if (!fg.contains(key)) {
|
|
4024
|
+
fg.addControl(key, new FormControl(initialData[key]));
|
|
4025
|
+
}
|
|
4026
|
+
});
|
|
4027
|
+
fg.patchValue(initialData);
|
|
4028
|
+
});
|
|
4029
|
+
}
|
|
4005
4030
|
}
|
|
4006
4031
|
saveGroupInstance(index) {
|
|
4007
4032
|
const instance = this.instanceList[index];
|
|
@@ -4718,11 +4743,11 @@ class FormSectionComponent {
|
|
|
4718
4743
|
return result;
|
|
4719
4744
|
}
|
|
4720
4745
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormSectionComponent, deps: [{ token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
4721
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FormSectionComponent, isStandalone: false, selector: "lib-form-section", inputs: { config: "config", controller: "controller", formGroup: "formGroup" }, ngImport: i0, template: "<div class=\"form-section-container\">\r\n <h3 class=\"section-label\" *ngIf=\"config.label && !config.allowMulti\">{{ config.label }}</h3>\r\n\r\n <!-- \u2550\u2550 Repeater (allowMulti) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <ng-container *ngIf=\"config.allowMulti\">\r\n <h3 class=\"section-label\">{{ config.label }}</h3>\r\n\r\n <div *ngFor=\"let instanceGroup of instanceGroups; let i = index\" class=\"section-instance\">\r\n <!-- Instance header (remove button) -->\r\n <div class=\"section-header\" *ngIf=\"instanceGroups.length > 1\">\r\n <span class=\"section-number\">{{ config.label }} #{{ i + 1 }}</span>\r\n <lib-button [variant]=\"'danger-outline'\" (click)=\"removeInstance(i)\">\r\n <mat-icon>delete_outline</mat-icon> Remove\r\n </lib-button>\r\n </div>\r\n\r\n <!-- Fields \u2013 each child rendered with the *instance* FormGroup -->\r\n <div class=\"section-fields sf-grid\">\r\n <ng-container *ngFor=\"let field of config.children\">\r\n <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instanceGroup\">\r\n </lib-form-field>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <lib-button [variant]=\"'primary'\" (click)=\"addInstance()\">\r\n <mat-icon>add</mat-icon> Add {{ config.label }}\r\n </lib-button>\r\n </ng-container>\r\n\r\n <!-- \u2550\u2550 Non-repeater (single instance) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <ng-container *ngIf=\"!config.allowMulti\">\r\n <div class=\"section-fields sf-grid\">\r\n <ng-container *ngFor=\"let field of config.children\">\r\n <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"flatFormGroup\">\r\n </lib-form-field>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n</div>", styles: [".form-section-container{margin-bottom:var(--cc-sf-section-gap, 20px)}.form-section-container .section-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-bottom:10px;border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)}.form-section-container .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.form-section-container .section-header .section-number{font-weight:600;font-size:var(--cc-sf-instance-num-size, .8125rem);color:var(--cc-sf-instance-num-color, #4B5563)}.form-section-container .section-header .btn-remove{padding:6px 12px;background:var(--cc-sf-btn-remove-bg, #FFF5F5);color:var(--cc-sf-btn-remove-color, #E53E3E);border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7);border-radius:var(--cc-sf-btn-remove-radius, 4px);cursor:pointer;font-size:12px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-header .btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.form-section-container .section-fields.sf-grid{
|
|
4746
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FormSectionComponent, isStandalone: false, selector: "lib-form-section", inputs: { config: "config", controller: "controller", formGroup: "formGroup" }, ngImport: i0, template: "<div class=\"form-section-container\">\r\n <h3 class=\"section-label\" *ngIf=\"config.label && !config.allowMulti\">{{ config.label }}</h3>\r\n\r\n <!-- \u2550\u2550 Repeater (allowMulti) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <ng-container *ngIf=\"config.allowMulti\">\r\n <h3 class=\"section-label\">{{ config.label }}</h3>\r\n\r\n <div *ngFor=\"let instanceGroup of instanceGroups; let i = index\" class=\"section-instance\">\r\n <!-- Instance header (remove button) -->\r\n <div class=\"section-header\" *ngIf=\"instanceGroups.length > 1\">\r\n <span class=\"section-number\">{{ config.label }} #{{ i + 1 }}</span>\r\n <lib-button [variant]=\"'danger-outline'\" (click)=\"removeInstance(i)\">\r\n <mat-icon>delete_outline</mat-icon> Remove\r\n </lib-button>\r\n </div>\r\n\r\n <!-- Fields \u2013 each child rendered with the *instance* FormGroup -->\r\n <div class=\"section-fields sf-grid\">\r\n <ng-container *ngFor=\"let field of config.children\">\r\n <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instanceGroup\">\r\n </lib-form-field>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <lib-button [variant]=\"'primary'\" (click)=\"addInstance()\">\r\n <mat-icon>add</mat-icon> Add {{ config.label }}\r\n </lib-button>\r\n </ng-container>\r\n\r\n <!-- \u2550\u2550 Non-repeater (single instance) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <ng-container *ngIf=\"!config.allowMulti\">\r\n <div class=\"section-fields sf-grid\">\r\n <ng-container *ngFor=\"let field of config.children\">\r\n <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"flatFormGroup\">\r\n </lib-form-field>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n</div>", styles: [".form-section-container{margin-bottom:var(--cc-sf-section-gap, 20px)}.form-section-container .section-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-bottom:10px;border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)}.form-section-container .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.form-section-container .section-header .section-number{font-weight:600;font-size:var(--cc-sf-instance-num-size, .8125rem);color:var(--cc-sf-instance-num-color, #4B5563)}.form-section-container .section-header .btn-remove{padding:6px 12px;background:var(--cc-sf-btn-remove-bg, #FFF5F5);color:var(--cc-sf-btn-remove-color, #E53E3E);border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7);border-radius:var(--cc-sf-btn-remove-radius, 4px);cursor:pointer;font-size:12px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-header .btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.form-section-container .section-fields.sf-grid{grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.form-section-container .section-fields.sf-grid{grid-template-columns:1fr}.form-section-container .section-fields.sf-grid .sf-col{grid-column:span 12!important}}.form-section-container .section-fields .section-instance{margin-bottom:12px;padding:var(--cc-sf-instance-padding, 16px);background:var(--cc-sf-instance-bg, #F9FAFB);border:var(--cc-sf-instance-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-instance-radius, 8px);transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-fields .section-instance:last-of-type{margin-bottom:0}.form-section-container .btn-add-section{display:flex;align-items:center;justify-content:center;width:100%;padding:10px 20px;background:var(--cc-sf-btn-add-bg, transparent);color:var(--cc-sf-btn-add-color, #3B82F6);border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);border-radius:var(--cc-sf-btn-add-radius, 6px);cursor:pointer;font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);margin-top:16px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}\n"], dependencies: [{ 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$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: FormFieldComponent, selector: "lib-form-field", inputs: ["config", "controller", "formGroup", "allowMulti"] }] });
|
|
4722
4747
|
}
|
|
4723
4748
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormSectionComponent, decorators: [{
|
|
4724
4749
|
type: Component,
|
|
4725
|
-
args: [{ selector: 'lib-form-section', standalone: false, template: "<div class=\"form-section-container\">\r\n <h3 class=\"section-label\" *ngIf=\"config.label && !config.allowMulti\">{{ config.label }}</h3>\r\n\r\n <!-- \u2550\u2550 Repeater (allowMulti) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <ng-container *ngIf=\"config.allowMulti\">\r\n <h3 class=\"section-label\">{{ config.label }}</h3>\r\n\r\n <div *ngFor=\"let instanceGroup of instanceGroups; let i = index\" class=\"section-instance\">\r\n <!-- Instance header (remove button) -->\r\n <div class=\"section-header\" *ngIf=\"instanceGroups.length > 1\">\r\n <span class=\"section-number\">{{ config.label }} #{{ i + 1 }}</span>\r\n <lib-button [variant]=\"'danger-outline'\" (click)=\"removeInstance(i)\">\r\n <mat-icon>delete_outline</mat-icon> Remove\r\n </lib-button>\r\n </div>\r\n\r\n <!-- Fields \u2013 each child rendered with the *instance* FormGroup -->\r\n <div class=\"section-fields sf-grid\">\r\n <ng-container *ngFor=\"let field of config.children\">\r\n <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instanceGroup\">\r\n </lib-form-field>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <lib-button [variant]=\"'primary'\" (click)=\"addInstance()\">\r\n <mat-icon>add</mat-icon> Add {{ config.label }}\r\n </lib-button>\r\n </ng-container>\r\n\r\n <!-- \u2550\u2550 Non-repeater (single instance) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <ng-container *ngIf=\"!config.allowMulti\">\r\n <div class=\"section-fields sf-grid\">\r\n <ng-container *ngFor=\"let field of config.children\">\r\n <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"flatFormGroup\">\r\n </lib-form-field>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n</div>", styles: [".form-section-container{margin-bottom:var(--cc-sf-section-gap, 20px)}.form-section-container .section-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-bottom:10px;border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)}.form-section-container .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.form-section-container .section-header .section-number{font-weight:600;font-size:var(--cc-sf-instance-num-size, .8125rem);color:var(--cc-sf-instance-num-color, #4B5563)}.form-section-container .section-header .btn-remove{padding:6px 12px;background:var(--cc-sf-btn-remove-bg, #FFF5F5);color:var(--cc-sf-btn-remove-color, #E53E3E);border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7);border-radius:var(--cc-sf-btn-remove-radius, 4px);cursor:pointer;font-size:12px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-header .btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.form-section-container .section-fields.sf-grid{
|
|
4750
|
+
args: [{ selector: 'lib-form-section', standalone: false, template: "<div class=\"form-section-container\">\r\n <h3 class=\"section-label\" *ngIf=\"config.label && !config.allowMulti\">{{ config.label }}</h3>\r\n\r\n <!-- \u2550\u2550 Repeater (allowMulti) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <ng-container *ngIf=\"config.allowMulti\">\r\n <h3 class=\"section-label\">{{ config.label }}</h3>\r\n\r\n <div *ngFor=\"let instanceGroup of instanceGroups; let i = index\" class=\"section-instance\">\r\n <!-- Instance header (remove button) -->\r\n <div class=\"section-header\" *ngIf=\"instanceGroups.length > 1\">\r\n <span class=\"section-number\">{{ config.label }} #{{ i + 1 }}</span>\r\n <lib-button [variant]=\"'danger-outline'\" (click)=\"removeInstance(i)\">\r\n <mat-icon>delete_outline</mat-icon> Remove\r\n </lib-button>\r\n </div>\r\n\r\n <!-- Fields \u2013 each child rendered with the *instance* FormGroup -->\r\n <div class=\"section-fields sf-grid\">\r\n <ng-container *ngFor=\"let field of config.children\">\r\n <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instanceGroup\">\r\n </lib-form-field>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <lib-button [variant]=\"'primary'\" (click)=\"addInstance()\">\r\n <mat-icon>add</mat-icon> Add {{ config.label }}\r\n </lib-button>\r\n </ng-container>\r\n\r\n <!-- \u2550\u2550 Non-repeater (single instance) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <ng-container *ngIf=\"!config.allowMulti\">\r\n <div class=\"section-fields sf-grid\">\r\n <ng-container *ngFor=\"let field of config.children\">\r\n <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"flatFormGroup\">\r\n </lib-form-field>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n</div>", styles: [".form-section-container{margin-bottom:var(--cc-sf-section-gap, 20px)}.form-section-container .section-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-bottom:10px;border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)}.form-section-container .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.form-section-container .section-header .section-number{font-weight:600;font-size:var(--cc-sf-instance-num-size, .8125rem);color:var(--cc-sf-instance-num-color, #4B5563)}.form-section-container .section-header .btn-remove{padding:6px 12px;background:var(--cc-sf-btn-remove-bg, #FFF5F5);color:var(--cc-sf-btn-remove-color, #E53E3E);border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7);border-radius:var(--cc-sf-btn-remove-radius, 4px);cursor:pointer;font-size:12px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-header .btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.form-section-container .section-fields.sf-grid{grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.form-section-container .section-fields.sf-grid{grid-template-columns:1fr}.form-section-container .section-fields.sf-grid .sf-col{grid-column:span 12!important}}.form-section-container .section-fields .section-instance{margin-bottom:12px;padding:var(--cc-sf-instance-padding, 16px);background:var(--cc-sf-instance-bg, #F9FAFB);border:var(--cc-sf-instance-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-instance-radius, 8px);transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-fields .section-instance:last-of-type{margin-bottom:0}.form-section-container .btn-add-section{display:flex;align-items:center;justify-content:center;width:100%;padding:10px 20px;background:var(--cc-sf-btn-add-bg, transparent);color:var(--cc-sf-btn-add-color, #3B82F6);border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);border-radius:var(--cc-sf-btn-add-radius, 6px);cursor:pointer;font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);margin-top:16px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}\n"] }]
|
|
4726
4751
|
}], ctorParameters: () => [{ type: i1$2.FormBuilder }], propDecorators: { config: [{
|
|
4727
4752
|
type: Input
|
|
4728
4753
|
}], controller: [{
|
|
@@ -5155,6 +5180,169 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
5155
5180
|
}]
|
|
5156
5181
|
}] });
|
|
5157
5182
|
|
|
5183
|
+
const DEFAULT_ITEMS_PER_PAGE = 10;
|
|
5184
|
+
const DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50];
|
|
5185
|
+
const PAGINATION_THEME_DEFAULT = 'theme-1';
|
|
5186
|
+
const PAGINATION_THEME_DARK = 'theme-2';
|
|
5187
|
+
// Nav
|
|
5188
|
+
const NAV_VARIANT_DEFAULT = 'filled';
|
|
5189
|
+
const NAV_ORIENTATION_DEFAULT = 'horizontal';
|
|
5190
|
+
// Side Nav
|
|
5191
|
+
const DEFAULT_SIDE_NAV_TOOLTIP_POSITION = 'right';
|
|
5192
|
+
|
|
5193
|
+
class SideNavComponent {
|
|
5194
|
+
sections = [];
|
|
5195
|
+
userRoles; // If provided, filters items automatically based on roles
|
|
5196
|
+
activeId;
|
|
5197
|
+
styleConfig;
|
|
5198
|
+
/** Control whether the nav is collapsed externally (two-way bindable) */
|
|
5199
|
+
collapsed = false;
|
|
5200
|
+
/** Width of the nav when expanded. Overrides the CSS variable default. */
|
|
5201
|
+
width;
|
|
5202
|
+
/** Width of the nav when collapsed (icons only). Overrides the CSS variable default. */
|
|
5203
|
+
collapsedWidth;
|
|
5204
|
+
/** Whether to show the collapse toggle button */
|
|
5205
|
+
showCollapseToggle = true;
|
|
5206
|
+
/** Whether to hide icons when the side nav is expanded */
|
|
5207
|
+
hideIconsWhenExpanded = false;
|
|
5208
|
+
/** Whether to show tooltips on nav items */
|
|
5209
|
+
showTooltips = true;
|
|
5210
|
+
/** Position of the tooltip */
|
|
5211
|
+
tooltipPosition = DEFAULT_SIDE_NAV_TOOLTIP_POSITION;
|
|
5212
|
+
itemClicked = new EventEmitter();
|
|
5213
|
+
/** Emits whenever the collapsed state changes (supports two-way binding via [(collapsed)]) */
|
|
5214
|
+
collapsedChange = new EventEmitter();
|
|
5215
|
+
/** Applies collapsed class to :host for the width CSS transition */
|
|
5216
|
+
get isHostCollapsed() {
|
|
5217
|
+
return this.collapsed;
|
|
5218
|
+
}
|
|
5219
|
+
filteredSections = [];
|
|
5220
|
+
ngOnChanges(changes) {
|
|
5221
|
+
if (changes['sections'] || changes['userRoles']) {
|
|
5222
|
+
this.filterSections();
|
|
5223
|
+
}
|
|
5224
|
+
}
|
|
5225
|
+
filterSections() {
|
|
5226
|
+
if (!this.sections) {
|
|
5227
|
+
this.filteredSections = [];
|
|
5228
|
+
return;
|
|
5229
|
+
}
|
|
5230
|
+
if (!this.userRoles || this.userRoles.length === 0) {
|
|
5231
|
+
this.filteredSections = structuredClone(this.sections);
|
|
5232
|
+
return;
|
|
5233
|
+
}
|
|
5234
|
+
const clonedSections = structuredClone(this.sections);
|
|
5235
|
+
this.filteredSections = clonedSections.map(section => {
|
|
5236
|
+
section.items = section.items.filter(item => {
|
|
5237
|
+
if (!item.roles || item.roles.length === 0)
|
|
5238
|
+
return true;
|
|
5239
|
+
return item.roles.some(role => this.userRoles?.includes(role));
|
|
5240
|
+
});
|
|
5241
|
+
return section;
|
|
5242
|
+
}).filter(section => section.items.length > 0);
|
|
5243
|
+
}
|
|
5244
|
+
onItemClick(item, event) {
|
|
5245
|
+
if (item.disabled) {
|
|
5246
|
+
event.preventDefault();
|
|
5247
|
+
return;
|
|
5248
|
+
}
|
|
5249
|
+
this.activeId = item.id;
|
|
5250
|
+
this.itemClicked.emit(item);
|
|
5251
|
+
}
|
|
5252
|
+
toggleCollapse() {
|
|
5253
|
+
this.collapsed = !this.collapsed;
|
|
5254
|
+
this.collapsedChange.emit(this.collapsed);
|
|
5255
|
+
}
|
|
5256
|
+
get customStyles() {
|
|
5257
|
+
const styles = {};
|
|
5258
|
+
// Size overrides from direct inputs (take priority over styleConfig)
|
|
5259
|
+
if (this.width)
|
|
5260
|
+
styles['--cc-side-nav-width'] = this.width;
|
|
5261
|
+
if (this.collapsedWidth)
|
|
5262
|
+
styles['--cc-side-nav-collapsed-width'] = this.collapsedWidth;
|
|
5263
|
+
if (!this.styleConfig)
|
|
5264
|
+
return styles;
|
|
5265
|
+
if (this.styleConfig.bg)
|
|
5266
|
+
styles['--cc-side-nav-bg'] = this.styleConfig.bg;
|
|
5267
|
+
if (this.styleConfig.width)
|
|
5268
|
+
styles['--cc-side-nav-width'] = this.styleConfig.width;
|
|
5269
|
+
if (this.styleConfig.collapsedWidth)
|
|
5270
|
+
styles['--cc-side-nav-collapsed-width'] = this.styleConfig.collapsedWidth;
|
|
5271
|
+
if (this.styleConfig.fontFamily)
|
|
5272
|
+
styles['--cc-side-nav-font-family'] = this.styleConfig.fontFamily;
|
|
5273
|
+
if (this.styleConfig.headingColor)
|
|
5274
|
+
styles['--cc-side-nav-heading-color'] = this.styleConfig.headingColor;
|
|
5275
|
+
if (this.styleConfig.itemColor)
|
|
5276
|
+
styles['--cc-side-nav-item-color'] = this.styleConfig.itemColor;
|
|
5277
|
+
if (this.styleConfig.itemHoverBg)
|
|
5278
|
+
styles['--cc-side-nav-item-hover-bg'] = this.styleConfig.itemHoverBg;
|
|
5279
|
+
if (this.styleConfig.activeBg)
|
|
5280
|
+
styles['--cc-side-nav-active-bg'] = this.styleConfig.activeBg;
|
|
5281
|
+
if (this.styleConfig.activeColor)
|
|
5282
|
+
styles['--cc-side-nav-active-color'] = this.styleConfig.activeColor;
|
|
5283
|
+
if (this.styleConfig.activeHoverBg)
|
|
5284
|
+
styles['--cc-side-nav-active-hover-bg'] = this.styleConfig.activeHoverBg;
|
|
5285
|
+
return styles;
|
|
5286
|
+
}
|
|
5287
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5288
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SideNavComponent, isStandalone: false, selector: "lib-side-nav", inputs: { sections: "sections", userRoles: "userRoles", activeId: "activeId", styleConfig: "styleConfig", collapsed: "collapsed", width: "width", collapsedWidth: "collapsedWidth", showCollapseToggle: "showCollapseToggle", hideIconsWhenExpanded: "hideIconsWhenExpanded", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition" }, outputs: { itemClicked: "itemClicked", collapsedChange: "collapsedChange" }, host: { properties: { "class.cc-side-nav-host-collapsed": "this.isHostCollapsed" } }, usesOnChanges: true, ngImport: i0, template: "<nav class=\"cc-side-nav\" [class.collapsed]=\"collapsed\" role=\"navigation\" [ngStyle]=\"customStyles\">\r\n\r\n <!-- Fallback standalone toggle if no sections exist -->\r\n <div class=\"cc-side-nav-toggle-wrap standalone\" *ngIf=\"filteredSections.length === 0 && showCollapseToggle\">\r\n <button class=\"cc-side-nav-toggle\" (click)=\"toggleCollapse()\" type=\"button\"\r\n [attr.aria-label]=\"collapsed ? 'Expand navigation' : 'Collapse navigation'\">\r\n <span class=\"material-icons cc-side-nav-toggle-icon\">\r\n {{ collapsed ? 'menu_open' : 'menu' }}\r\n </span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"cc-side-nav-section\" *ngFor=\"let section of filteredSections; let i = index\">\r\n\r\n <div class=\"cc-side-nav-heading-row\" *ngIf=\"section.heading || (i === 0 && showCollapseToggle)\">\r\n <h3 class=\"cc-side-nav-heading\" *ngIf=\"section.heading && !collapsed\">\r\n {{ section.heading }}\r\n </h3>\r\n\r\n <div class=\"cc-side-nav-toggle-wrap\" *ngIf=\"i === 0 && showCollapseToggle\"\r\n [class.no-heading]=\"!section.heading || collapsed\">\r\n <button class=\"cc-side-nav-toggle\" (click)=\"toggleCollapse()\" type=\"button\"\r\n [attr.aria-label]=\"collapsed ? 'Expand navigation' : 'Collapse navigation'\">\r\n <span class=\"material-icons cc-side-nav-toggle-icon\">\r\n {{ collapsed ? 'menu_open' : 'menu' }}\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <ul class=\"cc-side-nav-list\">\r\n <li *ngFor=\"let item of section.items\" class=\"cc-side-nav-list-item\">\r\n <a (click)=\"onItemClick(item, $event)\" class=\"cc-side-nav-link\" [class.active]=\"item.id === activeId\"\r\n [class.disabled]=\"item.disabled\" [matTooltip]=\"item.tooltip || item.label\"\r\n [matTooltipDisabled]=\"!showTooltips\" [matTooltipPosition]=\"tooltipPosition\"\r\n [matTooltipClass]=\"'cc-side-nav-tooltip'\" [attr.aria-current]=\"(item.id === activeId) ? 'page' : null\"\r\n [attr.aria-disabled]=\"item.disabled ? true : null\">\r\n <span *ngIf=\"item.icon && (collapsed || !hideIconsWhenExpanded)\" class=\"cc-side-nav-icon\">\r\n\r\n <span *ngIf=\"!item.icon.includes('fa') && !item.icon.includes('bi')\" class=\"material-icons\">\r\n {{ item.icon }}\r\n </span>\r\n\r\n <i *ngIf=\"item.icon.includes('fa') || item.icon.includes('bi')\" [class]=\"item.icon\"></i>\r\n\r\n </span>\r\n <span class=\"cc-side-nav-label\" *ngIf=\"!collapsed\">{{ item.label }}</span>\r\n <span class=\"cc-side-nav-arrow material-icons\"\r\n *ngIf=\"!collapsed && (item.id === activeId) && item.showArrow !== false\">chevron_right</span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n </div>\r\n\r\n</nav>", styles: [":host{display:block;height:100%;overflow-y:auto;overflow-x:hidden;width:var(--cc-side-nav-width, 220px);transition:width .25s ease;--cc-side-nav-bg: rgba(249, 200, 14, .0509803922);--cc-side-nav-width: 220px;--cc-side-nav-collapsed-width: 56px;--cc-side-nav-gap-sections: 24px;--cc-side-nav-padding: 16px;--cc-side-nav-font-family: Poppins, sans-serif;--cc-side-nav-heading-font-weight: 500;--cc-side-nav-heading-font-size: 16px;--cc-side-nav-heading-color: #3C4043;--cc-side-nav-item-gap: 4px;--cc-side-nav-item-padding: 12px 16px;--cc-side-nav-item-border-radius: 8px;--cc-side-nav-item-font-weight: 400;--cc-side-nav-item-font-size: 14px;--cc-side-nav-item-color: #5F6368;--cc-side-nav-item-hover-bg: rgba(230, 62, 48, .05);--cc-side-nav-item-hover-color: #3C4043;--cc-side-nav-active-bg: #E63E30;--cc-side-nav-active-color: #FFFFFF;--cc-side-nav-active-font-weight: 500;--cc-side-nav-active-hover-bg: #D4382B;--cc-side-nav-disabled-opacity: .5;--cc-side-nav-tooltip-bg: rgba(0, 0, 0, .8);--cc-side-nav-tooltip-color: #FFFFFF;--cc-side-nav-tooltip-padding: 8px 12px;--cc-side-nav-tooltip-border-radius: 6px;--cc-side-nav-tooltip-font-size: 12px}:host.cc-side-nav-host-collapsed{width:var(--cc-side-nav-collapsed-width, 56px)}:host .cc-side-nav-heading-row{display:flex;align-items:center;justify-content:space-between;min-height:28px}:host .cc-side-nav-toggle{background:transparent;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--cc-side-nav-item-color, #5F6368);transition:color .2s ease,background .2s ease;border-radius:6px}:host .cc-side-nav-toggle:hover{background:#0000000d}:host .cc-side-nav-toggle .material-icons{font-size:20px}:host::-webkit-scrollbar{width:3px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:#00000026;border-radius:2px}:host::-webkit-scrollbar-thumb:hover{background:#0000004d}.cc-side-nav{display:flex;flex-direction:column;gap:var(--cc-side-nav-gap-sections, 24px);padding:var(--cc-side-nav-padding, 16px);width:var(--cc-side-nav-width, 220px);min-width:var(--cc-side-nav-width, 220px);box-sizing:border-box;background-color:var(--cc-side-nav-bg, rgba(249, 200, 14, .0509803922));min-height:100%;transition:width .25s ease,min-width .25s ease,padding .25s ease;overflow:hidden}.cc-side-nav.collapsed{width:var(--cc-side-nav-collapsed-width, 56px);min-width:var(--cc-side-nav-collapsed-width, 56px);padding:var(--cc-side-nav-padding, 16px) 8px}.cc-side-nav.collapsed .cc-side-nav-link{justify-content:center;gap:0;padding:10px}.cc-side-nav.collapsed .cc-side-nav-icon{font-size:20px}.cc-side-nav-section{display:flex;flex-direction:column;gap:12px}.cc-side-nav-heading{margin:0;padding:0 16px;font-family:var(--cc-side-nav-font-family, \"Poppins\", sans-serif);font-weight:var(--cc-side-nav-heading-font-weight, 500);font-style:normal;font-size:var(--cc-side-nav-heading-font-size, 16px);text-transform:uppercase;color:var(--cc-side-nav-heading-color, #3C4043);flex:1}.cc-side-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--cc-side-nav-item-gap, 4px)}.cc-side-nav-list-item{margin:0;padding:0}.cc-side-nav-link{display:flex;align-items:center;gap:12px;padding:var(--cc-side-nav-item-padding, 12px 16px);text-decoration:none;cursor:pointer;border-radius:var(--cc-side-nav-item-border-radius, 8px);transition:background-color .2s ease,opacity .2s ease;font-family:var(--cc-side-nav-font-family, \"Poppins\", sans-serif);font-weight:var(--cc-side-nav-item-font-weight, 400);font-style:normal;font-size:var(--cc-side-nav-item-font-size, 14px);color:var(--cc-side-nav-item-color, #5F6368)}.cc-side-nav-link:hover:not(.disabled){background-color:var(--cc-side-nav-item-hover-bg, rgba(230, 62, 48, .05));color:var(--cc-side-nav-item-hover-color, #3C4043)}.cc-side-nav-link.active{background:var(--cc-side-nav-active-bg, #E63E30);opacity:1;border-radius:var(--cc-side-nav-item-border-radius, 8px);font-weight:var(--cc-side-nav-active-font-weight, 500);color:var(--cc-side-nav-active-color, #FFFFFF)}.cc-side-nav-link.active:hover{background-color:var(--cc-side-nav-active-hover-bg, #D4382B)}.cc-side-nav-link.disabled{cursor:not-allowed;opacity:var(--cc-side-nav-disabled-opacity, .5)}.cc-side-nav-icon{display:flex;align-items:center;justify-content:center;font-size:16px}.cc-side-nav-header{display:flex;justify-content:flex-end;padding:8px 16px}.cc-side-nav-label{flex:1;white-space:nowrap;overflow:hidden}.collapsed .cc-side-nav-label{display:none}.cc-side-nav-arrow{margin-left:auto;font-size:18px;opacity:.7}.cc-side-nav-link.active .cc-side-nav-arrow{color:var(--cc-side-nav-active-color, #FFFFFF);opacity:1}::ng-deep .cc-side-nav-tooltip{background-color:var(--cc-side-nav-tooltip-bg, rgba(0, 0, 0, .8))!important;color:var(--cc-side-nav-tooltip-color, #FFFFFF)!important;font-family:var(--cc-side-nav-font-family, \"Poppins\", sans-serif)!important;font-size:var(--cc-side-nav-tooltip-font-size, 12px)!important;padding:var(--cc-side-nav-tooltip-padding, 8px 12px)!important;border-radius:var(--cc-side-nav-tooltip-border-radius, 6px)!important;box-shadow:0 4px 12px #00000026;margin-left:8px!important}.cc-side-nav-toggle-wrap{display:flex;align-items:center;justify-content:flex-end}.cc-side-nav-toggle-wrap.standalone{padding-bottom:8px}.cc-side-nav-toggle-wrap.no-heading{flex:1}.collapsed .cc-side-nav-toggle-wrap{justify-content:center;width:100%}.cc-side-nav-toggle{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background-color:transparent;cursor:pointer;color:var(--cc-side-nav-item-color, #5F6368);transition:background-color .2s ease,color .2s ease}.cc-side-nav-toggle:hover{background-color:var(--cc-side-nav-item-hover-bg, rgba(0, 0, 0, .06));color:var(--cc-side-nav-heading-color, #3C4043)}.cc-side-nav-toggle-icon{font-size:18px;line-height:1;display:block;transition:transform .25s ease}\n"], dependencies: [{ 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$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
|
|
5289
|
+
}
|
|
5290
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideNavComponent, decorators: [{
|
|
5291
|
+
type: Component,
|
|
5292
|
+
args: [{ selector: 'lib-side-nav', standalone: false, template: "<nav class=\"cc-side-nav\" [class.collapsed]=\"collapsed\" role=\"navigation\" [ngStyle]=\"customStyles\">\r\n\r\n <!-- Fallback standalone toggle if no sections exist -->\r\n <div class=\"cc-side-nav-toggle-wrap standalone\" *ngIf=\"filteredSections.length === 0 && showCollapseToggle\">\r\n <button class=\"cc-side-nav-toggle\" (click)=\"toggleCollapse()\" type=\"button\"\r\n [attr.aria-label]=\"collapsed ? 'Expand navigation' : 'Collapse navigation'\">\r\n <span class=\"material-icons cc-side-nav-toggle-icon\">\r\n {{ collapsed ? 'menu_open' : 'menu' }}\r\n </span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"cc-side-nav-section\" *ngFor=\"let section of filteredSections; let i = index\">\r\n\r\n <div class=\"cc-side-nav-heading-row\" *ngIf=\"section.heading || (i === 0 && showCollapseToggle)\">\r\n <h3 class=\"cc-side-nav-heading\" *ngIf=\"section.heading && !collapsed\">\r\n {{ section.heading }}\r\n </h3>\r\n\r\n <div class=\"cc-side-nav-toggle-wrap\" *ngIf=\"i === 0 && showCollapseToggle\"\r\n [class.no-heading]=\"!section.heading || collapsed\">\r\n <button class=\"cc-side-nav-toggle\" (click)=\"toggleCollapse()\" type=\"button\"\r\n [attr.aria-label]=\"collapsed ? 'Expand navigation' : 'Collapse navigation'\">\r\n <span class=\"material-icons cc-side-nav-toggle-icon\">\r\n {{ collapsed ? 'menu_open' : 'menu' }}\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <ul class=\"cc-side-nav-list\">\r\n <li *ngFor=\"let item of section.items\" class=\"cc-side-nav-list-item\">\r\n <a (click)=\"onItemClick(item, $event)\" class=\"cc-side-nav-link\" [class.active]=\"item.id === activeId\"\r\n [class.disabled]=\"item.disabled\" [matTooltip]=\"item.tooltip || item.label\"\r\n [matTooltipDisabled]=\"!showTooltips\" [matTooltipPosition]=\"tooltipPosition\"\r\n [matTooltipClass]=\"'cc-side-nav-tooltip'\" [attr.aria-current]=\"(item.id === activeId) ? 'page' : null\"\r\n [attr.aria-disabled]=\"item.disabled ? true : null\">\r\n <span *ngIf=\"item.icon && (collapsed || !hideIconsWhenExpanded)\" class=\"cc-side-nav-icon\">\r\n\r\n <span *ngIf=\"!item.icon.includes('fa') && !item.icon.includes('bi')\" class=\"material-icons\">\r\n {{ item.icon }}\r\n </span>\r\n\r\n <i *ngIf=\"item.icon.includes('fa') || item.icon.includes('bi')\" [class]=\"item.icon\"></i>\r\n\r\n </span>\r\n <span class=\"cc-side-nav-label\" *ngIf=\"!collapsed\">{{ item.label }}</span>\r\n <span class=\"cc-side-nav-arrow material-icons\"\r\n *ngIf=\"!collapsed && (item.id === activeId) && item.showArrow !== false\">chevron_right</span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n </div>\r\n\r\n</nav>", styles: [":host{display:block;height:100%;overflow-y:auto;overflow-x:hidden;width:var(--cc-side-nav-width, 220px);transition:width .25s ease;--cc-side-nav-bg: rgba(249, 200, 14, .0509803922);--cc-side-nav-width: 220px;--cc-side-nav-collapsed-width: 56px;--cc-side-nav-gap-sections: 24px;--cc-side-nav-padding: 16px;--cc-side-nav-font-family: Poppins, sans-serif;--cc-side-nav-heading-font-weight: 500;--cc-side-nav-heading-font-size: 16px;--cc-side-nav-heading-color: #3C4043;--cc-side-nav-item-gap: 4px;--cc-side-nav-item-padding: 12px 16px;--cc-side-nav-item-border-radius: 8px;--cc-side-nav-item-font-weight: 400;--cc-side-nav-item-font-size: 14px;--cc-side-nav-item-color: #5F6368;--cc-side-nav-item-hover-bg: rgba(230, 62, 48, .05);--cc-side-nav-item-hover-color: #3C4043;--cc-side-nav-active-bg: #E63E30;--cc-side-nav-active-color: #FFFFFF;--cc-side-nav-active-font-weight: 500;--cc-side-nav-active-hover-bg: #D4382B;--cc-side-nav-disabled-opacity: .5;--cc-side-nav-tooltip-bg: rgba(0, 0, 0, .8);--cc-side-nav-tooltip-color: #FFFFFF;--cc-side-nav-tooltip-padding: 8px 12px;--cc-side-nav-tooltip-border-radius: 6px;--cc-side-nav-tooltip-font-size: 12px}:host.cc-side-nav-host-collapsed{width:var(--cc-side-nav-collapsed-width, 56px)}:host .cc-side-nav-heading-row{display:flex;align-items:center;justify-content:space-between;min-height:28px}:host .cc-side-nav-toggle{background:transparent;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--cc-side-nav-item-color, #5F6368);transition:color .2s ease,background .2s ease;border-radius:6px}:host .cc-side-nav-toggle:hover{background:#0000000d}:host .cc-side-nav-toggle .material-icons{font-size:20px}:host::-webkit-scrollbar{width:3px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:#00000026;border-radius:2px}:host::-webkit-scrollbar-thumb:hover{background:#0000004d}.cc-side-nav{display:flex;flex-direction:column;gap:var(--cc-side-nav-gap-sections, 24px);padding:var(--cc-side-nav-padding, 16px);width:var(--cc-side-nav-width, 220px);min-width:var(--cc-side-nav-width, 220px);box-sizing:border-box;background-color:var(--cc-side-nav-bg, rgba(249, 200, 14, .0509803922));min-height:100%;transition:width .25s ease,min-width .25s ease,padding .25s ease;overflow:hidden}.cc-side-nav.collapsed{width:var(--cc-side-nav-collapsed-width, 56px);min-width:var(--cc-side-nav-collapsed-width, 56px);padding:var(--cc-side-nav-padding, 16px) 8px}.cc-side-nav.collapsed .cc-side-nav-link{justify-content:center;gap:0;padding:10px}.cc-side-nav.collapsed .cc-side-nav-icon{font-size:20px}.cc-side-nav-section{display:flex;flex-direction:column;gap:12px}.cc-side-nav-heading{margin:0;padding:0 16px;font-family:var(--cc-side-nav-font-family, \"Poppins\", sans-serif);font-weight:var(--cc-side-nav-heading-font-weight, 500);font-style:normal;font-size:var(--cc-side-nav-heading-font-size, 16px);text-transform:uppercase;color:var(--cc-side-nav-heading-color, #3C4043);flex:1}.cc-side-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--cc-side-nav-item-gap, 4px)}.cc-side-nav-list-item{margin:0;padding:0}.cc-side-nav-link{display:flex;align-items:center;gap:12px;padding:var(--cc-side-nav-item-padding, 12px 16px);text-decoration:none;cursor:pointer;border-radius:var(--cc-side-nav-item-border-radius, 8px);transition:background-color .2s ease,opacity .2s ease;font-family:var(--cc-side-nav-font-family, \"Poppins\", sans-serif);font-weight:var(--cc-side-nav-item-font-weight, 400);font-style:normal;font-size:var(--cc-side-nav-item-font-size, 14px);color:var(--cc-side-nav-item-color, #5F6368)}.cc-side-nav-link:hover:not(.disabled){background-color:var(--cc-side-nav-item-hover-bg, rgba(230, 62, 48, .05));color:var(--cc-side-nav-item-hover-color, #3C4043)}.cc-side-nav-link.active{background:var(--cc-side-nav-active-bg, #E63E30);opacity:1;border-radius:var(--cc-side-nav-item-border-radius, 8px);font-weight:var(--cc-side-nav-active-font-weight, 500);color:var(--cc-side-nav-active-color, #FFFFFF)}.cc-side-nav-link.active:hover{background-color:var(--cc-side-nav-active-hover-bg, #D4382B)}.cc-side-nav-link.disabled{cursor:not-allowed;opacity:var(--cc-side-nav-disabled-opacity, .5)}.cc-side-nav-icon{display:flex;align-items:center;justify-content:center;font-size:16px}.cc-side-nav-header{display:flex;justify-content:flex-end;padding:8px 16px}.cc-side-nav-label{flex:1;white-space:nowrap;overflow:hidden}.collapsed .cc-side-nav-label{display:none}.cc-side-nav-arrow{margin-left:auto;font-size:18px;opacity:.7}.cc-side-nav-link.active .cc-side-nav-arrow{color:var(--cc-side-nav-active-color, #FFFFFF);opacity:1}::ng-deep .cc-side-nav-tooltip{background-color:var(--cc-side-nav-tooltip-bg, rgba(0, 0, 0, .8))!important;color:var(--cc-side-nav-tooltip-color, #FFFFFF)!important;font-family:var(--cc-side-nav-font-family, \"Poppins\", sans-serif)!important;font-size:var(--cc-side-nav-tooltip-font-size, 12px)!important;padding:var(--cc-side-nav-tooltip-padding, 8px 12px)!important;border-radius:var(--cc-side-nav-tooltip-border-radius, 6px)!important;box-shadow:0 4px 12px #00000026;margin-left:8px!important}.cc-side-nav-toggle-wrap{display:flex;align-items:center;justify-content:flex-end}.cc-side-nav-toggle-wrap.standalone{padding-bottom:8px}.cc-side-nav-toggle-wrap.no-heading{flex:1}.collapsed .cc-side-nav-toggle-wrap{justify-content:center;width:100%}.cc-side-nav-toggle{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background-color:transparent;cursor:pointer;color:var(--cc-side-nav-item-color, #5F6368);transition:background-color .2s ease,color .2s ease}.cc-side-nav-toggle:hover{background-color:var(--cc-side-nav-item-hover-bg, rgba(0, 0, 0, .06));color:var(--cc-side-nav-heading-color, #3C4043)}.cc-side-nav-toggle-icon{font-size:18px;line-height:1;display:block;transition:transform .25s ease}\n"] }]
|
|
5293
|
+
}], propDecorators: { sections: [{
|
|
5294
|
+
type: Input
|
|
5295
|
+
}], userRoles: [{
|
|
5296
|
+
type: Input
|
|
5297
|
+
}], activeId: [{
|
|
5298
|
+
type: Input
|
|
5299
|
+
}], styleConfig: [{
|
|
5300
|
+
type: Input
|
|
5301
|
+
}], collapsed: [{
|
|
5302
|
+
type: Input
|
|
5303
|
+
}], width: [{
|
|
5304
|
+
type: Input
|
|
5305
|
+
}], collapsedWidth: [{
|
|
5306
|
+
type: Input
|
|
5307
|
+
}], showCollapseToggle: [{
|
|
5308
|
+
type: Input
|
|
5309
|
+
}], hideIconsWhenExpanded: [{
|
|
5310
|
+
type: Input
|
|
5311
|
+
}], showTooltips: [{
|
|
5312
|
+
type: Input
|
|
5313
|
+
}], tooltipPosition: [{
|
|
5314
|
+
type: Input
|
|
5315
|
+
}], itemClicked: [{
|
|
5316
|
+
type: Output
|
|
5317
|
+
}], collapsedChange: [{
|
|
5318
|
+
type: Output
|
|
5319
|
+
}], isHostCollapsed: [{
|
|
5320
|
+
type: HostBinding,
|
|
5321
|
+
args: ['class.cc-side-nav-host-collapsed']
|
|
5322
|
+
}] } });
|
|
5323
|
+
|
|
5324
|
+
class SideNavModule {
|
|
5325
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
5326
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SideNavModule, declarations: [SideNavComponent], imports: [CommonModule,
|
|
5327
|
+
RouterModule,
|
|
5328
|
+
MaterialModule], exports: [SideNavComponent] });
|
|
5329
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideNavModule, imports: [CommonModule,
|
|
5330
|
+
RouterModule,
|
|
5331
|
+
MaterialModule] });
|
|
5332
|
+
}
|
|
5333
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SideNavModule, decorators: [{
|
|
5334
|
+
type: NgModule,
|
|
5335
|
+
args: [{
|
|
5336
|
+
declarations: [SideNavComponent],
|
|
5337
|
+
imports: [
|
|
5338
|
+
CommonModule,
|
|
5339
|
+
RouterModule,
|
|
5340
|
+
MaterialModule
|
|
5341
|
+
],
|
|
5342
|
+
exports: [SideNavComponent]
|
|
5343
|
+
}]
|
|
5344
|
+
}] });
|
|
5345
|
+
|
|
5158
5346
|
class SharedUiModule {
|
|
5159
5347
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SharedUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
5160
5348
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SharedUiModule, imports: [CommonModule,
|
|
@@ -5163,24 +5351,28 @@ class SharedUiModule {
|
|
|
5163
5351
|
SummaryCardModule,
|
|
5164
5352
|
ConfigurableFormModule,
|
|
5165
5353
|
FormComponentsModule,
|
|
5166
|
-
SmartFormModule
|
|
5354
|
+
SmartFormModule,
|
|
5355
|
+
SideNavModule], exports: [MaterialModule,
|
|
5167
5356
|
AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
|
|
5168
5357
|
SummaryCardModule,
|
|
5169
5358
|
ConfigurableFormModule,
|
|
5170
5359
|
FormComponentsModule,
|
|
5171
|
-
SmartFormModule
|
|
5360
|
+
SmartFormModule,
|
|
5361
|
+
SideNavModule] });
|
|
5172
5362
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SharedUiModule, imports: [CommonModule,
|
|
5173
5363
|
MaterialModule,
|
|
5174
5364
|
AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
|
|
5175
5365
|
SummaryCardModule,
|
|
5176
5366
|
ConfigurableFormModule,
|
|
5177
5367
|
FormComponentsModule,
|
|
5178
|
-
SmartFormModule,
|
|
5368
|
+
SmartFormModule,
|
|
5369
|
+
SideNavModule, MaterialModule,
|
|
5179
5370
|
AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
|
|
5180
5371
|
SummaryCardModule,
|
|
5181
5372
|
ConfigurableFormModule,
|
|
5182
5373
|
FormComponentsModule,
|
|
5183
|
-
SmartFormModule
|
|
5374
|
+
SmartFormModule,
|
|
5375
|
+
SideNavModule] });
|
|
5184
5376
|
}
|
|
5185
5377
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SharedUiModule, decorators: [{
|
|
5186
5378
|
type: NgModule,
|
|
@@ -5193,7 +5385,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
5193
5385
|
SummaryCardModule,
|
|
5194
5386
|
ConfigurableFormModule,
|
|
5195
5387
|
FormComponentsModule,
|
|
5196
|
-
SmartFormModule
|
|
5388
|
+
SmartFormModule,
|
|
5389
|
+
SideNavModule
|
|
5197
5390
|
],
|
|
5198
5391
|
exports: [
|
|
5199
5392
|
MaterialModule,
|
|
@@ -5201,7 +5394,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
5201
5394
|
SummaryCardModule,
|
|
5202
5395
|
ConfigurableFormModule,
|
|
5203
5396
|
FormComponentsModule,
|
|
5204
|
-
SmartFormModule
|
|
5397
|
+
SmartFormModule,
|
|
5398
|
+
SideNavModule
|
|
5205
5399
|
],
|
|
5206
5400
|
}]
|
|
5207
5401
|
}] });
|
|
@@ -5394,14 +5588,6 @@ var configurableForm_examples = /*#__PURE__*/Object.freeze({
|
|
|
5394
5588
|
TARGET_GROUP_CONFIG: TARGET_GROUP_CONFIG
|
|
5395
5589
|
});
|
|
5396
5590
|
|
|
5397
|
-
const DEFAULT_ITEMS_PER_PAGE = 10;
|
|
5398
|
-
const DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50];
|
|
5399
|
-
const PAGINATION_THEME_DEFAULT = 'theme-1';
|
|
5400
|
-
const PAGINATION_THEME_DARK = 'theme-2';
|
|
5401
|
-
// Nav
|
|
5402
|
-
const NAV_VARIANT_DEFAULT = 'filled';
|
|
5403
|
-
const NAV_ORIENTATION_DEFAULT = 'horizontal';
|
|
5404
|
-
|
|
5405
5591
|
class PaginationComponent {
|
|
5406
5592
|
totalItems = 0;
|
|
5407
5593
|
itemsPerPage = DEFAULT_ITEMS_PER_PAGE;
|
|
@@ -7877,5 +8063,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
7877
8063
|
* Generated bundle index. Do not edit.
|
|
7878
8064
|
*/
|
|
7879
8065
|
|
|
7880
|
-
export { AlertComponent, AlertModule, ButtonComponent, ButtonModule, CheckboxComponent, ConfigurableFormComponent, configurableForm_examples as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, DatepickerComponent, DropdownComponent, ExpressionService, FilterComponent, FilterModule, FilterSidebarComponent, FilterSidebarModule, FormComponentsModule, InputComponent, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, RadioComponent, SearchComponent, SharedUiModule, SmartFormComponent, SmartFormController, smartForm_examples as SmartFormExamples, SmartFormModule, SmartTableComponent, SmartTableModule, SnackbarComponent, SnackbarModule, SnackbarService, StringUtils, SummaryCardComponent, SummaryCardModule, ToggleComponent, ValidationUtils, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem, translateConfig };
|
|
8066
|
+
export { AlertComponent, AlertModule, ButtonComponent, ButtonModule, CheckboxComponent, ConfigurableFormComponent, configurableForm_examples as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_SIDE_NAV_TOOLTIP_POSITION, DatepickerComponent, DropdownComponent, ExpressionService, FilterComponent, FilterModule, FilterSidebarComponent, FilterSidebarModule, FormComponentsModule, InputComponent, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, RadioComponent, SearchComponent, SharedUiModule, SideNavComponent, SideNavModule, SmartFormComponent, SmartFormController, smartForm_examples as SmartFormExamples, SmartFormModule, SmartTableComponent, SmartTableModule, SnackbarComponent, SnackbarModule, SnackbarService, StringUtils, SummaryCardComponent, SummaryCardModule, ToggleComponent, ValidationUtils, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem, translateConfig };
|
|
7881
8067
|
//# sourceMappingURL=commons-shared-web-ui.mjs.map
|