From 265bbda97b62bca96dcde7bf1bf4bf9a8b220258 Mon Sep 17 00:00:00 2001
From: Andrei Fateev <fateeand@gmail.com>
Date: Fri, 17 Jul 2026 12:09:08 +0200
Subject: [PATCH 1/2] docs: add code examples for Progress Circular, Progress
 Linear, Radio

---
 .../progress-circular-page.component.html     |  34 +--
 .../progress-circular-page.component.ts       |   6 +-
 .../progress-circular-page.examples.ts        |  23 ++
 .../progress-linear-page.component.html       |  44 ++--
 .../progress-linear-page.component.ts         |  10 +-
 .../progress-linear-page.examples.ts          |  29 +++
 .../radio-page/radio-page.component.html      |  43 +++-
 .../radio-page/radio-page.component.scss      |   6 -
 .../pages/radio-page/radio-page.component.ts  |   7 +-
 .../pages/radio-page/radio-page.examples.ts   | 198 ++++++++++++++++++
 10 files changed, 351 insertions(+), 49 deletions(-)
 create mode 100644 projects/composition/src/app/pages/progress-circular-page/progress-circular-page.examples.ts
 create mode 100644 projects/composition/src/app/pages/progress-linear-page/progress-linear-page.examples.ts
 create mode 100644 projects/composition/src/app/pages/radio-page/radio-page.examples.ts

diff --git a/projects/composition/src/app/pages/progress-circular-page/progress-circular-page.component.html b/projects/composition/src/app/pages/progress-circular-page/progress-circular-page.component.html
index a1bff2128..2d6de447a 100644
--- a/projects/composition/src/app/pages/progress-circular-page/progress-circular-page.component.html
+++ b/projects/composition/src/app/pages/progress-circular-page/progress-circular-page.component.html
@@ -8,19 +8,23 @@
       <a routerLink="/loader">Loader component</a>
     </div>
   </div>
-  <div class="progr-circ-group">
-    <cps-progress-circular
-      color="luxury"
-      diameter="7.5rem"
-      strokeWidth="0.5rem"></cps-progress-circular>
-    <cps-progress-circular diameter="3.75rem"></cps-progress-circular>
-    <cps-progress-circular
-      color="surprise"
-      diameter="1.875rem"
-      strokeWidth="0.1875rem"></cps-progress-circular>
-    <cps-progress-circular
-      color="prepared"
-      diameter="0.9375rem"
-      strokeWidth="0.125rem"></cps-progress-circular>
-  </div>
+  <app-code-example
+    label="Progress circular"
+    [htmlCode]="examples.variants.html">
+    <div class="progr-circ-group">
+      <cps-progress-circular
+        color="luxury"
+        diameter="7.5rem"
+        strokeWidth="0.5rem"></cps-progress-circular>
+      <cps-progress-circular diameter="3.75rem"></cps-progress-circular>
+      <cps-progress-circular
+        color="surprise"
+        diameter="1.875rem"
+        strokeWidth="0.1875rem"></cps-progress-circular>
+      <cps-progress-circular
+        color="prepared"
+        diameter="0.9375rem"
+        strokeWidth="0.125rem"></cps-progress-circular>
+    </div>
+  </app-code-example>
 </app-component-docs-viewer>
diff --git a/projects/composition/src/app/pages/progress-circular-page/progress-circular-page.component.ts b/projects/composition/src/app/pages/progress-circular-page/progress-circular-page.component.ts
index edba8620b..47a9aebdb 100644
--- a/projects/composition/src/app/pages/progress-circular-page/progress-circular-page.component.ts
+++ b/projects/composition/src/app/pages/progress-circular-page/progress-circular-page.component.ts
@@ -2,14 +2,17 @@ import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CpsIconComponent, CpsProgressCircularComponent } from 'cps-ui-kit';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
+import { CodeExampleComponent } from '../../components/code-example/code-example.component';
 import ComponentData from '../../api-data/cps-progress-circular.json';
+import { progressCircularExamples } from './progress-circular-page.examples';
 
 @Component({
   imports: [
     CpsIconComponent,
     CpsProgressCircularComponent,
     ComponentDocsViewerComponent,
-    RouterModule
+    RouterModule,
+    CodeExampleComponent
   ],
   selector: 'app-progress-circular-page',
   templateUrl: './progress-circular-page.component.html',
@@ -18,4 +21,5 @@ import ComponentData from '../../api-data/cps-progress-circular.json';
 })
 export class ProgressCircularPageComponent {
   componentData = ComponentData;
+  readonly examples = progressCircularExamples;
 }
diff --git a/projects/composition/src/app/pages/progress-circular-page/progress-circular-page.examples.ts b/projects/composition/src/app/pages/progress-circular-page/progress-circular-page.examples.ts
new file mode 100644
index 000000000..7a2c51e64
--- /dev/null
+++ b/projects/composition/src/app/pages/progress-circular-page/progress-circular-page.examples.ts
@@ -0,0 +1,23 @@
+export const progressCircularExamples: Record<
+  string,
+  { html: string; ts?: string }
+> = {
+  variants: {
+    html: `
+<div style="display: flex; align-items: center; gap: 3rem; overflow: hidden;">
+  <cps-progress-circular
+    color="luxury"
+    diameter="7.5rem"
+    strokeWidth="0.5rem"></cps-progress-circular>
+  <cps-progress-circular diameter="3.75rem"></cps-progress-circular>
+  <cps-progress-circular
+    color="surprise"
+    diameter="1.875rem"
+    strokeWidth="0.1875rem"></cps-progress-circular>
+  <cps-progress-circular
+    color="prepared"
+    diameter="0.9375rem"
+    strokeWidth="0.125rem"></cps-progress-circular>
+</div>`
+  }
+};
diff --git a/projects/composition/src/app/pages/progress-linear-page/progress-linear-page.component.html b/projects/composition/src/app/pages/progress-linear-page/progress-linear-page.component.html
index 9366a925d..eb1e96dba 100644
--- a/projects/composition/src/app/pages/progress-linear-page/progress-linear-page.component.html
+++ b/projects/composition/src/app/pages/progress-linear-page/progress-linear-page.component.html
@@ -1,24 +1,26 @@
 <app-component-docs-viewer [componentData]="componentData">
   <!-- Example of component's usage -->
-  <div class="progr-lin-group">
-    <cps-progress-linear></cps-progress-linear>
-    <cps-progress-linear
-      color="energy"
-      radius="0.25rem"
-      bgColor="energy-highlighten"
-      height="0.75rem">
-    </cps-progress-linear>
-    <cps-progress-linear
-      height="0.1875rem"
-      radius="0.25rem"
-      opacity="0.3"
-      bgColor="transparent">
-    </cps-progress-linear>
-    <cps-progress-linear
-      color="grounded"
-      radius="0.625rem"
-      bgColor="grounded-highlighten"
-      width="25rem"
-      height="0.75rem"></cps-progress-linear>
-  </div>
+  <app-code-example label="Progress linear" [htmlCode]="examples.variants.html">
+    <div class="progr-lin-group">
+      <cps-progress-linear></cps-progress-linear>
+      <cps-progress-linear
+        color="energy"
+        radius="0.25rem"
+        bgColor="energy-highlighten"
+        height="0.75rem">
+      </cps-progress-linear>
+      <cps-progress-linear
+        height="0.1875rem"
+        radius="0.25rem"
+        opacity="0.3"
+        bgColor="transparent">
+      </cps-progress-linear>
+      <cps-progress-linear
+        color="grounded"
+        radius="0.625rem"
+        bgColor="grounded-highlighten"
+        width="25rem"
+        height="0.75rem"></cps-progress-linear>
+    </div>
+  </app-code-example>
 </app-component-docs-viewer>
diff --git a/projects/composition/src/app/pages/progress-linear-page/progress-linear-page.component.ts b/projects/composition/src/app/pages/progress-linear-page/progress-linear-page.component.ts
index 2277a136a..478c81dc6 100644
--- a/projects/composition/src/app/pages/progress-linear-page/progress-linear-page.component.ts
+++ b/projects/composition/src/app/pages/progress-linear-page/progress-linear-page.component.ts
@@ -1,11 +1,16 @@
 import { Component } from '@angular/core';
 import { CpsProgressLinearComponent } from 'cps-ui-kit';
-
 import ComponentData from '../../api-data/cps-progress-linear.json';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
+import { CodeExampleComponent } from '../../components/code-example/code-example.component';
+import { progressLinearExamples } from './progress-linear-page.examples';
 
 @Component({
-  imports: [CpsProgressLinearComponent, ComponentDocsViewerComponent],
+  imports: [
+    CpsProgressLinearComponent,
+    ComponentDocsViewerComponent,
+    CodeExampleComponent
+  ],
   selector: 'app-progress-linear-page',
   templateUrl: './progress-linear-page.component.html',
   styleUrls: ['./progress-linear-page.component.scss'],
@@ -13,4 +18,5 @@ import { ComponentDocsViewerComponent } from '../../components/component-docs-vi
 })
 export class ProgressLinearPageComponent {
   componentData = ComponentData;
+  readonly examples = progressLinearExamples;
 }
diff --git a/projects/composition/src/app/pages/progress-linear-page/progress-linear-page.examples.ts b/projects/composition/src/app/pages/progress-linear-page/progress-linear-page.examples.ts
new file mode 100644
index 000000000..bd6c95375
--- /dev/null
+++ b/projects/composition/src/app/pages/progress-linear-page/progress-linear-page.examples.ts
@@ -0,0 +1,29 @@
+export const progressLinearExamples: Record<
+  string,
+  { html: string; ts?: string }
+> = {
+  variants: {
+    html: `
+<div style="display: flex; flex-direction: column; gap: 3rem;">
+  <cps-progress-linear></cps-progress-linear>
+  <cps-progress-linear
+    color="energy"
+    radius="0.25rem"
+    bgColor="energy-highlighten"
+    height="0.75rem">
+  </cps-progress-linear>
+  <cps-progress-linear
+    height="0.1875rem"
+    radius="0.25rem"
+    opacity="0.3"
+    bgColor="transparent">
+  </cps-progress-linear>
+  <cps-progress-linear
+    color="grounded"
+    radius="0.625rem"
+    bgColor="grounded-highlighten"
+    width="25rem"
+    height="0.75rem"></cps-progress-linear>
+</div>`
+  }
+};
diff --git a/projects/composition/src/app/pages/radio-page/radio-page.component.html b/projects/composition/src/app/pages/radio-page/radio-page.component.html
index ad0b037ce..70fde3e68 100644
--- a/projects/composition/src/app/pages/radio-page/radio-page.component.html
+++ b/projects/composition/src/app/pages/radio-page/radio-page.component.html
@@ -1,6 +1,9 @@
 <app-component-docs-viewer [componentData]="componentData">
   <!-- Example of component's usage -->
-  <div class="radiogroups-group">
+  <app-code-example
+    label="Required radio group"
+    [htmlCode]="examples.requiredRadioGroup.html"
+    [tsCode]="examples.requiredRadioGroup.ts">
     <form [formGroup]="form">
       <cps-radio-group
         groupLabel="Radio group where 3rd option must be selected"
@@ -8,18 +11,36 @@
         [options]="options">
       </cps-radio-group>
     </form>
+  </app-code-example>
+
+  <app-code-example
+    label="Radio group with a tooltip"
+    [htmlCode]="examples.tooltipRadioGroup.html"
+    [tsCode]="examples.tooltipRadioGroup.ts">
     <cps-radio-group
       groupLabel="Radio group with a tooltip"
       [options]="options"
       infoTooltip="Provide any information here"
       value="second">
     </cps-radio-group>
+  </app-code-example>
+
+  <app-code-example
+    label="Vertical radio group"
+    [htmlCode]="examples.verticalRadioGroup.html"
+    [tsCode]="examples.verticalRadioGroup.ts">
     <cps-radio-group
       groupLabel="Vertical radio group"
       [options]="options"
       value="second"
       [vertical]="true">
     </cps-radio-group>
+  </app-code-example>
+
+  <app-code-example
+    label="Disabled vertical radio group"
+    [htmlCode]="examples.disabledVerticalRadioGroup.html"
+    [tsCode]="examples.disabledVerticalRadioGroup.ts">
     <cps-radio-group
       groupLabel="Disabled vertical radio group"
       [options]="options"
@@ -27,10 +48,22 @@
       [disabled]="true"
       [vertical]="true">
     </cps-radio-group>
+  </app-code-example>
+
+  <app-code-example
+    label="Radio group with partially disabled options"
+    [htmlCode]="examples.partiallyDisabledRadioGroup.html"
+    [tsCode]="examples.partiallyDisabledRadioGroup.ts">
     <cps-radio-group
       groupLabel="Radio group with partially disabled options and targeted tooltips"
       [options]="partiallyDisabledOptions">
     </cps-radio-group>
+  </app-code-example>
+
+  <app-code-example
+    label="Radio group with two-way binding"
+    [htmlCode]="examples.twoWayBindingRadioGroup.html"
+    [tsCode]="examples.twoWayBindingRadioGroup.ts">
     <div class="sync-val-example">
       <cps-radio-group
         groupLabel="Radio group with two-way binding"
@@ -39,6 +72,12 @@
       </cps-radio-group>
       <div class="sync-val">Selected value: {{ syncVal }}</div>
     </div>
+  </app-code-example>
+
+  <app-code-example
+    label="Radio group with custom content"
+    [htmlCode]="examples.customContentRadioGroup.html"
+    [tsCode]="examples.customContentRadioGroup.ts">
     <cps-radio-group
       groupLabel="Radio group with custom content"
       class="custom-content-example"
@@ -90,5 +129,5 @@
       </cps-radio>
       <cps-radio [option]="{ label: 'Simple option', value: 2 }"></cps-radio>
     </cps-radio-group>
-  </div>
+  </app-code-example>
 </app-component-docs-viewer>
diff --git a/projects/composition/src/app/pages/radio-page/radio-page.component.scss b/projects/composition/src/app/pages/radio-page/radio-page.component.scss
index 766e0aa98..f768e508f 100644
--- a/projects/composition/src/app/pages/radio-page/radio-page.component.scss
+++ b/projects/composition/src/app/pages/radio-page/radio-page.component.scss
@@ -1,9 +1,3 @@
-.radiogroups-group {
-  gap: 2.25rem;
-  display: flex;
-  flex-direction: column;
-}
-
 .sync-val-example {
   .sync-val {
     margin-top: 1rem;
diff --git a/projects/composition/src/app/pages/radio-page/radio-page.component.ts b/projects/composition/src/app/pages/radio-page/radio-page.component.ts
index 45f3a5883..509561ae9 100644
--- a/projects/composition/src/app/pages/radio-page/radio-page.component.ts
+++ b/projects/composition/src/app/pages/radio-page/radio-page.component.ts
@@ -15,9 +15,10 @@ import {
   CpsSelectComponent,
   CpsRadioOption
 } from 'cps-ui-kit';
-
 import ComponentData from '../../api-data/cps-radio-group.json';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
+import { CodeExampleComponent } from '../../components/code-example/code-example.component';
+import { radioExamples } from './radio-page.examples';
 
 @Component({
   imports: [
@@ -27,7 +28,8 @@ import { ComponentDocsViewerComponent } from '../../components/component-docs-vi
     CpsRadioComponent,
     CpsSelectComponent,
     CpsCheckboxComponent,
-    ComponentDocsViewerComponent
+    ComponentDocsViewerComponent,
+    CodeExampleComponent
   ],
   selector: 'app-radio-page',
   templateUrl: './radio-page.component.html',
@@ -35,6 +37,7 @@ import { ComponentDocsViewerComponent } from '../../components/component-docs-vi
   host: { class: 'composition-page' }
 })
 export class RadioPageComponent implements OnInit {
+  readonly examples = radioExamples;
   form!: UntypedFormGroup;
 
   options: CpsRadioOption[] = [
diff --git a/projects/composition/src/app/pages/radio-page/radio-page.examples.ts b/projects/composition/src/app/pages/radio-page/radio-page.examples.ts
new file mode 100644
index 000000000..033a8c638
--- /dev/null
+++ b/projects/composition/src/app/pages/radio-page/radio-page.examples.ts
@@ -0,0 +1,198 @@
+const radioOptionsTs = `
+options: CpsRadioOption[] = [
+  { label: 'Option 1', value: 'first' },
+  { label: 'Option 2', value: 'second' },
+  { label: 'Option 3', value: 'third' }
+];`;
+
+export const radioExamples: Record<string, { html: string; ts?: string }> = {
+  requiredRadioGroup: {
+    html: `
+<form [formGroup]="form">
+  <cps-radio-group
+    groupLabel="Radio group where 3rd option must be selected"
+    formControlName="requiredRadio"
+    [options]="options">
+  </cps-radio-group>
+</form>`,
+    ts: `
+private readonly _formBuilder = inject(UntypedFormBuilder);
+
+${radioOptionsTs.trim()}
+
+form!: UntypedFormGroup;
+
+ngOnInit() {
+  this.form = this._formBuilder.group({
+    requiredRadio: [
+      '',
+      [
+        Validators.required,
+        (control: AbstractControl): ValidationErrors | null =>
+          this._checkThirdSelected(control)
+      ]
+    ]
+  });
+}
+
+private _checkThirdSelected(control: AbstractControl) {
+  const val = control.value;
+  if (!val) return null;
+
+  if (val !== 'third') {
+    return { mustMatch8Dig: 'Only third option must be selected' };
+  }
+  return null;
+}`
+  },
+
+  tooltipRadioGroup: {
+    html: `
+<cps-radio-group
+  groupLabel="Radio group with a tooltip"
+  [options]="options"
+  infoTooltip="Provide any information here"
+  value="second">
+</cps-radio-group>`,
+    ts: radioOptionsTs
+  },
+
+  verticalRadioGroup: {
+    html: `
+<cps-radio-group
+  groupLabel="Vertical radio group"
+  [options]="options"
+  value="second"
+  [vertical]="true">
+</cps-radio-group>`,
+    ts: radioOptionsTs
+  },
+
+  disabledVerticalRadioGroup: {
+    html: `
+<cps-radio-group
+  groupLabel="Disabled vertical radio group"
+  [options]="options"
+  value="second"
+  [disabled]="true"
+  [vertical]="true">
+</cps-radio-group>`,
+    ts: radioOptionsTs
+  },
+
+  partiallyDisabledRadioGroup: {
+    html: `
+<cps-radio-group
+  groupLabel="Radio group with partially disabled options and targeted tooltips"
+  [options]="partiallyDisabledOptions">
+</cps-radio-group>`,
+    ts: `
+partiallyDisabledOptions: CpsRadioOption[] = [
+  {
+    label: 'Option 1',
+    value: 'first',
+    disabled: true,
+    tooltip: 'First option is currently unavailable'
+  },
+  { label: 'Option 2', value: 'second' },
+  {
+    label: 'Option 3',
+    value: 'third',
+    disabled: true,
+    tooltip: 'Third option is currently unavailable'
+  },
+  { label: 'Option 4', value: 'fourth' }
+];`
+  },
+
+  twoWayBindingRadioGroup: {
+    html: `
+<div class="sync-val-example">
+  <cps-radio-group
+    groupLabel="Radio group with two-way binding"
+    [options]="options"
+    [(ngModel)]="syncVal">
+  </cps-radio-group>
+  <div class="sync-val">Selected value: {{ syncVal }}</div>
+</div>`,
+    ts: `
+${radioOptionsTs.trim()}
+
+syncVal = 'first';`
+  },
+
+  customContentRadioGroup: {
+    html: `
+<cps-radio-group
+  groupLabel="Radio group with custom content"
+  [value]="2"
+  [vertical]="true">
+  <cps-radio
+    [option]="{
+      ariaLabel: 'Custom option with inline selectors',
+      value: 1
+    }">
+    <div style="display: flex; align-items: center; gap: 0.3125rem;">
+      <span>On the</span>
+      <cps-select
+        ariaLabel="Select day"
+        [options]="dayOptions"
+        optionLabel="name"
+        [hideDetails]="true"
+        [value]="dayOptions[0]">
+      </cps-select>
+      <span>of every</span>
+      <cps-select
+        ariaLabel="Select month"
+        [options]="monthOptions"
+        optionLabel="name"
+        [hideDetails]="true"
+        [value]="monthOptions[0]">
+      </cps-select>
+      <span>month(s) at</span>
+      <cps-select
+        ariaLabel="Select hour"
+        [options]="hourOptions"
+        optionLabel="name"
+        [hideDetails]="true"
+        [value]="hourOptions[0]">
+      </cps-select>
+      <span>:</span>
+      <cps-select
+        ariaLabel="Select minute"
+        [options]="minuteOptions"
+        optionLabel="name"
+        [hideDetails]="true"
+        [value]="minuteOptions[0]">
+      </cps-select>
+      <cps-checkbox
+        style="margin-left: 0.9375rem;"
+        label="During the nearest weekday"
+        [value]="false"></cps-checkbox>
+    </div>
+  </cps-radio>
+  <cps-radio [option]="{ label: 'Simple option', value: 2 }"></cps-radio>
+</cps-radio-group>`,
+    ts: `
+dayOptions = [
+  { name: '1st day', data: { code: '1' } },
+  { name: '2nd day', data: { code: '2' } },
+  { name: '3rd day', data: { code: '3' } }
+];
+
+monthOptions = [...Array(12).keys()].map((n) => ({
+  name: n + 1,
+  data: { code: n + 1 }
+}));
+
+hourOptions = [...Array(24).keys()].map((n) => ({
+  name: n,
+  data: { code: n }
+}));
+
+minuteOptions = [...Array(60).keys()].map((n) => ({
+  name: n,
+  data: { code: n }
+}));`
+  }
+};

From 44e97848f67b7b6354da984aa3fe1ccc721ca006 Mon Sep 17 00:00:00 2001
From: Andrei Fateev <fateeand@gmail.com>
Date: Fri, 17 Jul 2026 12:25:58 +0200
Subject: [PATCH 2/2] sddress feedback

---
 .../src/app/pages/radio-page/radio-page.component.ts          | 2 +-
 .../src/app/pages/radio-page/radio-page.examples.ts           | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/composition/src/app/pages/radio-page/radio-page.component.ts b/projects/composition/src/app/pages/radio-page/radio-page.component.ts
index 509561ae9..f70572799 100644
--- a/projects/composition/src/app/pages/radio-page/radio-page.component.ts
+++ b/projects/composition/src/app/pages/radio-page/radio-page.component.ts
@@ -109,7 +109,7 @@ export class RadioPageComponent implements OnInit {
     if (!val) return null;
 
     if (val !== 'third') {
-      return { mustMatch8Dig: 'Only third option must be selected' };
+      return { mustSelectThird: 'Only third option must be selected' };
     }
     return null;
   }
diff --git a/projects/composition/src/app/pages/radio-page/radio-page.examples.ts b/projects/composition/src/app/pages/radio-page/radio-page.examples.ts
index 033a8c638..85bc6fde3 100644
--- a/projects/composition/src/app/pages/radio-page/radio-page.examples.ts
+++ b/projects/composition/src/app/pages/radio-page/radio-page.examples.ts
@@ -35,12 +35,12 @@ ngOnInit() {
   });
 }
 
-private _checkThirdSelected(control: AbstractControl) {
+private _checkThirdSelected(control: AbstractControl): ValidationErrors | null {
   const val = control.value;
   if (!val) return null;
 
   if (val !== 'third') {
-    return { mustMatch8Dig: 'Only third option must be selected' };
+    return { mustSelectThird: 'Only third option must be selected' };
   }
   return null;
 }`