@testgorilla/tgo-ui 6.2.11 → 6.2.13

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

@@ -264,10 +264,10 @@ class CheckboxComponent {
     focus() {
         this.checkboxElement.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CheckboxComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }, { token: i2.FocusMonitor }, { token: i0.NgZone }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: CheckboxComponent, isStandalone: false, 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  <mat-hint class=\"error\" *ngIf=\"ngControl?.errors | hasValidationError\">\n    <ui-validation-error\n      *ngIf=\"ngControl && !hideBuiltInErrors\"\n      [ngControl]=\"ngControl\"\n      [label]=\"hideLabelInErrors ? null : label\"\n    ></ui-validation-error>\n  </mat-hint>\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{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-container[alignment=top] ::ng-deep .mdc-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}[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=light] ::ng-deep .mdc-form-field,.dark ::ng-deep .mdc-form-field,.light ::ng-deep .mdc-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=light] ::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 .mdc-form-field .mdc-checkbox,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-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{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{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{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}*[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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.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: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i6.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "directive", type: i7.EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i7.HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CheckboxComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }, { token: i2.FocusMonitor }, { token: i0.NgZone }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: CheckboxComponent, isStandalone: false, 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  <mat-hint class=\"error\" *ngIf=\"ngControl?.errors | hasValidationError\">\n    <ui-validation-error\n      *ngIf=\"ngControl && !hideBuiltInErrors\"\n      [ngControl]=\"ngControl\"\n      [label]=\"hideLabelInErrors ? null : label\"\n    ></ui-validation-error>\n  </mat-hint>\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{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-container[alignment=top] ::ng-deep .mdc-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}[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=light] ::ng-deep .mdc-form-field,.dark ::ng-deep .mdc-form-field,.light ::ng-deep .mdc-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=light] ::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 .mdc-form-field .mdc-checkbox,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-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{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{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{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}*[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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.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: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i6.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "directive", type: i7.EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i7.HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-checkbox', host: {
                         // Needs to be removed since it causes some a11y issues. (https://github.com/angular/components/issues/21266)
@@ -355,10 +355,10 @@ class FocusVisibleDirective {
     onBlur() {
         this.uiFocusVisible.next(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: FocusVisibleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: FocusVisibleDirective, isStandalone: true, selector: "[uiFocusVisible]", outputs: { uiFocusVisible: "uiFocusVisible" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)", "focus": "onFocus($event)", "blur": "onBlur()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FocusVisibleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: FocusVisibleDirective, isStandalone: true, selector: "[uiFocusVisible]", outputs: { uiFocusVisible: "uiFocusVisible" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)", "focus": "onFocus($event)", "blur": "onBlur()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: FocusVisibleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FocusVisibleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[uiFocusVisible]',
@@ -378,8 +378,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
             }] } });
 
 class CheckboxComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CheckboxComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: CheckboxComponentModule, declarations: [CheckboxComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CheckboxComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: CheckboxComponentModule, declarations: [CheckboxComponent], imports: [CommonModule,
             MatCheckboxModule,
             FormsModule,
             ReactiveFormsModule,
@@ -391,7 +391,7 @@ class CheckboxComponentModule {
             EllipseTextDirective,
             MatTooltipModule,
             FocusVisibleDirective], exports: [CheckboxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CheckboxComponentModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CheckboxComponentModule, imports: [CommonModule,
             MatCheckboxModule,
             FormsModule,
             ReactiveFormsModule,
@@ -400,7 +400,7 @@ class CheckboxComponentModule {
             ValidationErrorModule,
             MatTooltipModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CheckboxComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CheckboxComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CheckboxComponent],

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

@@ -129,10 +129,10 @@ class ChecklistComponent {
         event.preventDefault();
         this.footerButtonClicked.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.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: "19.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", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", 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: "19.2.20", 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", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ChecklistComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ChecklistComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-checklist', imports: [
                         ProgressBarComponentModule,

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

@@ -48,11 +48,11 @@ class LanguageService {
     getActiveLang() {
         return this.#currentLang$.asObservable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: LanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: LanguageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LanguageService, providedIn: 'root' }); }
 }
 _a = LanguageService;
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: LanguageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LanguageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -87,10 +87,10 @@ class EllipseTextDirective {
                 : textElement.clientWidth + this.maxDiffPixels < textElement.scrollWidth);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: EllipseTextDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: EllipseTextDirective, isStandalone: true, selector: "[uiEllipseText]", inputs: { isMultiline: "isMultiline", maxDiffPixels: "maxDiffPixels", refresh: "refresh" }, outputs: { onChangeTextState: "onChangeTextState" }, host: { listeners: { "window:resize": "resize()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EllipseTextDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: EllipseTextDirective, isStandalone: true, selector: "[uiEllipseText]", inputs: { isMultiline: "isMultiline", maxDiffPixels: "maxDiffPixels", refresh: "refresh" }, outputs: { onChangeTextState: "onChangeTextState" }, host: { listeners: { "window:resize": "resize()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: EllipseTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EllipseTextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[uiEllipseText]',
@@ -10561,10 +10561,10 @@ class UiTranslatePipe {
             return value ?? match;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UiTranslatePipe, deps: [{ token: LanguageService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: UiTranslatePipe, isStandalone: true, name: "uiTranslate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UiTranslatePipe, deps: [{ token: LanguageService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: UiTranslatePipe, isStandalone: true, name: "uiTranslate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UiTranslatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UiTranslatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'uiTranslate',
@@ -10722,10 +10722,10 @@ class DigitsOnlyDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DigitsOnlyDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: DigitsOnlyDirective, isStandalone: true, selector: "[digitsOnly]", inputs: { allowNegative: "allowNegative", allowDecimal: "allowDecimal", allowOnlyDigits: "allowOnlyDigits" }, host: { listeners: { "keypress": "onKeyPress($event)", "paste": "onPaste($event)", "keydown": "onKeydown($event)", "input": "onInput($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DigitsOnlyDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: DigitsOnlyDirective, isStandalone: true, selector: "[digitsOnly]", inputs: { allowNegative: "allowNegative", allowDecimal: "allowDecimal", allowOnlyDigits: "allowOnlyDigits" }, host: { listeners: { "keypress": "onKeyPress($event)", "paste": "onPaste($event)", "keydown": "onKeydown($event)", "input": "onInput($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DigitsOnlyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DigitsOnlyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[digitsOnly]',
@@ -10765,10 +10765,10 @@ class HasValidationErrorPipe {
     transform(value) {
         return value ? !!Object.keys(value).filter(key => this.errorTypes.includes(key)).length : false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: HasValidationErrorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: HasValidationErrorPipe, isStandalone: true, name: "hasValidationError" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HasValidationErrorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: HasValidationErrorPipe, isStandalone: true, name: "hasValidationError" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: HasValidationErrorPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: HasValidationErrorPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'hasValidationError',
@@ -10802,10 +10802,10 @@ class SelectTextDirective {
             this.setTextColor();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SelectTextDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: SelectTextDirective, isStandalone: false, selector: "[selectText]", inputs: { selectText: "selectText" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SelectTextDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: SelectTextDirective, isStandalone: false, selector: "[selectText]", inputs: { selectText: "selectText" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SelectTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SelectTextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[selectText]',
@@ -10940,10 +10940,10 @@ class MemoizeFuncPipe {
         }
         return handler(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: MemoizeFuncPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: MemoizeFuncPipe, isStandalone: true, name: "memoizeFunc" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MemoizeFuncPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: MemoizeFuncPipe, isStandalone: true, name: "memoizeFunc" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: MemoizeFuncPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MemoizeFuncPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'memoizeFunc',
@@ -10969,10 +10969,10 @@ class OrdinalSuffixPipe {
                 return 'PERCENTILE_SUFFIXES.TH';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: OrdinalSuffixPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: OrdinalSuffixPipe, isStandalone: true, name: "ordinalSuffix" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: OrdinalSuffixPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: OrdinalSuffixPipe, isStandalone: true, name: "ordinalSuffix" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: OrdinalSuffixPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: OrdinalSuffixPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'ordinalSuffix',
@@ -11002,10 +11002,10 @@ class TruncatePipe {
         }
         return input.substring(0, index) + suffix;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: TruncatePipe, isStandalone: true, name: "truncate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: TruncatePipe, isStandalone: true, name: "truncate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TruncatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TruncatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'truncate',
@@ -11033,10 +11033,10 @@ class DataPropertyGetterPipe {
         }
         return obj;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DataPropertyGetterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: DataPropertyGetterPipe, isStandalone: true, name: "dataPropertyGetter" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DataPropertyGetterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: DataPropertyGetterPipe, isStandalone: true, name: "dataPropertyGetter" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DataPropertyGetterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DataPropertyGetterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dataPropertyGetter',
@@ -11068,10 +11068,10 @@ class DynamicComponentDirective {
         }
         this.subscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicComponentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: DynamicComponentDirective, isStandalone: true, selector: "[dynamicComponent]", inputs: { dynamicComponent: "dynamicComponent" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DynamicComponentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: DynamicComponentDirective, isStandalone: true, selector: "[dynamicComponent]", inputs: { dynamicComponent: "dynamicComponent" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicComponentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DynamicComponentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dynamicComponent]',

package/fesm2022/testgorilla-tgo-ui-components-datepicker.mjs

@@ -26,10 +26,10 @@ class DatepickerService {
     get useBrowserTimezone() {
         return this.#useBrowserTimezone;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DatepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DatepickerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DatepickerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -63,10 +63,10 @@ class UiDateAdapter extends NativeDateAdapter {
         };
         return new Intl.DateTimeFormat(locale, options).format(date);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UiDateAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UiDateAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UiDateAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UiDateAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UiDateAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UiDateAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -74,10 +74,10 @@ class CustomDateAdapter extends NativeDateAdapter {
     format(date) {
         return formatDate(date, 'MM/yyyy', 'en-US');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CustomDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CustomDateAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CustomDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CustomDateAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CustomDateAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CustomDateAdapter, decorators: [{
             type: Injectable
         }] });
 const FORMATS = {
@@ -92,8 +92,8 @@ const FORMATS = {
     },
 };
 class NoDateFormatDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NoDateFormatDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: NoDateFormatDirective, isStandalone: true, selector: "[appNoDateFormat]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NoDateFormatDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: NoDateFormatDirective, isStandalone: true, selector: "[appNoDateFormat]", providers: [
             {
                 provide: DateAdapter,
                 useClass: CustomDateAdapter,
@@ -104,7 +104,7 @@ class NoDateFormatDirective {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NoDateFormatDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NoDateFormatDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appNoDateFormat]',
@@ -379,13 +379,13 @@ class DatepickerComponent {
         document.body.style.setProperty('--datepicker-hover-color', hover);
         document.body.style.setProperty('--datepicker-selected-color', `${this.companyColor || '#D410AA'}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DatepickerComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }, { token: DatepickerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DatepickerComponent, isStandalone: false, selector: "ui-datepicker", inputs: { label: "label", fieldName: "fieldName", placeholder: "placeholder", id: "id", value: "value", errors: "errors", isRange: "isRange", setSingleDateRangeOnBlur: "setSingleDateRangeOnBlur", showInnerErrors: "showInnerErrors", innerErrorsMessage: "innerErrorsMessage", disabled: "disabled", required: "required", hintMessage: "hintMessage", updateOnBlur: "updateOnBlur", showBottomContent: "showBottomContent", fullWidth: "fullWidth", minDate: "minDate", maxDate: "maxDate", monthPicker: "monthPicker", applicationTheme: "applicationTheme", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", preventUserInput: "preventUserInput", companyColor: "companyColor", browserTimezone: "browserTimezone" }, outputs: { changed: "changed" }, host: { properties: { "class": "this.class" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }, { token: DatepickerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DatepickerComponent, isStandalone: false, selector: "ui-datepicker", inputs: { label: "label", fieldName: "fieldName", placeholder: "placeholder", id: "id", value: "value", errors: "errors", isRange: "isRange", setSingleDateRangeOnBlur: "setSingleDateRangeOnBlur", showInnerErrors: "showInnerErrors", innerErrorsMessage: "innerErrorsMessage", disabled: "disabled", required: "required", hintMessage: "hintMessage", updateOnBlur: "updateOnBlur", showBottomContent: "showBottomContent", fullWidth: "fullWidth", minDate: "minDate", maxDate: "maxDate", monthPicker: "monthPicker", applicationTheme: "applicationTheme", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", preventUserInput: "preventUserInput", companyColor: "companyColor", browserTimezone: "browserTimezone" }, outputs: { changed: "changed" }, host: { properties: { "class": "this.class" } }, providers: [
             { provide: DateAdapter, useClass: UiDateAdapter },
             { provide: MAT_DATE_FORMATS, useValue: UI_DATE_FORMATS },
         ], usesOnChanges: true, ngImport: i0, template: "@if (monthPicker) {\n  <mat-form-field\n    appNoDateFormat\n    appearance=\"outline\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n    [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n  >\n    <mat-label *ngIf=\"label\">\n      <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n    </mat-label>\n\n    <input\n      matInput\n      [id]=\"id!\"\n      (blur)=\"onTouch()\"\n      [placeholder]=\"placeholder!\"\n      [matDatepicker]=\"dp\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      [name]=\"fieldName!\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      [readonly]=\"preventUserInput\"\n      (change)=\"onInput($event)\"\n      (dateChange)=\"onValueChange($event.value)\"\n    />\n    <mat-datepicker-toggle matIconSuffix [for]=\"dp\">\n      <ui-icon\n        matDatepickerToggleIcon\n        [applicationTheme]=\"applicationTheme\"\n        name=\"Calendar\"\n        size=\"24\"\n        color=\"inherit\"\n      ></ui-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker\n      panelClass=\"month-picker\"\n      #dp\n      startView=\"multi-year\"\n      (monthSelected)=\"setMonthAndYear($event, dp)\"\n    ></mat-datepicker>\n\n    <mat-hint class=\"info\" *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\n      >{{ hint }}\n    </mat-hint>\n    <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n      <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  @if (isRange) {\n    <mat-form-field\n      appearance=\"outline\"\n      [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n      [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n      class=\"range-datepicker\"\n    >\n      <mat-label *ngIf=\"label\">\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n      </mat-label>\n\n      <mat-date-range-input [formGroup]=\"range\" [rangePicker]=\"rangePicker\" [min]=\"minDate\" [max]=\"maxDate\">\n        <input\n          matStartDate\n          formControlName=\"start\"\n          [placeholder]=\"translationContext + 'START_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\n          (blur)=\"setSingleDateRangeOnBlur && fillSingleDateRange(true)\"\n        />\n        <input\n          matEndDate\n          formControlName=\"end\"\n          [placeholder]=\"translationContext + 'END_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\n          (blur)=\"setSingleDateRangeOnBlur && fillSingleDateRange(false)\"\n        />\n      </mat-date-range-input>\n      <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n        <ui-icon\n          matDatepickerToggleIcon\n          [applicationTheme]=\"applicationTheme\"\n          name=\"Calendar\"\n          size=\"24\"\n          color=\"inherit\"\n        ></ui-icon>\n      </mat-datepicker-toggle>\n      <mat-date-range-picker #rangePicker (closed)=\"handleCloseRangePicker()\"></mat-date-range-picker>\n\n      <mat-hint\n        class=\"info\"\n        *ngIf=\"\n          hint &&\n          !_errors &&\n          !(ngControl?.touched && (ngControl?.errors | hasValidationError)) &&\n          !(range?.invalid && showInnerErrors)\n        \"\n        >{{ hint }}\n      </mat-hint>\n      <mat-hint\n        class=\"error\"\n        *ngIf=\"\n          errorsLength ||\n          (ngControl?.touched && (ngControl?.errors | hasValidationError)) ||\n          (range?.invalid && showInnerErrors)\n        \"\n      >\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n      </mat-hint>\n    </mat-form-field>\n  } @else {\n    <mat-form-field\n      appearance=\"outline\"\n      [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n      [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n    >\n      <mat-label *ngIf=\"label\">\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n      </mat-label>\n      <input\n        matInput\n        [matDatepicker]=\"picker\"\n        (blur)=\"onTouch()\"\n        (dateChange)=\"onValueChange($event.value)\"\n        [id]=\"id!\"\n        [placeholder]=\"placeholder!\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [name]=\"fieldName!\"\n        [readonly]=\"preventUserInput\"\n        [min]=\"minDate\"\n        [max]=\"maxDate\"\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n        <ui-icon\n          matDatepickerToggleIcon\n          [applicationTheme]=\"applicationTheme\"\n          name=\"Calendar\"\n          size=\"24\"\n          color=\"inherit\"\n        ></ui-icon>\n      </mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n\n      <mat-hint\n        class=\"info\"\n        *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\n        >{{ hint }}\n      </mat-hint>\n      <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n      </mat-hint>\n    </mat-form-field>\n  }\n}\n\n<ng-template #labelTpl>{{ label }}<span *ngIf=\"required\"> *</span></ng-template>\n<ng-template #hintsTpl>\n  @if (errorsLength) {\n    <div class=\"errors\" *ngFor=\"let error of _errors\">\n      <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n      <span [innerHTML]=\"error\"></span>\n    </div>\n  }\n  @if (ngControl && !hideBuiltInErrors) {\n    <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n  }\n  @if (showInnerErrors) {\n    @if (isRange) {\n      <div class=\"errors\">\n        <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n        <span [innerHTML]=\"innerErrorsMessage\"></span>\n      </div>\n    }\n  }\n</ng-template>\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}.month-picker .mat-calendar-period-button{pointer-events:none}.month-picker .mat-calendar-arrow{display:none}.ui-datepicker{width:100%}.ui-datepicker .mat-mdc-form-field{margin-top:0;min-width:296px}.ui-datepicker .mat-mdc-form-field.range-datepicker .mat-mdc-form-field-hint.error svg{color:#e02800!important}.ui-datepicker .mat-mdc-form-field.full-width{width:100%}.ui-datepicker .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;max-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:0;font-size:12px;line-height:16px;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#e02800}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:4px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{margin-right:4px}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#e02800}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#e02800}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#e02800}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex;padding-bottom:10px}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint .hint-message{color:#888!important;margin-top:4px}.mat-datepicker-content .mat-mdc-button.mat-unthemed .mdc-button__label>span{font-weight:600}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#e9f0f1}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#e9f0f1}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--datepicker-hover-color)}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before,[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:var(--datepicker-hover-color)}[theme=dark] .mat-datepicker-content .mat-calendar-body-selected,[theme=light] .mat-datepicker-content .mat-calendar-body-selected{background-color:var(--datepicker-selected-color)}[theme=dark] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected),[theme=light] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected){background:transparent;--mat-datepicker-calendar-date-focus-state-background-color: $tgo-white}[theme=dark] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){--mat-datepicker-calendar-date-focus-state-background-color: var(--datepicker-hover-color)}.info{margin-top:4px!important;padding-bottom:10px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i7.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i7.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i7.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i7.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i7.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: NoDateFormatDirective, selector: "[appNoDateFormat]" }, { kind: "component", type: i9.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i10.HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-datepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: DateAdapter, useClass: UiDateAdapter },
@@ -457,8 +457,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
             }] } });
 
 class DatepickerComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DatepickerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: DatepickerComponentModule, declarations: [DatepickerComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: DatepickerComponentModule, declarations: [DatepickerComponent], imports: [CommonModule,
             MatFormFieldModule,
             MatInputModule,
             IconComponentModule,
@@ -470,7 +470,7 @@ class DatepickerComponentModule {
             NoDateFormatDirective,
             HasValidationErrorPipe,
             ValidationErrorModule], exports: [DatepickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DatepickerComponentModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerComponentModule, imports: [CommonModule,
             MatFormFieldModule,
             MatInputModule,
             IconComponentModule,
@@ -480,7 +480,7 @@ class DatepickerComponentModule {
             MatNativeDateModule,
             ValidationErrorModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DatepickerComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [DatepickerComponent],