2.x.x

libs/shared/src/lib/components/ui/map/utils/leaflet-heatmap.js

@@ -139,6 +139,14 @@ L.HeatLayer = (L.Layer ? L.Layer : L.Class).extend({
     if (!this._map) {
       return;
     }
+
+    // Calculate the zoom coefficient to ensure the radius maintains its scale
+    const scale = this._map.getZoomScale(this._map.getZoom()) / this._map.getZoomScale(2);
+    this._heat.radius(
+      this.options.radius * scale || this._heat.defaultRadius * scale,
+      this.options.blur * scale
+    );
+
     var data = [],
       r = this._heat._r,
       size = this._map.getSize(),

libs/ui/src/lib/checkbox/checkbox.component.html

@@ -9,8 +9,9 @@
       [checked]="checked"
       [indeterminate]="indeterminate"
       [ngClass]="checkboxClasses"
-      class="form-checkbox h-4 w-4 rounded border-gray-300 self-center"
+      class="form-checkbox h-4 w-4 rounded border-gray-300 self-center disabled:bg-gray-50"
       (click)="onSelect()"
+      [disabled]="disabled"
     />
   </span>
   <span class="text-sm text-dark-100 font-medium leading-6 flex">

libs/ui/src/lib/checkbox/checkbox.stories.ts

@@ -59,7 +59,6 @@ const Template: StoryFn<CheckboxComponent> = (args: CheckboxComponent) => {
       <ng-container ngProjectAs="icon">
       <ui-icon
       icon="info_outline"
-      [inline]="true"
       [size]="18"
       variant="grey"
     ></ui-icon>

libs/ui/src/lib/form-wrapper/form-wrapper.directive.ts

@@ -284,12 +284,10 @@ export class FormWrapperDirective
               this.removeDisableState();
             }
             // Error state
-            if (this.control.control.validator) {
-              if (status === 'INVALID') {
-                this.setInvalidState();
-              } else {
-                this.removeInvalidState();
-              }
+            if (status === 'INVALID') {
+              this.setInvalidState();
+            } else {
+              this.removeInvalidState();
             }
             // Required state
             const isRequired = this.control?.control?.hasValidator(

libs/ui/src/lib/form-wrapper/form-wrapper.stories.ts

@@ -7,6 +7,7 @@ import { SelectMenuModule } from '../select-menu/select-menu.module';
 import { AutocompleteModule } from '../autocomplete/autocomplete.module';
 import { ButtonModule } from '../button/button.module';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { StorybookTranslateModule } from '../../storybook-translate.module';
 
 export default {
   title: 'Components/Form Wrapper',
@@ -22,6 +23,7 @@ export default {
         AutocompleteModule,
         ButtonModule,
         ReactiveFormsModule,
+        StorybookTranslateModule,
       ],
     }),
   ],
@@ -47,18 +49,29 @@ const options = [
 ];
 
 /** Form group to test story with disable option */
-const formControl = new FormGroup({
+const formGroup = new FormGroup({
   name: new FormControl(''),
 });
 /** Callback to test story with disable option */
 const toggleDisabled = () => {
+  const formControl = formGroup.controls.name;
   if (formControl.disabled) {
     formControl.enable();
   } else {
     formControl.disable();
   }
 };
 
+/** Callback to set status of form control to invalid */
+const toggleInvalid = () => {
+  const formControl = formGroup.controls.name;
+  if (formControl.valid) {
+    formControl.setErrors({ customError: true });
+  } else {
+    formControl.setErrors(null);
+  }
+};
+
 /**
  * Template to create form wrapper component's story
  *
@@ -67,14 +80,26 @@ const toggleDisabled = () => {
  */
 const Template: StoryFn<any> = (args: any) => {
   return {
-    template: `<div uiFormFieldDirective [outline]="${args.outline}">
+    template: `
+    <div [formGroup]="formGroup">
+    <div uiFormFieldDirective [outline]="${args.outline}">
     <label>Phone Number</label>
-    <input type="text" name="account-number" id="account-number" placeholder="000-00-0000"/>
+    <input type="text" name="account-number" id="account-number" placeholder="000-00-0000" formControlName="name"/>
     <ui-spinner [size]="'medium'" uiSuffix></ui-spinner>
     <ui-icon icon="search" uiPrefix></ui-icon>
-  </div>`,
+  </div></div>
+  <ui-button (click)="toggleDisabled()">
+  Enable/disabled
+</ui-button>
+<ui-button (click)="toggleInvalid()">
+  Valid/Invalid
+</ui-button>
+  `,
     props: {
       ...args,
+      toggleInvalid,
+      toggleDisabled,
+      formGroup,
     },
   };
 };
@@ -87,9 +112,12 @@ const Template: StoryFn<any> = (args: any) => {
  */
 const TemplateSelect: StoryFn<any> = (args: any) => {
   return {
-    template: `<div uiFormFieldDirective [outline]="${args.outline}">
+    template: `
+    <div [formGroup]="formGroup">
+    <div uiFormFieldDirective [outline]="${args.outline}">
     <label>Choose language</label>
     <ui-select-menu 
+      formControlName="name"
       [multiselect]="false"
       [disabled]="false">
         <ui-select-option *ngFor="let option of options" [value]="option">
@@ -98,10 +126,21 @@ const TemplateSelect: StoryFn<any> = (args: any) => {
     </ui-select-menu>
     <ui-spinner [size]="'medium'" uiSuffix></ui-spinner>
     <ui-icon icon="search" uiPrefix></ui-icon>
-  </div>`,
+  </div>
+    </div>
+    <ui-button (click)="toggleDisabled()">
+    Enable/disabled
+  </ui-button>
+  <ui-button (click)="toggleInvalid()">
+    Valid/Invalid
+  </ui-button>
+  `,
     props: {
       ...args,
       options,
+      toggleInvalid,
+      toggleDisabled,
+      formGroup,
     },
   };
 };
@@ -115,7 +154,7 @@ const TemplateSelect: StoryFn<any> = (args: any) => {
 const TemplateAutocomplete: StoryFn<any> = (args: any) => {
   return {
     template: `
-    <div [formGroup]="formControl">
+    <div [formGroup]="formGroup">
       <div uiFormFieldDirective  [outline]="${args.outline}">
         <label>Choose language</label>
         <input
@@ -143,12 +182,16 @@ const TemplateAutocomplete: StoryFn<any> = (args: any) => {
   <ui-button (click)="toggleDisabled()">
     Enable/disabled
   </ui-button>
+  <ui-button (click)="toggleInvalid()">
+    Valid/Invalid
+  </ui-button>
   `,
     props: {
       ...args,
       options,
       toggleDisabled,
-      formControl,
+      toggleInvalid,
+      formGroup,
     },
   };
 };