From a7b4ff37bbc9089dcbc6eaf56c4877274512ecf1 Mon Sep 17 00:00:00 2001
From: Alex Inkin <alexander@inkin.ru>
Date: Mon, 25 Mar 2024 19:35:49 +0800
Subject: [PATCH] feat(addon-charts): `RingChart` add xs size (#7077)

---
 .../components/pie-chart/pie-chart.style.less | 17 ++++++-------
 .../ring-chart/ring-chart.component.ts        |  4 +--
 .../ring-chart/ring-chart.style.less          | 25 +++++++++++++------
 .../ring-chart/ring-chart.template.html       |  1 +
 .../charts/ring-chart/ring-chart.component.ts | 12 ++++++---
 .../ring-chart/ring-chart.template.html       |  2 +-
 .../components/checkbox/checkbox.component.ts |  7 ++++--
 7 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/projects/addon-charts/components/pie-chart/pie-chart.style.less b/projects/addon-charts/components/pie-chart/pie-chart.style.less
index 5a90a9d844fb..5f0ff447c82f 100644
--- a/projects/addon-charts/components/pie-chart/pie-chart.style.less
+++ b/projects/addon-charts/components/pie-chart/pie-chart.style.less
@@ -9,31 +9,28 @@
 :host {
     position: relative;
     display: block;
+    width: var(--t-size);
+    height: var(--t-size);
 
     &[data-size='xs'] {
-        width: @size-xs;
-        height: @size-xs;
+        --t-size: @size-xs;
         pointer-events: none;
     }
 
     &[data-size='s'] {
-        width: @size-s;
-        height: @size-s;
+        --t-size: @size-s;
     }
 
     &[data-size='m'] {
-        width: @size-m;
-        height: @size-m;
+        --t-size: @size-m;
     }
 
     &[data-size='l'] {
-        width: @size-l;
-        height: @size-l;
+        --t-size: @size-l;
     }
 
     &[data-size='xl'] {
-        width: @size-xl;
-        height: @size-xl;
+        --t-size: @size-xl;
     }
 }
 
diff --git a/projects/addon-charts/components/ring-chart/ring-chart.component.ts b/projects/addon-charts/components/ring-chart/ring-chart.component.ts
index aa8f4e3f24cd..01e615cd997a 100644
--- a/projects/addon-charts/components/ring-chart/ring-chart.component.ts
+++ b/projects/addon-charts/components/ring-chart/ring-chart.component.ts
@@ -6,7 +6,7 @@ import {
     Input,
     Output,
 } from '@angular/core';
-import {TuiSizeS, TuiSizeXL} from '@taiga-ui/core';
+import {TuiSizeXL, TuiSizeXS} from '@taiga-ui/core';
 
 @Component({
     selector: 'tui-ring-chart',
@@ -20,7 +20,7 @@ export class TuiRingChartComponent {
 
     @Input()
     @HostBinding('attr.data-size')
-    size: TuiSizeS | TuiSizeXL = 'm';
+    size: TuiSizeXL | TuiSizeXS = 'm';
 
     @Input()
     activeItemIndex = NaN;
diff --git a/projects/addon-charts/components/ring-chart/ring-chart.style.less b/projects/addon-charts/components/ring-chart/ring-chart.style.less
index 28d0a262fef4..2dbe4da8498a 100644
--- a/projects/addon-charts/components/ring-chart/ring-chart.style.less
+++ b/projects/addon-charts/components/ring-chart/ring-chart.style.less
@@ -1,5 +1,6 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
+@size-xs: 3rem;
 @size-s: 4rem;
 @size-m: 9rem;
 @size-l: 11rem;
@@ -8,25 +9,28 @@
 :host {
     position: relative;
     display: block;
+    width: var(--t-size);
+    height: var(--t-size);
+    flex-shrink: 0;
+
+    &[data-size='xs'] {
+        --t-size: @size-xs;
+    }
 
     &[data-size='s'] {
-        width: @size-s;
-        height: @size-s;
+        --t-size: @size-s;
     }
 
     &[data-size='m'] {
-        width: @size-m;
-        height: @size-m;
+        --t-size: @size-m;
     }
 
     &[data-size='l'] {
-        width: @size-l;
-        height: @size-l;
+        --t-size: @size-l;
     }
 
     &[data-size='xl'] {
-        width: @size-xl;
-        height: @size-xl;
+        --t-size: @size-xl;
     }
 }
 
@@ -73,3 +77,8 @@
     bottom: 25%;
     border-radius: 100%;
 }
+
+.t-chart {
+    width: 100%;
+    height: 100%;
+}
diff --git a/projects/addon-charts/components/ring-chart/ring-chart.template.html b/projects/addon-charts/components/ring-chart/ring-chart.template.html
index 3fb809e443a9..be22b9b38dec 100644
--- a/projects/addon-charts/components/ring-chart/ring-chart.template.html
+++ b/projects/addon-charts/components/ring-chart/ring-chart.template.html
@@ -5,6 +5,7 @@
 </div>
 
 <tui-pie-chart
+    class="t-chart"
     [activeItemIndex]="activeItemIndex"
     [masked]="true"
     [size]="size"
diff --git a/projects/demo/src/modules/charts/ring-chart/ring-chart.component.ts b/projects/demo/src/modules/charts/ring-chart/ring-chart.component.ts
index 77afb7ad0763..5b617c6371bd 100644
--- a/projects/demo/src/modules/charts/ring-chart/ring-chart.component.ts
+++ b/projects/demo/src/modules/charts/ring-chart/ring-chart.component.ts
@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
-import {TuiSizeS, TuiSizeXL} from '@taiga-ui/core';
+import {TuiSizeXL, TuiSizeXS} from '@taiga-ui/core';
 
 @Component({
     selector: 'example-tui-ring-chart',
@@ -36,7 +36,13 @@ export class ExampleTuiRingChartComponent {
 
     activeItemIndex = this.activeItemIndexVariants[0];
 
-    readonly sizeVariants: ReadonlyArray<TuiSizeS | TuiSizeXL> = ['s', 'm', 'l', 'xl'];
+    readonly sizeVariants: ReadonlyArray<TuiSizeXL | TuiSizeXS> = [
+        'xs',
+        's',
+        'm',
+        'l',
+        'xl',
+    ];
 
-    size = this.sizeVariants[1];
+    size = this.sizeVariants[2];
 }
diff --git a/projects/demo/src/modules/charts/ring-chart/ring-chart.template.html b/projects/demo/src/modules/charts/ring-chart/ring-chart.template.html
index 453da8069835..56ce1fc41ec8 100644
--- a/projects/demo/src/modules/charts/ring-chart/ring-chart.template.html
+++ b/projects/demo/src/modules/charts/ring-chart/ring-chart.template.html
@@ -43,7 +43,7 @@
             <ng-template
                 documentationPropertyMode="input"
                 documentationPropertyName="size"
-                documentationPropertyType="TuiSizeS | TuiSizeXL"
+                documentationPropertyType="TuiSizeXS | TuiSizeXL"
                 [documentationPropertyValues]="sizeVariants"
                 [(documentationPropertyValue)]="size"
             >
diff --git a/projects/experimental/components/checkbox/checkbox.component.ts b/projects/experimental/components/checkbox/checkbox.component.ts
index 09a42b9a53a1..40ea38ea7e85 100644
--- a/projects/experimental/components/checkbox/checkbox.component.ts
+++ b/projects/experimental/components/checkbox/checkbox.component.ts
@@ -9,7 +9,7 @@ import {
     Optional,
     Self,
 } from '@angular/core';
-import {NgControl} from '@angular/forms';
+import {NgControl, NgModel} from '@angular/forms';
 import {
     tuiControlValue,
     TuiDestroyService,
@@ -68,7 +68,10 @@ export class TuiCheckboxComponent implements OnInit {
         tuiControlValue(this.control)
             .pipe(distinctUntilChanged(), tuiWatch(this.cdr), takeUntil(this.destroy$))
             .subscribe(value => {
-                this.el.nativeElement.indeterminate = value === null;
+                // https://github.com/angular/angular/issues/14988
+                const fix = this.control instanceof NgModel ? this.control.model : value;
+
+                this.el.nativeElement.indeterminate = fix === null;
             });
     }
 }