npm - @testgorilla/tgo-ui - Versions diffs - 11.9.0 → 11.11.0 - Mend

@testgorilla/tgo-ui 11.9.0 → 11.11.0

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.

Files changed (149) hide show

package/fesm2022/testgorilla-tgo-ui-components-checkbox.mjs CHANGED Viewed

@@ -73,6 +73,7 @@ class CheckboxComponent {
          * @memberof CheckboxComponent
          */
         this.applicationTheme = 'light';
+        this.testId = null;
         /**
          * A string representing the ARIA requirement for accessibility.
          * This attribute is used to indicate whether an input field is required for form submission.
@@ -153,6 +154,7 @@ class CheckboxComponent {
         this.onTouch = () => { };
         this.showTooltip = false;
         this.origin = null;
+        this.appliedTestId = null;
         this.defaultAppTheme = inject('CANOPYUI_DEFAULT_APPLICATION_THEME', {
             optional: true,
         });
@@ -170,6 +172,7 @@ class CheckboxComponent {
     }
     ngOnChanges() {
         this.setCompanyColor();
+        this.applyTestId();
     }
     /**
      * Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors
@@ -186,14 +189,32 @@ class CheckboxComponent {
         checkboxNativeInput.setAttribute('role', 'checkbox');
         checkboxNativeInput.setAttribute('aria-checked', Boolean(this.checked).toString());
         checkboxNativeInput.setAttribute('aria-disabled', Boolean(this.disabled).toString());
-        checkboxNativeInput.setAttribute('aria-label', this.label);
+        // Falling back to the visible label keeps label-less checkboxes from losing their accessible name.
+        checkboxNativeInput.setAttribute('aria-label', this.ariaLabel || this.label);
         checkboxNativeInput.setAttribute('aria-required', this.ariaRequired.toString());
+        this.applyTestId();
         this.focusMonitor
             .monitor(this.checkboxElement._inputElement.nativeElement)
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(origin => this.ngZone.run(this.focusAction.bind(this, origin)));
         /* eslint-enable no-underscore-dangle */
     }
+    // MatCheckbox takes no attribute passthrough, so the id is set on the native input directly.
+    applyTestId() {
+        if (!this.checkboxElement || this.testId === this.appliedTestId) {
+            return;
+        }
+        /* eslint-disable no-underscore-dangle -- MatCheckbox's internal _inputElement is the only handle to the native input */
+        const checkboxNativeInput = this.checkboxElement._inputElement.nativeElement;
+        /* eslint-enable no-underscore-dangle */
+        if (this.testId) {
+            checkboxNativeInput.setAttribute('data-testid', this.testId);
+        }
+        else {
+            checkboxNativeInput.removeAttribute('data-testid');
+        }
+        this.appliedTestId = this.testId;
+    }
     focusAction(origin) {
         this.origin = origin;
         this.cdr.markForCheck();
@@ -270,7 +291,7 @@ class CheckboxComponent {
         this.checkboxElement.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: CheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { disabled: "disabled", checked: "checked", indeterminate: "indeterminate", companyColor: "companyColor", name: "name", label: "label", multiple: "multiple", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", hasError: "hasError", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", truncateText: "truncateText", alignment: "alignment", tabIndex: "tabIndex" }, outputs: { changed: "changed" }, host: { listeners: { "focus": "checkboxElement.focus()" }, properties: { "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.aria-required": "null", "style.--color": "this.companyColor" } }, viewQueries: [{ propertyName: "tooltipElement", first: true, predicate: ["tooltip"], descendants: true }, { propertyName: "checkboxElement", first: true, predicate: ["checkbox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #checkboxContainer\n  tabindex=\"0\"\n  [class]=\"multiple ? 'checkbox-container' : 'checkbox'\"\n  [ngClass]=\"classMultiple\"\n  [attr.alignment]=\"alignment\"\n  [attr.truncate-text]=\"truncateText\"\n  [attr.theme]=\"applicationTheme\"\n  [attr.hasError]=\"hasError\"\n  (keydown.enter)=\"toggleChecked(); checkboxContainer.focus()\"\n  (keydown.space)=\"toggleChecked(); checkboxContainer.focus()\"\n>\n  <mat-checkbox\n    #checkbox\n    (mouseleave)=\"checkbox.disableRipple = true\"\n    (mouseenter)=\"checkbox.disableRipple = false\"\n    [indeterminate]=\"indeterminate\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [tabIndex]=\"tabIndex\"\n    [name]=\"name\"\n    [ngClass]=\"[checkbox.disableRipple ? 'disable-ripple' : '', origin ? 'cdk-' + origin + '-focused' : '']\"\n    [aria-label]=\"ariaLabel\"\n    [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n    [aria-describedby]=\"ariaDescribedby || 'ariaDescribedby'\"\n    (click)=\"toggleChecked()\"\n    (keydown.enter)=\"$event.preventDefault()\"\n    (keydown.space)=\"$event.preventDefault()\"\n    class=\"checkbox\"\n  >\n    @if (label) {\n      <span\n        #tooltip=\"matTooltip\"\n        class=\"label\"\n        uiEllipseText\n        (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n        [matTooltip]=\"showTooltip && truncateText ? label : ''\"\n        [matTooltipClass]=\"applicationTheme\"\n      >\n        {{ label }}\n      </span>\n    }\n    <ng-content select=\"[checkbox-label]\"></ng-content>\n  </mat-checkbox>\n\n  @if (ngControl?.errors | hasValidationError) {\n    <mat-hint class=\"error\">\n      @if (ngControl && !hideBuiltInErrors) {\n        <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n      }\n    </mat-hint>\n  }\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}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff!important}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__ripple{background-color:var(--color)}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mdc-checkbox__native-control:indeterminate~.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888;--color: $tgo-dark !important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mat-internal-form-field .mdc-checkbox{opacity:.5}.checkbox,.checkbox-container{--border-width-default-state: 4px;--border-width-animation-state: 6px;width:100%}.checkbox[alignment=top] ::ng-deep .mdc-form-field,.checkbox[alignment=top] ::ng-deep .mat-internal-form-field,.checkbox-container[alignment=top] ::ng-deep .mdc-form-field,.checkbox-container[alignment=top] ::ng-deep .mat-internal-form-field{align-items:start}.checkbox[alignment=top] .label,.checkbox-container[alignment=top] .label{margin-top:10px}.checkbox[truncate-text=true] .label,.checkbox[truncate-text=true] ::ng-deep label,.checkbox-container[truncate-text=true] .label,.checkbox-container[truncate-text=true] ::ng-deep label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes focus-ring-animation{0%{outline-width:var(--border-width-animation-state)}to{outline-width:var(--border-width-default-state)}}.checkbox .cdk-keyboard-focused,.checkbox-container .cdk-keyboard-focused{outline:none}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__ripple,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__ripple{display:none}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background{outline:3px solid #242424;animation:focus-ring-animation .4s forwards}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background:after,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background:after{content:\"\";position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);top:-1px;left:-1px;outline:2px solid #ffffff;border-radius:4px}.checkbox[hasError=true],.checkbox-container[hasError=true]{--border-width-default-state: 6px;--border-width-animation-state: 8px}.checkbox[hasError=true]:focus-visible ::ng-deep .mdc-checkbox__background:after,.checkbox-container[hasError=true]:focus-visible ::ng-deep .mdc-checkbox__background:after{width:calc(100% + 4px);height:calc(100% + 4px);top:-2px;left:-2px}[theme=dark],[theme=light],.dark,.light{--mdc-checkbox-unselected-icon-color: #242424 !important;--mat-checkbox-unselected-icon-color: #242424 !important;--mat-checkbox-unselected-hover-icon-color: #242424 !important;--mat-checkbox-unselected-focus-icon-color: #242424 !important}[theme=dark] .mat-mdc-checkbox,[theme=light] .mat-mdc-checkbox,.dark .mat-mdc-checkbox,.light .mat-mdc-checkbox{width:100%}[theme=dark] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,[theme=light] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.dark .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.light .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple{display:none}[theme=dark] ::ng-deep .mdc-form-field,[theme=dark] ::ng-deep .mat-internal-form-field,[theme=light] ::ng-deep .mdc-form-field,[theme=light] ::ng-deep .mat-internal-form-field,.dark ::ng-deep .mdc-form-field,.dark ::ng-deep .mat-internal-form-field,.light ::ng-deep .mdc-form-field,.light ::ng-deep .mat-internal-form-field{width:100%}[theme=dark] ::ng-deep .mdc-checkbox__background,[theme=light] ::ng-deep .mdc-checkbox__background,.dark ::ng-deep .mdc-checkbox__background,.light ::ng-deep .mdc-checkbox__background{border-radius:4px;transform:scale(.9);background:#fff!important;border-width:1px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mat-internal-form-field .mdc-checkbox,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mat-internal-form-field .mdc-checkbox,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mat-internal-form-field .mdc-checkbox,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mat-internal-form-field .mdc-checkbox{opacity:1!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#e9e9e9!important;border-color:#919191!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#919191;width:8px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg{color:#919191!important}[theme=dark] ::ng-deep .mdc-checkbox__checkmark,[theme=light] ::ng-deep .mdc-checkbox__checkmark,.dark ::ng-deep .mdc-checkbox__checkmark,.light ::ng-deep .mdc-checkbox__checkmark{width:12px;height:12px;left:calc(50% - 6px);top:calc(50% - 6px)}[theme=dark] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark{width:12px}::ng-deep .mdc-checkbox__ripple{background:var(--color)!important}::ng-deep .mat-mdc-checkbox .mdc-form-field .mdc-label,::ng-deep .mat-mdc-checkbox .mat-internal-form-field .mdc-label{padding-left:0}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-checked ::ng-deep .mdc-form-field,.multiple-checked ::ng-deep .mat-internal-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-checked[theme=classic] .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background{border:1px solid #ffffff!important;border-color:#fff!important}.multiple-checked ::ng-deep label{color:#fff}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#f4f4f4;border-radius:10px;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-unchecked{border:1px solid #e0e0e0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-unchecked ::ng-deep .mdc-form-field,.multiple-unchecked ::ng-deep .mat-internal-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #e0e0e0}.multiple-unchecked ::ng-deep .mdc-checkbox__background{border:1px solid #000000}.multiple-unchecked ::ng-deep .mdc-checkbox__native-control:not([disabled]):focus~.mdc-checkbox__ripple{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff;border-radius:10px}.multiple-unchecked[theme=dark][hasError=false] ::ng-deep .mdc-checkbox__background,.multiple-unchecked[theme=light][hasError=false] ::ng-deep .mdc-checkbox__background{border:1px solid #242424!important}.multiple-unchecked[theme=dark][hasError=false]:hover,.multiple-unchecked[theme=light][hasError=false]:hover{outline:1px solid #242424;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff}.multiple-unchecked[hasError=true] ::ng-deep .mdc-checkbox__background{border-color:#e02800}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}*[hasError=true]{--mdc-checkbox-unselected-icon-color: #e02800 !important;--mdc-checkbox-unselected-hover-icon-color: #e02800 !important;--mdc-checkbox-unselected-focus-icon-color: #e02800 !important;--mat-checkbox-unselected-icon-color: #e02800 !important;--mat-checkbox-unselected-hover-icon-color: #e02800 !important;--mat-checkbox-unselected-focus-icon-color: #e02800 !important}*[hasError=true] ::ng-deep .mdc-checkbox__background{border-width:2px!important}.checkbox-container{cursor:pointer}.checkbox-container .label{-webkit-user-select:none;user-select:none}.checkbox .label{display:block;width:100%;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: ValidationErrorModule }, { kind: "component", type: i1.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "customErrors"] }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: CheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { disabled: "disabled", checked: "checked", indeterminate: "indeterminate", companyColor: "companyColor", name: "name", label: "label", multiple: "multiple", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", testId: "testId", ariaRequired: "ariaRequired", hasError: "hasError", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", truncateText: "truncateText", alignment: "alignment", tabIndex: "tabIndex" }, outputs: { changed: "changed" }, host: { listeners: { "focus": "checkboxElement.focus()" }, properties: { "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.aria-required": "null", "style.--color": "this.companyColor" } }, viewQueries: [{ propertyName: "tooltipElement", first: true, predicate: ["tooltip"], descendants: true }, { propertyName: "checkboxElement", first: true, predicate: ["checkbox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #checkboxContainer\n  tabindex=\"0\"\n  [class]=\"multiple ? 'checkbox-container' : 'checkbox'\"\n  [ngClass]=\"classMultiple\"\n  [attr.alignment]=\"alignment\"\n  [attr.truncate-text]=\"truncateText\"\n  [attr.theme]=\"applicationTheme\"\n  [attr.hasError]=\"hasError\"\n  (keydown.enter)=\"toggleChecked(); checkboxContainer.focus()\"\n  (keydown.space)=\"toggleChecked(); checkboxContainer.focus()\"\n>\n  <mat-checkbox\n    #checkbox\n    (mouseleave)=\"checkbox.disableRipple = true\"\n    (mouseenter)=\"checkbox.disableRipple = false\"\n    [indeterminate]=\"indeterminate\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [tabIndex]=\"tabIndex\"\n    [name]=\"name\"\n    [ngClass]=\"[checkbox.disableRipple ? 'disable-ripple' : '', origin ? 'cdk-' + origin + '-focused' : '']\"\n    [aria-label]=\"ariaLabel || label\"\n    [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n    [aria-describedby]=\"ariaDescribedby || 'ariaDescribedby'\"\n    (click)=\"toggleChecked()\"\n    (keydown.enter)=\"$event.preventDefault()\"\n    (keydown.space)=\"$event.preventDefault()\"\n    class=\"checkbox\"\n  >\n    @if (label) {\n      <span\n        #tooltip=\"matTooltip\"\n        class=\"label\"\n        uiEllipseText\n        (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n        [matTooltip]=\"showTooltip && truncateText ? label : ''\"\n        [matTooltipClass]=\"applicationTheme\"\n      >\n        {{ label }}\n      </span>\n    }\n    <ng-content select=\"[checkbox-label]\"></ng-content>\n  </mat-checkbox>\n\n  @if (ngControl?.errors | hasValidationError) {\n    <mat-hint class=\"error\">\n      @if (ngControl && !hideBuiltInErrors) {\n        <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n      }\n    </mat-hint>\n  }\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}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff!important}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__ripple{background-color:var(--color)}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mdc-checkbox__native-control:indeterminate~.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888;--color: $tgo-dark !important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mat-internal-form-field .mdc-checkbox{opacity:.5}.checkbox,.checkbox-container{--border-width-default-state: 4px;--border-width-animation-state: 6px;width:100%}.checkbox[alignment=top] ::ng-deep .mdc-form-field,.checkbox[alignment=top] ::ng-deep .mat-internal-form-field,.checkbox-container[alignment=top] ::ng-deep .mdc-form-field,.checkbox-container[alignment=top] ::ng-deep .mat-internal-form-field{align-items:start}.checkbox[alignment=top] .label,.checkbox-container[alignment=top] .label{margin-top:10px}.checkbox[truncate-text=true] .label,.checkbox[truncate-text=true] ::ng-deep label,.checkbox-container[truncate-text=true] .label,.checkbox-container[truncate-text=true] ::ng-deep label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes focus-ring-animation{0%{outline-width:var(--border-width-animation-state)}to{outline-width:var(--border-width-default-state)}}.checkbox .cdk-keyboard-focused,.checkbox-container .cdk-keyboard-focused{outline:none}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__ripple,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__ripple{display:none}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background{outline:3px solid #242424;animation:focus-ring-animation .4s forwards}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background:after,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background:after{content:\"\";position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);top:-1px;left:-1px;outline:2px solid #ffffff;border-radius:4px}.checkbox[hasError=true],.checkbox-container[hasError=true]{--border-width-default-state: 6px;--border-width-animation-state: 8px}.checkbox[hasError=true]:focus-visible ::ng-deep .mdc-checkbox__background:after,.checkbox-container[hasError=true]:focus-visible ::ng-deep .mdc-checkbox__background:after{width:calc(100% + 4px);height:calc(100% + 4px);top:-2px;left:-2px}[theme=dark],[theme=light],.dark,.light{--mdc-checkbox-unselected-icon-color: #242424 !important;--mat-checkbox-unselected-icon-color: #242424 !important;--mat-checkbox-unselected-hover-icon-color: #242424 !important;--mat-checkbox-unselected-focus-icon-color: #242424 !important}[theme=dark] .mat-mdc-checkbox,[theme=light] .mat-mdc-checkbox,.dark .mat-mdc-checkbox,.light .mat-mdc-checkbox{width:100%}[theme=dark] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,[theme=light] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.dark .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.light .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple{display:none}[theme=dark] ::ng-deep .mdc-form-field,[theme=dark] ::ng-deep .mat-internal-form-field,[theme=light] ::ng-deep .mdc-form-field,[theme=light] ::ng-deep .mat-internal-form-field,.dark ::ng-deep .mdc-form-field,.dark ::ng-deep .mat-internal-form-field,.light ::ng-deep .mdc-form-field,.light ::ng-deep .mat-internal-form-field{width:100%}[theme=dark] ::ng-deep .mdc-checkbox__background,[theme=light] ::ng-deep .mdc-checkbox__background,.dark ::ng-deep .mdc-checkbox__background,.light ::ng-deep .mdc-checkbox__background{border-radius:4px;transform:scale(.9);background:#fff!important;border-width:1px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mat-internal-form-field .mdc-checkbox,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mat-internal-form-field .mdc-checkbox,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mat-internal-form-field .mdc-checkbox,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mat-internal-form-field .mdc-checkbox{opacity:1!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#e9e9e9!important;border-color:#919191!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#919191;width:8px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg{color:#919191!important}[theme=dark] ::ng-deep .mdc-checkbox__checkmark,[theme=light] ::ng-deep .mdc-checkbox__checkmark,.dark ::ng-deep .mdc-checkbox__checkmark,.light ::ng-deep .mdc-checkbox__checkmark{width:12px;height:12px;left:calc(50% - 6px);top:calc(50% - 6px)}[theme=dark] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark{width:12px}::ng-deep .mdc-checkbox__ripple{background:var(--color)!important}::ng-deep .mat-mdc-checkbox .mdc-form-field .mdc-label,::ng-deep .mat-mdc-checkbox .mat-internal-form-field .mdc-label{padding-left:0}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-checked ::ng-deep .mdc-form-field,.multiple-checked ::ng-deep .mat-internal-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-checked[theme=classic] .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background{border:1px solid #ffffff!important;border-color:#fff!important}.multiple-checked ::ng-deep label{color:#fff}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#f4f4f4;border-radius:10px;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-unchecked{border:1px solid #e0e0e0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-unchecked ::ng-deep .mdc-form-field,.multiple-unchecked ::ng-deep .mat-internal-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #e0e0e0}.multiple-unchecked ::ng-deep .mdc-checkbox__background{border:1px solid #000000}.multiple-unchecked ::ng-deep .mdc-checkbox__native-control:not([disabled]):focus~.mdc-checkbox__ripple{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff;border-radius:10px}.multiple-unchecked[theme=dark][hasError=false] ::ng-deep .mdc-checkbox__background,.multiple-unchecked[theme=light][hasError=false] ::ng-deep .mdc-checkbox__background{border:1px solid #242424!important}.multiple-unchecked[theme=dark][hasError=false]:hover,.multiple-unchecked[theme=light][hasError=false]:hover{outline:1px solid #242424;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff}.multiple-unchecked[hasError=true] ::ng-deep .mdc-checkbox__background{border-color:#e02800}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}*[hasError=true]{--mdc-checkbox-unselected-icon-color: #e02800 !important;--mdc-checkbox-unselected-hover-icon-color: #e02800 !important;--mdc-checkbox-unselected-focus-icon-color: #e02800 !important;--mat-checkbox-unselected-icon-color: #e02800 !important;--mat-checkbox-unselected-hover-icon-color: #e02800 !important;--mat-checkbox-unselected-focus-icon-color: #e02800 !important}*[hasError=true] ::ng-deep .mdc-checkbox__background{border-width:2px!important}.checkbox-container{cursor:pointer}.checkbox-container .label{-webkit-user-select:none;user-select:none}.checkbox .label{display:block;width:100%;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: ValidationErrorModule }, { kind: "component", type: i1.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "customErrors"] }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -293,7 +314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         MatHint,
                         ValidationErrorModule,
                         HasValidationErrorPipe,
-                    ], template: "<div\n  #checkboxContainer\n  tabindex=\"0\"\n  [class]=\"multiple ? 'checkbox-container' : 'checkbox'\"\n  [ngClass]=\"classMultiple\"\n  [attr.alignment]=\"alignment\"\n  [attr.truncate-text]=\"truncateText\"\n  [attr.theme]=\"applicationTheme\"\n  [attr.hasError]=\"hasError\"\n  (keydown.enter)=\"toggleChecked(); checkboxContainer.focus()\"\n  (keydown.space)=\"toggleChecked(); checkboxContainer.focus()\"\n>\n  <mat-checkbox\n    #checkbox\n    (mouseleave)=\"checkbox.disableRipple = true\"\n    (mouseenter)=\"checkbox.disableRipple = false\"\n    [indeterminate]=\"indeterminate\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [tabIndex]=\"tabIndex\"\n    [name]=\"name\"\n    [ngClass]=\"[checkbox.disableRipple ? 'disable-ripple' : '', origin ? 'cdk-' + origin + '-focused' : '']\"\n    [aria-label]=\"ariaLabel\"\n    [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n    [aria-describedby]=\"ariaDescribedby || 'ariaDescribedby'\"\n    (click)=\"toggleChecked()\"\n    (keydown.enter)=\"$event.preventDefault()\"\n    (keydown.space)=\"$event.preventDefault()\"\n    class=\"checkbox\"\n  >\n    @if (label) {\n      <span\n        #tooltip=\"matTooltip\"\n        class=\"label\"\n        uiEllipseText\n        (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n        [matTooltip]=\"showTooltip && truncateText ? label : ''\"\n        [matTooltipClass]=\"applicationTheme\"\n      >\n        {{ label }}\n      </span>\n    }\n    <ng-content select=\"[checkbox-label]\"></ng-content>\n  </mat-checkbox>\n\n  @if (ngControl?.errors | hasValidationError) {\n    <mat-hint class=\"error\">\n      @if (ngControl && !hideBuiltInErrors) {\n        <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n      }\n    </mat-hint>\n  }\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}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff!important}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__ripple{background-color:var(--color)}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mdc-checkbox__native-control:indeterminate~.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888;--color: $tgo-dark !important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mat-internal-form-field .mdc-checkbox{opacity:.5}.checkbox,.checkbox-container{--border-width-default-state: 4px;--border-width-animation-state: 6px;width:100%}.checkbox[alignment=top] ::ng-deep .mdc-form-field,.checkbox[alignment=top] ::ng-deep .mat-internal-form-field,.checkbox-container[alignment=top] ::ng-deep .mdc-form-field,.checkbox-container[alignment=top] ::ng-deep .mat-internal-form-field{align-items:start}.checkbox[alignment=top] .label,.checkbox-container[alignment=top] .label{margin-top:10px}.checkbox[truncate-text=true] .label,.checkbox[truncate-text=true] ::ng-deep label,.checkbox-container[truncate-text=true] .label,.checkbox-container[truncate-text=true] ::ng-deep label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes focus-ring-animation{0%{outline-width:var(--border-width-animation-state)}to{outline-width:var(--border-width-default-state)}}.checkbox .cdk-keyboard-focused,.checkbox-container .cdk-keyboard-focused{outline:none}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__ripple,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__ripple{display:none}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background{outline:3px solid #242424;animation:focus-ring-animation .4s forwards}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background:after,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background:after{content:\"\";position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);top:-1px;left:-1px;outline:2px solid #ffffff;border-radius:4px}.checkbox[hasError=true],.checkbox-container[hasError=true]{--border-width-default-state: 6px;--border-width-animation-state: 8px}.checkbox[hasError=true]:focus-visible ::ng-deep .mdc-checkbox__background:after,.checkbox-container[hasError=true]:focus-visible ::ng-deep .mdc-checkbox__background:after{width:calc(100% + 4px);height:calc(100% + 4px);top:-2px;left:-2px}[theme=dark],[theme=light],.dark,.light{--mdc-checkbox-unselected-icon-color: #242424 !important;--mat-checkbox-unselected-icon-color: #242424 !important;--mat-checkbox-unselected-hover-icon-color: #242424 !important;--mat-checkbox-unselected-focus-icon-color: #242424 !important}[theme=dark] .mat-mdc-checkbox,[theme=light] .mat-mdc-checkbox,.dark .mat-mdc-checkbox,.light .mat-mdc-checkbox{width:100%}[theme=dark] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,[theme=light] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.dark .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.light .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple{display:none}[theme=dark] ::ng-deep .mdc-form-field,[theme=dark] ::ng-deep .mat-internal-form-field,[theme=light] ::ng-deep .mdc-form-field,[theme=light] ::ng-deep .mat-internal-form-field,.dark ::ng-deep .mdc-form-field,.dark ::ng-deep .mat-internal-form-field,.light ::ng-deep .mdc-form-field,.light ::ng-deep .mat-internal-form-field{width:100%}[theme=dark] ::ng-deep .mdc-checkbox__background,[theme=light] ::ng-deep .mdc-checkbox__background,.dark ::ng-deep .mdc-checkbox__background,.light ::ng-deep .mdc-checkbox__background{border-radius:4px;transform:scale(.9);background:#fff!important;border-width:1px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mat-internal-form-field .mdc-checkbox,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mat-internal-form-field .mdc-checkbox,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mat-internal-form-field .mdc-checkbox,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mat-internal-form-field .mdc-checkbox{opacity:1!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#e9e9e9!important;border-color:#919191!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#919191;width:8px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg{color:#919191!important}[theme=dark] ::ng-deep .mdc-checkbox__checkmark,[theme=light] ::ng-deep .mdc-checkbox__checkmark,.dark ::ng-deep .mdc-checkbox__checkmark,.light ::ng-deep .mdc-checkbox__checkmark{width:12px;height:12px;left:calc(50% - 6px);top:calc(50% - 6px)}[theme=dark] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark{width:12px}::ng-deep .mdc-checkbox__ripple{background:var(--color)!important}::ng-deep .mat-mdc-checkbox .mdc-form-field .mdc-label,::ng-deep .mat-mdc-checkbox .mat-internal-form-field .mdc-label{padding-left:0}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-checked ::ng-deep .mdc-form-field,.multiple-checked ::ng-deep .mat-internal-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-checked[theme=classic] .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background{border:1px solid #ffffff!important;border-color:#fff!important}.multiple-checked ::ng-deep label{color:#fff}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#f4f4f4;border-radius:10px;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-unchecked{border:1px solid #e0e0e0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-unchecked ::ng-deep .mdc-form-field,.multiple-unchecked ::ng-deep .mat-internal-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #e0e0e0}.multiple-unchecked ::ng-deep .mdc-checkbox__background{border:1px solid #000000}.multiple-unchecked ::ng-deep .mdc-checkbox__native-control:not([disabled]):focus~.mdc-checkbox__ripple{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff;border-radius:10px}.multiple-unchecked[theme=dark][hasError=false] ::ng-deep .mdc-checkbox__background,.multiple-unchecked[theme=light][hasError=false] ::ng-deep .mdc-checkbox__background{border:1px solid #242424!important}.multiple-unchecked[theme=dark][hasError=false]:hover,.multiple-unchecked[theme=light][hasError=false]:hover{outline:1px solid #242424;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff}.multiple-unchecked[hasError=true] ::ng-deep .mdc-checkbox__background{border-color:#e02800}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}*[hasError=true]{--mdc-checkbox-unselected-icon-color: #e02800 !important;--mdc-checkbox-unselected-hover-icon-color: #e02800 !important;--mdc-checkbox-unselected-focus-icon-color: #e02800 !important;--mat-checkbox-unselected-icon-color: #e02800 !important;--mat-checkbox-unselected-hover-icon-color: #e02800 !important;--mat-checkbox-unselected-focus-icon-color: #e02800 !important}*[hasError=true] ::ng-deep .mdc-checkbox__background{border-width:2px!important}.checkbox-container{cursor:pointer}.checkbox-container .label{-webkit-user-select:none;user-select:none}.checkbox .label{display:block;width:100%;cursor:pointer}\n"] }]
+                    ], template: "<div\n  #checkboxContainer\n  tabindex=\"0\"\n  [class]=\"multiple ? 'checkbox-container' : 'checkbox'\"\n  [ngClass]=\"classMultiple\"\n  [attr.alignment]=\"alignment\"\n  [attr.truncate-text]=\"truncateText\"\n  [attr.theme]=\"applicationTheme\"\n  [attr.hasError]=\"hasError\"\n  (keydown.enter)=\"toggleChecked(); checkboxContainer.focus()\"\n  (keydown.space)=\"toggleChecked(); checkboxContainer.focus()\"\n>\n  <mat-checkbox\n    #checkbox\n    (mouseleave)=\"checkbox.disableRipple = true\"\n    (mouseenter)=\"checkbox.disableRipple = false\"\n    [indeterminate]=\"indeterminate\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [tabIndex]=\"tabIndex\"\n    [name]=\"name\"\n    [ngClass]=\"[checkbox.disableRipple ? 'disable-ripple' : '', origin ? 'cdk-' + origin + '-focused' : '']\"\n    [aria-label]=\"ariaLabel || label\"\n    [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n    [aria-describedby]=\"ariaDescribedby || 'ariaDescribedby'\"\n    (click)=\"toggleChecked()\"\n    (keydown.enter)=\"$event.preventDefault()\"\n    (keydown.space)=\"$event.preventDefault()\"\n    class=\"checkbox\"\n  >\n    @if (label) {\n      <span\n        #tooltip=\"matTooltip\"\n        class=\"label\"\n        uiEllipseText\n        (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n        [matTooltip]=\"showTooltip && truncateText ? label : ''\"\n        [matTooltipClass]=\"applicationTheme\"\n      >\n        {{ label }}\n      </span>\n    }\n    <ng-content select=\"[checkbox-label]\"></ng-content>\n  </mat-checkbox>\n\n  @if (ngControl?.errors | hasValidationError) {\n    <mat-hint class=\"error\">\n      @if (ngControl && !hideBuiltInErrors) {\n        <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n      }\n    </mat-hint>\n  }\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}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff!important}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__ripple{background-color:var(--color)}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mdc-checkbox__native-control:indeterminate~.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888;--color: $tgo-dark !important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mat-internal-form-field .mdc-checkbox{opacity:.5}.checkbox,.checkbox-container{--border-width-default-state: 4px;--border-width-animation-state: 6px;width:100%}.checkbox[alignment=top] ::ng-deep .mdc-form-field,.checkbox[alignment=top] ::ng-deep .mat-internal-form-field,.checkbox-container[alignment=top] ::ng-deep .mdc-form-field,.checkbox-container[alignment=top] ::ng-deep .mat-internal-form-field{align-items:start}.checkbox[alignment=top] .label,.checkbox-container[alignment=top] .label{margin-top:10px}.checkbox[truncate-text=true] .label,.checkbox[truncate-text=true] ::ng-deep label,.checkbox-container[truncate-text=true] .label,.checkbox-container[truncate-text=true] ::ng-deep label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes focus-ring-animation{0%{outline-width:var(--border-width-animation-state)}to{outline-width:var(--border-width-default-state)}}.checkbox .cdk-keyboard-focused,.checkbox-container .cdk-keyboard-focused{outline:none}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__ripple,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__ripple{display:none}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background{outline:3px solid #242424;animation:focus-ring-animation .4s forwards}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background:after,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background:after{content:\"\";position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);top:-1px;left:-1px;outline:2px solid #ffffff;border-radius:4px}.checkbox[hasError=true],.checkbox-container[hasError=true]{--border-width-default-state: 6px;--border-width-animation-state: 8px}.checkbox[hasError=true]:focus-visible ::ng-deep .mdc-checkbox__background:after,.checkbox-container[hasError=true]:focus-visible ::ng-deep .mdc-checkbox__background:after{width:calc(100% + 4px);height:calc(100% + 4px);top:-2px;left:-2px}[theme=dark],[theme=light],.dark,.light{--mdc-checkbox-unselected-icon-color: #242424 !important;--mat-checkbox-unselected-icon-color: #242424 !important;--mat-checkbox-unselected-hover-icon-color: #242424 !important;--mat-checkbox-unselected-focus-icon-color: #242424 !important}[theme=dark] .mat-mdc-checkbox,[theme=light] .mat-mdc-checkbox,.dark .mat-mdc-checkbox,.light .mat-mdc-checkbox{width:100%}[theme=dark] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,[theme=light] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.dark .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.light .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple{display:none}[theme=dark] ::ng-deep .mdc-form-field,[theme=dark] ::ng-deep .mat-internal-form-field,[theme=light] ::ng-deep .mdc-form-field,[theme=light] ::ng-deep .mat-internal-form-field,.dark ::ng-deep .mdc-form-field,.dark ::ng-deep .mat-internal-form-field,.light ::ng-deep .mdc-form-field,.light ::ng-deep .mat-internal-form-field{width:100%}[theme=dark] ::ng-deep .mdc-checkbox__background,[theme=light] ::ng-deep .mdc-checkbox__background,.dark ::ng-deep .mdc-checkbox__background,.light ::ng-deep .mdc-checkbox__background{border-radius:4px;transform:scale(.9);background:#fff!important;border-width:1px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mat-internal-form-field .mdc-checkbox,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mat-internal-form-field .mdc-checkbox,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mat-internal-form-field .mdc-checkbox,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mat-internal-form-field .mdc-checkbox{opacity:1!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#e9e9e9!important;border-color:#919191!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#919191;width:8px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg{color:#919191!important}[theme=dark] ::ng-deep .mdc-checkbox__checkmark,[theme=light] ::ng-deep .mdc-checkbox__checkmark,.dark ::ng-deep .mdc-checkbox__checkmark,.light ::ng-deep .mdc-checkbox__checkmark{width:12px;height:12px;left:calc(50% - 6px);top:calc(50% - 6px)}[theme=dark] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark{width:12px}::ng-deep .mdc-checkbox__ripple{background:var(--color)!important}::ng-deep .mat-mdc-checkbox .mdc-form-field .mdc-label,::ng-deep .mat-mdc-checkbox .mat-internal-form-field .mdc-label{padding-left:0}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-checked ::ng-deep .mdc-form-field,.multiple-checked ::ng-deep .mat-internal-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-checked[theme=classic] .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background{border:1px solid #ffffff!important;border-color:#fff!important}.multiple-checked ::ng-deep label{color:#fff}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#f4f4f4;border-radius:10px;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-unchecked{border:1px solid #e0e0e0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-unchecked ::ng-deep .mdc-form-field,.multiple-unchecked ::ng-deep .mat-internal-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #e0e0e0}.multiple-unchecked ::ng-deep .mdc-checkbox__background{border:1px solid #000000}.multiple-unchecked ::ng-deep .mdc-checkbox__native-control:not([disabled]):focus~.mdc-checkbox__ripple{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff;border-radius:10px}.multiple-unchecked[theme=dark][hasError=false] ::ng-deep .mdc-checkbox__background,.multiple-unchecked[theme=light][hasError=false] ::ng-deep .mdc-checkbox__background{border:1px solid #242424!important}.multiple-unchecked[theme=dark][hasError=false]:hover,.multiple-unchecked[theme=light][hasError=false]:hover{outline:1px solid #242424;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff}.multiple-unchecked[hasError=true] ::ng-deep .mdc-checkbox__background{border-color:#e02800}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}*[hasError=true]{--mdc-checkbox-unselected-icon-color: #e02800 !important;--mdc-checkbox-unselected-hover-icon-color: #e02800 !important;--mdc-checkbox-unselected-focus-icon-color: #e02800 !important;--mat-checkbox-unselected-icon-color: #e02800 !important;--mat-checkbox-unselected-hover-icon-color: #e02800 !important;--mat-checkbox-unselected-focus-icon-color: #e02800 !important}*[hasError=true] ::ng-deep .mdc-checkbox__background{border-width:2px!important}.checkbox-container{cursor:pointer}.checkbox-container .label{-webkit-user-select:none;user-select:none}.checkbox .label{display:block;width:100%;cursor:pointer}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
             }], checked: [{
@@ -315,6 +336,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], ariaLabel: [{
                 type: Input
+            }], testId: [{
+                type: Input
             }], ariaRequired: [{
                 type: Input
             }], hasError: [{

package/fesm2022/testgorilla-tgo-ui-components-checkbox.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"testgorilla-tgo-ui-components-checkbox.mjs","sources":["../../../components/checkbox/checkbox.component.ts","../../../components/checkbox/checkbox.component.html","../../../components/checkbox/focus-visible.directive.ts","../../../components/checkbox/checkbox.component.module.ts","../../../components/checkbox/testgorilla-tgo-ui-components-checkbox.ts"],"sourcesContent":["import { FocusableOption, FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';\nimport { NgClass } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n DestroyRef,\n DoCheck,\n EventEmitter,\n HostBinding,\n inject,\n Input,\n NgZone,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n ProviderToken,\n ViewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';\nimport { MatHint } from '@angular/material/form-field';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport {\n ApplicationTheme,\n Alignment,\n EllipseTextDirective,\n HasValidationErrorPipe,\n} from '@testgorilla/tgo-ui/components/core';\nimport { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';\n\n@Component({\n selector: 'ui-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.scss'],\n host: {\n // Needs to be removed since it causes some a11y issues. (https://github.com/angular/components/issues/21266)\n '[attr.tabindex]': 'null',\n '[attr.aria-label]': 'null',\n '[attr.aria-labelledby]': 'null',\n '[attr.aria-describedby]': 'null',\n '[attr.aria-required]': 'null',\n // Note: under normal conditions focus shouldn't land on this element, however it may be\n // programmatically set, for example inside of a focus trap, in this case we want to forward\n // the focus to the mat-checkbox element.\n '(focus)': 'checkboxElement.focus()',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n NgClass,\n MatCheckbox,\n EllipseTextDirective,\n MatTooltip,\n MatHint,\n ValidationErrorModule,\n HasValidationErrorPipe,\n ],\n})\n/* eslint-disable @angular-eslint/no-conflicting-lifecycle /\nexport class CheckboxComponent\n implements OnInit, FocusableOption, ControlValueAccessor, DoCheck, OnChanges, AfterViewInit, OnDestroy\n{\n /\n Determines whether the checkbox is disabled.\n * Default: false.\n \n @type {boolean}\n * @memberof CheckboxComponent\n /\n @Input() disabled = false;\n\n /\n Determines whether the checkbox is checked.\n * Default: false.\n \n @type {boolean}\n * @memberof CheckboxComponent\n /\n @Input() checked = false;\n\n /\n Determines whether the checkbox is indeterminate.\n * It can be used to represent a checkbox with three states, e.g. a checkbox that represents a nested list of checkable items.\n * Default: false.\n \n @type {boolean}\n * @memberof CheckboxComponent\n /\n @Input() indeterminate = false;\n\n /\n Determines whether the checkbox color.\n * Default: Test Gorilla primary color.\n \n @type {string}\n * @memberof CheckboxComponent\n /\n @HostBinding('style.--color')\n @Input()\n companyColor: string \| null;\n\n /\n Name value will be applied to the input element if present.\n \n @type {string}\n * @memberof CheckboxComponent\n /\n @Input() name = '';\n\n /\n Text content will be applied to the input element if present.\n \n @type {string}\n * @memberof CheckboxComponent\n /\n @Input() label = '';\n\n /\n Renders the checkbox as a bordered, padded multiple-choice answer cell\n * (the candidate test-taking experience). NOT for multi-select or table\n * row selection — use the plain default checkbox there.\n * Default: false\n \n @type {boolean}\n * @memberof CheckboxComponent\n /\n @Input() multiple = false;\n\n /\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof CheckboxComponent\n /\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /\n A string representing the ARIA label for accessibility.\n * This label is used to provide an accessible name for the input element.\n * @type {string}\n * @memberof CheckboxComponent\n /\n @Input() ariaLabel: string;\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used to indicate whether an input field is required for form submission.\n * @type {boolean}\n * @memberof CheckboxComponent\n /\n @Input() ariaRequired = false;\n\n /\n Defines if checkbox has error\n \n @type {boolean}\n * @memberof CheckboxComponent\n /\n @Input() hasError = false;\n\n /\n Hide in-build errors for Reactive Forms\n \n @type {number}\n * @memberof CheckboxComponent\n /\n @Input() hideBuiltInErrors = false;\n\n /\n Hide label in errors\n \n @type {number}\n * @memberof CheckboxComponent\n /\n @Input() hideLabelInErrors = false;\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used to indicate whether an input field is required for form submission.\n * @type {string}\n * @memberof CheckboxComponent\n /\n @Input() ariaLabelledby = '';\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used to indicate whether an input field is required for form submission.\n * @type {string}\n * @memberof CheckboxComponent\n /\n @Input() ariaDescribedby = '';\n\n /\n Truncate text if it is too long\n * @type {string}\n * @memberof CheckboxComponent\n /\n @Input() truncateText = false;\n\n /\n Text alignment\n * @type {'center' \| 'top'}\n * @memberof CheckboxComponent\n /\n @Input() alignment: Alignment = 'center';\n\n /\n Sets the tab index for the checkbox component.\n * This determines the order in which elements receive focus when the user navigates through them using the Tab key.\n * Default value is 0.\n \n @type {number}\n * @memberof CheckboxComponent\n /\n @Input() tabIndex = 0;\n\n /\n Event emitted when the checkbox's checked value changes.\n \n @type {boolean}\n * @memberof CheckboxComponent\n /\n @Output() changed = new EventEmitter<boolean>();\n\n /\n @ignore\n /\n onChange = (_value: boolean): void => {};\n\n /\n @ignore\n /\n onTouch = () => {};\n\n showTooltip = false;\n classMultiple: string;\n\n @ViewChild('tooltip') tooltipElement: MatTooltip;\n @ViewChild('checkbox') checkboxElement: MatCheckbox;\n protected origin: string \| null = null;\n\n private readonly defaultAppTheme = inject(\n 'CANOPYUI_DEFAULT_APPLICATION_THEME' as unknown as ProviderToken<ApplicationTheme>,\n {\n optional: true,\n }\n );\n private readonly cdr = inject(ChangeDetectorRef);\n public ngControl = inject(NgControl, { optional: true, self: true });\n private readonly focusMonitor = inject(FocusMonitor);\n private readonly ngZone = inject(NgZone);\n private readonly destroyRef = inject(DestroyRef);\n\n constructor() {\n if (this.defaultAppTheme) {\n this.applicationTheme = this.defaultAppTheme;\n }\n\n if (this.ngControl !== null) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n ngOnChanges(): void {\n this.setCompanyColor();\n }\n\n /\n Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors\n * to display validation errors that might happen (e.g. required)\n /\n ngDoCheck(): void {\n if (this.ngControl?.touched \|\| this.ngControl?.errors) {\n this.cdr.markForCheck();\n }\n }\n\n ngAfterViewInit(): void {\n / eslint-disable no-underscore-dangle -- MatCheckbox's internal _inputElement is the only handle to the native input /\n const checkboxNativeInput = this.checkboxElement._inputElement.nativeElement;\n checkboxNativeInput.setAttribute('role', 'checkbox');\n checkboxNativeInput.setAttribute('aria-checked', Boolean(this.checked).toString());\n checkboxNativeInput.setAttribute('aria-disabled', Boolean(this.disabled).toString());\n checkboxNativeInput.setAttribute('aria-label', this.label);\n checkboxNativeInput.setAttribute('aria-required', this.ariaRequired.toString());\n this.focusMonitor\n .monitor(this.checkboxElement._inputElement.nativeElement)\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(origin => this.ngZone.run(this.focusAction.bind(this, origin)));\n / eslint-enable no-underscore-dangle /\n }\n\n focusAction(origin: FocusOrigin) {\n this.origin = origin;\n this.cdr.markForCheck();\n this.onFocus(origin === 'keyboard');\n }\n\n ngOnDestroy(): void {\n // eslint-disable-next-line no-underscore-dangle -- MatCheckbox internal _inputElement\n this.focusMonitor.stopMonitoring(this.checkboxElement._inputElement.nativeElement);\n }\n\n emitChange(event: MatCheckboxChange): void {\n this.changed.emit(event.checked);\n }\n\n ngOnInit() {\n this.classMultiple = this.setClass();\n this.setCompanyColor();\n }\n\n toggleChecked(): void {\n this.checked = !this.checked;\n this.changed.emit(this.checked);\n this.onTouch();\n this.onChange(this.checked);\n if (!this.disabled) {\n this.indeterminate = false;\n this.classMultiple = this.setClass();\n }\n / eslint-disable no-underscore-dangle -- MatCheckbox internal _inputElement /\n this.checkboxElement._inputElement.nativeElement.setAttribute('aria-checked', Boolean(this.checked).toString());\n this.checkboxElement._inputElement.nativeElement.setAttribute('aria-disabled', Boolean(this.disabled).toString());\n / eslint-enable no-underscore-dangle /\n }\n\n setClass(): string {\n if (this.multiple) {\n return this.checked \|\| this.indeterminate ? 'multiple-checked' : 'multiple-unchecked';\n }\n return '';\n }\n\n writeValue(value: boolean): void {\n this.checked = value;\n }\n\n registerOnChange(fn: (value: boolean) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouch = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n onLabelEllipsisChange(isEllipsis: boolean): void {\n this.showTooltip = isEllipsis;\n }\n\n onFocus(isFocus: boolean): void {\n setTimeout(() => {\n if (this.tooltipElement) {\n if (isFocus && this.showTooltip) {\n this.tooltipElement.show();\n } else {\n this.tooltipElement.hide();\n }\n }\n }, 0);\n }\n\n private setCompanyColor(): void {\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- empty companyColor falls back to the theme colour\n this.companyColor = this.companyColor\n ? this.companyColor\n : this.applicationTheme === 'classic'\n ? '#46A997'\n : '#D410AA';\n }\n\n focus(): void {\n this.checkboxElement.focus();\n }\n}\n","<div\n #checkboxContainer\n tabindex=\"0\"\n [class]=\"multiple ? 'checkbox-container' : 'checkbox'\"\n [ngClass]=\"classMultiple\"\n [attr.alignment]=\"alignment\"\n [attr.truncate-text]=\"truncateText\"\n [attr.theme]=\"applicationTheme\"\n [attr.hasError]=\"hasError\"\n (keydown.enter)=\"toggleChecked(); checkboxContainer.focus()\"\n (keydown.space)=\"toggleChecked(); checkboxContainer.focus()\"\n>\n <mat-checkbox\n #checkbox\n (mouseleave)=\"checkbox.disableRipple = true\"\n (mouseenter)=\"checkbox.disableRipple = false\"\n [indeterminate]=\"indeterminate\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [tabIndex]=\"tabIndex\"\n [name]=\"name\"\n [ngClass]=\"[checkbox.disableRipple ? 'disable-ripple' : '', origin ? 'cdk-' + origin + '-focused' : '']\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n [aria-describedby]=\"ariaDescribedby \|\| 'ariaDescribedby'\"\n (click)=\"toggleChecked()\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown.space)=\"$event.preventDefault()\"\n class=\"checkbox\"\n >\n @if (label) {\n <span\n #tooltip=\"matTooltip\"\n class=\"label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n [matTooltip]=\"showTooltip && truncateText ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >\n {{ label }}\n </span>\n }\n <ng-content select=\"[checkbox-label]\"></ng-content>\n </mat-checkbox>\n\n @if (ngControl?.errors \| hasValidationError) {\n <mat-hint class=\"error\">\n @if (ngControl && !hideBuiltInErrors) {\n <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n }\n </mat-hint>\n }\n</div>\n","import { Directive, EventEmitter, HostListener, Output } from '@angular/core';\n\n@Directive({\n selector: '[uiFocusVisible]',\n standalone: true,\n})\nexport class FocusVisibleDirective {\n @Output() uiFocusVisible = new EventEmitter<boolean>();\n private hadKeyboardEvent = false;\n\n constructor() {}\n\n @HostListener('document:keydown')\n handleKeyboardEvent(): void {\n this.hadKeyboardEvent = true;\n }\n\n @HostListener('focus')\n onFocus(): void {\n if (this.hadKeyboardEvent) {\n this.uiFocusVisible.next(true);\n }\n }\n\n @HostListener('blur')\n onBlur(): void {\n this.uiFocusVisible.next(false);\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { UiTranslatePipe, HasValidationErrorPipe, EllipseTextDirective } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';\n\nimport { CheckboxComponent } from './checkbox.component';\nimport { FocusVisibleDirective } from './focus-visible.directive';\n\n@NgModule({\n imports: [\n CommonModule,\n MatCheckboxModule,\n FormsModule,\n ReactiveFormsModule,\n MatInputModule,\n IconComponentModule,\n UiTranslatePipe,\n ValidationErrorModule,\n HasValidationErrorPipe,\n EllipseTextDirective,\n MatTooltipModule,\n FocusVisibleDirective,\n CheckboxComponent,\n ],\n exports: [CheckboxComponent],\n})\nexport class CheckboxComponentModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"testgorilla-tgo-ui-components-checkbox.mjs","sources":["../../../components/checkbox/checkbox.component.ts","../../../components/checkbox/checkbox.component.html","../../../components/checkbox/focus-visible.directive.ts","../../../components/checkbox/checkbox.component.module.ts","../../../components/checkbox/testgorilla-tgo-ui-components-checkbox.ts"],"sourcesContent":["import { FocusableOption, FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';\nimport { NgClass } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n DestroyRef,\n DoCheck,\n EventEmitter,\n HostBinding,\n inject,\n Input,\n NgZone,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n ProviderToken,\n ViewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';\nimport { MatHint } from '@angular/material/form-field';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport {\n ApplicationTheme,\n Alignment,\n EllipseTextDirective,\n HasValidationErrorPipe,\n} from '@testgorilla/tgo-ui/components/core';\nimport { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';\n\n@Component({\n selector: 'ui-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.scss'],\n host: {\n // Needs to be removed since it causes some a11y issues. (https://github.com/angular/components/issues/21266)\n '[attr.tabindex]': 'null',\n '[attr.aria-label]': 'null',\n '[attr.aria-labelledby]': 'null',\n '[attr.aria-describedby]': 'null',\n '[attr.aria-required]': 'null',\n // Note: under normal conditions focus shouldn't land on this element, however it may be\n // programmatically set, for example inside of a focus trap, in this case we want to forward\n // the focus to the mat-checkbox element.\n '(focus)': 'checkboxElement.focus()',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n NgClass,\n MatCheckbox,\n EllipseTextDirective,\n MatTooltip,\n MatHint,\n ValidationErrorModule,\n HasValidationErrorPipe,\n ],\n})\n/* eslint-disable @angular-eslint/no-conflicting-lifecycle /\nexport class CheckboxComponent\n implements OnInit, FocusableOption, ControlValueAccessor, DoCheck, OnChanges, AfterViewInit, OnDestroy\n{\n /\n Determines whether the checkbox is disabled.\n * Default: false.\n \n @type {boolean}\n * @memberof CheckboxComponent\n /\n @Input() disabled = false;\n\n /\n Determines whether the checkbox is checked.\n * Default: false.\n \n @type {boolean}\n * @memberof CheckboxComponent\n /\n @Input() checked = false;\n\n /\n Determines whether the checkbox is indeterminate.\n * It can be used to represent a checkbox with three states, e.g. a checkbox that represents a nested list of checkable items.\n * Default: false.\n \n @type {boolean}\n * @memberof CheckboxComponent\n /\n @Input() indeterminate = false;\n\n /\n Determines whether the checkbox color.\n * Default: Test Gorilla primary color.\n \n @type {string}\n * @memberof CheckboxComponent\n /\n @HostBinding('style.--color')\n @Input()\n companyColor: string \| null;\n\n /\n Name value will be applied to the input element if present.\n \n @type {string}\n * @memberof CheckboxComponent\n /\n @Input() name = '';\n\n /\n Text content will be applied to the input element if present.\n \n @type {string}\n * @memberof CheckboxComponent\n /\n @Input() label = '';\n\n /\n Renders the checkbox as a bordered, padded multiple-choice answer cell\n * (the candidate test-taking experience). NOT for multi-select or table\n * row selection — use the plain default checkbox there.\n * Default: false\n \n @type {boolean}\n * @memberof CheckboxComponent\n /\n @Input() multiple = false;\n\n /\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof CheckboxComponent\n /\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /\n A string representing the ARIA label for accessibility.\n * This label is used to provide an accessible name for the input element.\n * @type {string}\n * @memberof CheckboxComponent\n /\n @Input() ariaLabel: string;\n\n @Input() testId: string \| null = null;\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used to indicate whether an input field is required for form submission.\n * @type {boolean}\n * @memberof CheckboxComponent\n /\n @Input() ariaRequired = false;\n\n /\n Defines if checkbox has error\n \n @type {boolean}\n * @memberof CheckboxComponent\n /\n @Input() hasError = false;\n\n /\n Hide in-build errors for Reactive Forms\n \n @type {number}\n * @memberof CheckboxComponent\n /\n @Input() hideBuiltInErrors = false;\n\n /\n Hide label in errors\n \n @type {number}\n * @memberof CheckboxComponent\n /\n @Input() hideLabelInErrors = false;\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used to indicate whether an input field is required for form submission.\n * @type {string}\n * @memberof CheckboxComponent\n /\n @Input() ariaLabelledby = '';\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used to indicate whether an input field is required for form submission.\n * @type {string}\n * @memberof CheckboxComponent\n /\n @Input() ariaDescribedby = '';\n\n /\n Truncate text if it is too long\n * @type {string}\n * @memberof CheckboxComponent\n /\n @Input() truncateText = false;\n\n /\n Text alignment\n * @type {'center' \| 'top'}\n * @memberof CheckboxComponent\n /\n @Input() alignment: Alignment = 'center';\n\n /\n Sets the tab index for the checkbox component.\n * This determines the order in which elements receive focus when the user navigates through them using the Tab key.\n * Default value is 0.\n \n @type {number}\n * @memberof CheckboxComponent\n /\n @Input() tabIndex = 0;\n\n /\n Event emitted when the checkbox's checked value changes.\n \n @type {boolean}\n * @memberof CheckboxComponent\n /\n @Output() changed = new EventEmitter<boolean>();\n\n /\n @ignore\n /\n onChange = (_value: boolean): void => {};\n\n /\n @ignore\n /\n onTouch = () => {};\n\n showTooltip = false;\n classMultiple: string;\n\n @ViewChild('tooltip') tooltipElement: MatTooltip;\n @ViewChild('checkbox') checkboxElement: MatCheckbox;\n protected origin: string \| null = null;\n\n private appliedTestId: string \| null = null;\n\n private readonly defaultAppTheme = inject(\n 'CANOPYUI_DEFAULT_APPLICATION_THEME' as unknown as ProviderToken<ApplicationTheme>,\n {\n optional: true,\n }\n );\n private readonly cdr = inject(ChangeDetectorRef);\n public ngControl = inject(NgControl, { optional: true, self: true });\n private readonly focusMonitor = inject(FocusMonitor);\n private readonly ngZone = inject(NgZone);\n private readonly destroyRef = inject(DestroyRef);\n\n constructor() {\n if (this.defaultAppTheme) {\n this.applicationTheme = this.defaultAppTheme;\n }\n\n if (this.ngControl !== null) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n ngOnChanges(): void {\n this.setCompanyColor();\n this.applyTestId();\n }\n\n /\n Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors\n * to display validation errors that might happen (e.g. required)\n /\n ngDoCheck(): void {\n if (this.ngControl?.touched \|\| this.ngControl?.errors) {\n this.cdr.markForCheck();\n }\n }\n\n ngAfterViewInit(): void {\n / eslint-disable no-underscore-dangle -- MatCheckbox's internal _inputElement is the only handle to the native input /\n const checkboxNativeInput = this.checkboxElement._inputElement.nativeElement;\n checkboxNativeInput.setAttribute('role', 'checkbox');\n checkboxNativeInput.setAttribute('aria-checked', Boolean(this.checked).toString());\n checkboxNativeInput.setAttribute('aria-disabled', Boolean(this.disabled).toString());\n // Falling back to the visible label keeps label-less checkboxes from losing their accessible name.\n checkboxNativeInput.setAttribute('aria-label', this.ariaLabel \|\| this.label);\n checkboxNativeInput.setAttribute('aria-required', this.ariaRequired.toString());\n this.applyTestId();\n this.focusMonitor\n .monitor(this.checkboxElement._inputElement.nativeElement)\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(origin => this.ngZone.run(this.focusAction.bind(this, origin)));\n / eslint-enable no-underscore-dangle /\n }\n\n // MatCheckbox takes no attribute passthrough, so the id is set on the native input directly.\n private applyTestId(): void {\n if (!this.checkboxElement \|\| this.testId === this.appliedTestId) {\n return;\n }\n / eslint-disable no-underscore-dangle -- MatCheckbox's internal _inputElement is the only handle to the native input /\n const checkboxNativeInput = this.checkboxElement._inputElement.nativeElement;\n / eslint-enable no-underscore-dangle /\n if (this.testId) {\n checkboxNativeInput.setAttribute('data-testid', this.testId);\n } else {\n checkboxNativeInput.removeAttribute('data-testid');\n }\n this.appliedTestId = this.testId;\n }\n\n focusAction(origin: FocusOrigin) {\n this.origin = origin;\n this.cdr.markForCheck();\n this.onFocus(origin === 'keyboard');\n }\n\n ngOnDestroy(): void {\n // eslint-disable-next-line no-underscore-dangle -- MatCheckbox internal _inputElement\n this.focusMonitor.stopMonitoring(this.checkboxElement._inputElement.nativeElement);\n }\n\n emitChange(event: MatCheckboxChange): void {\n this.changed.emit(event.checked);\n }\n\n ngOnInit() {\n this.classMultiple = this.setClass();\n this.setCompanyColor();\n }\n\n toggleChecked(): void {\n this.checked = !this.checked;\n this.changed.emit(this.checked);\n this.onTouch();\n this.onChange(this.checked);\n if (!this.disabled) {\n this.indeterminate = false;\n this.classMultiple = this.setClass();\n }\n / eslint-disable no-underscore-dangle -- MatCheckbox internal _inputElement /\n this.checkboxElement._inputElement.nativeElement.setAttribute('aria-checked', Boolean(this.checked).toString());\n this.checkboxElement._inputElement.nativeElement.setAttribute('aria-disabled', Boolean(this.disabled).toString());\n / eslint-enable no-underscore-dangle /\n }\n\n setClass(): string {\n if (this.multiple) {\n return this.checked \|\| this.indeterminate ? 'multiple-checked' : 'multiple-unchecked';\n }\n return '';\n }\n\n writeValue(value: boolean): void {\n this.checked = value;\n }\n\n registerOnChange(fn: (value: boolean) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouch = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n onLabelEllipsisChange(isEllipsis: boolean): void {\n this.showTooltip = isEllipsis;\n }\n\n onFocus(isFocus: boolean): void {\n setTimeout(() => {\n if (this.tooltipElement) {\n if (isFocus && this.showTooltip) {\n this.tooltipElement.show();\n } else {\n this.tooltipElement.hide();\n }\n }\n }, 0);\n }\n\n private setCompanyColor(): void {\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- empty companyColor falls back to the theme colour\n this.companyColor = this.companyColor\n ? this.companyColor\n : this.applicationTheme === 'classic'\n ? '#46A997'\n : '#D410AA';\n }\n\n focus(): void {\n this.checkboxElement.focus();\n }\n}\n","<div\n #checkboxContainer\n tabindex=\"0\"\n [class]=\"multiple ? 'checkbox-container' : 'checkbox'\"\n [ngClass]=\"classMultiple\"\n [attr.alignment]=\"alignment\"\n [attr.truncate-text]=\"truncateText\"\n [attr.theme]=\"applicationTheme\"\n [attr.hasError]=\"hasError\"\n (keydown.enter)=\"toggleChecked(); checkboxContainer.focus()\"\n (keydown.space)=\"toggleChecked(); checkboxContainer.focus()\"\n>\n <mat-checkbox\n #checkbox\n (mouseleave)=\"checkbox.disableRipple = true\"\n (mouseenter)=\"checkbox.disableRipple = false\"\n [indeterminate]=\"indeterminate\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [tabIndex]=\"tabIndex\"\n [name]=\"name\"\n [ngClass]=\"[checkbox.disableRipple ? 'disable-ripple' : '', origin ? 'cdk-' + origin + '-focused' : '']\"\n [aria-label]=\"ariaLabel \|\| label\"\n [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n [aria-describedby]=\"ariaDescribedby \|\| 'ariaDescribedby'\"\n (click)=\"toggleChecked()\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown.space)=\"$event.preventDefault()\"\n class=\"checkbox\"\n >\n @if (label) {\n <span\n #tooltip=\"matTooltip\"\n class=\"label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n [matTooltip]=\"showTooltip && truncateText ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >\n {{ label }}\n </span>\n }\n <ng-content select=\"[checkbox-label]\"></ng-content>\n </mat-checkbox>\n\n @if (ngControl?.errors \| hasValidationError) {\n <mat-hint class=\"error\">\n @if (ngControl && !hideBuiltInErrors) {\n <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n }\n </mat-hint>\n }\n</div>\n","import { Directive, EventEmitter, HostListener, Output } from '@angular/core';\n\n@Directive({\n selector: '[uiFocusVisible]',\n standalone: true,\n})\nexport class FocusVisibleDirective {\n @Output() uiFocusVisible = new EventEmitter<boolean>();\n private hadKeyboardEvent = false;\n\n constructor() {}\n\n @HostListener('document:keydown')\n handleKeyboardEvent(): void {\n this.hadKeyboardEvent = true;\n }\n\n @HostListener('focus')\n onFocus(): void {\n if (this.hadKeyboardEvent) {\n this.uiFocusVisible.next(true);\n }\n }\n\n @HostListener('blur')\n onBlur(): void {\n this.uiFocusVisible.next(false);\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { UiTranslatePipe, HasValidationErrorPipe, EllipseTextDirective } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';\n\nimport { CheckboxComponent } from './checkbox.component';\nimport { FocusVisibleDirective } from './focus-visible.directive';\n\n@NgModule({\n imports: [\n CommonModule,\n MatCheckboxModule,\n FormsModule,\n ReactiveFormsModule,\n MatInputModule,\n IconComponentModule,\n UiTranslatePipe,\n ValidationErrorModule,\n HasValidationErrorPipe,\n EllipseTextDirective,\n MatTooltipModule,\n FocusVisibleDirective,\n CheckboxComponent,\n ],\n exports: [CheckboxComponent],\n})\nexport class CheckboxComponentModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/testgorilla-tgo-ui-components-checklist.mjs CHANGED Viewed

@@ -13,6 +13,10 @@ import { ProgressBarComponentModule } from '@testgorilla/tgo-ui/components/progr
 import { RadioButtonComponentModule } from '@testgorilla/tgo-ui/components/radio-button';
 class ChecklistComponent {
+    itemTestId(value) {
+        const testId = this.testId();
+        return testId ? `${testId}-${value}` : 'checklist-item';
+    }
     constructor(defaultAppTheme) {
         this.defaultAppTheme = defaultAppTheme;
         /**
@@ -66,6 +70,7 @@ class ChecklistComponent {
          * @type {boolean}
          */
         this.autocheck = input(true, ...(ngDevMode ? [{ debugName: "autocheck" }] : /* istanbul ignore next */ []));
+        this.testId = input(null, ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
         /**
          * Event emitter that triggers when the footer button is clicked.
          * Emits a void event.
@@ -130,7 +135,7 @@ class ChecklistComponent {
         this.footerButtonClicked.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ChecklistComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ChecklistComponent, isStandalone: true, selector: "ui-checklist", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, footerButtonLabel: { classPropertyName: "footerButtonLabel", publicName: "footerButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, autocheck: { classPropertyName: "autocheck", publicName: "autocheck", isSignal: true, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", footerButtonClicked: "footerButtonClicked", completed: "completed", selectedItem: "selectedItemChange" }, ngImport: i0, template: "@if (label()) {\n  <h4 [attr.aria-label]=\"ariaLabel() ?? label()\">{{ label() }}</h4>\n}\n@if (description()) {\n  <div aria-label=\"description\" class=\"description\" [innerHTML]=\"description()\"></div>\n}\n\n<ui-progress-bar [showPercentage]=\"true\" [progress]=\"progress()\"></ui-progress-bar>\n\n<div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n  {{ 'COMMON.PROGRESS' | uiTranslate: { progress: progress() } | async }}\n</div>\n\n<ui-divider size=\"small\" companyColor=\"#d3d3d3\"> </ui-divider>\n\n<div class=\"checklist-container\" data-testid=\"checklist-container\">\n  @for (item of items(); track item.value + item.checked; let i = $index) {\n    <div\n      data-testid=\"checklist-item\"\n      class=\"checklist-item\"\n      [class.disabled]=\"item.disabled\"\n      [class.checked]=\"item.checked\"\n      [class.active]=\"item === selectedItem() && !autocheck()\"\n      [attr.aria-labelledby]=\"'item-' + item.value\"\n      [tabindex]=\"item?.disabled ? -1 : 0\"\n      (click)=\"selectItem(item)\"\n      (keydown)=\"keydownHandler($event, item)\"\n    >\n      <div class=\"content\">\n        <ui-icon\n          [name]=\"item.checked ? 'Check-in-line' : 'Circle-in-line'\"\n          [filled]=\"item.checked\"\n          class=\"checked\"\n          [applicationTheme]=\"theme()\"\n          [size]=\"'16'\"\n          [color]=\"item.checked ? 'white' : item.disabled ? '#919191' : 'dark'\"\n        ></ui-icon>\n        <div class=\"label-and-description\">\n          <span [id]=\"'item-' + item.value\" class=\"label\">{{ item.label }}</span>\n          @if (item.description) {\n            <span class=\"item-description\">{{ item.description }}</span>\n          }\n        </div>\n      </div>\n\n      @if (item.hasLink && !item.disabled) {\n        <div class=\"navigation\">\n          <ui-icon\n            [tabindex]=\"-1\"\n            class=\"link\"\n            [name]=\"'Arrow-chevron-right-filled'\"\n            [applicationTheme]=\"theme()\"\n            [size]=\"'24'\"\n            color=\"rebrand-black\"\n          ></ui-icon>\n        </div>\n      }\n    </div>\n  }\n</div>\n@if (footerButtonLabel()) {\n  <div class=\"action-btn\">\n    <ui-button\n      data-testid=\"checklist-footer-button\"\n      [label]=\"footerButtonLabel()!\"\n      [variant]=\"'link'\"\n      [companyColor]=\"'#000'\"\n      (buttonClickEvent)=\"footerButtonClick($event)\"\n    ></ui-button>\n  </div>\n}\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}:host{display:flex;flex-direction:column;padding:24px;background:#fff;border:1px solid #d3d3d3;border-radius:10px}:host .checklist-container{margin-top:24px;display:flex;flex-direction:column;height:100%;overflow:auto}:host h4{margin:16px 0}:host .description{font-size:14px;line-height:22px;margin-bottom:16px}:host ui-progress-bar{margin-bottom:24px}:host .checklist-item{border-radius:10px;border:1px solid transparent;display:flex;align-items:center;flex-direction:row;height:40px;padding:8px 8px 8px 12px;margin:4px 4px 8px;background-color:#fff;justify-content:space-between;cursor:pointer}:host .checklist-item .content{display:flex;align-items:center}:host .checklist-item .label-and-description{display:flex;flex-direction:column}:host .checklist-item .label-and-description .label{-webkit-user-select:none;user-select:none}:host .checklist-item .label-and-description .item-description{font-size:12px;color:#666;line-height:16px}:host .checklist-item .link{position:relative;z-index:1;cursor:pointer;border-radius:50px}:host .checklist-item .checked{position:relative;border-radius:50px;margin-right:12px;width:16px;height:16px;cursor:pointer}:host .checklist-item .checked ::ng-deep mat-icon{position:relative;z-index:1}:host .checklist-item .checked:after{content:\"\";width:16px;height:16px;position:absolute;transition:background-color .2s;top:0;left:0;border-radius:50px}:host .checklist-item.checked{cursor:default}:host .checklist-item.checked ui-icon .label{color:#919191}:host .checklist-item.checked ui-icon:after{background:#d410aa}:host .checklist-item.checked .label{color:#919191}:host .checklist-item:hover{background-color:#fff2fc}:host .checklist-item:hover .label{color:#242424}:host .checklist-item.active,:host .checklist-item:active{background-color:#ffe6fa}:host .checklist-item.active .label,:host .checklist-item:active .label{color:#242424}:host .checklist-item:focus-visible{outline-offset:2px;outline:3px solid #242424;border-color:#242424;animation:focus-ring-animation-main .4s forwards}:host .checklist-item ::ng-deep .mat-mdc-radio-button{pointer-events:none!important}:host .checklist-item.disabled{pointer-events:none}:host .checklist-item.disabled .label{color:#919191}:host .action-btn{margin-top:16px;display:flex;justify-content:flex-end}:host .action-btn ::ng-deep ui-button .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper{font-size:14px!important}\n"], dependencies: [{ kind: "ngmodule", type: ProgressBarComponentModule }, { kind: "component", type: i1.ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "ngmodule", type: RadioButtonComponentModule }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i3.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "ngmodule", type: DividerComponentModule }, { kind: "component", type: i4.DividerComponent, selector: "ui-divider", inputs: ["size", "companyColor", "applicationTheme", "label"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ChecklistComponent, isStandalone: true, selector: "ui-checklist", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, footerButtonLabel: { classPropertyName: "footerButtonLabel", publicName: "footerButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, autocheck: { classPropertyName: "autocheck", publicName: "autocheck", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", footerButtonClicked: "footerButtonClicked", completed: "completed", selectedItem: "selectedItemChange" }, ngImport: i0, template: "@if (label()) {\n  <h4 [attr.aria-label]=\"ariaLabel() ?? label()\">{{ label() }}</h4>\n}\n@if (description()) {\n  <div aria-label=\"description\" class=\"description\" [innerHTML]=\"description()\"></div>\n}\n\n<ui-progress-bar [showPercentage]=\"true\" [progress]=\"progress()\"></ui-progress-bar>\n\n<div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n  {{ 'COMMON.PROGRESS' | uiTranslate: { progress: progress() } | async }}\n</div>\n\n<ui-divider size=\"small\" companyColor=\"#d3d3d3\"> </ui-divider>\n\n<div class=\"checklist-container\" [attr.data-testid]=\"testId() ?? 'checklist-container'\">\n  @for (item of items(); track item.value + item.checked; let i = $index) {\n    <div\n      [attr.data-testid]=\"itemTestId(item.value)\"\n      class=\"checklist-item\"\n      [class.disabled]=\"item.disabled\"\n      [class.checked]=\"item.checked\"\n      [class.active]=\"item === selectedItem() && !autocheck()\"\n      [attr.aria-labelledby]=\"'item-' + item.value\"\n      [tabindex]=\"item?.disabled ? -1 : 0\"\n      (click)=\"selectItem(item)\"\n      (keydown)=\"keydownHandler($event, item)\"\n    >\n      <div class=\"content\">\n        <ui-icon\n          [name]=\"item.checked ? 'Check-in-line' : 'Circle-in-line'\"\n          [filled]=\"item.checked\"\n          class=\"checked\"\n          [applicationTheme]=\"theme()\"\n          [size]=\"'16'\"\n          [color]=\"item.checked ? 'white' : item.disabled ? '#919191' : 'dark'\"\n        ></ui-icon>\n        <div class=\"label-and-description\">\n          <span [id]=\"'item-' + item.value\" class=\"label\">{{ item.label }}</span>\n          @if (item.description) {\n            <span class=\"item-description\">{{ item.description }}</span>\n          }\n        </div>\n      </div>\n\n      @if (item.hasLink && !item.disabled) {\n        <div class=\"navigation\">\n          <ui-icon\n            [tabindex]=\"-1\"\n            class=\"link\"\n            [name]=\"'Arrow-chevron-right-filled'\"\n            [applicationTheme]=\"theme()\"\n            [size]=\"'24'\"\n            color=\"rebrand-black\"\n          ></ui-icon>\n        </div>\n      }\n    </div>\n  }\n</div>\n@if (footerButtonLabel()) {\n  <div class=\"action-btn\">\n    <ui-button\n      data-testid=\"checklist-footer-button\"\n      [label]=\"footerButtonLabel()!\"\n      [variant]=\"'link'\"\n      [companyColor]=\"'#000'\"\n      (buttonClickEvent)=\"footerButtonClick($event)\"\n    ></ui-button>\n  </div>\n}\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}:host{display:flex;flex-direction:column;padding:24px;background:#fff;border:1px solid #d3d3d3;border-radius:10px}:host .checklist-container{margin-top:24px;display:flex;flex-direction:column;height:100%;overflow:auto}:host h4{margin:16px 0}:host .description{font-size:14px;line-height:22px;margin-bottom:16px}:host ui-progress-bar{margin-bottom:24px}:host .checklist-item{border-radius:10px;border:1px solid transparent;display:flex;align-items:center;flex-direction:row;height:40px;padding:8px 8px 8px 12px;margin:4px 4px 8px;background-color:#fff;justify-content:space-between;cursor:pointer}:host .checklist-item .content{display:flex;align-items:center}:host .checklist-item .label-and-description{display:flex;flex-direction:column}:host .checklist-item .label-and-description .label{-webkit-user-select:none;user-select:none}:host .checklist-item .label-and-description .item-description{font-size:12px;color:#666;line-height:16px}:host .checklist-item .link{position:relative;z-index:1;cursor:pointer;border-radius:50px}:host .checklist-item .checked{position:relative;border-radius:50px;margin-right:12px;width:16px;height:16px;cursor:pointer}:host .checklist-item .checked ::ng-deep mat-icon{position:relative;z-index:1}:host .checklist-item .checked:after{content:\"\";width:16px;height:16px;position:absolute;transition:background-color .2s;top:0;left:0;border-radius:50px}:host .checklist-item.checked{cursor:default}:host .checklist-item.checked ui-icon .label{color:#919191}:host .checklist-item.checked ui-icon:after{background:#d410aa}:host .checklist-item.checked .label{color:#919191}:host .checklist-item:hover{background-color:#fff2fc}:host .checklist-item:hover .label{color:#242424}:host .checklist-item.active,:host .checklist-item:active{background-color:#ffe6fa}:host .checklist-item.active .label,:host .checklist-item:active .label{color:#242424}:host .checklist-item:focus-visible{outline-offset:2px;outline:3px solid #242424;border-color:#242424;animation:focus-ring-animation-main .4s forwards}:host .checklist-item ::ng-deep .mat-mdc-radio-button{pointer-events:none!important}:host .checklist-item.disabled{pointer-events:none}:host .checklist-item.disabled .label{color:#919191}:host .action-btn{margin-top:16px;display:flex;justify-content:flex-end}:host .action-btn ::ng-deep ui-button .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper{font-size:14px!important}\n"], dependencies: [{ kind: "ngmodule", type: ProgressBarComponentModule }, { kind: "component", type: i1.ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "ngmodule", type: RadioButtonComponentModule }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i3.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled", "testId"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "ngmodule", type: DividerComponentModule }, { kind: "component", type: i4.DividerComponent, selector: "ui-divider", inputs: ["size", "companyColor", "applicationTheme", "label"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ChecklistComponent, decorators: [{
             type: Component,
@@ -142,13 +147,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         DividerComponentModule,
                         UiTranslatePipe,
                         AsyncPipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\n  <h4 [attr.aria-label]=\"ariaLabel() ?? label()\">{{ label() }}</h4>\n}\n@if (description()) {\n  <div aria-label=\"description\" class=\"description\" [innerHTML]=\"description()\"></div>\n}\n\n<ui-progress-bar [showPercentage]=\"true\" [progress]=\"progress()\"></ui-progress-bar>\n\n<div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n  {{ 'COMMON.PROGRESS' | uiTranslate: { progress: progress() } | async }}\n</div>\n\n<ui-divider size=\"small\" companyColor=\"#d3d3d3\"> </ui-divider>\n\n<div class=\"checklist-container\" data-testid=\"checklist-container\">\n  @for (item of items(); track item.value + item.checked; let i = $index) {\n    <div\n      data-testid=\"checklist-item\"\n      class=\"checklist-item\"\n      [class.disabled]=\"item.disabled\"\n      [class.checked]=\"item.checked\"\n      [class.active]=\"item === selectedItem() && !autocheck()\"\n      [attr.aria-labelledby]=\"'item-' + item.value\"\n      [tabindex]=\"item?.disabled ? -1 : 0\"\n      (click)=\"selectItem(item)\"\n      (keydown)=\"keydownHandler($event, item)\"\n    >\n      <div class=\"content\">\n        <ui-icon\n          [name]=\"item.checked ? 'Check-in-line' : 'Circle-in-line'\"\n          [filled]=\"item.checked\"\n          class=\"checked\"\n          [applicationTheme]=\"theme()\"\n          [size]=\"'16'\"\n          [color]=\"item.checked ? 'white' : item.disabled ? '#919191' : 'dark'\"\n        ></ui-icon>\n        <div class=\"label-and-description\">\n          <span [id]=\"'item-' + item.value\" class=\"label\">{{ item.label }}</span>\n          @if (item.description) {\n            <span class=\"item-description\">{{ item.description }}</span>\n          }\n        </div>\n      </div>\n\n      @if (item.hasLink && !item.disabled) {\n        <div class=\"navigation\">\n          <ui-icon\n            [tabindex]=\"-1\"\n            class=\"link\"\n            [name]=\"'Arrow-chevron-right-filled'\"\n            [applicationTheme]=\"theme()\"\n            [size]=\"'24'\"\n            color=\"rebrand-black\"\n          ></ui-icon>\n        </div>\n      }\n    </div>\n  }\n</div>\n@if (footerButtonLabel()) {\n  <div class=\"action-btn\">\n    <ui-button\n      data-testid=\"checklist-footer-button\"\n      [label]=\"footerButtonLabel()!\"\n      [variant]=\"'link'\"\n      [companyColor]=\"'#000'\"\n      (buttonClickEvent)=\"footerButtonClick($event)\"\n    ></ui-button>\n  </div>\n}\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}:host{display:flex;flex-direction:column;padding:24px;background:#fff;border:1px solid #d3d3d3;border-radius:10px}:host .checklist-container{margin-top:24px;display:flex;flex-direction:column;height:100%;overflow:auto}:host h4{margin:16px 0}:host .description{font-size:14px;line-height:22px;margin-bottom:16px}:host ui-progress-bar{margin-bottom:24px}:host .checklist-item{border-radius:10px;border:1px solid transparent;display:flex;align-items:center;flex-direction:row;height:40px;padding:8px 8px 8px 12px;margin:4px 4px 8px;background-color:#fff;justify-content:space-between;cursor:pointer}:host .checklist-item .content{display:flex;align-items:center}:host .checklist-item .label-and-description{display:flex;flex-direction:column}:host .checklist-item .label-and-description .label{-webkit-user-select:none;user-select:none}:host .checklist-item .label-and-description .item-description{font-size:12px;color:#666;line-height:16px}:host .checklist-item .link{position:relative;z-index:1;cursor:pointer;border-radius:50px}:host .checklist-item .checked{position:relative;border-radius:50px;margin-right:12px;width:16px;height:16px;cursor:pointer}:host .checklist-item .checked ::ng-deep mat-icon{position:relative;z-index:1}:host .checklist-item .checked:after{content:\"\";width:16px;height:16px;position:absolute;transition:background-color .2s;top:0;left:0;border-radius:50px}:host .checklist-item.checked{cursor:default}:host .checklist-item.checked ui-icon .label{color:#919191}:host .checklist-item.checked ui-icon:after{background:#d410aa}:host .checklist-item.checked .label{color:#919191}:host .checklist-item:hover{background-color:#fff2fc}:host .checklist-item:hover .label{color:#242424}:host .checklist-item.active,:host .checklist-item:active{background-color:#ffe6fa}:host .checklist-item.active .label,:host .checklist-item:active .label{color:#242424}:host .checklist-item:focus-visible{outline-offset:2px;outline:3px solid #242424;border-color:#242424;animation:focus-ring-animation-main .4s forwards}:host .checklist-item ::ng-deep .mat-mdc-radio-button{pointer-events:none!important}:host .checklist-item.disabled{pointer-events:none}:host .checklist-item.disabled .label{color:#919191}:host .action-btn{margin-top:16px;display:flex;justify-content:flex-end}:host .action-btn ::ng-deep ui-button .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper{font-size:14px!important}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\n  <h4 [attr.aria-label]=\"ariaLabel() ?? label()\">{{ label() }}</h4>\n}\n@if (description()) {\n  <div aria-label=\"description\" class=\"description\" [innerHTML]=\"description()\"></div>\n}\n\n<ui-progress-bar [showPercentage]=\"true\" [progress]=\"progress()\"></ui-progress-bar>\n\n<div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n  {{ 'COMMON.PROGRESS' | uiTranslate: { progress: progress() } | async }}\n</div>\n\n<ui-divider size=\"small\" companyColor=\"#d3d3d3\"> </ui-divider>\n\n<div class=\"checklist-container\" [attr.data-testid]=\"testId() ?? 'checklist-container'\">\n  @for (item of items(); track item.value + item.checked; let i = $index) {\n    <div\n      [attr.data-testid]=\"itemTestId(item.value)\"\n      class=\"checklist-item\"\n      [class.disabled]=\"item.disabled\"\n      [class.checked]=\"item.checked\"\n      [class.active]=\"item === selectedItem() && !autocheck()\"\n      [attr.aria-labelledby]=\"'item-' + item.value\"\n      [tabindex]=\"item?.disabled ? -1 : 0\"\n      (click)=\"selectItem(item)\"\n      (keydown)=\"keydownHandler($event, item)\"\n    >\n      <div class=\"content\">\n        <ui-icon\n          [name]=\"item.checked ? 'Check-in-line' : 'Circle-in-line'\"\n          [filled]=\"item.checked\"\n          class=\"checked\"\n          [applicationTheme]=\"theme()\"\n          [size]=\"'16'\"\n          [color]=\"item.checked ? 'white' : item.disabled ? '#919191' : 'dark'\"\n        ></ui-icon>\n        <div class=\"label-and-description\">\n          <span [id]=\"'item-' + item.value\" class=\"label\">{{ item.label }}</span>\n          @if (item.description) {\n            <span class=\"item-description\">{{ item.description }}</span>\n          }\n        </div>\n      </div>\n\n      @if (item.hasLink && !item.disabled) {\n        <div class=\"navigation\">\n          <ui-icon\n            [tabindex]=\"-1\"\n            class=\"link\"\n            [name]=\"'Arrow-chevron-right-filled'\"\n            [applicationTheme]=\"theme()\"\n            [size]=\"'24'\"\n            color=\"rebrand-black\"\n          ></ui-icon>\n        </div>\n      }\n    </div>\n  }\n</div>\n@if (footerButtonLabel()) {\n  <div class=\"action-btn\">\n    <ui-button\n      data-testid=\"checklist-footer-button\"\n      [label]=\"footerButtonLabel()!\"\n      [variant]=\"'link'\"\n      [companyColor]=\"'#000'\"\n      (buttonClickEvent)=\"footerButtonClick($event)\"\n    ></ui-button>\n  </div>\n}\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}:host{display:flex;flex-direction:column;padding:24px;background:#fff;border:1px solid #d3d3d3;border-radius:10px}:host .checklist-container{margin-top:24px;display:flex;flex-direction:column;height:100%;overflow:auto}:host h4{margin:16px 0}:host .description{font-size:14px;line-height:22px;margin-bottom:16px}:host ui-progress-bar{margin-bottom:24px}:host .checklist-item{border-radius:10px;border:1px solid transparent;display:flex;align-items:center;flex-direction:row;height:40px;padding:8px 8px 8px 12px;margin:4px 4px 8px;background-color:#fff;justify-content:space-between;cursor:pointer}:host .checklist-item .content{display:flex;align-items:center}:host .checklist-item .label-and-description{display:flex;flex-direction:column}:host .checklist-item .label-and-description .label{-webkit-user-select:none;user-select:none}:host .checklist-item .label-and-description .item-description{font-size:12px;color:#666;line-height:16px}:host .checklist-item .link{position:relative;z-index:1;cursor:pointer;border-radius:50px}:host .checklist-item .checked{position:relative;border-radius:50px;margin-right:12px;width:16px;height:16px;cursor:pointer}:host .checklist-item .checked ::ng-deep mat-icon{position:relative;z-index:1}:host .checklist-item .checked:after{content:\"\";width:16px;height:16px;position:absolute;transition:background-color .2s;top:0;left:0;border-radius:50px}:host .checklist-item.checked{cursor:default}:host .checklist-item.checked ui-icon .label{color:#919191}:host .checklist-item.checked ui-icon:after{background:#d410aa}:host .checklist-item.checked .label{color:#919191}:host .checklist-item:hover{background-color:#fff2fc}:host .checklist-item:hover .label{color:#242424}:host .checklist-item.active,:host .checklist-item:active{background-color:#ffe6fa}:host .checklist-item.active .label,:host .checklist-item:active .label{color:#242424}:host .checklist-item:focus-visible{outline-offset:2px;outline:3px solid #242424;border-color:#242424;animation:focus-ring-animation-main .4s forwards}:host .checklist-item ::ng-deep .mat-mdc-radio-button{pointer-events:none!important}:host .checklist-item.disabled{pointer-events:none}:host .checklist-item.disabled .label{color:#919191}:host .action-btn{margin-top:16px;display:flex;justify-content:flex-end}:host .action-btn ::ng-deep ui-button .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper{font-size:14px!important}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
-                }] }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], applicationTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationTheme", required: false }] }], footerButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerButtonLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], autocheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocheck", required: false }] }], footerButtonClicked: [{ type: i0.Output, args: ["footerButtonClicked"] }], completed: [{ type: i0.Output, args: ["completed"] }], selectedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItem", required: false }] }, { type: i0.Output, args: ["selectedItemChange"] }] } });
+                }] }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], applicationTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationTheme", required: false }] }], footerButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerButtonLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], autocheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocheck", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], footerButtonClicked: [{ type: i0.Output, args: ["footerButtonClicked"] }], completed: [{ type: i0.Output, args: ["completed"] }], selectedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItem", required: false }] }, { type: i0.Output, args: ["selectedItemChange"] }] } });
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/testgorilla-tgo-ui-components-checklist.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"testgorilla-tgo-ui-components-checklist.mjs","sources":["../../../components/checklist/checklist.component.ts","../../../components/checklist/checklist.component.html","../../../components/checklist/testgorilla-tgo-ui-components-checklist.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Inject, Optional, computed, input, model, output } from '@angular/core';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport {\n ApplicationTheme,\n IKeyboardEvent,\n UiTranslatePipe,\n LanguageService,\n} from '@testgorilla/tgo-ui/components/core';\nimport { DividerComponentModule } from '@testgorilla/tgo-ui/components/divider';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ProgressBarComponentModule } from '@testgorilla/tgo-ui/components/progress-bar';\nimport { RadioButtonComponentModule } from '@testgorilla/tgo-ui/components/radio-button';\n\nimport type { ChecklistItem } from './checklist.model';\n\n@Component({\n selector: 'ui-checklist',\n imports: [\n ProgressBarComponentModule,\n RadioButtonComponentModule,\n IconComponentModule,\n ButtonComponentModule,\n DividerComponentModule,\n UiTranslatePipe,\n AsyncPipe,\n ],\n templateUrl: './checklist.component.html',\n styleUrl: './checklist.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ChecklistComponent {\n /*\n Label for the checklist\n * @type {string}\n * @memberof ChecklistComponent\n /\n label = input('');\n\n /\n Sub title/Description for the checklist\n * @type {string}\n * @memberof ChecklistComponent\n /\n description = input<string \| null>(null);\n\n /\n Items for the checklist\n * @type {ModelSignal<ChecklistItem[]>}\n * @memberof ChecklistComponent\n /\n items = model<ChecklistItem[]>([]);\n\n /\n Application theme\n * @type {ApplicationTheme}\n * @memberof ChecklistComponent\n /\n applicationTheme = input<ApplicationTheme \| undefined>(undefined);\n readonly theme = computed(() => this.applicationTheme() ?? this.defaultAppTheme);\n\n /\n Confirm button label\n * @type {string}\n * @memberof ChecklistComponent\n /\n footerButtonLabel = input<string \| undefined>(undefined);\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used to indicate whether an input field is required for form submission.\n * @type {string}\n * @memberof ChecklistComponent\n /\n ariaLabel = input<string \| undefined>(undefined);\n\n /\n The language to be used\n * @property language\n * @type {Language}\n * @memberof ChecklistComponent\n /\n language = input(LanguageService.defaultLanguage);\n\n /\n A boolean property that determines whether the checklist items should be automatically checked.\n \n @type {boolean}\n /\n autocheck = input(true);\n\n /\n Event emitter that triggers when the footer button is clicked.\n * Emits a void event.\n /\n footerButtonClicked = output<void>();\n\n /\n An output event emitter that signifies the completion of a task or process.\n * This event does not carry any payload.\n /\n readonly completed = output<void>();\n\n /\n Represents the currently selected item in the checklist.\n * This is an instance of the `ChecklistItem` supports two-way binding.\n /\n selectedItem = model<ChecklistItem>();\n\n readonly currentIndex = computed(() => {\n const items = this.items();\n const selectedItem = this.selectedItem();\n return selectedItem ? items.indexOf(selectedItem) : -1;\n });\n\n protected progress = computed(() => {\n const items = this.items();\n const total = items.length;\n const checked = items.filter(item => item.checked).length;\n const progressValue = Number(((checked / total) 100).toFixed(0));\n if (progressValue === 100) {\n this.completed.emit();\n }\n return progressValue;\n });\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {}\n\n selectItem(item: ChecklistItem) {\n if ((item.checked \|\| item.disabled \|\| this.selectedItem() === item) && !item.reselect) {\n return;\n }\n if (this.autocheck()) {\n item.checked = item?.reselect ? !item.checked : true;\n this.items.set([...this.items()]);\n }\n this.selectedItem.set(item);\n }\n\n keydownHandler($event: KeyboardEvent, item: ChecklistItem) {\n if ((IKeyboardEvent.SPACE as string) === $event.key \|\| (IKeyboardEvent.ENTER as string) === $event.key) {\n $event.preventDefault();\n this.selectItem(item);\n }\n }\n\n next() {\n const currentIndex = this.currentIndex();\n if (currentIndex < this.items().length - 1) {\n this.selectItem(this.items()[currentIndex + 1]);\n }\n }\n\n prev() {\n const currentIndex = this.currentIndex();\n if (currentIndex > 0) {\n this.selectItem(this.items()[currentIndex - 1]);\n }\n }\n\n footerButtonClick(event: Event) {\n event.preventDefault();\n this.footerButtonClicked.emit();\n }\n}\n","@if (label()) {\n <h4 [attr.aria-label]=\"ariaLabel() ?? label()\">{{ label() }}</h4>\n}\n@if (description()) {\n <div aria-label=\"description\" class=\"description\" [innerHTML]=\"description()\"></div>\n}\n\n<ui-progress-bar [showPercentage]=\"true\" [progress]=\"progress()\"></ui-progress-bar>\n\n<div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ 'COMMON.PROGRESS' \| uiTranslate: { progress: progress() } \| async }}\n</div>\n\n<ui-divider size=\"small\" companyColor=\"#d3d3d3\"> </ui-divider>\n\n<div class=\"checklist-container\" data-testid=\"checklist-container\">\n @for (item of items(); track item.value + item.checked; let i = $index) {\n <div\n data-testid=\"checklist-item\"\n class=\"checklist-item\"\n [class.disabled]=\"item.disabled\"\n [class.checked]=\"item.checked\"\n [class.active]=\"item === selectedItem() && !autocheck()\"\n [attr.aria-labelledby]=\"'item-' + item.value\"\n [tabindex]=\"item?.disabled ? -1 : 0\"\n (click)=\"selectItem(item)\"\n (keydown)=\"keydownHandler($event, item)\"\n >\n <div class=\"content\">\n <ui-icon\n [name]=\"item.checked ? 'Check-in-line' : 'Circle-in-line'\"\n [filled]=\"item.checked\"\n class=\"checked\"\n [applicationTheme]=\"theme()\"\n [size]=\"'16'\"\n [color]=\"item.checked ? 'white' : item.disabled ? '#919191' : 'dark'\"\n ></ui-icon>\n <div class=\"label-and-description\">\n <span [id]=\"'item-' + item.value\" class=\"label\">{{ item.label }}</span>\n @if (item.description) {\n <span class=\"item-description\">{{ item.description }}</span>\n }\n </div>\n </div>\n\n @if (item.hasLink && !item.disabled) {\n <div class=\"navigation\">\n <ui-icon\n [tabindex]=\"-1\"\n class=\"link\"\n [name]=\"'Arrow-chevron-right-filled'\"\n [applicationTheme]=\"theme()\"\n [size]=\"'24'\"\n color=\"rebrand-black\"\n ></ui-icon>\n </div>\n }\n </div>\n }\n</div>\n@if (footerButtonLabel()) {\n <div class=\"action-btn\">\n <ui-button\n data-testid=\"checklist-footer-button\"\n [label]=\"footerButtonLabel()!\"\n [variant]=\"'link'\"\n [companyColor]=\"'#000'\"\n (buttonClickEvent)=\"footerButtonClick($event)\"\n ></ui-button>\n </div>\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"testgorilla-tgo-ui-components-checklist.mjs","sources":["../../../components/checklist/checklist.component.ts","../../../components/checklist/checklist.component.html","../../../components/checklist/testgorilla-tgo-ui-components-checklist.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Inject, Optional, computed, input, model, output } from '@angular/core';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport {\n ApplicationTheme,\n IKeyboardEvent,\n UiTranslatePipe,\n LanguageService,\n} from '@testgorilla/tgo-ui/components/core';\nimport { DividerComponentModule } from '@testgorilla/tgo-ui/components/divider';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ProgressBarComponentModule } from '@testgorilla/tgo-ui/components/progress-bar';\nimport { RadioButtonComponentModule } from '@testgorilla/tgo-ui/components/radio-button';\n\nimport type { ChecklistItem } from './checklist.model';\n\n@Component({\n selector: 'ui-checklist',\n imports: [\n ProgressBarComponentModule,\n RadioButtonComponentModule,\n IconComponentModule,\n ButtonComponentModule,\n DividerComponentModule,\n UiTranslatePipe,\n AsyncPipe,\n ],\n templateUrl: './checklist.component.html',\n styleUrl: './checklist.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ChecklistComponent {\n /*\n Label for the checklist\n * @type {string}\n * @memberof ChecklistComponent\n /\n label = input('');\n\n /\n Sub title/Description for the checklist\n * @type {string}\n * @memberof ChecklistComponent\n /\n description = input<string \| null>(null);\n\n /\n Items for the checklist\n * @type {ModelSignal<ChecklistItem[]>}\n * @memberof ChecklistComponent\n /\n items = model<ChecklistItem[]>([]);\n\n /\n Application theme\n * @type {ApplicationTheme}\n * @memberof ChecklistComponent\n /\n applicationTheme = input<ApplicationTheme \| undefined>(undefined);\n readonly theme = computed(() => this.applicationTheme() ?? this.defaultAppTheme);\n\n /\n Confirm button label\n * @type {string}\n * @memberof ChecklistComponent\n /\n footerButtonLabel = input<string \| undefined>(undefined);\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used to indicate whether an input field is required for form submission.\n * @type {string}\n * @memberof ChecklistComponent\n /\n ariaLabel = input<string \| undefined>(undefined);\n\n /\n The language to be used\n * @property language\n * @type {Language}\n * @memberof ChecklistComponent\n /\n language = input(LanguageService.defaultLanguage);\n\n /\n A boolean property that determines whether the checklist items should be automatically checked.\n \n @type {boolean}\n /\n autocheck = input(true);\n\n readonly testId = input<string \| null>(null);\n\n protected itemTestId(value: string): string {\n const testId = this.testId();\n return testId ? `${testId}-${value}` : 'checklist-item';\n }\n\n /\n Event emitter that triggers when the footer button is clicked.\n * Emits a void event.\n /\n footerButtonClicked = output<void>();\n\n /\n An output event emitter that signifies the completion of a task or process.\n * This event does not carry any payload.\n /\n readonly completed = output<void>();\n\n /\n Represents the currently selected item in the checklist.\n * This is an instance of the `ChecklistItem` supports two-way binding.\n /\n selectedItem = model<ChecklistItem>();\n\n readonly currentIndex = computed(() => {\n const items = this.items();\n const selectedItem = this.selectedItem();\n return selectedItem ? items.indexOf(selectedItem) : -1;\n });\n\n protected progress = computed(() => {\n const items = this.items();\n const total = items.length;\n const checked = items.filter(item => item.checked).length;\n const progressValue = Number(((checked / total) 100).toFixed(0));\n if (progressValue === 100) {\n this.completed.emit();\n }\n return progressValue;\n });\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {}\n\n selectItem(item: ChecklistItem) {\n if ((item.checked \|\| item.disabled \|\| this.selectedItem() === item) && !item.reselect) {\n return;\n }\n if (this.autocheck()) {\n item.checked = item?.reselect ? !item.checked : true;\n this.items.set([...this.items()]);\n }\n this.selectedItem.set(item);\n }\n\n keydownHandler($event: KeyboardEvent, item: ChecklistItem) {\n if ((IKeyboardEvent.SPACE as string) === $event.key \|\| (IKeyboardEvent.ENTER as string) === $event.key) {\n $event.preventDefault();\n this.selectItem(item);\n }\n }\n\n next() {\n const currentIndex = this.currentIndex();\n if (currentIndex < this.items().length - 1) {\n this.selectItem(this.items()[currentIndex + 1]);\n }\n }\n\n prev() {\n const currentIndex = this.currentIndex();\n if (currentIndex > 0) {\n this.selectItem(this.items()[currentIndex - 1]);\n }\n }\n\n footerButtonClick(event: Event) {\n event.preventDefault();\n this.footerButtonClicked.emit();\n }\n}\n","@if (label()) {\n <h4 [attr.aria-label]=\"ariaLabel() ?? label()\">{{ label() }}</h4>\n}\n@if (description()) {\n <div aria-label=\"description\" class=\"description\" [innerHTML]=\"description()\"></div>\n}\n\n<ui-progress-bar [showPercentage]=\"true\" [progress]=\"progress()\"></ui-progress-bar>\n\n<div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ 'COMMON.PROGRESS' \| uiTranslate: { progress: progress() } \| async }}\n</div>\n\n<ui-divider size=\"small\" companyColor=\"#d3d3d3\"> </ui-divider>\n\n<div class=\"checklist-container\" [attr.data-testid]=\"testId() ?? 'checklist-container'\">\n @for (item of items(); track item.value + item.checked; let i = $index) {\n <div\n [attr.data-testid]=\"itemTestId(item.value)\"\n class=\"checklist-item\"\n [class.disabled]=\"item.disabled\"\n [class.checked]=\"item.checked\"\n [class.active]=\"item === selectedItem() && !autocheck()\"\n [attr.aria-labelledby]=\"'item-' + item.value\"\n [tabindex]=\"item?.disabled ? -1 : 0\"\n (click)=\"selectItem(item)\"\n (keydown)=\"keydownHandler($event, item)\"\n >\n <div class=\"content\">\n <ui-icon\n [name]=\"item.checked ? 'Check-in-line' : 'Circle-in-line'\"\n [filled]=\"item.checked\"\n class=\"checked\"\n [applicationTheme]=\"theme()\"\n [size]=\"'16'\"\n [color]=\"item.checked ? 'white' : item.disabled ? '#919191' : 'dark'\"\n ></ui-icon>\n <div class=\"label-and-description\">\n <span [id]=\"'item-' + item.value\" class=\"label\">{{ item.label }}</span>\n @if (item.description) {\n <span class=\"item-description\">{{ item.description }}</span>\n }\n </div>\n </div>\n\n @if (item.hasLink && !item.disabled) {\n <div class=\"navigation\">\n <ui-icon\n [tabindex]=\"-1\"\n class=\"link\"\n [name]=\"'Arrow-chevron-right-filled'\"\n [applicationTheme]=\"theme()\"\n [size]=\"'24'\"\n color=\"rebrand-black\"\n ></ui-icon>\n </div>\n }\n </div>\n }\n</div>\n@if (footerButtonLabel()) {\n <div class=\"action-btn\">\n <ui-button\n data-testid=\"checklist-footer-button\"\n [label]=\"footerButtonLabel()!\"\n [variant]=\"'link'\"\n [companyColor]=\"'#000'\"\n (buttonClickEvent)=\"footerButtonClick($event)\"\n ></ui-button>\n </div>\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/testgorilla-tgo-ui-components-core.mjs CHANGED Viewed

@@ -2686,7 +2686,9 @@ var PROMPT = {
 	ASK_ANYTHING: "Ask me anything...",
 	ADD_FILES: "Add files",
 	FILES: "Files",
-	VIEW_MORE: "View More"
+	VIEW_MORE: "View More",
+	CHARACTERS_REMAINING: "{{count}} characters remaining",
+	CHARACTERS_OVER_LIMIT: "{{count}} characters over the limit"
 };
 var WRITE_WITH_AI = {
 	AI_ASSIST: "AI assist",