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

---
 .../components/pie-chart/pie-chart.style.less | 18 ++++++-------
 .../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 |  7 +++---
 .../ring-chart/ring-chart.template.html       |  2 +-
 .../components/checkbox/checkbox.component.ts |  7 ++++--
 7 files changed, 38 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..3a75c006cdc9 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,29 @@
 :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 c7f1d759bfc2..0e545ba8ab3f 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 type {TuiSizeS, TuiSizeXL} from '@taiga-ui/core';
+import type {TuiSizeXL, TuiSizeXS} from '@taiga-ui/core';
 
 @Component({
     selector: 'tui-ring-chart',
@@ -20,7 +20,7 @@ export class TuiRingChartComponent {
 
     @Input()
     @HostBinding('attr.data-size')
-    public size: TuiSizeS | TuiSizeXL = 'm';
+    public size: TuiSizeXL | TuiSizeXS = 'm';
 
     @Input()
     public 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 f3130c2988aa..68803c5ac9b6 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;
     }
 }
 
@@ -74,3 +78,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 794446f19d87..db5f2ace54d3 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 1447fcd9f206..94a2bde49a48 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 type {TuiDocExample} from '@taiga-ui/addon-doc';
-import type {TuiSizeS, TuiSizeXL} from '@taiga-ui/core';
+import type {TuiSizeXL, TuiSizeXS} from '@taiga-ui/core';
 
 @Component({
     selector: 'example-tui-ring-chart',
@@ -36,12 +36,13 @@ export class ExampleTuiRingChartComponent {
 
     protected activeItemIndex = this.activeItemIndexVariants[0];
 
-    protected readonly sizeVariants: ReadonlyArray<TuiSizeS | TuiSizeXL> = [
+    protected readonly sizeVariants: ReadonlyArray<TuiSizeXL | TuiSizeXS> = [
+        'xs',
         's',
         'm',
         'l',
         'xl',
     ];
 
-    protected size = this.sizeVariants[1];
+    protected 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 995ba0190ca0..8fa3156bb247 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 b1a730bb7a6b..583be3427ed9 100644
--- a/projects/experimental/components/checkbox/checkbox.component.ts
+++ b/projects/experimental/components/checkbox/checkbox.component.ts
@@ -6,7 +6,7 @@ import {
     inject,
     Input,
 } from '@angular/core';
-import {NgControl} from '@angular/forms';
+import {NgControl, NgModel} from '@angular/forms';
 import {
     tuiControlValue,
     TuiDestroyService,
@@ -64,7 +64,10 @@ export class TuiCheckboxComponent implements OnInit, DoCheck {
         tuiControlValue(this.control)
             .pipe(takeUntil(this.destroy$))
             .subscribe(value => {
-                this.el.indeterminate = value === null;
+                // https://github.com/angular/angular/issues/14988
+                const fix = this.control instanceof NgModel ? this.control.model : value;
+
+                this.el.indeterminate = fix === null;
             });
     }