@testgorilla/tgo-ui 2.33.18 → 2.33.19

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.
@@ -5220,13 +5220,6 @@ class ButtonComponent {
5220
5220
  * @memberof ButtonComponent
5221
5221
  */
5222
5222
  this.justIcon = false;
5223
- /**
5224
- * Name of ui-icon
5225
- *
5226
- * @type {IconName}
5227
- * @memberof ButtonComponent
5228
- */
5229
- this.iconName = '';
5230
5223
  /**
5231
5224
  * Indicator if the button should be disabled
5232
5225
  *
@@ -6585,12 +6578,18 @@ class DialogComponent {
6585
6578
  * @memberof DialogComponent
6586
6579
  */
6587
6580
  this.primaryButtonLabel = '';
6581
+ /**
6582
+ * Primary button icon name
6583
+ *
6584
+ * @memberof DialogComponent
6585
+ */
6586
+ this.primaryButtonIconName = '';
6588
6587
  /**
6589
6588
  * Secondary button type
6590
6589
  *
6591
6590
  * @memberof DialogComponent
6592
6591
  */
6593
- this.secondaryButtonType = 'secondary';
6592
+ this.secondaryButtonType = 'ghost';
6594
6593
  /**
6595
6594
  * Primary button type
6596
6595
  *
@@ -6689,7 +6688,6 @@ class DialogComponent {
6689
6688
  this.applicationTheme = this.data.applicationTheme;
6690
6689
  }
6691
6690
  if (this.applicationTheme !== 'classic') {
6692
- this.secondaryButtonType = 'ghost';
6693
6691
  this.companyColor = this.companyColor || '#D410AA';
6694
6692
  }
6695
6693
  else {
@@ -6732,11 +6730,11 @@ class DialogComponent {
6732
6730
  this.primaryButtonClickEvent.emit(event);
6733
6731
  }
6734
6732
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DialogComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
6735
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DialogComponent, selector: "ui-dialog", inputs: { title: "title", showCloseButton: "showCloseButton", canCloseFn: "canCloseFn", secondaryButtonLabel: "secondaryButtonLabel", primaryButtonLabel: "primaryButtonLabel", secondaryButtonType: "secondaryButtonType", primaryButtonType: "primaryButtonType", primaryButtonDataTestId: "primaryButtonDataTestId", secondaryButtonDataTestId: "secondaryButtonDataTestId", companyColor: "companyColor", applicationTheme: "applicationTheme", disablePrimaryButton: "disablePrimaryButton", disableClose: "disableClose", shouldDisableButtons: "shouldDisableButtons", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", keyboardOpen: "keyboardOpen" }, outputs: { closeEvent: "closeEvent", secondaryButtonClickEvent: "secondaryButtonClickEvent", primaryButtonClickEvent: "primaryButtonClickEvent" }, host: { listeners: { "keydown.esc": "onEsc($event)" }, properties: { "style.--color": "this.companyColor" } }, queries: [{ propertyName: "customHeader", first: true, predicate: ["dialogHeader"], descendants: true }], viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n <div\n mat-dialog-title\n class=\"dialog-title\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n >\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n\n <!-- Default header content -->\n <ng-container *ngIf=\"!hasCustomHeader\">\n <h3 class=\"bold\" id=\"labelledby\">{{ title }}</h3>\n <div *ngIf=\"showCloseButton\">\n <ui-button\n #closeButton\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"(('COMMON.CLOSE') | uiTranslate | async)!\"\n (click)=\"onClose($event)\"\n (buttonClickEvent)=\"dismiss()\"\n id=\"dialog-close-button\"\n ></ui-button>\n </div>\n </ng-container>\n\n <!-- Custom header content projection -->\n <ng-content select=\"[dialogHeader]\"></ng-content>\n </div>\n <mat-dialog-content>\n <ng-content></ng-content>\n </mat-dialog-content>\n <div mat-dialog-actions *ngIf=\"secondaryButtonLabel !== '' || primaryButtonLabel !== ''\">\n <ui-button\n [companyColor]=\"companyColor\"\n [variant]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"!!secondaryButtonLabel\"\n [label]=\"secondaryButtonLabel\"\n [attr.data-testid]=\"secondaryButtonDataTestId\"\n (click)=\"onSecondaryButtonClick($event)\"\n ></ui-button>\n <ui-button\n [variant]=\"primaryButtonType\"\n *ngIf=\"!!primaryButtonLabel\"\n [disabled]=\"disableButtons || disablePrimaryButton\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"onPrimaryButtonClick($event)\"\n [label]=\"primaryButtonLabel\"\n [companyColor]=\"companyColor\"\n [attr.data-testid]=\"primaryButtonDataTestId\"\n (buttonClickEvent)=\"dismiss()\"\n ></ui-button>\n </div>\n\n<!-- This is announcement for screen reader that dialog was closed-->\n <div aria-live=\"assertive\" role=\"alert\" style=\"position: absolute; left: -9999px;\">\n <span *ngIf=\"modalClosed\">{{ 'DIALOG.CLOSED' | uiTranslate | async }}</span>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.ui-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper.small{width:600px}.ui-dialog-wrapper.large{width:956px}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:16px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{padding:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:10px}.ui-dialog-wrapper.dark .dialog-title,.ui-dialog-wrapper.light .dialog-title{height:40px;padding:0;margin-bottom:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-content,.ui-dialog-wrapper.light .mat-mdc-dialog-content{padding:0}.ui-dialog-wrapper.dark .mat-mdc-dialog-actions,.ui-dialog-wrapper.light .mat-mdc-dialog-actions{padding:0;margin-top:32px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000;line-height:20px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container{--mdc-dialog-container-color: #424242}.ui-dialog-wrapper.dark .mat-mdc-dialog-content{color:#fff!important}.ui-dialog-wrapper.dark .dialog-title{--mdc-dialog-subhead-color: #ffffff}.dialog-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0}.dialog-title .close{margin-right:-24px}.dialog-title:before{content:none}.mat-mdc-dialog-actions{display:flex;justify-content:flex-end;column-gap:16px;padding:16px 0 0;margin-bottom:0;min-height:48px}@media (max-width: 1024px){.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:320px;max-width:600px;border-radius:0}.mat-mdc-dialog-content{max-height:524px}}@media (max-width: 600px){.cdk-overlay-pane.ui-dialog-wrapper{max-width:100%!important;min-height:100%;display:flex;justify-content:center}.cdk-overlay-pane.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:100%;max-width:100%;height:100%;display:flex;flex-grow:1;border-radius:0}ui-dialog{height:100%;display:flex;flex-flow:column}.mat-mdc-dialog-content{max-height:unset;display:flex;flex-grow:1;flex-direction:column}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
6733
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DialogComponent, selector: "ui-dialog", inputs: { title: "title", showCloseButton: "showCloseButton", canCloseFn: "canCloseFn", secondaryButtonLabel: "secondaryButtonLabel", primaryButtonLabel: "primaryButtonLabel", primaryButtonIconName: "primaryButtonIconName", secondaryButtonType: "secondaryButtonType", primaryButtonType: "primaryButtonType", primaryButtonDataTestId: "primaryButtonDataTestId", secondaryButtonDataTestId: "secondaryButtonDataTestId", companyColor: "companyColor", applicationTheme: "applicationTheme", disablePrimaryButton: "disablePrimaryButton", disableClose: "disableClose", shouldDisableButtons: "shouldDisableButtons", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", keyboardOpen: "keyboardOpen" }, outputs: { closeEvent: "closeEvent", secondaryButtonClickEvent: "secondaryButtonClickEvent", primaryButtonClickEvent: "primaryButtonClickEvent" }, host: { listeners: { "keydown.esc": "onEsc($event)" }, properties: { "style.--color": "this.companyColor" } }, queries: [{ propertyName: "customHeader", first: true, predicate: ["dialogHeader"], descendants: true }], viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n <div\n mat-dialog-title\n class=\"dialog-title\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n >\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n\n <!-- Default header content -->\n <ng-container *ngIf=\"!hasCustomHeader\">\n <h3 class=\"bold\" id=\"labelledby\">{{ title }}</h3>\n <div *ngIf=\"showCloseButton\">\n <ui-button\n #closeButton\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"(('COMMON.CLOSE') | uiTranslate | async)!\"\n (click)=\"onClose($event)\"\n (buttonClickEvent)=\"dismiss()\"\n id=\"dialog-close-button\"\n ></ui-button>\n </div>\n </ng-container>\n\n <!-- Custom header content projection -->\n <ng-content select=\"[dialogHeader]\"></ng-content>\n </div>\n <mat-dialog-content>\n <ng-content></ng-content>\n </mat-dialog-content>\n <div mat-dialog-actions *ngIf=\"secondaryButtonLabel !== '' || primaryButtonLabel !== ''\">\n <ui-button\n *ngIf=\"!!secondaryButtonLabel\"\n [companyColor]=\"companyColor\"\n [variant]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n [label]=\"secondaryButtonLabel\"\n [attr.data-testid]=\"secondaryButtonDataTestId\"\n (click)=\"onSecondaryButtonClick($event)\"\n ></ui-button>\n <ui-button\n *ngIf=\"!!primaryButtonLabel\"\n iconPosition=\"left\"\n [iconName]=\"primaryButtonIconName ? primaryButtonIconName : undefined\"\n [variant]=\"primaryButtonType\"\n [disabled]=\"disableButtons || disablePrimaryButton\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"onPrimaryButtonClick($event)\"\n [label]=\"primaryButtonLabel\"\n [companyColor]=\"companyColor\"\n [attr.data-testid]=\"primaryButtonDataTestId\"\n (buttonClickEvent)=\"dismiss()\"\n ></ui-button>\n </div>\n\n <!-- This is announcement for screen reader that dialog was closed-->\n <div aria-live=\"assertive\" role=\"alert\" style=\"position: absolute; left: -9999px;\">\n <span *ngIf=\"modalClosed\">{{ 'DIALOG.CLOSED' | uiTranslate | async }}</span>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.ui-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper.small{width:600px}.ui-dialog-wrapper.large{width:956px}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:16px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{padding:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:10px}.ui-dialog-wrapper.dark .dialog-title,.ui-dialog-wrapper.light .dialog-title{height:40px;padding:0;margin-bottom:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-content,.ui-dialog-wrapper.light .mat-mdc-dialog-content{padding:0}.ui-dialog-wrapper.dark .mat-mdc-dialog-actions,.ui-dialog-wrapper.light .mat-mdc-dialog-actions{padding:0;margin-top:32px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000;line-height:20px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container{--mdc-dialog-container-color: #424242}.ui-dialog-wrapper.dark .mat-mdc-dialog-content{color:#fff!important}.ui-dialog-wrapper.dark .dialog-title{--mdc-dialog-subhead-color: #ffffff}.dialog-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0}.dialog-title .close{margin-right:-24px}.dialog-title:before{content:none}.mat-mdc-dialog-actions{display:flex;justify-content:flex-end;column-gap:16px;padding:16px 0 0;margin-bottom:0;min-height:48px}@media (max-width: 1024px){.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:320px;max-width:600px;border-radius:0}.mat-mdc-dialog-content{max-height:524px}}@media (max-width: 600px){.cdk-overlay-pane.ui-dialog-wrapper{max-width:100%!important;min-height:100%;display:flex;justify-content:center}.cdk-overlay-pane.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:100%;max-width:100%;height:100%;display:flex;flex-grow:1;border-radius:0}ui-dialog{height:100%;display:flex;flex-flow:column}.mat-mdc-dialog-content{max-height:unset;display:flex;flex-grow:1;flex-direction:column}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
6736
6734
  }
6737
6735
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DialogComponent, decorators: [{
6738
6736
  type: Component,
6739
- args: [{ selector: 'ui-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n <div\n mat-dialog-title\n class=\"dialog-title\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n >\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n\n <!-- Default header content -->\n <ng-container *ngIf=\"!hasCustomHeader\">\n <h3 class=\"bold\" id=\"labelledby\">{{ title }}</h3>\n <div *ngIf=\"showCloseButton\">\n <ui-button\n #closeButton\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"(('COMMON.CLOSE') | uiTranslate | async)!\"\n (click)=\"onClose($event)\"\n (buttonClickEvent)=\"dismiss()\"\n id=\"dialog-close-button\"\n ></ui-button>\n </div>\n </ng-container>\n\n <!-- Custom header content projection -->\n <ng-content select=\"[dialogHeader]\"></ng-content>\n </div>\n <mat-dialog-content>\n <ng-content></ng-content>\n </mat-dialog-content>\n <div mat-dialog-actions *ngIf=\"secondaryButtonLabel !== '' || primaryButtonLabel !== ''\">\n <ui-button\n [companyColor]=\"companyColor\"\n [variant]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"!!secondaryButtonLabel\"\n [label]=\"secondaryButtonLabel\"\n [attr.data-testid]=\"secondaryButtonDataTestId\"\n (click)=\"onSecondaryButtonClick($event)\"\n ></ui-button>\n <ui-button\n [variant]=\"primaryButtonType\"\n *ngIf=\"!!primaryButtonLabel\"\n [disabled]=\"disableButtons || disablePrimaryButton\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"onPrimaryButtonClick($event)\"\n [label]=\"primaryButtonLabel\"\n [companyColor]=\"companyColor\"\n [attr.data-testid]=\"primaryButtonDataTestId\"\n (buttonClickEvent)=\"dismiss()\"\n ></ui-button>\n </div>\n\n<!-- This is announcement for screen reader that dialog was closed-->\n <div aria-live=\"assertive\" role=\"alert\" style=\"position: absolute; left: -9999px;\">\n <span *ngIf=\"modalClosed\">{{ 'DIALOG.CLOSED' | uiTranslate | async }}</span>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.ui-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper.small{width:600px}.ui-dialog-wrapper.large{width:956px}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:16px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{padding:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:10px}.ui-dialog-wrapper.dark .dialog-title,.ui-dialog-wrapper.light .dialog-title{height:40px;padding:0;margin-bottom:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-content,.ui-dialog-wrapper.light .mat-mdc-dialog-content{padding:0}.ui-dialog-wrapper.dark .mat-mdc-dialog-actions,.ui-dialog-wrapper.light .mat-mdc-dialog-actions{padding:0;margin-top:32px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000;line-height:20px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container{--mdc-dialog-container-color: #424242}.ui-dialog-wrapper.dark .mat-mdc-dialog-content{color:#fff!important}.ui-dialog-wrapper.dark .dialog-title{--mdc-dialog-subhead-color: #ffffff}.dialog-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0}.dialog-title .close{margin-right:-24px}.dialog-title:before{content:none}.mat-mdc-dialog-actions{display:flex;justify-content:flex-end;column-gap:16px;padding:16px 0 0;margin-bottom:0;min-height:48px}@media (max-width: 1024px){.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:320px;max-width:600px;border-radius:0}.mat-mdc-dialog-content{max-height:524px}}@media (max-width: 600px){.cdk-overlay-pane.ui-dialog-wrapper{max-width:100%!important;min-height:100%;display:flex;justify-content:center}.cdk-overlay-pane.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:100%;max-width:100%;height:100%;display:flex;flex-grow:1;border-radius:0}ui-dialog{height:100%;display:flex;flex-flow:column}.mat-mdc-dialog-content{max-height:unset;display:flex;flex-grow:1;flex-direction:column}}\n"] }]
6737
+ args: [{ selector: 'ui-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n <div\n mat-dialog-title\n class=\"dialog-title\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n >\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n\n <!-- Default header content -->\n <ng-container *ngIf=\"!hasCustomHeader\">\n <h3 class=\"bold\" id=\"labelledby\">{{ title }}</h3>\n <div *ngIf=\"showCloseButton\">\n <ui-button\n #closeButton\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"(('COMMON.CLOSE') | uiTranslate | async)!\"\n (click)=\"onClose($event)\"\n (buttonClickEvent)=\"dismiss()\"\n id=\"dialog-close-button\"\n ></ui-button>\n </div>\n </ng-container>\n\n <!-- Custom header content projection -->\n <ng-content select=\"[dialogHeader]\"></ng-content>\n </div>\n <mat-dialog-content>\n <ng-content></ng-content>\n </mat-dialog-content>\n <div mat-dialog-actions *ngIf=\"secondaryButtonLabel !== '' || primaryButtonLabel !== ''\">\n <ui-button\n *ngIf=\"!!secondaryButtonLabel\"\n [companyColor]=\"companyColor\"\n [variant]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n [label]=\"secondaryButtonLabel\"\n [attr.data-testid]=\"secondaryButtonDataTestId\"\n (click)=\"onSecondaryButtonClick($event)\"\n ></ui-button>\n <ui-button\n *ngIf=\"!!primaryButtonLabel\"\n iconPosition=\"left\"\n [iconName]=\"primaryButtonIconName ? primaryButtonIconName : undefined\"\n [variant]=\"primaryButtonType\"\n [disabled]=\"disableButtons || disablePrimaryButton\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"onPrimaryButtonClick($event)\"\n [label]=\"primaryButtonLabel\"\n [companyColor]=\"companyColor\"\n [attr.data-testid]=\"primaryButtonDataTestId\"\n (buttonClickEvent)=\"dismiss()\"\n ></ui-button>\n </div>\n\n <!-- This is announcement for screen reader that dialog was closed-->\n <div aria-live=\"assertive\" role=\"alert\" style=\"position: absolute; left: -9999px;\">\n <span *ngIf=\"modalClosed\">{{ 'DIALOG.CLOSED' | uiTranslate | async }}</span>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.ui-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper.small{width:600px}.ui-dialog-wrapper.large{width:956px}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:16px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{padding:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:10px}.ui-dialog-wrapper.dark .dialog-title,.ui-dialog-wrapper.light .dialog-title{height:40px;padding:0;margin-bottom:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-content,.ui-dialog-wrapper.light .mat-mdc-dialog-content{padding:0}.ui-dialog-wrapper.dark .mat-mdc-dialog-actions,.ui-dialog-wrapper.light .mat-mdc-dialog-actions{padding:0;margin-top:32px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000;line-height:20px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container{--mdc-dialog-container-color: #424242}.ui-dialog-wrapper.dark .mat-mdc-dialog-content{color:#fff!important}.ui-dialog-wrapper.dark .dialog-title{--mdc-dialog-subhead-color: #ffffff}.dialog-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0}.dialog-title .close{margin-right:-24px}.dialog-title:before{content:none}.mat-mdc-dialog-actions{display:flex;justify-content:flex-end;column-gap:16px;padding:16px 0 0;margin-bottom:0;min-height:48px}@media (max-width: 1024px){.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:320px;max-width:600px;border-radius:0}.mat-mdc-dialog-content{max-height:524px}}@media (max-width: 600px){.cdk-overlay-pane.ui-dialog-wrapper{max-width:100%!important;min-height:100%;display:flex;justify-content:center}.cdk-overlay-pane.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:100%;max-width:100%;height:100%;display:flex;flex-grow:1;border-radius:0}ui-dialog{height:100%;display:flex;flex-flow:column}.mat-mdc-dialog-content{max-height:unset;display:flex;flex-grow:1;flex-direction:column}}\n"] }]
6740
6738
  }], ctorParameters: () => [{ type: undefined, decorators: [{
6741
6739
  type: Optional
6742
6740
  }, {
@@ -6755,6 +6753,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
6755
6753
  type: Input
6756
6754
  }], primaryButtonLabel: [{
6757
6755
  type: Input
6756
+ }], primaryButtonIconName: [{
6757
+ type: Input
6758
6758
  }], secondaryButtonType: [{
6759
6759
  type: Input
6760
6760
  }], primaryButtonType: [{
@@ -10545,6 +10545,9 @@ class ConfirmDialogComponent {
10545
10545
  this.showCloseButton = data.showCloseButton ?? false;
10546
10546
  this.showSecondaryButton = data.showSecondaryButton ?? true;
10547
10547
  this.color = data.color ?? null;
10548
+ this.primaryButtonType = data.primaryButtonType ?? 'primary';
10549
+ this.secondaryButtonType = data.secondaryButtonType ?? 'ghost';
10550
+ this.primaryButtonIconName = data.primaryButtonIconName ?? undefined;
10548
10551
  this.primaryButtonDataTestId = data.primaryButtonDataTestId ?? 'confirm-dialog.confirm-button';
10549
10552
  this.secondaryButtonDataTestId = data.secondaryButtonDataTestId ?? 'confirm-dialog.cancel-button';
10550
10553
  if (defaultAppTheme) {
@@ -10552,11 +10555,11 @@ class ConfirmDialogComponent {
10552
10555
  }
10553
10556
  }
10554
10557
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
10555
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ConfirmDialogComponent, selector: "ui-confirm-dialog", inputs: { applicationTheme: "applicationTheme" }, ngImport: i0, template: "<ng-container>\n <ui-dialog\n [title]=\"title ?? ('COMMON.CONFIRM' | uiTranslate | async)!\"\n [primaryButtonLabel]=\"confirmButtonText ?? ('COMMON.YES' | uiTranslate | async)!\"\n [secondaryButtonLabel]=\"\n showSecondaryButton ? cancelButtonText ?? ('COMMON.CANCEL' | uiTranslate | async)! : undefined\n \"\n (primaryButtonClickEvent)=\"dialogRef.close(true)\"\n (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n (closeEvent)=\"dialogRef.close(null)\"\n primaryButtonType=\"primary\"\n secondaryButtonType=\"outlined\"\n [applicationTheme]=\"applicationTheme\"\n [showCloseButton]=\"showCloseButton\"\n [companyColor]=\"color\"\n [primaryButtonDataTestId]=\"primaryButtonDataTestId\"\n [secondaryButtonDataTestId]=\"secondaryButtonDataTestId\"\n >\n <div class=\"message\">{{ confirmMessage }}</div>\n @if (confirmMessageHtml) {\n <div class=\"message\" [innerHTML]=\"confirmMessageHtml\"></div>\n }\n </ui-dialog>\n</ng-container>\n", styles: ["::ng-deep .ui-dialog-wrapper{max-width:600px!important}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "ui-dialog", inputs: ["title", "showCloseButton", "canCloseFn", "secondaryButtonLabel", "primaryButtonLabel", "secondaryButtonType", "primaryButtonType", "primaryButtonDataTestId", "secondaryButtonDataTestId", "companyColor", "applicationTheme", "disablePrimaryButton", "disableClose", "shouldDisableButtons", "ariaLabelledby", "ariaDescribedby", "keyboardOpen"], outputs: ["closeEvent", "secondaryButtonClickEvent", "primaryButtonClickEvent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
10558
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ConfirmDialogComponent, selector: "ui-confirm-dialog", inputs: { applicationTheme: "applicationTheme" }, ngImport: i0, template: "<ng-container>\n <ui-dialog\n [title]=\"title ?? ('COMMON.CONFIRM' | uiTranslate | async)!\"\n [primaryButtonLabel]=\"confirmButtonText ?? ('COMMON.YES' | uiTranslate | async)!\"\n [secondaryButtonLabel]=\"\n showSecondaryButton ? cancelButtonText ?? ('COMMON.CANCEL' | uiTranslate | async)! : undefined\n \"\n (primaryButtonClickEvent)=\"dialogRef.close(true)\"\n (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n (closeEvent)=\"dialogRef.close(null)\"\n [primaryButtonType]=\"primaryButtonType\"\n [primaryButtonIconName]=\"primaryButtonIconName\"\n [secondaryButtonType]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n [showCloseButton]=\"showCloseButton\"\n [companyColor]=\"color\"\n [primaryButtonDataTestId]=\"primaryButtonDataTestId\"\n [secondaryButtonDataTestId]=\"secondaryButtonDataTestId\"\n >\n <div class=\"message\">{{ confirmMessage }}</div>\n @if (confirmMessageHtml) {\n <div class=\"message\" [innerHTML]=\"confirmMessageHtml\"></div>\n }\n </ui-dialog>\n</ng-container>\n", styles: ["::ng-deep .ui-dialog-wrapper{max-width:600px!important}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "ui-dialog", inputs: ["title", "showCloseButton", "canCloseFn", "secondaryButtonLabel", "primaryButtonLabel", "primaryButtonIconName", "secondaryButtonType", "primaryButtonType", "primaryButtonDataTestId", "secondaryButtonDataTestId", "companyColor", "applicationTheme", "disablePrimaryButton", "disableClose", "shouldDisableButtons", "ariaLabelledby", "ariaDescribedby", "keyboardOpen"], outputs: ["closeEvent", "secondaryButtonClickEvent", "primaryButtonClickEvent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
10556
10559
  }
10557
10560
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
10558
10561
  type: Component,
10559
- args: [{ selector: 'ui-confirm-dialog', template: "<ng-container>\n <ui-dialog\n [title]=\"title ?? ('COMMON.CONFIRM' | uiTranslate | async)!\"\n [primaryButtonLabel]=\"confirmButtonText ?? ('COMMON.YES' | uiTranslate | async)!\"\n [secondaryButtonLabel]=\"\n showSecondaryButton ? cancelButtonText ?? ('COMMON.CANCEL' | uiTranslate | async)! : undefined\n \"\n (primaryButtonClickEvent)=\"dialogRef.close(true)\"\n (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n (closeEvent)=\"dialogRef.close(null)\"\n primaryButtonType=\"primary\"\n secondaryButtonType=\"outlined\"\n [applicationTheme]=\"applicationTheme\"\n [showCloseButton]=\"showCloseButton\"\n [companyColor]=\"color\"\n [primaryButtonDataTestId]=\"primaryButtonDataTestId\"\n [secondaryButtonDataTestId]=\"secondaryButtonDataTestId\"\n >\n <div class=\"message\">{{ confirmMessage }}</div>\n @if (confirmMessageHtml) {\n <div class=\"message\" [innerHTML]=\"confirmMessageHtml\"></div>\n }\n </ui-dialog>\n</ng-container>\n", styles: ["::ng-deep .ui-dialog-wrapper{max-width:600px!important}\n"] }]
10562
+ args: [{ selector: 'ui-confirm-dialog', template: "<ng-container>\n <ui-dialog\n [title]=\"title ?? ('COMMON.CONFIRM' | uiTranslate | async)!\"\n [primaryButtonLabel]=\"confirmButtonText ?? ('COMMON.YES' | uiTranslate | async)!\"\n [secondaryButtonLabel]=\"\n showSecondaryButton ? cancelButtonText ?? ('COMMON.CANCEL' | uiTranslate | async)! : undefined\n \"\n (primaryButtonClickEvent)=\"dialogRef.close(true)\"\n (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n (closeEvent)=\"dialogRef.close(null)\"\n [primaryButtonType]=\"primaryButtonType\"\n [primaryButtonIconName]=\"primaryButtonIconName\"\n [secondaryButtonType]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n [showCloseButton]=\"showCloseButton\"\n [companyColor]=\"color\"\n [primaryButtonDataTestId]=\"primaryButtonDataTestId\"\n [secondaryButtonDataTestId]=\"secondaryButtonDataTestId\"\n >\n <div class=\"message\">{{ confirmMessage }}</div>\n @if (confirmMessageHtml) {\n <div class=\"message\" [innerHTML]=\"confirmMessageHtml\"></div>\n }\n </ui-dialog>\n</ng-container>\n", styles: ["::ng-deep .ui-dialog-wrapper{max-width:600px!important}\n"] }]
10560
10563
  }], ctorParameters: () => [{ type: undefined, decorators: [{
10561
10564
  type: Optional
10562
10565
  }, {
@@ -11195,6 +11198,12 @@ class ScaleComponent {
11195
11198
  this.MIN_LENGTH = 1;
11196
11199
  this.DEFAULT_LENGTH = 5;
11197
11200
  this.items = [];
11201
+ /**
11202
+ * The value representing the selected item of the scale.
11203
+ * @type {number}
11204
+ * @memberof ScaleComponent
11205
+ */
11206
+ this.selectedIndex = null;
11198
11207
  /**
11199
11208
  *
11200
11209
  * Defines the application theme
@@ -11273,12 +11282,18 @@ class ScaleComponent {
11273
11282
  styles['--selected-color'] = this.companyColor;
11274
11283
  this.styles.set(styles);
11275
11284
  }
11285
+ onFocus(item) {
11286
+ // If no item is selected when the component receives focus, select the first item
11287
+ if (this.selectedIndex === null && item === 0) {
11288
+ this.select(0);
11289
+ }
11290
+ }
11276
11291
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScaleComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
11277
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ScaleComponent, selector: "ui-scale", inputs: { selectedIndex: "selectedIndex", length: "length", applicationTheme: "applicationTheme", companyColor: "companyColor" }, outputs: { selectedIndexChange: "selectedIndexChange" }, viewQueries: [{ propertyName: "scaleItems", predicate: ["scaleItem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"scale\" [ngStyle]=\"styles()\"\n [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\">\n <div class=\"scale-item\" *ngFor=\"let item of items\" (click)=\"select(item)\"\n #scaleItem\n tabindex=\"-1\"\n role=\"radio\"\n (keydown)=\"onKeyDown($event, item)\"\n [class.scale-item-focus-prev]=\"selectedIndex && selectedIndex > 0 ? item === (selectedIndex - 1) : false\"\n [attr.tabindex]=\"item === selectedIndex ? '0' : '-1'\"\n [attr.aria-checked]=\"item === selectedIndex? 'true' : 'false'\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\">\n {{ item + 1 }}\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center}.scale-item{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;width:72px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color:var(--hover-color)}.scale-item:first-child{border-radius:10px 0 0 10px;border-left:1px solid #919191}.scale-item:last-child{border-radius:0 10px 10px 0}.scale-item-selected{background-color:var(--selected-color);color:#fff;font-weight:700}@keyframes focus-ring-animation{0%{box-shadow:0 0 0 4px #242424}to{box-shadow:0 0 0 2px #242424}}.scale-item.scale-item-focus-prev{border-right:none}.scale-item:focus-visible{outline:none;border-radius:8px;border:2px solid #ffffff;box-shadow:0 0 0 2px #242424;z-index:1;animation:focus-ring-animation .4s forwards}.scale-classic .scale-item{border-color:#e0e0e0;font-family:Open Sans,serif}.scale-classic .scale-item:first-child{border-radius:4px 0 0 4px;border-left:1px solid #E0E0E0}.scale-classic .scale-item:last-child{border-radius:0 4px 4px 0}.scale-classic .scale-item:not(.scale-item-selected){color:#242424}.scale-classic .scale-item:hover:not(.scale-item-selected){background-color:#b5ddd5}.scale-classic .scale-item-selected{background-color:#46a997}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
11292
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ScaleComponent, selector: "ui-scale", inputs: { selectedIndex: "selectedIndex", length: "length", applicationTheme: "applicationTheme", companyColor: "companyColor" }, outputs: { selectedIndexChange: "selectedIndexChange" }, viewQueries: [{ propertyName: "scaleItems", predicate: ["scaleItem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"scale\" [ngStyle]=\"styles()\"\n [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\">\n <div class=\"scale-item\" *ngFor=\"let item of items\" (click)=\"select(item)\"\n #scaleItem\n role=\"radio\"\n (keydown)=\"onKeyDown($event, item)\"\n (focus)=\"onFocus(item)\"\n [class.scale-item-focus-prev]=\"selectedIndex && selectedIndex > 0 ? item === (selectedIndex - 1) : false\"\n [attr.tabindex]=\"selectedIndex === null ? (item === 0 ? '0' : '-1') : (item === selectedIndex ? '0' : '-1')\"\n [attr.aria-checked]=\"selectedIndex === null ? (item === 0 ? 'true' : 'false') : (item === selectedIndex ? 'true' : 'false')\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\">\n {{ item + 1 }}\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center}.scale-item{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;width:72px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color:var(--hover-color)}.scale-item:first-child{border-radius:10px 0 0 10px;border-left:1px solid #919191}.scale-item:last-child{border-radius:0 10px 10px 0}.scale-item-selected{background-color:var(--selected-color);color:#fff;font-weight:700}@keyframes focus-ring-animation{0%{box-shadow:0 0 0 4px #242424}to{box-shadow:0 0 0 2px #242424}}.scale-item.scale-item-focus-prev{border-right:none}.scale-item:focus-visible{outline:none;border-radius:8px;border:2px solid #ffffff;box-shadow:0 0 0 2px #242424;z-index:1;animation:focus-ring-animation .4s forwards}.scale-classic .scale-item{border-color:#e0e0e0;font-family:Open Sans,serif}.scale-classic .scale-item:first-child{border-radius:4px 0 0 4px;border-left:1px solid #E0E0E0}.scale-classic .scale-item:last-child{border-radius:0 4px 4px 0}.scale-classic .scale-item:not(.scale-item-selected){color:#242424}.scale-classic .scale-item:hover:not(.scale-item-selected){background-color:#b5ddd5}.scale-classic .scale-item-selected{background-color:#46a997}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
11278
11293
  }
11279
11294
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScaleComponent, decorators: [{
11280
11295
  type: Component,
11281
- args: [{ selector: 'ui-scale', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scale\" [ngStyle]=\"styles()\"\n [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\">\n <div class=\"scale-item\" *ngFor=\"let item of items\" (click)=\"select(item)\"\n #scaleItem\n tabindex=\"-1\"\n role=\"radio\"\n (keydown)=\"onKeyDown($event, item)\"\n [class.scale-item-focus-prev]=\"selectedIndex && selectedIndex > 0 ? item === (selectedIndex - 1) : false\"\n [attr.tabindex]=\"item === selectedIndex ? '0' : '-1'\"\n [attr.aria-checked]=\"item === selectedIndex? 'true' : 'false'\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\">\n {{ item + 1 }}\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center}.scale-item{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;width:72px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color:var(--hover-color)}.scale-item:first-child{border-radius:10px 0 0 10px;border-left:1px solid #919191}.scale-item:last-child{border-radius:0 10px 10px 0}.scale-item-selected{background-color:var(--selected-color);color:#fff;font-weight:700}@keyframes focus-ring-animation{0%{box-shadow:0 0 0 4px #242424}to{box-shadow:0 0 0 2px #242424}}.scale-item.scale-item-focus-prev{border-right:none}.scale-item:focus-visible{outline:none;border-radius:8px;border:2px solid #ffffff;box-shadow:0 0 0 2px #242424;z-index:1;animation:focus-ring-animation .4s forwards}.scale-classic .scale-item{border-color:#e0e0e0;font-family:Open Sans,serif}.scale-classic .scale-item:first-child{border-radius:4px 0 0 4px;border-left:1px solid #E0E0E0}.scale-classic .scale-item:last-child{border-radius:0 4px 4px 0}.scale-classic .scale-item:not(.scale-item-selected){color:#242424}.scale-classic .scale-item:hover:not(.scale-item-selected){background-color:#b5ddd5}.scale-classic .scale-item-selected{background-color:#46a997}\n"] }]
11296
+ args: [{ selector: 'ui-scale', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scale\" [ngStyle]=\"styles()\"\n [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\">\n <div class=\"scale-item\" *ngFor=\"let item of items\" (click)=\"select(item)\"\n #scaleItem\n role=\"radio\"\n (keydown)=\"onKeyDown($event, item)\"\n (focus)=\"onFocus(item)\"\n [class.scale-item-focus-prev]=\"selectedIndex && selectedIndex > 0 ? item === (selectedIndex - 1) : false\"\n [attr.tabindex]=\"selectedIndex === null ? (item === 0 ? '0' : '-1') : (item === selectedIndex ? '0' : '-1')\"\n [attr.aria-checked]=\"selectedIndex === null ? (item === 0 ? 'true' : 'false') : (item === selectedIndex ? 'true' : 'false')\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\">\n {{ item + 1 }}\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center}.scale-item{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;width:72px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color:var(--hover-color)}.scale-item:first-child{border-radius:10px 0 0 10px;border-left:1px solid #919191}.scale-item:last-child{border-radius:0 10px 10px 0}.scale-item-selected{background-color:var(--selected-color);color:#fff;font-weight:700}@keyframes focus-ring-animation{0%{box-shadow:0 0 0 4px #242424}to{box-shadow:0 0 0 2px #242424}}.scale-item.scale-item-focus-prev{border-right:none}.scale-item:focus-visible{outline:none;border-radius:8px;border:2px solid #ffffff;box-shadow:0 0 0 2px #242424;z-index:1;animation:focus-ring-animation .4s forwards}.scale-classic .scale-item{border-color:#e0e0e0;font-family:Open Sans,serif}.scale-classic .scale-item:first-child{border-radius:4px 0 0 4px;border-left:1px solid #E0E0E0}.scale-classic .scale-item:last-child{border-radius:0 4px 4px 0}.scale-classic .scale-item:not(.scale-item-selected){color:#242424}.scale-classic .scale-item:hover:not(.scale-item-selected){background-color:#b5ddd5}.scale-classic .scale-item-selected{background-color:#46a997}\n"] }]
11282
11297
  }], ctorParameters: () => [{ type: undefined, decorators: [{
11283
11298
  type: Optional
11284
11299
  }, {