enhance product offering management with characteristic and characteristic values exposure

                                <!-- END OF Main Properties Tab -->

                                <!-- Linked Product Specification Characteristics Tab -->

                                <div class="tab-pane active"

                                <div class="tab-pane active disable"

                                    *ngIf="activeListItem === 'Linked Product Specification Characteristics'"

                                    role="tabpanel" [@fadeIn]>

                                    role="tabpanel">

                                    <form>

                                        <div class="card mat-elevation-z1 bg-light">

                                            <div class="card-body">

                                                <div class="row align-items-center">

                                                    <div *ngIf="offering?.productSpecification">

                                                    <div *ngIf="!editForm.value.productSpecification" class="col-12 text-center text-muted">

                                                        <br>

                                                        <h5>Please select a Linked Product Specification in the "Main Properties" tab first.</h5>

                                                        <br>

                                                    </div>

                                                    <div *ngIf="editForm.value.productSpecification" class="col-12">

                                                        <div class="col-12 mb-3">

                                                            <h5>Characteristics from linked Product

                                                                Specification:

                                                                <dfn><b>{{offering?.productSpecification?.name}}</b></dfn>

                                                        <div class="col-12 mb-4">

                                                            <h5>Choose Characteristics from: 

                                                                <dfn class="text-primary">{{editForm.value.productSpecification.name}}</dfn>

                                                            </h5>

                                                            <small class="text-muted">Select the characteristics to include. Expand to select specific values.</small>

                                                        </div>

                                                        <!-- <div class="col-12"

                                                            *ngFor="let char of linkedSpecCharacteristics">

                                                        <div *ngIf="availableSpecCharacteristics.length === 0" class="alert alert-warning">

                                                            No characteristics found in the selected Product Specification.

                                                        </div>

                                                        <mat-accordion multi="true">

                                                            <mat-expansion-panel *ngFor="let char of availableSpecCharacteristics" class="mb-2">

                                                                <mat-expansion-panel-header>

                                                                    <div class="d-flex align-items-center w-100">

                                                                        <mat-checkbox color="primary" 

                                                                [checked]="isCharacteristicLinked(char)"

                                                                (change)="characteristicCheckboxChanged($event, char)">

                                                                {{char.name}}

                                                                            class="mr-3"

                                                                            [checked]="isCharacteristicSelected(char)"

                                                                            (click)="$event.stopPropagation()"

                                                                            (change)="onCharacteristicToggle(char, $event)">

                                                                        </mat-checkbox>

                                                        </div> -->

                                                                        <div class="d-flex flex-column">

                                                                            <strong>{{char.name}}</strong>

                                                                            <small class="text-muted" *ngIf="char.description">{{char.description}}</small>

                                                                        </div>

                                                                        <div class="ml-auto mr-3 text-muted" *ngIf="char.productSpecCharacteristicValue?.length > 0">

                                                                            <small>{{ getSelectedValuesCount(char) }} / {{ char.productSpecCharacteristicValue.length }} values</small>

                                                                        </div>

                                                                    </div>

                                                                </mat-expansion-panel-header>

                                                <div class="container-fluid">

                                                    <!-- <div class="row justify-content-end">

                                                        <button type="submit" class="btn btn-primary"

                                                            (click)="updateOfferingCharacteristics()"><i

                                                                class="fas fa-check mr-2"></i>Submit</button>

                                                    </div> -->

                                                                <ng-template matExpansionPanelContent>

                                                                    <div class="pt-3 pb-3">

                                                                        <div *ngIf="!char.productSpecCharacteristicValue || char.productSpecCharacteristicValue.length === 0">

                                                                            <p class="text-muted font-italic">

                                                                                This characteristic has no pre-defined values.

                                                                            </p>

                                                                        </div>

                                                                        <div *ngIf="char.productSpecCharacteristicValue?.length > 0">

                                                                            <p class="mb-2 text-primary text-small">Select the characteristic values for this offering:</p>

                                                                            <div class="row">

                                                                                <div class="col-md-6 col-lg-4" *ngFor="let val of char.productSpecCharacteristicValue">

                                                                                    <mat-checkbox 

                                                                                        [checked]="isValueSelected(char, val)"

                                                                                        [disabled]="!isCharacteristicSelected(char)"

                                                                                        (change)="onValueToggle(char, val, $event)">

                                                                                        <ng-container *ngIf="val.value; else emptyValue">

                                                                                            <span *ngIf="val.value.alias">

                                                                                                {{val.value.alias}}: {{val.value.value}}

                                                                                                <span *ngIf="val.unitOfMeasure" class="text-muted"> - ({{val.unitOfMeasure}})</span>

                                                                                            </span>

                                                                                            <span *ngIf="!val.value.alias">

                                                                                                {{val.value.value}}

                                                                                                <span *ngIf="val.unitOfMeasure" class="text-muted">({{val.unitOfMeasure}})</span>

                                                                                            </span>

                                                                                        </ng-container>

                                                                                        <ng-template #emptyValue>

                                                                                            <span class="text-muted font-italic">Empty Value</span>

                                                                                        </ng-template>

                                                                                    </mat-checkbox>

                                                                                </div>

                                                                            </div>

                                                                            <div class="mt-2">

                                                                                <button mat-button color="primary" class="btn-sm px-0 mr-3" 

                                                                                    [disabled]="!isCharacteristicSelected(char)"

                                                                                    (click)="selectAllValues(char)">Select All Values</button>

                                                                                <button mat-button color="warn" class="btn-sm px-0" 

                                                                                    [disabled]="!isCharacteristicSelected(char)"

                                                                                    (click)="deselectAllValues(char)">Deselect All</button>

                                                                            </div>

                                                                        </div>

                                                                    </div>

                                                                </ng-template>

                                                            </mat-expansion-panel>

                                                        </mat-accordion>

                                                    </div>

                                                </div>

                                                <div class="container-fluid mt-4" *ngIf="availableSpecCharacteristics.length > 0">

                                                    <div class="row">

                                                        <button type="button" mat-stroked-button (click)="selectAllCharacteristics()" class="mr-2">Select All Chararacteristics</button>

                                                        <button type="button" mat-stroked-button (click)="deselectAllCharacteristics()">Deselect All Characteristics</button>

                                                    </div>

                                                </div>

                                            </div>

                                            <div class="card-footer">

                                                <button type="submit" class="btn btn-primary float-right"

                                                (click)="updateOfferingCharacteristics()">

                                                <i class="fas fa-check mr-2"></i>Submit

                                            </button>

                                            </div>

                                            <div class="card-footer"></div>

                                        </div>

                                    </form>

                                </div>