master-control 0.3.17 → 0.3.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.
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Injectable, input, EventEmitter, Component, Output, ViewChild, Input, HostListener, output } from '@angular/core';
2
+ import { Injectable, input, EventEmitter, Component, Output, ViewChild, Input, HostListener, output, effect } from '@angular/core';
3
3
  import * as i1 from '@angular/material/input';
4
4
  import { MatInputModule } from '@angular/material/input';
5
5
  import * as i2 from '@angular/material/form-field';
@@ -5222,25 +5222,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
5222
5222
  class StepperWIthArrowComponent {
5223
5223
  masterSharedService;
5224
5224
  field = input.required();
5225
+ currentStepValue = input(); // Input to receive current step value from parent
5226
+ autoProgress = input(false); // Input to enable automatic step progression
5227
+ autoProgressDelay = input(3000); // Delay between auto-progression (in ms)
5225
5228
  selectedStep = output();
5226
5229
  masterStepper;
5227
5230
  selectedStepIndex = -1;
5231
+ autoProgressTimer;
5228
5232
  constructor(masterSharedService) {
5229
5233
  this.masterSharedService = masterSharedService;
5234
+ // Watch for changes in currentStepValue input
5235
+ effect(() => {
5236
+ const stepValue = this.currentStepValue();
5237
+ if (stepValue && this.field()?.editStepper) {
5238
+ this.updateStepFromExternal(stepValue);
5239
+ }
5240
+ });
5230
5241
  }
5231
5242
  ngOnInit() {
5232
5243
  this.field().editStepper = this.field().configData.stepperData ? this.field().configData.stepperData : this.masterSharedService?.configData?.stepper?.stepperData;
5233
5244
  this.initializeStepperState();
5245
+ this.emitActiveStepOnLoad();
5246
+ // Start auto-progression if enabled
5247
+ if (this.autoProgress()) {
5248
+ this.startAutoProgression();
5249
+ }
5250
+ }
5251
+ ngOnDestroy() {
5252
+ // Clean up timer
5253
+ if (this.autoProgressTimer) {
5254
+ clearInterval(this.autoProgressTimer);
5255
+ }
5234
5256
  }
5235
5257
  initializeStepperState() {
5236
5258
  if (this.field().editStepper) {
5259
+ let activeStepIndex = -1;
5260
+ // Find the current active step based on step properties or field value
5261
+ // Check if any step is already marked as active
5262
+ activeStepIndex = this.field().editStepper.findIndex((step) => step.isActive === true);
5263
+ // If no active step found, check for current value in field
5264
+ if (activeStepIndex === -1 && this.field().value) {
5265
+ activeStepIndex = this.field().editStepper.findIndex((step) => step.displayLabel === this.field().value ||
5266
+ step.value === this.field().value);
5267
+ }
5268
+ // If still no active step found, default to first step
5269
+ if (activeStepIndex === -1) {
5270
+ activeStepIndex = 0;
5271
+ }
5237
5272
  this.field().editStepper.forEach((step, index) => {
5238
5273
  // Set default values if not provided
5239
5274
  if (step.isDisplay === undefined) {
5240
5275
  step.isDisplay = true;
5241
5276
  }
5242
- if (step.isDisabled === undefined) {
5277
+ // Set step states based on the active step logic
5278
+ if (index < activeStepIndex) {
5279
+ // Steps before active step are completed and enabled
5280
+ step.isCompleted = true;
5281
+ step.isActive = false;
5282
+ step.isDisabled = false; // Completed steps can be clicked
5283
+ }
5284
+ else if (index === activeStepIndex) {
5285
+ // Current active step
5286
+ step.isCompleted = false;
5287
+ step.isActive = true;
5243
5288
  step.isDisabled = false;
5289
+ this.selectedStepIndex = index; // Set as selected
5290
+ }
5291
+ else {
5292
+ // Steps after active step are pending and disabled
5293
+ step.isCompleted = false;
5294
+ step.isActive = false;
5295
+ step.isDisabled = true;
5244
5296
  }
5245
5297
  });
5246
5298
  }
@@ -5266,19 +5318,137 @@ class StepperWIthArrowComponent {
5266
5318
  return (this.selectedStepIndex === -1 || this.selectedStepIndex === index) && !this.isStepCompleted(index);
5267
5319
  }
5268
5320
  shouldShowAsDisabled(step, index) {
5269
- // Show as disabled if step is actually disabled OR if it's an unvisited step (after selected)
5270
- return step.isDisabled || (this.selectedStepIndex !== -1 && index > this.selectedStepIndex);
5321
+ // Show as disabled if step is actually disabled
5322
+ return step.isDisabled === true;
5271
5323
  }
5272
5324
  isStepCompleted(index) {
5273
- // Step is completed if it comes before the selected step
5274
- return this.selectedStepIndex !== -1 && index < this.selectedStepIndex;
5325
+ // Check if step is marked as completed
5326
+ if (this.field().editStepper && this.field().editStepper[index]) {
5327
+ return this.field().editStepper[index].isCompleted === true;
5328
+ }
5329
+ return false;
5330
+ }
5331
+ isStepActive(index) {
5332
+ // Check if step is marked as active
5333
+ if (this.field().editStepper && this.field().editStepper[index]) {
5334
+ return this.field().editStepper[index].isActive === true;
5335
+ }
5336
+ return false;
5337
+ }
5338
+ emitActiveStepOnLoad() {
5339
+ // Automatically emit the active step when component loads
5340
+ if (this.field().editStepper && this.selectedStepIndex >= 0) {
5341
+ const activeStep = this.field().editStepper[this.selectedStepIndex];
5342
+ if (activeStep) {
5343
+ const stepData = {
5344
+ step: activeStep,
5345
+ index: this.selectedStepIndex,
5346
+ label: activeStep.displayLabel,
5347
+ value: activeStep.value || activeStep.displayLabel
5348
+ };
5349
+ this.selectedStep.emit(stepData);
5350
+ }
5351
+ }
5352
+ }
5353
+ // Method to programmatically move to the next step
5354
+ moveToNextStep() {
5355
+ if (this.selectedStepIndex < this.field().editStepper.length - 1) {
5356
+ this.moveToStep(this.selectedStepIndex + 1);
5357
+ }
5358
+ }
5359
+ // Method to programmatically move to the previous step
5360
+ moveToPreviousStep() {
5361
+ if (this.selectedStepIndex > 0) {
5362
+ this.moveToStep(this.selectedStepIndex - 1);
5363
+ }
5364
+ }
5365
+ // Method to programmatically move to a specific step
5366
+ moveToStep(stepIndex) {
5367
+ if (stepIndex >= 0 && stepIndex < this.field().editStepper.length) {
5368
+ // Update step states
5369
+ this.field().editStepper.forEach((step, index) => {
5370
+ if (index < stepIndex) {
5371
+ // Mark previous steps as completed
5372
+ step.isCompleted = true;
5373
+ step.isActive = false;
5374
+ step.isDisabled = false;
5375
+ }
5376
+ else if (index === stepIndex) {
5377
+ // Mark current step as active
5378
+ step.isCompleted = false;
5379
+ step.isActive = true;
5380
+ step.isDisabled = false;
5381
+ }
5382
+ else {
5383
+ // Mark future steps as pending/disabled
5384
+ step.isCompleted = false;
5385
+ step.isActive = false;
5386
+ step.isDisabled = true;
5387
+ }
5388
+ });
5389
+ this.selectedStepIndex = stepIndex;
5390
+ // Emit the step change
5391
+ const stepData = {
5392
+ step: this.field().editStepper[stepIndex],
5393
+ index: stepIndex,
5394
+ label: this.field().editStepper[stepIndex].displayLabel,
5395
+ value: this.field().editStepper[stepIndex].value || this.field().editStepper[stepIndex].displayLabel
5396
+ };
5397
+ this.selectedStep.emit(stepData);
5398
+ }
5399
+ }
5400
+ // Method to complete current step and move to next
5401
+ completeCurrentStepAndMoveNext() {
5402
+ if (this.selectedStepIndex >= 0 && this.selectedStepIndex < this.field().editStepper.length - 1) {
5403
+ // Mark current step as completed
5404
+ this.field().editStepper[this.selectedStepIndex].isCompleted = true;
5405
+ this.field().editStepper[this.selectedStepIndex].isActive = false;
5406
+ // Move to next step
5407
+ this.moveToNextStep();
5408
+ }
5409
+ }
5410
+ // Method to watch for external step changes (can be called from parent)
5411
+ updateStepFromExternal(stepValue) {
5412
+ if (this.field().editStepper) {
5413
+ const stepIndex = this.field().editStepper.findIndex((step) => step.displayLabel === stepValue || step.value === stepValue);
5414
+ if (stepIndex >= 0 && stepIndex !== this.selectedStepIndex) {
5415
+ this.moveToStep(stepIndex);
5416
+ }
5417
+ }
5418
+ }
5419
+ // Auto-progression methods
5420
+ startAutoProgression() {
5421
+ if (this.autoProgressTimer) {
5422
+ clearInterval(this.autoProgressTimer);
5423
+ }
5424
+ this.autoProgressTimer = setInterval(() => {
5425
+ this.moveToNextStep();
5426
+ // Stop auto-progression when reaching the last step
5427
+ if (this.selectedStepIndex >= this.field().editStepper.length - 1) {
5428
+ this.stopAutoProgression();
5429
+ }
5430
+ }, this.autoProgressDelay());
5431
+ }
5432
+ stopAutoProgression() {
5433
+ if (this.autoProgressTimer) {
5434
+ clearInterval(this.autoProgressTimer);
5435
+ this.autoProgressTimer = null;
5436
+ }
5437
+ }
5438
+ // Method to reset stepper to first step
5439
+ resetToFirstStep() {
5440
+ this.stopAutoProgression();
5441
+ this.moveToStep(0);
5442
+ if (this.autoProgress()) {
5443
+ this.startAutoProgression();
5444
+ }
5275
5445
  }
5276
5446
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperWIthArrowComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
5277
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: StepperWIthArrowComponent, isStandalone: true, selector: "lib-stepper-with-arrow", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedStep: "selectedStep" }, ngImport: i0, template: "<div *ngIf=\"field() && field()?.isVisible\">\r\n <mat-stepper #stepperHeader>\r\n <ng-container *ngFor=\"let steps of field().editStepper; let i = index\">\r\n <mat-step \r\n *ngIf=\"steps.isDisplay !== false\"\r\n [completed]=\"false\"\r\n [optional]=\"false\">\r\n <ng-template matStepLabel>\r\n <div \r\n class=\"step-container\"\r\n [class.step-disabled]=\"shouldShowAsDisabled(steps, i)\"\r\n [class.step-selected]=\"isStepSelected(i)\"\r\n [class.step-collapsed]=\"!shouldShowLabel(i)\"\r\n (click)=\"onStepClick(steps, i)\">\r\n <span \r\n class=\"step-circle\"\r\n [class.circle-disabled]=\"shouldShowAsDisabled(steps, i)\"\r\n [class.circle-selected]=\"isStepSelected(i)\"\r\n [class.circle-completed]=\"isStepCompleted(i)\">\r\n {{i + 1}}\r\n </span>\r\n <span \r\n class=\"step-label mx-2\"\r\n [class.label-disabled]=\"shouldShowAsDisabled(steps, i)\"\r\n [class.label-selected]=\"isStepSelected(i)\"\r\n [class.label-hidden]=\"!shouldShowLabel(i)\">\r\n {{steps?.displayLabel}}\r\n </span>\r\n <span \r\n class=\"arrow\" \r\n [class.arrow-disabled]=\"shouldShowAsDisabled(steps, i)\"\r\n *ngIf=\"i < field().editStepper.length - 1\">\r\n </span>\r\n </div>\r\n </ng-template>\r\n </mat-step>\r\n </ng-container>\r\n </mat-stepper>\r\n</div>", styles: ["*{font-family:mulish!important}.step-container{display:flex;align-items:center;cursor:pointer;padding:4px 8px;border-radius:6px;border:none;transition:all .3s ease}.step-container:hover:not(.step-disabled){background-color:#f5f5f5}.step-container.step-selected{border:none}.step-container.step-disabled{cursor:not-allowed;opacity:.6}.step-container.step-collapsed{padding:4px;justify-content:center}.step-circle{width:24px;height:24px;border-radius:50%;background:#0bb68b;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-right:8px;transition:all .3s ease}.step-circle.circle-disabled{background:#999;color:#ccc}.step-circle.circle-selected{background:#0a9c75;box-shadow:0 0 0 2px #0bb68b4d}.step-circle.circle-completed{background:#0a9c75;color:#fff}.step-label{color:#444;font-size:13px;font-weight:600;transition:color .3s ease}.step-label.label-disabled{color:#999}.step-label.label-selected{color:#444;font-weight:700}.step-label.label-hidden{display:none}.arrow{border:solid #444;border-width:0 2px 2px 0;display:inline-block;padding:3px;transform:rotate(315deg);margin-left:12px;transition:border-color .3s ease}.arrow.arrow-disabled{border-color:#999}.arrow.arrow-hidden{display:none}::ng-deep .mat-step-icon{display:none}::ng-deep .mat-horizontal-stepper-header-container{background:#fff!important}::ng-deep .mat-stepper-horizontal-line{border-top:1px dashed!important;display:none}::ng-deep .mat-horizontal-content-container{display:none}::ng-deep .mat-horizontal-stepper-header{padding:0 8px!important}::ng-deep .mat-step-header.step-disabled .mat-step-label{pointer-events:none}::ng-deep .mat-step-header{max-height:fit-content!important}\n"], dependencies: [{ kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i2$3.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2$3.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2$3.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
5447
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: StepperWIthArrowComponent, isStandalone: true, selector: "lib-stepper-with-arrow", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, currentStepValue: { classPropertyName: "currentStepValue", publicName: "currentStepValue", isSignal: true, isRequired: false, transformFunction: null }, autoProgress: { classPropertyName: "autoProgress", publicName: "autoProgress", isSignal: true, isRequired: false, transformFunction: null }, autoProgressDelay: { classPropertyName: "autoProgressDelay", publicName: "autoProgressDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedStep: "selectedStep" }, ngImport: i0, template: "<div *ngIf=\"field() && field()?.isVisible\" style=\"zoom: 0.85;\">\r\n <mat-stepper #stepperHeader>\r\n <ng-container *ngFor=\"let steps of field().editStepper; let i = index\">\r\n <mat-step \r\n *ngIf=\"steps.isDisplay !== false\"\r\n [completed]=\"false\"\r\n [optional]=\"false\">\r\n <ng-template matStepLabel>\r\n <div \r\n class=\"step-container\"\r\n [class.step-disabled]=\"shouldShowAsDisabled(steps, i)\"\r\n [class.step-active]=\"isStepActive(i)\"\r\n [class.step-completed]=\"isStepCompleted(i)\"\r\n [class.step-collapsed]=\"!shouldShowLabel(i)\"\r\n (click)=\"onStepClick(steps, i)\">\r\n <span \r\n class=\"step-circle\"\r\n [class.circle-disabled]=\"shouldShowAsDisabled(steps, i)\"\r\n [class.circle-active]=\"isStepActive(i)\"\r\n [class.circle-completed]=\"isStepCompleted(i)\">\r\n {{i + 1}}\r\n </span>\r\n <span \r\n class=\"step-label mx-2\"\r\n [class.label-disabled]=\"shouldShowAsDisabled(steps, i)\"\r\n [class.label-active]=\"isStepActive(i)\"\r\n [class.label-completed]=\"isStepCompleted(i)\"\r\n [class.label-hidden]=\"!shouldShowLabel(i)\">\r\n {{steps?.displayLabel}}\r\n </span>\r\n <span \r\n class=\"arrow\" \r\n [class.arrow-disabled]=\"shouldShowAsDisabled(steps, i)\"\r\n [class.arrow-active]=\"isStepActive(i)\"\r\n [class.arrow-completed]=\"isStepCompleted(i)\"\r\n *ngIf=\"i < field().editStepper.length - 1\">\r\n </span>\r\n </div>\r\n </ng-template>\r\n </mat-step>\r\n </ng-container>\r\n </mat-stepper>\r\n</div>", styles: ["*{font-family:mulish!important}.step-container{display:flex;align-items:center;cursor:pointer;padding:4px 8px;border-radius:6px;border:none;transition:all .3s ease}.step-container:hover:not(.step-disabled){background-color:#f5f5f5}.step-container.step-selected{border:none}.step-container.step-disabled{cursor:not-allowed;opacity:.6}.step-container.step-collapsed{padding:4px;justify-content:center}.step-circle{width:24px;height:24px;min-width:24px;min-height:24px;border-radius:50%;background:#0bb68b;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-right:8px;transition:all .3s ease;flex-shrink:0;box-sizing:border-box}.step-circle.circle-disabled{background:#999;color:#ccc}.step-circle.circle-selected{background:#0a9c75}.step-circle.circle-completed{background:#0a9c75;color:#fff}.step-label{color:#444;font-size:13px;font-weight:600;transition:color .3s ease}.step-label.label-disabled{color:#999}.step-label.label-selected{color:#444;font-weight:700}.step-label.label-hidden{display:none}.step-label.label-active{color:#0bb68b;font-weight:700}.step-label.label-completed{color:#0a9c75;font-weight:600}.arrow{border:solid #444;border-width:0 2px 2px 0;display:inline-block;padding:3px;transform:rotate(315deg);margin-left:12px;transition:border-color .3s ease}.arrow.arrow-disabled{border-color:#999}.arrow.arrow-hidden{display:none}.arrow.arrow-active,.arrow.arrow-completed{border-color:#444}::ng-deep .mat-step-icon{display:none}::ng-deep .mat-horizontal-stepper-header-container{background:#fff!important}::ng-deep .mat-stepper-horizontal-line{border-top:1px dashed!important;display:none}::ng-deep .mat-horizontal-content-container{display:none}::ng-deep .mat-horizontal-stepper-header{padding:0 8px!important}::ng-deep .mat-step-header.step-disabled .mat-step-label{pointer-events:none}::ng-deep .mat-step-header{max-height:fit-content!important}\n"], dependencies: [{ kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i2$3.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2$3.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2$3.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
5278
5448
  }
5279
5449
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperWIthArrowComponent, decorators: [{
5280
5450
  type: Component,
5281
- args: [{ selector: 'lib-stepper-with-arrow', standalone: true, imports: [MatStepperModule, CommonModule], template: "<div *ngIf=\"field() && field()?.isVisible\">\r\n <mat-stepper #stepperHeader>\r\n <ng-container *ngFor=\"let steps of field().editStepper; let i = index\">\r\n <mat-step \r\n *ngIf=\"steps.isDisplay !== false\"\r\n [completed]=\"false\"\r\n [optional]=\"false\">\r\n <ng-template matStepLabel>\r\n <div \r\n class=\"step-container\"\r\n [class.step-disabled]=\"shouldShowAsDisabled(steps, i)\"\r\n [class.step-selected]=\"isStepSelected(i)\"\r\n [class.step-collapsed]=\"!shouldShowLabel(i)\"\r\n (click)=\"onStepClick(steps, i)\">\r\n <span \r\n class=\"step-circle\"\r\n [class.circle-disabled]=\"shouldShowAsDisabled(steps, i)\"\r\n [class.circle-selected]=\"isStepSelected(i)\"\r\n [class.circle-completed]=\"isStepCompleted(i)\">\r\n {{i + 1}}\r\n </span>\r\n <span \r\n class=\"step-label mx-2\"\r\n [class.label-disabled]=\"shouldShowAsDisabled(steps, i)\"\r\n [class.label-selected]=\"isStepSelected(i)\"\r\n [class.label-hidden]=\"!shouldShowLabel(i)\">\r\n {{steps?.displayLabel}}\r\n </span>\r\n <span \r\n class=\"arrow\" \r\n [class.arrow-disabled]=\"shouldShowAsDisabled(steps, i)\"\r\n *ngIf=\"i < field().editStepper.length - 1\">\r\n </span>\r\n </div>\r\n </ng-template>\r\n </mat-step>\r\n </ng-container>\r\n </mat-stepper>\r\n</div>", styles: ["*{font-family:mulish!important}.step-container{display:flex;align-items:center;cursor:pointer;padding:4px 8px;border-radius:6px;border:none;transition:all .3s ease}.step-container:hover:not(.step-disabled){background-color:#f5f5f5}.step-container.step-selected{border:none}.step-container.step-disabled{cursor:not-allowed;opacity:.6}.step-container.step-collapsed{padding:4px;justify-content:center}.step-circle{width:24px;height:24px;border-radius:50%;background:#0bb68b;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-right:8px;transition:all .3s ease}.step-circle.circle-disabled{background:#999;color:#ccc}.step-circle.circle-selected{background:#0a9c75;box-shadow:0 0 0 2px #0bb68b4d}.step-circle.circle-completed{background:#0a9c75;color:#fff}.step-label{color:#444;font-size:13px;font-weight:600;transition:color .3s ease}.step-label.label-disabled{color:#999}.step-label.label-selected{color:#444;font-weight:700}.step-label.label-hidden{display:none}.arrow{border:solid #444;border-width:0 2px 2px 0;display:inline-block;padding:3px;transform:rotate(315deg);margin-left:12px;transition:border-color .3s ease}.arrow.arrow-disabled{border-color:#999}.arrow.arrow-hidden{display:none}::ng-deep .mat-step-icon{display:none}::ng-deep .mat-horizontal-stepper-header-container{background:#fff!important}::ng-deep .mat-stepper-horizontal-line{border-top:1px dashed!important;display:none}::ng-deep .mat-horizontal-content-container{display:none}::ng-deep .mat-horizontal-stepper-header{padding:0 8px!important}::ng-deep .mat-step-header.step-disabled .mat-step-label{pointer-events:none}::ng-deep .mat-step-header{max-height:fit-content!important}\n"] }]
5451
+ args: [{ selector: 'lib-stepper-with-arrow', standalone: true, imports: [MatStepperModule, CommonModule], template: "<div *ngIf=\"field() && field()?.isVisible\" style=\"zoom: 0.85;\">\r\n <mat-stepper #stepperHeader>\r\n <ng-container *ngFor=\"let steps of field().editStepper; let i = index\">\r\n <mat-step \r\n *ngIf=\"steps.isDisplay !== false\"\r\n [completed]=\"false\"\r\n [optional]=\"false\">\r\n <ng-template matStepLabel>\r\n <div \r\n class=\"step-container\"\r\n [class.step-disabled]=\"shouldShowAsDisabled(steps, i)\"\r\n [class.step-active]=\"isStepActive(i)\"\r\n [class.step-completed]=\"isStepCompleted(i)\"\r\n [class.step-collapsed]=\"!shouldShowLabel(i)\"\r\n (click)=\"onStepClick(steps, i)\">\r\n <span \r\n class=\"step-circle\"\r\n [class.circle-disabled]=\"shouldShowAsDisabled(steps, i)\"\r\n [class.circle-active]=\"isStepActive(i)\"\r\n [class.circle-completed]=\"isStepCompleted(i)\">\r\n {{i + 1}}\r\n </span>\r\n <span \r\n class=\"step-label mx-2\"\r\n [class.label-disabled]=\"shouldShowAsDisabled(steps, i)\"\r\n [class.label-active]=\"isStepActive(i)\"\r\n [class.label-completed]=\"isStepCompleted(i)\"\r\n [class.label-hidden]=\"!shouldShowLabel(i)\">\r\n {{steps?.displayLabel}}\r\n </span>\r\n <span \r\n class=\"arrow\" \r\n [class.arrow-disabled]=\"shouldShowAsDisabled(steps, i)\"\r\n [class.arrow-active]=\"isStepActive(i)\"\r\n [class.arrow-completed]=\"isStepCompleted(i)\"\r\n *ngIf=\"i < field().editStepper.length - 1\">\r\n </span>\r\n </div>\r\n </ng-template>\r\n </mat-step>\r\n </ng-container>\r\n </mat-stepper>\r\n</div>", styles: ["*{font-family:mulish!important}.step-container{display:flex;align-items:center;cursor:pointer;padding:4px 8px;border-radius:6px;border:none;transition:all .3s ease}.step-container:hover:not(.step-disabled){background-color:#f5f5f5}.step-container.step-selected{border:none}.step-container.step-disabled{cursor:not-allowed;opacity:.6}.step-container.step-collapsed{padding:4px;justify-content:center}.step-circle{width:24px;height:24px;min-width:24px;min-height:24px;border-radius:50%;background:#0bb68b;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-right:8px;transition:all .3s ease;flex-shrink:0;box-sizing:border-box}.step-circle.circle-disabled{background:#999;color:#ccc}.step-circle.circle-selected{background:#0a9c75}.step-circle.circle-completed{background:#0a9c75;color:#fff}.step-label{color:#444;font-size:13px;font-weight:600;transition:color .3s ease}.step-label.label-disabled{color:#999}.step-label.label-selected{color:#444;font-weight:700}.step-label.label-hidden{display:none}.step-label.label-active{color:#0bb68b;font-weight:700}.step-label.label-completed{color:#0a9c75;font-weight:600}.arrow{border:solid #444;border-width:0 2px 2px 0;display:inline-block;padding:3px;transform:rotate(315deg);margin-left:12px;transition:border-color .3s ease}.arrow.arrow-disabled{border-color:#999}.arrow.arrow-hidden{display:none}.arrow.arrow-active,.arrow.arrow-completed{border-color:#444}::ng-deep .mat-step-icon{display:none}::ng-deep .mat-horizontal-stepper-header-container{background:#fff!important}::ng-deep .mat-stepper-horizontal-line{border-top:1px dashed!important;display:none}::ng-deep .mat-horizontal-content-container{display:none}::ng-deep .mat-horizontal-stepper-header{padding:0 8px!important}::ng-deep .mat-step-header.step-disabled .mat-step-label{pointer-events:none}::ng-deep .mat-step-header{max-height:fit-content!important}\n"] }]
5282
5452
  }], ctorParameters: () => [{ type: MasterControlService }] });
5283
5453
 
5284
5454
  class LabelWithImageComponent {
@@ -5296,7 +5466,7 @@ class MasterControlComponent {
5296
5466
  formGroup = new FormGroup({});
5297
5467
  constructor() { }
5298
5468
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5299
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MasterControlComponent, isStandalone: true, selector: "lib-master-control", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (field()?.controlType) {\r\n @case('text') {\r\n <lib-textbox [field]=\"field()\"></lib-textbox>\r\n }\r\n @case('select') {\r\n <lib-select [field]=\"field()\"/>\r\n }\r\n\r\n @case('radio') {\r\n <lib-radio [field]=\"field()\" />\r\n }\r\n\r\n @case('toggle') {\r\n <lib-toggle [field]=\"field()\" />\r\n }\r\n\r\n @case('file') {\r\n <lib-upload [field]=\"field()\" />\r\n }\r\n\r\n @case('date') {\r\n <lib-dob [field]=\"field()\" />\r\n }\r\n\r\n @case('mobileNumber') {\r\n <lib-mob-number [field]=\"field()\" />\r\n }\r\n\r\n @case('info') {\r\n <lib-info [field]=\"field()\" />\r\n }\r\n\r\n @case('checkbox') {\r\n <lib-checkbox [field]=\"field()\" />\r\n }\r\n\r\n @case('textarea') {\r\n <lib-textarea [field]=\"field()\" />\r\n }\r\n\r\n @case ('button') {\r\n <lib-button [field]=\"field()\" />\r\n }\r\n\r\n @case ('tab') {\r\n <lib-tab [field]=\"field()\" />\r\n }\r\n\r\n @case ('autocomplete') {\r\n <lib-autocomplete [field]=\"field()\" />\r\n }\r\n\r\n @case ('multipleSelect') {\r\n <lib-multiple-select [field]=\"field()\" />\r\n }\r\n\r\n @case ('textboxWithSelect') {\r\n <lib-select-textbox [field]=\"field()\" />\r\n }\r\n\r\n @case ('otpTextbox') {\r\n <lib-otp-textbox [field]=\"field()\" />\r\n }\r\n\r\n @case ('amountTextbox') {\r\n <lib-amount-textbox [field]=\"field()\" />\r\n }\r\n\r\n @case ('suffixTextbox') {\r\n <lib-suffix-textbox [field]=\"field()\" />\r\n }\r\n\r\n @case ('otpMobNumber') {\r\n <lib-otp-mob-number [field]=\"field()\" />\r\n }\r\n\r\n @case ('tagMobNumber') {\r\n <lib-tag-mob-number [field]=\"field()\" />\r\n }\r\n\r\n @case ('dateWithAge') {\r\n <lib-age-date [field]=\"field()\" />\r\n }\r\n\r\n @case ('additionButton') {\r\n <lib-addition-button [field]=\"field()\" />\r\n }\r\n\r\n @case ('infoTextbox') {\r\n <lib-info-textbox [field]=\"field()\" />\r\n }\r\n\r\n @case ('textboxWithImage') {\r\n <lib-textbox-with-image [field]=\"field()\" />\r\n }\r\n\r\n @case ('emailWithDomain') {\r\n <lib-email-with-domain [field]=\"field()\" />\r\n }\r\n\r\n @case ('imageUpload') {\r\n <lib-image-upload [field]=\"field()\" />\r\n }\r\n\r\n @case ('downloadDocument') {\r\n <lib-download-document [field]=\"field()\" />\r\n }\r\n\r\n @case ('addDocument') {\r\n <lib-add-document [field]=\"field()\" />\r\n }\r\n\r\n @case ('hyperlink') {\r\n <lib-hyperlink [field]=\"field()\" />\r\n }\r\n\r\n @case ('textboxWithUnderscore') {\r\n <lib-textbox-with-underscore [field]=\"field()\" />\r\n }\r\n\r\n @case ('underscoreMobNumber') {\r\n <lib-underscore-mob-number [field]=\"field()\" />\r\n }\r\n\r\n @case ('downloadIconButton') {\r\n <lib-icon-button [field]=\"field()\" />\r\n }\r\n\r\n @case ('image') {\r\n <lib-image [field]=\"field()\" />\r\n }\r\n @case ('stepper') {\r\n <lib-stepper [field]=\"field()\" />\r\n }\r\n @case ('card') {\r\n <lib-card [field]=\"field()\" />\r\n }\r\n @case ('hrLine') {\r\n <lib-hr-line [field]=\"field()\" />\r\n }\r\n @case ('searchMultiSelect') {\r\n <lib-search-multi-select [field]=\"field()\" />\r\n }\r\n @case ('subscriptTextbox') {\r\n <lib-subscript-textbox [field]=\"field()\" />\r\n }\r\n @case ('label') {\r\n <lib-label [field]=\"field()\" />\r\n }\r\n @case ('subHeading') {\r\n <lib-sub-header [field]=\"field()\" />\r\n }\r\n @case ('heading') {\r\n <lib-header [field]=\"field()\" />\r\n }\r\n @case ('table') {\r\n <lib-table [field]=\"field()\" />\r\n }\r\n @case ('textboxWithText') {\r\n <lib-textbox-with-text [field]=\"field()\" />\r\n }\r\n @case ('loader') {\r\n <lib-loader [field]=\"field()\" />\r\n }\r\n @case ('discount') {\r\n <lib-discount [field]=\"field()\" />\r\n }\r\n @case ('optionalBenefitCard') {\r\n <lib-benefit-card [field]=\"field()\" />\r\n }\r\n @case ('errorSnackbar') {\r\n <lib-error-snackbar [field]=\"field()\" />\r\n }\r\n @case ('warningSnackbar') {\r\n <lib-warning-snackbar [field]=\"field()\" />\r\n }\r\n @case ('successSnackbar') {\r\n <lib-success-snackbar [field]=\"field()\" />\r\n }\r\n @case ('neutralSnackbar') {\r\n <lib-neutral-snackbar [field]=\"field()\" />\r\n }\r\n @case ('boldLabel') {\r\n <lib-grey-label [field]=\"field()\" />\r\n }\r\n @case ('iframe') {\r\n <lib-iframe [field]=\"field()\" />\r\n }\r\n @case ('toggleButton') {\r\n <lib-toggle-button [field]=\"field()\" />\r\n }\r\n @case ('payGetCard') {\r\n <lib-pay-get-card [field]=\"field()\" />\r\n }\r\n @case ('inBuiltBenefit') {\r\n <lib-in-built-benefit [field]=\"field()\" />\r\n }\r\n @case ('otherBenefit') {\r\n <lib-other-benefits [field]=\"field()\" />\r\n }\r\n @case ('annuityRateLogo') {\r\n <lib-annuity-rate-logo [field]=\"field()\" />\r\n }\r\n @case ('discountAnnuity') {\r\n <lib-discount-v2 [field]=\"field()\" />\r\n }\r\n @case ('labelValue'){\r\n <lib-label-value-card [field]=\"field()\" />\r\n }\r\n @case ('medicalQuestions'){\r\n <lib-medial-questions [field]=\"field()\" />\r\n }\r\n @case ('nudge'){\r\n <lib-page-nudge [field]=\"field()\"/>\r\n }\r\n @case ('progressBar'){\r\n <lib-progress-bar [field]=\"field()\"/>\r\n }\r\n @case ('accordian'){\r\n <lib-accordian [field]=\"field()\"/>\r\n }\r\n @case ('miscInfo'){\r\n <lib-miscellaneous-info-bar [field]=\"field()\"/>\r\n }\r\n @case ('plainText'){\r\n <lib-plain-text [field]=\"field()\"/>\r\n }\r\n @case ('menu'){\r\n <lib-menu [field]=\"field()\" />\r\n }\r\n @case ('stepperWithArrow') {\r\n <lib-stepper-with-arrow [field]=\"field()\" />\r\n }\r\n @case ('labelWithImage') {\r\n <lib-label-with-image [field]=\"field()\" />\r\n }\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: MobNumberComponent, selector: "lib-mob-number", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: InfoComponent, selector: "lib-info", inputs: ["field"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: TextareaComponent, selector: "lib-textarea", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["field"] }, { kind: "component", type: TabComponent, selector: "lib-tab", inputs: ["field"], outputs: ["selectedIndexChange"] }, { kind: "component", type: AutocompleteComponent, selector: "lib-autocomplete", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "selectionChanged", "valueChanged", "optionSelected"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: SelectTextboxComponent, selector: "lib-select-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: OtpTextboxComponent, selector: "lib-otp-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AmountTextboxComponent, selector: "lib-amount-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: SuffixTextboxComponent, selector: "lib-suffix-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: OtpMobNumberComponent, selector: "lib-otp-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: TagMobNumberComponent, selector: "lib-tag-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AgeDateComponent, selector: "lib-age-date", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AdditionButtonComponent, selector: "lib-addition-button", inputs: ["field"] }, { kind: "component", type: InfoTextboxComponent, selector: "lib-info-textbox", inputs: ["field", "reactiveFormControlobject", "fields"], outputs: ["infoClick"] }, { kind: "component", type: TextboxWithImageComponent, selector: "lib-textbox-with-image", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: EmailWithDomainComponent, selector: "lib-email-with-domain", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: ImageUploadComponent, selector: "lib-image-upload", inputs: ["field"] }, { kind: "component", type: DownloadDocumentComponent, selector: "lib-download-document", inputs: ["field"] }, { kind: "component", type: AddDocumentComponent, selector: "lib-add-document", inputs: ["field"] }, { kind: "component", type: HyperlinkComponent, selector: "lib-hyperlink", inputs: ["field"] }, { kind: "component", type: TextboxWithUnderscoreComponent, selector: "lib-textbox-with-underscore", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: UnderscoreMobNumberComponent, selector: "lib-underscore-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["field"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ImageComponent, selector: "lib-image", inputs: ["field"] }, { kind: "component", type: StepperComponent, selector: "lib-stepper", inputs: ["field"] }, { kind: "component", type: CardComponent, selector: "lib-card", inputs: ["field"], outputs: ["cardDetailsClicked"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: SearchMultiSelectComponent, selector: "lib-search-multi-select", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: SubscriptTextboxComponent, selector: "lib-subscript-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: LabelComponent, selector: "lib-label", inputs: ["field"] }, { kind: "component", type: SubHeaderComponent, selector: "lib-sub-header", inputs: ["field"] }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["field"] }, { kind: "component", type: TextboxWithTextComponent, selector: "lib-textbox-with-text", inputs: ["reactiveFormControlobject", "field"], outputs: ["blur"] }, { kind: "component", type: DiscountComponent, selector: "lib-discount", inputs: ["field"] }, { kind: "component", type: BenefitCardComponent, selector: "lib-benefit-card", inputs: ["field"] }, { kind: "component", type: TableComponent, selector: "lib-table", inputs: ["field", "readonly"], outputs: ["actionItemClicked", "tablePaginationClicked"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["field"] }, { kind: "component", type: WarningSnackbarComponent, selector: "lib-warning-snackbar", inputs: ["field"] }, { kind: "component", type: SuccessSnackbarComponent, selector: "lib-success-snackbar", inputs: ["field"] }, { kind: "component", type: NeutralSnackbarComponent, selector: "lib-neutral-snackbar", inputs: ["field"] }, { kind: "component", type: ErrorSnackbarComponent, selector: "lib-error-snackbar", inputs: ["field"] }, { kind: "component", type: GreyLabelComponent, selector: "lib-grey-label", inputs: ["field"] }, { kind: "component", type: IframeComponent, selector: "lib-iframe", inputs: ["field"] }, { kind: "component", type: ToggleButtonComponent, selector: "lib-toggle-button", inputs: ["reactiveFormControlobject", "field"], outputs: ["selectionChanged", "change"] }, { kind: "component", type: PayGetCardComponent, selector: "lib-pay-get-card", inputs: ["field", "payAmount", "premiumAmount", "ptValue", "years", "frequency"] }, { kind: "component", type: InBuiltBenefitComponent, selector: "lib-in-built-benefit", inputs: ["field", "premiumAmount", "premiumAmountShort"] }, { kind: "component", type: OtherBenefitsComponent, selector: "lib-other-benefits", inputs: ["field"] }, { kind: "component", type: AnnuityRateLogoComponent, selector: "lib-annuity-rate-logo", inputs: ["field", "ratePercent"] }, { kind: "component", type: DiscountV2Component, selector: "lib-discount-v2", inputs: ["field"] }, { kind: "component", type: LabelValueCardComponent, selector: "lib-label-value-card", inputs: ["field"] }, { kind: "component", type: MedialQuestionsComponent, selector: "lib-medial-questions", inputs: ["medialQuestionResponse", "field"] }, { kind: "component", type: PageNudgeComponent, selector: "lib-page-nudge", inputs: ["field"] }, { kind: "component", type: ProgressBarComponent, selector: "lib-progress-bar", inputs: ["field"] }, { kind: "component", type: AccordianComponent, selector: "lib-accordian", inputs: ["field"] }, { kind: "component", type: MiscellaneousInfoBarComponent, selector: "lib-miscellaneous-info-bar", inputs: ["field", "details"] }, { kind: "component", type: PlainTextComponent, selector: "lib-plain-text", inputs: ["field"] }, { kind: "component", type: MenuComponent, selector: "lib-menu", inputs: ["field"] }, { kind: "component", type: StepperWIthArrowComponent, selector: "lib-stepper-with-arrow", inputs: ["field"], outputs: ["selectedStep"] }, { kind: "component", type: LabelWithImageComponent, selector: "lib-label-with-image", inputs: ["field"] }] });
5469
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MasterControlComponent, isStandalone: true, selector: "lib-master-control", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (field()?.controlType) {\r\n @case('text') {\r\n <lib-textbox [field]=\"field()\"></lib-textbox>\r\n }\r\n @case('select') {\r\n <lib-select [field]=\"field()\"/>\r\n }\r\n\r\n @case('radio') {\r\n <lib-radio [field]=\"field()\" />\r\n }\r\n\r\n @case('toggle') {\r\n <lib-toggle [field]=\"field()\" />\r\n }\r\n\r\n @case('file') {\r\n <lib-upload [field]=\"field()\" />\r\n }\r\n\r\n @case('date') {\r\n <lib-dob [field]=\"field()\" />\r\n }\r\n\r\n @case('mobileNumber') {\r\n <lib-mob-number [field]=\"field()\" />\r\n }\r\n\r\n @case('info') {\r\n <lib-info [field]=\"field()\" />\r\n }\r\n\r\n @case('checkbox') {\r\n <lib-checkbox [field]=\"field()\" />\r\n }\r\n\r\n @case('textarea') {\r\n <lib-textarea [field]=\"field()\" />\r\n }\r\n\r\n @case ('button') {\r\n <lib-button [field]=\"field()\" />\r\n }\r\n\r\n @case ('tab') {\r\n <lib-tab [field]=\"field()\" />\r\n }\r\n\r\n @case ('autocomplete') {\r\n <lib-autocomplete [field]=\"field()\" />\r\n }\r\n\r\n @case ('multipleSelect') {\r\n <lib-multiple-select [field]=\"field()\" />\r\n }\r\n\r\n @case ('textboxWithSelect') {\r\n <lib-select-textbox [field]=\"field()\" />\r\n }\r\n\r\n @case ('otpTextbox') {\r\n <lib-otp-textbox [field]=\"field()\" />\r\n }\r\n\r\n @case ('amountTextbox') {\r\n <lib-amount-textbox [field]=\"field()\" />\r\n }\r\n\r\n @case ('suffixTextbox') {\r\n <lib-suffix-textbox [field]=\"field()\" />\r\n }\r\n\r\n @case ('otpMobNumber') {\r\n <lib-otp-mob-number [field]=\"field()\" />\r\n }\r\n\r\n @case ('tagMobNumber') {\r\n <lib-tag-mob-number [field]=\"field()\" />\r\n }\r\n\r\n @case ('dateWithAge') {\r\n <lib-age-date [field]=\"field()\" />\r\n }\r\n\r\n @case ('additionButton') {\r\n <lib-addition-button [field]=\"field()\" />\r\n }\r\n\r\n @case ('infoTextbox') {\r\n <lib-info-textbox [field]=\"field()\" />\r\n }\r\n\r\n @case ('textboxWithImage') {\r\n <lib-textbox-with-image [field]=\"field()\" />\r\n }\r\n\r\n @case ('emailWithDomain') {\r\n <lib-email-with-domain [field]=\"field()\" />\r\n }\r\n\r\n @case ('imageUpload') {\r\n <lib-image-upload [field]=\"field()\" />\r\n }\r\n\r\n @case ('downloadDocument') {\r\n <lib-download-document [field]=\"field()\" />\r\n }\r\n\r\n @case ('addDocument') {\r\n <lib-add-document [field]=\"field()\" />\r\n }\r\n\r\n @case ('hyperlink') {\r\n <lib-hyperlink [field]=\"field()\" />\r\n }\r\n\r\n @case ('textboxWithUnderscore') {\r\n <lib-textbox-with-underscore [field]=\"field()\" />\r\n }\r\n\r\n @case ('underscoreMobNumber') {\r\n <lib-underscore-mob-number [field]=\"field()\" />\r\n }\r\n\r\n @case ('downloadIconButton') {\r\n <lib-icon-button [field]=\"field()\" />\r\n }\r\n\r\n @case ('image') {\r\n <lib-image [field]=\"field()\" />\r\n }\r\n @case ('stepper') {\r\n <lib-stepper [field]=\"field()\" />\r\n }\r\n @case ('card') {\r\n <lib-card [field]=\"field()\" />\r\n }\r\n @case ('hrLine') {\r\n <lib-hr-line [field]=\"field()\" />\r\n }\r\n @case ('searchMultiSelect') {\r\n <lib-search-multi-select [field]=\"field()\" />\r\n }\r\n @case ('subscriptTextbox') {\r\n <lib-subscript-textbox [field]=\"field()\" />\r\n }\r\n @case ('label') {\r\n <lib-label [field]=\"field()\" />\r\n }\r\n @case ('subHeading') {\r\n <lib-sub-header [field]=\"field()\" />\r\n }\r\n @case ('heading') {\r\n <lib-header [field]=\"field()\" />\r\n }\r\n @case ('table') {\r\n <lib-table [field]=\"field()\" />\r\n }\r\n @case ('textboxWithText') {\r\n <lib-textbox-with-text [field]=\"field()\" />\r\n }\r\n @case ('loader') {\r\n <lib-loader [field]=\"field()\" />\r\n }\r\n @case ('discount') {\r\n <lib-discount [field]=\"field()\" />\r\n }\r\n @case ('optionalBenefitCard') {\r\n <lib-benefit-card [field]=\"field()\" />\r\n }\r\n @case ('errorSnackbar') {\r\n <lib-error-snackbar [field]=\"field()\" />\r\n }\r\n @case ('warningSnackbar') {\r\n <lib-warning-snackbar [field]=\"field()\" />\r\n }\r\n @case ('successSnackbar') {\r\n <lib-success-snackbar [field]=\"field()\" />\r\n }\r\n @case ('neutralSnackbar') {\r\n <lib-neutral-snackbar [field]=\"field()\" />\r\n }\r\n @case ('boldLabel') {\r\n <lib-grey-label [field]=\"field()\" />\r\n }\r\n @case ('iframe') {\r\n <lib-iframe [field]=\"field()\" />\r\n }\r\n @case ('toggleButton') {\r\n <lib-toggle-button [field]=\"field()\" />\r\n }\r\n @case ('payGetCard') {\r\n <lib-pay-get-card [field]=\"field()\" />\r\n }\r\n @case ('inBuiltBenefit') {\r\n <lib-in-built-benefit [field]=\"field()\" />\r\n }\r\n @case ('otherBenefit') {\r\n <lib-other-benefits [field]=\"field()\" />\r\n }\r\n @case ('annuityRateLogo') {\r\n <lib-annuity-rate-logo [field]=\"field()\" />\r\n }\r\n @case ('discountAnnuity') {\r\n <lib-discount-v2 [field]=\"field()\" />\r\n }\r\n @case ('labelValue'){\r\n <lib-label-value-card [field]=\"field()\" />\r\n }\r\n @case ('medicalQuestions'){\r\n <lib-medial-questions [field]=\"field()\" />\r\n }\r\n @case ('nudge'){\r\n <lib-page-nudge [field]=\"field()\"/>\r\n }\r\n @case ('progressBar'){\r\n <lib-progress-bar [field]=\"field()\"/>\r\n }\r\n @case ('accordian'){\r\n <lib-accordian [field]=\"field()\"/>\r\n }\r\n @case ('miscInfo'){\r\n <lib-miscellaneous-info-bar [field]=\"field()\"/>\r\n }\r\n @case ('plainText'){\r\n <lib-plain-text [field]=\"field()\"/>\r\n }\r\n @case ('menu'){\r\n <lib-menu [field]=\"field()\" />\r\n }\r\n @case ('stepperWithArrow') {\r\n <lib-stepper-with-arrow [field]=\"field()\" />\r\n }\r\n @case ('labelWithImage') {\r\n <lib-label-with-image [field]=\"field()\" />\r\n }\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: MobNumberComponent, selector: "lib-mob-number", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: InfoComponent, selector: "lib-info", inputs: ["field"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: TextareaComponent, selector: "lib-textarea", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["field"] }, { kind: "component", type: TabComponent, selector: "lib-tab", inputs: ["field"], outputs: ["selectedIndexChange"] }, { kind: "component", type: AutocompleteComponent, selector: "lib-autocomplete", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "selectionChanged", "valueChanged", "optionSelected"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: SelectTextboxComponent, selector: "lib-select-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: OtpTextboxComponent, selector: "lib-otp-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AmountTextboxComponent, selector: "lib-amount-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: SuffixTextboxComponent, selector: "lib-suffix-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: OtpMobNumberComponent, selector: "lib-otp-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: TagMobNumberComponent, selector: "lib-tag-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AgeDateComponent, selector: "lib-age-date", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AdditionButtonComponent, selector: "lib-addition-button", inputs: ["field"] }, { kind: "component", type: InfoTextboxComponent, selector: "lib-info-textbox", inputs: ["field", "reactiveFormControlobject", "fields"], outputs: ["infoClick"] }, { kind: "component", type: TextboxWithImageComponent, selector: "lib-textbox-with-image", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: EmailWithDomainComponent, selector: "lib-email-with-domain", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: ImageUploadComponent, selector: "lib-image-upload", inputs: ["field"] }, { kind: "component", type: DownloadDocumentComponent, selector: "lib-download-document", inputs: ["field"] }, { kind: "component", type: AddDocumentComponent, selector: "lib-add-document", inputs: ["field"] }, { kind: "component", type: HyperlinkComponent, selector: "lib-hyperlink", inputs: ["field"] }, { kind: "component", type: TextboxWithUnderscoreComponent, selector: "lib-textbox-with-underscore", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: UnderscoreMobNumberComponent, selector: "lib-underscore-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["field"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ImageComponent, selector: "lib-image", inputs: ["field"] }, { kind: "component", type: StepperComponent, selector: "lib-stepper", inputs: ["field"] }, { kind: "component", type: CardComponent, selector: "lib-card", inputs: ["field"], outputs: ["cardDetailsClicked"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: SearchMultiSelectComponent, selector: "lib-search-multi-select", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: SubscriptTextboxComponent, selector: "lib-subscript-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: LabelComponent, selector: "lib-label", inputs: ["field"] }, { kind: "component", type: SubHeaderComponent, selector: "lib-sub-header", inputs: ["field"] }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["field"] }, { kind: "component", type: TextboxWithTextComponent, selector: "lib-textbox-with-text", inputs: ["reactiveFormControlobject", "field"], outputs: ["blur"] }, { kind: "component", type: DiscountComponent, selector: "lib-discount", inputs: ["field"] }, { kind: "component", type: BenefitCardComponent, selector: "lib-benefit-card", inputs: ["field"] }, { kind: "component", type: TableComponent, selector: "lib-table", inputs: ["field", "readonly"], outputs: ["actionItemClicked", "tablePaginationClicked"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["field"] }, { kind: "component", type: WarningSnackbarComponent, selector: "lib-warning-snackbar", inputs: ["field"] }, { kind: "component", type: SuccessSnackbarComponent, selector: "lib-success-snackbar", inputs: ["field"] }, { kind: "component", type: NeutralSnackbarComponent, selector: "lib-neutral-snackbar", inputs: ["field"] }, { kind: "component", type: ErrorSnackbarComponent, selector: "lib-error-snackbar", inputs: ["field"] }, { kind: "component", type: GreyLabelComponent, selector: "lib-grey-label", inputs: ["field"] }, { kind: "component", type: IframeComponent, selector: "lib-iframe", inputs: ["field"] }, { kind: "component", type: ToggleButtonComponent, selector: "lib-toggle-button", inputs: ["reactiveFormControlobject", "field"], outputs: ["selectionChanged", "change"] }, { kind: "component", type: PayGetCardComponent, selector: "lib-pay-get-card", inputs: ["field", "payAmount", "premiumAmount", "ptValue", "years", "frequency"] }, { kind: "component", type: InBuiltBenefitComponent, selector: "lib-in-built-benefit", inputs: ["field", "premiumAmount", "premiumAmountShort"] }, { kind: "component", type: OtherBenefitsComponent, selector: "lib-other-benefits", inputs: ["field"] }, { kind: "component", type: AnnuityRateLogoComponent, selector: "lib-annuity-rate-logo", inputs: ["field", "ratePercent"] }, { kind: "component", type: DiscountV2Component, selector: "lib-discount-v2", inputs: ["field"] }, { kind: "component", type: LabelValueCardComponent, selector: "lib-label-value-card", inputs: ["field"] }, { kind: "component", type: MedialQuestionsComponent, selector: "lib-medial-questions", inputs: ["medialQuestionResponse", "field"] }, { kind: "component", type: PageNudgeComponent, selector: "lib-page-nudge", inputs: ["field"] }, { kind: "component", type: ProgressBarComponent, selector: "lib-progress-bar", inputs: ["field"] }, { kind: "component", type: AccordianComponent, selector: "lib-accordian", inputs: ["field"] }, { kind: "component", type: MiscellaneousInfoBarComponent, selector: "lib-miscellaneous-info-bar", inputs: ["field", "details"] }, { kind: "component", type: PlainTextComponent, selector: "lib-plain-text", inputs: ["field"] }, { kind: "component", type: MenuComponent, selector: "lib-menu", inputs: ["field"] }, { kind: "component", type: StepperWIthArrowComponent, selector: "lib-stepper-with-arrow", inputs: ["field", "currentStepValue", "autoProgress", "autoProgressDelay"], outputs: ["selectedStep"] }, { kind: "component", type: LabelWithImageComponent, selector: "lib-label-with-image", inputs: ["field"] }] });
5300
5470
  }
5301
5471
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterControlComponent, decorators: [{
5302
5472
  type: Component,