From 72e97e9a19bf6ee8d5d8c7c955fe9f564354a569 Mon Sep 17 00:00:00 2001
From: Andrei Fateev <fateeand@gmail.com>
Date: Fri, 17 Jul 2026 16:37:05 +0200
Subject: [PATCH] docs: add code examples for Tree Select, Tree Autocomplete,
 Tooltip

---
 .../tooltip-page/tooltip-page.component.html  |  40 +--
 .../tooltip-page/tooltip-page.component.scss  |  41 +--
 .../tooltip-page/tooltip-page.component.ts    |   8 +-
 .../tooltip-page/tooltip-page.examples.ts     |  83 ++++++
 .../tree-autocomplete-page.component.html     | 227 +++++++++------
 .../tree-autocomplete-page.component.scss     |   6 -
 .../tree-autocomplete-page.component.ts       |   7 +-
 .../tree-autocomplete-page.examples.ts        | 269 ++++++++++++++++++
 .../tree-select-page.component.html           | 222 +++++++++------
 .../tree-select-page.component.scss           |   6 -
 .../tree-select-page.component.ts             |   7 +-
 .../tree-select-page.examples.ts              | 262 +++++++++++++++++
 12 files changed, 935 insertions(+), 243 deletions(-)
 create mode 100644 projects/composition/src/app/pages/tooltip-page/tooltip-page.examples.ts
 create mode 100644 projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.examples.ts
 create mode 100644 projects/composition/src/app/pages/tree-select-page/tree-select-page.examples.ts

diff --git a/projects/composition/src/app/pages/tooltip-page/tooltip-page.component.html b/projects/composition/src/app/pages/tooltip-page/tooltip-page.component.html
index 2a83470e5..8db2d7ebb 100644
--- a/projects/composition/src/app/pages/tooltip-page/tooltip-page.component.html
+++ b/projects/composition/src/app/pages/tooltip-page/tooltip-page.component.html
@@ -1,9 +1,8 @@
 <app-component-docs-viewer [componentData]="componentData">
   <!-- Example of component's usage -->
-  <div class="tooltip-elems-group">
-    <div class="tooltip-elems-group-title">
-      Different tooltip positions (auto repositioning if doesn't fit the screen)
-    </div>
+  <app-code-example
+    label="Different tooltip positions (auto repositioning if doesn't fit the screen)"
+    [htmlCode]="examples.tooltipPositions.html">
     <div class="tooltip-elems-group-row">
       <cps-button
         cpsTooltip="Bottom tooltip"
@@ -26,10 +25,11 @@
         label="Top tooltip">
       </cps-button>
     </div>
-  </div>
+  </app-code-example>
 
-  <div class="tooltip-elems-group">
-    <div class="tooltip-elems-group-title">Different opening methods</div>
+  <app-code-example
+    label="Different opening methods"
+    [htmlCode]="examples.openingMethods.html">
     <div class="tooltip-elems-group-elem-left">
       <cps-button
         label="Open on hover"
@@ -44,10 +44,11 @@
         tooltipOpenOn="click">
       </cps-button>
     </div>
-  </div>
+  </app-code-example>
 
-  <div class="tooltip-elems-group">
-    <div class="tooltip-elems-group-title">Long open and close delays</div>
+  <app-code-example
+    label="Long open and close delays"
+    [htmlCode]="examples.openCloseDelays.html">
     <div class="tooltip-elems-group-elem-left">
       <cps-button
         cpsTooltip="1 second open delay"
@@ -62,12 +63,11 @@
         [tooltipCloseDelay]="1000">
       </cps-button>
     </div>
-  </div>
+  </app-code-example>
 
-  <div class="tooltip-elems-group">
-    <div class="tooltip-elems-group-title">
-      Persistent tooltip with inner HTML and custom style
-    </div>
+  <app-code-example
+    label="Persistent tooltip with inner HTML and custom style"
+    [htmlCode]="examples.persistentHtmlTooltip.html">
     <cps-button
       cpsTooltip="<span class='ttip-hdr'>Follow the link</span> <a href='https://www.google.com/' target='_blank' rel='noopener noreferrer'>Google</a> <a href='https://www.bing.com/' target='_blank' rel='noopener noreferrer'>Bing</a>"
       tooltipPosition="right"
@@ -75,10 +75,12 @@
       label="Tooltip with clickable content"
       [tooltipPersistent]="true">
     </cps-button>
-  </div>
+  </app-code-example>
 
-  <div class="tooltip-elems-group">
-    <div class="tooltip-elems-group-title">Tooltip disabled state</div>
+  <app-code-example
+    label="Tooltip disabled state"
+    [htmlCode]="examples.disabledTooltipState.html"
+    [tsCode]="examples.disabledTooltipState.ts">
     <div class="tooltip-elems-group-elem-left">
       <cps-button
         tooltipPosition="bottom"
@@ -90,5 +92,5 @@
         [(ngModel)]="ttipEnabled"
         [label]="ttipEnabled ? 'Deactivate' : 'Activate'"></cps-checkbox>
     </div>
-  </div>
+  </app-code-example>
 </app-component-docs-viewer>
diff --git a/projects/composition/src/app/pages/tooltip-page/tooltip-page.component.scss b/projects/composition/src/app/pages/tooltip-page/tooltip-page.component.scss
index 7541f7e47..0a2c4385e 100644
--- a/projects/composition/src/app/pages/tooltip-page/tooltip-page.component.scss
+++ b/projects/composition/src/app/pages/tooltip-page/tooltip-page.component.scss
@@ -1,33 +1,18 @@
 :host {
-  .tooltip-elems-group {
-    margin-bottom: 2rem;
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-
-    &-title {
-      font-size: 1.5rem;
-      color: var(--cps-color-depth);
-      border-bottom: 0.0625rem solid lightgrey;
-      margin-bottom: 0.75rem;
-      padding-bottom: 0.5rem;
-      font-weight: 600;
-    }
-    &-elem-left {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.75rem 2.5rem;
-      align-items: center;
-    }
+  .tooltip-elems-group-elem-left {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem 2.5rem;
+    align-items: center;
+  }
 
-    &-row {
-      width: 100%;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      gap: 0.75rem;
-      margin-bottom: 1.125rem;
-      align-items: center;
-    }
+  .tooltip-elems-group-row {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 0.75rem;
+    align-items: center;
   }
 }
 
diff --git a/projects/composition/src/app/pages/tooltip-page/tooltip-page.component.ts b/projects/composition/src/app/pages/tooltip-page/tooltip-page.component.ts
index c3f7388cd..788003c4c 100644
--- a/projects/composition/src/app/pages/tooltip-page/tooltip-page.component.ts
+++ b/projects/composition/src/app/pages/tooltip-page/tooltip-page.component.ts
@@ -5,10 +5,10 @@ import {
   CpsCheckboxComponent,
   CpsTooltipDirective
 } 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-tooltip.json';
+import { tooltipExamples } from './tooltip-page.examples';
 
 @Component({
   selector: 'tooltip-page',
@@ -17,7 +17,8 @@ import ComponentData from '../../api-data/cps-tooltip.json';
     CpsButtonComponent,
     CpsTooltipDirective,
     CpsCheckboxComponent,
-    ComponentDocsViewerComponent
+    ComponentDocsViewerComponent,
+    CodeExampleComponent
   ],
   templateUrl: './tooltip-page.component.html',
   styleUrls: ['./tooltip-page.component.scss'],
@@ -26,4 +27,5 @@ import ComponentData from '../../api-data/cps-tooltip.json';
 export class TooltipPageComponent {
   componentData = ComponentData;
   ttipEnabled = false;
+  readonly examples = tooltipExamples;
 }
diff --git a/projects/composition/src/app/pages/tooltip-page/tooltip-page.examples.ts b/projects/composition/src/app/pages/tooltip-page/tooltip-page.examples.ts
new file mode 100644
index 000000000..1b8999d43
--- /dev/null
+++ b/projects/composition/src/app/pages/tooltip-page/tooltip-page.examples.ts
@@ -0,0 +1,83 @@
+export const tooltipExamples: Record<string, { html: string; ts?: string }> = {
+  tooltipPositions: {
+    html: `
+<cps-button
+  cpsTooltip="Bottom tooltip"
+  tooltipPosition="bottom"
+  label="Bottom tooltip">
+</cps-button>
+<cps-button
+  cpsTooltip="Left tooltip"
+  tooltipPosition="left"
+  label="Left tooltip">
+</cps-button>
+<cps-button
+  cpsTooltip="Right tooltip"
+  tooltipPosition="right"
+  label="Right tooltip">
+</cps-button>
+<cps-button
+  cpsTooltip="Top tooltip"
+  tooltipPosition="top"
+  label="Top tooltip">
+</cps-button>`
+  },
+
+  openingMethods: {
+    html: `
+<cps-button
+  label="Open on hover"
+  tooltipPosition="bottom"
+  cpsTooltip="Triggered on hover"
+  tooltipOpenOn="hover">
+</cps-button>
+<cps-button
+  label="Open on click"
+  tooltipPosition="right"
+  cpsTooltip="Triggered on click"
+  tooltipOpenOn="click">
+</cps-button>`
+  },
+
+  openCloseDelays: {
+    html: `
+<cps-button
+  cpsTooltip="1 second open delay"
+  label="Open delay"
+  tooltipPosition="bottom"
+  [tooltipOpenDelay]="1000">
+</cps-button>
+<cps-button
+  cpsTooltip="1 second close delay"
+  label="Close delay"
+  tooltipPosition="right"
+  [tooltipCloseDelay]="1000">
+</cps-button>`
+  },
+
+  persistentHtmlTooltip: {
+    html: `
+<cps-button
+  cpsTooltip="<span class='ttip-hdr'>Follow the link</span> <a href='https://www.google.com/' target='_blank' rel='noopener noreferrer'>Google</a> <a href='https://www.bing.com/' target='_blank' rel='noopener noreferrer'>Bing</a>"
+  tooltipPosition="right"
+  tooltipContentClass="my-tooltip-content"
+  label="Tooltip with clickable content"
+  [tooltipPersistent]="true">
+</cps-button>`
+  },
+
+  disabledTooltipState: {
+    html: `
+<cps-button
+  tooltipPosition="bottom"
+  [label]="ttipEnabled ? 'Enabled tooltip' : 'Disabled tooltip'"
+  [tooltipDisabled]="!ttipEnabled"
+  cpsTooltip="<span><strong>Some bold text</strong></span>">
+</cps-button>
+<cps-checkbox
+  [(ngModel)]="ttipEnabled"
+  [label]="ttipEnabled ? 'Deactivate' : 'Activate'"></cps-checkbox>`,
+    ts: `
+ttipEnabled = false;`
+  }
+};
diff --git a/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.html b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.html
index fe9977e6a..cbb019e06 100644
--- a/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.html
+++ b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.html
@@ -1,7 +1,10 @@
 <app-component-docs-viewer [componentData]="componentData">
   <!-- Example of component's usage -->
-  <form [formGroup]="form">
-    <div class="tree-autocompletes-group">
+  <app-code-example
+    label="Required single tree autocomplete with a tooltip"
+    [htmlCode]="examples.requiredTreeAutocomplete.html"
+    [tsCode]="examples.requiredTreeAutocomplete.ts">
+    <form [formGroup]="form">
       <cps-tree-autocomplete
         label="Required single tree autocomplete with a tooltip"
         [options]="options"
@@ -12,105 +15,149 @@
         [clearable]="true"
         formControlName="requiredTreeAutocomplete">
       </cps-tree-autocomplete>
+    </form>
+  </app-code-example>
 
-      <cps-tree-autocomplete
-        label="Loading tree autocomplete"
-        [loading]="true"
-        [options]="options"
-        [initialExpandAll]="true"
-        hint="This tree autocomplete is currently in a loading state">
-      </cps-tree-autocomplete>
+  <app-code-example
+    label="Loading tree autocomplete"
+    [htmlCode]="examples.loadingTreeAutocomplete.html"
+    [tsCode]="examples.loadingTreeAutocomplete.ts">
+    <cps-tree-autocomplete
+      label="Loading tree autocomplete"
+      [loading]="true"
+      [options]="options"
+      [initialExpandAll]="true"
+      hint="This tree autocomplete is currently in a loading state">
+    </cps-tree-autocomplete>
+  </app-code-example>
 
-      <cps-tree-autocomplete
-        label="Disabled tree autocomplete"
-        [disabled]="true"
-        hint="This tree autocomplete is disabled">
-      </cps-tree-autocomplete>
+  <app-code-example
+    label="Disabled tree autocomplete"
+    [htmlCode]="examples.disabledTreeAutocomplete.html">
+    <cps-tree-autocomplete
+      label="Disabled tree autocomplete"
+      [disabled]="true"
+      hint="This tree autocomplete is disabled">
+    </cps-tree-autocomplete>
+  </app-code-example>
 
-      <cps-tree-autocomplete
-        label="Multiple tree autocomplete"
-        [options]="options"
-        optionLabel="label"
-        optionInfo="attrType"
-        [clearable]="false"
-        [value]="selectedItems"
-        [chips]="false"
-        hint="This tree autocomplete is not clearable"
-        [multiple]="true">
-      </cps-tree-autocomplete>
+  <app-code-example
+    label="Multiple tree autocomplete"
+    [htmlCode]="examples.multipleTreeAutocomplete.html"
+    [tsCode]="examples.multipleTreeAutocomplete.ts">
+    <cps-tree-autocomplete
+      label="Multiple tree autocomplete"
+      [options]="options"
+      optionLabel="label"
+      optionInfo="attrType"
+      [clearable]="false"
+      [value]="selectedItems"
+      [chips]="false"
+      hint="This tree autocomplete is not clearable"
+      [multiple]="true">
+    </cps-tree-autocomplete>
+  </app-code-example>
 
-      <cps-tree-autocomplete
-        label="Multiple tree autocomplete with virtual scroll, chips and persistent clear icon"
-        [options]="options"
-        optionLabel="label"
-        hint="This tree autocomplete can handle large amounts of data due to virtual scroll"
-        optionInfo="attrType"
-        [value]="[options[1].children[0], options[2].children[0]]"
-        [clearable]="true"
-        [persistentClear]="true"
-        [virtualScroll]="true"
-        [multiple]="true">
-      </cps-tree-autocomplete>
+  <app-code-example
+    label="Multiple tree autocomplete with virtual scroll, chips and persistent clear icon"
+    [htmlCode]="examples.virtualScrollTreeAutocomplete.html"
+    [tsCode]="examples.virtualScrollTreeAutocomplete.ts">
+    <cps-tree-autocomplete
+      label="Multiple tree autocomplete with virtual scroll, chips and persistent clear icon"
+      [options]="options"
+      optionLabel="label"
+      hint="This tree autocomplete can handle large amounts of data due to virtual scroll"
+      optionInfo="attrType"
+      [value]="[options[1].children[0], options[2].children[0]]"
+      [clearable]="true"
+      [persistentClear]="true"
+      [virtualScroll]="true"
+      [multiple]="true">
+    </cps-tree-autocomplete>
+  </app-code-example>
 
-      <cps-tree-autocomplete
-        label="Multiple tree autocomplete with non-closable chips"
-        [options]="options"
-        optionInfo="attrType"
-        hint="This tree autocomplete doesn't have a chevron icon"
-        [showChevron]="false"
-        [clearable]="true"
-        [multiple]="true"
-        [value]="[options[1].children[0], options[2].children[0]]"
-        [closableChips]="false"></cps-tree-autocomplete>
+  <app-code-example
+    label="Multiple tree autocomplete with non-closable chips"
+    [htmlCode]="examples.nonClosableChipsTreeAutocomplete.html"
+    [tsCode]="examples.nonClosableChipsTreeAutocomplete.ts">
+    <cps-tree-autocomplete
+      label="Multiple tree autocomplete with non-closable chips"
+      [options]="options"
+      optionInfo="attrType"
+      hint="This tree autocomplete doesn't have a chevron icon"
+      [showChevron]="false"
+      [clearable]="true"
+      [multiple]="true"
+      [value]="[options[1].children[0], options[2].children[0]]"
+      [closableChips]="false"></cps-tree-autocomplete>
+  </app-code-example>
 
-      <cps-tree-autocomplete
-        label="Multiple tree autocomplete with prefix icon"
-        [options]="options"
-        optionInfo="attrType"
-        [clearable]="true"
-        [multiple]="true"
-        [chips]="false"
-        prefixIcon="search"
-        [value]="[options[2].children[0]]">
-      </cps-tree-autocomplete>
-
-      <div class="sync-val-example">
-        <cps-tree-autocomplete
-          [initialExpandDirectories]="true"
-          width="31.25rem"
-          label="Single tree autocomplete with two-way binding, enter something"
-          hint="This tree autocomplete has a fixed width of 31.25rem"
-          [options]="options"
-          optionInfo="attrType"
-          optionLabel="label"
-          [clearable]="true"
-          [(ngModel)]="syncVal"
-          [ngModelOptions]="{ standalone: true }">
-        </cps-tree-autocomplete>
-        <span class="sync-val">{{ syncVal?.label }}</span>
-      </div>
+  <app-code-example
+    label="Multiple tree autocomplete with prefix icon"
+    [htmlCode]="examples.prefixIconTreeAutocomplete.html"
+    [tsCode]="examples.prefixIconTreeAutocomplete.ts">
+    <cps-tree-autocomplete
+      label="Multiple tree autocomplete with prefix icon"
+      [options]="options"
+      optionInfo="attrType"
+      [clearable]="true"
+      [multiple]="true"
+      [chips]="false"
+      prefixIcon="search"
+      [value]="[options[2].children[0]]">
+    </cps-tree-autocomplete>
+  </app-code-example>
 
+  <app-code-example
+    label="Two-way binding"
+    [htmlCode]="examples.twoWayBindingTreeAutocomplete.html"
+    [tsCode]="examples.twoWayBindingTreeAutocomplete.ts">
+    <div class="sync-val-example">
       <cps-tree-autocomplete
-        label="Underlined tree autocomplete"
-        [options]="options"
-        optionInfo="attrType"
-        [clearable]="true"
-        [multiple]="true"
-        [chips]="false"
-        appearance="underlined"
-        prefixIcon="search">
-      </cps-tree-autocomplete>
-
-      <cps-tree-autocomplete
-        label="Borderless tree autocomplete"
+        [initialExpandDirectories]="true"
+        width="31.25rem"
+        label="Single tree autocomplete with two-way binding, enter something"
+        hint="This tree autocomplete has a fixed width of 31.25rem"
         [options]="options"
         optionInfo="attrType"
+        optionLabel="label"
         [clearable]="true"
-        [multiple]="true"
-        [chips]="false"
-        appearance="borderless"
-        prefixIcon="search">
+        [(ngModel)]="syncVal"
+        [ngModelOptions]="{ standalone: true }">
       </cps-tree-autocomplete>
+      <span class="sync-val">{{ syncVal?.label }}</span>
     </div>
-  </form>
+  </app-code-example>
+
+  <app-code-example
+    label="Underlined tree autocomplete"
+    [htmlCode]="examples.underlinedTreeAutocomplete.html"
+    [tsCode]="examples.underlinedTreeAutocomplete.ts">
+    <cps-tree-autocomplete
+      label="Underlined tree autocomplete"
+      [options]="options"
+      optionInfo="attrType"
+      [clearable]="true"
+      [multiple]="true"
+      [chips]="false"
+      appearance="underlined"
+      prefixIcon="search">
+    </cps-tree-autocomplete>
+  </app-code-example>
+
+  <app-code-example
+    label="Borderless tree autocomplete"
+    [htmlCode]="examples.borderlessTreeAutocomplete.html"
+    [tsCode]="examples.borderlessTreeAutocomplete.ts">
+    <cps-tree-autocomplete
+      label="Borderless tree autocomplete"
+      [options]="options"
+      optionInfo="attrType"
+      [clearable]="true"
+      [multiple]="true"
+      [chips]="false"
+      appearance="borderless"
+      prefixIcon="search">
+    </cps-tree-autocomplete>
+  </app-code-example>
 </app-component-docs-viewer>
diff --git a/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.scss b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.scss
index f902635d4..fe6f52680 100644
--- a/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.scss
+++ b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.scss
@@ -1,9 +1,3 @@
-.tree-autocompletes-group {
-  gap: 1.5rem;
-  display: flex;
-  flex-direction: column;
-}
-
 .sync-val-example {
   display: flex;
   align-items: center;
diff --git a/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.ts b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.ts
index 679681b3c..db3aa9fed 100644
--- a/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.ts
+++ b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.ts
@@ -7,16 +7,18 @@ import {
   Validators
 } from '@angular/forms';
 import { CpsTreeAutocompleteComponent } from 'cps-ui-kit';
-
 import ComponentData from '../../api-data/cps-tree-autocomplete.json';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
+import { CodeExampleComponent } from '../../components/code-example/code-example.component';
+import { treeAutocompleteExamples } from './tree-autocomplete-page.examples';
 
 @Component({
   imports: [
     CpsTreeAutocompleteComponent,
     FormsModule,
     ReactiveFormsModule,
-    ComponentDocsViewerComponent
+    ComponentDocsViewerComponent,
+    CodeExampleComponent
   ],
   selector: 'app-tree-autocomplete-page',
   templateUrl: './tree-autocomplete-page.component.html',
@@ -24,6 +26,7 @@ import { ComponentDocsViewerComponent } from '../../components/component-docs-vi
   host: { class: 'composition-page' }
 })
 export class TreeAutocompletePageComponent implements OnInit {
+  readonly examples = treeAutocompleteExamples;
   selectedItems = [
     {
       label: 'AttrB',
diff --git a/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.examples.ts b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.examples.ts
new file mode 100644
index 000000000..f3d14b988
--- /dev/null
+++ b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.examples.ts
@@ -0,0 +1,269 @@
+const treeOptionsTs = `
+options = [
+  {
+    isDirectory: true, // RESERVED KEY
+    label: 'Dataset 1',
+    children: [
+      {
+        label: 'Attr1_1',
+        data: 'This is attribute 1 1',
+        attrType: 'struct',
+        children: [
+          {
+            label: 'AttrA',
+            desc: 'Attribute A'
+          },
+          {
+            label: 'AttrB',
+            info: 'AttrB',
+            attrType: 'number'
+          }
+        ]
+      },
+      {
+        label: 'Attr2_1',
+        data: 'This is attribute 2 1',
+        attrType: 'struct',
+        children: [
+          {
+            label: 'AttrC',
+            desc: 'C'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    isDirectory: true, // RESERVED KEY
+    label: 'Dataset 2',
+    children: [
+      {
+        label: 'Attr1_2',
+        data: 'attr1 data'
+      },
+      {
+        label: 'Attr2_2',
+        desc: 'attr2 desc'
+      },
+      {
+        label: 'Attr3_2',
+        data: 'attr3 data'
+      }
+    ]
+  },
+  {
+    isDirectory: true, // RESERVED KEY
+    label: 'Dataset 3',
+    children: [
+      {
+        label: 'Attr1_3',
+        data: 'attr1 data',
+        children: [
+          {
+            label: 'Attr1 A',
+            data: 'attr 1 a data',
+            attrType: 'decimal'
+          },
+          {
+            label: 'Attr1 B',
+            desc: 'Attr1 b desc'
+          }
+        ]
+      },
+      {
+        label: 'Attr2_3',
+        data: 'De Niro Movies',
+        attrType: 'struct',
+        children: [
+          {
+            label: 'Attr2 A',
+            data: 'attr2 a data',
+            description: 'attr2 a description'
+          }
+        ]
+      }
+    ]
+  }
+];`;
+
+export const treeAutocompleteExamples: Record<
+  string,
+  { html: string; ts?: string }
+> = {
+  requiredTreeAutocomplete: {
+    html: `
+<form [formGroup]="form">
+  <cps-tree-autocomplete
+    label="Required single tree autocomplete with a tooltip"
+    [options]="options"
+    optionLabel="label"
+    optionInfo="attrType"
+    placeholder="Select element"
+    infoTooltip="Provide any information here"
+    [clearable]="true"
+    formControlName="requiredTreeAutocomplete">
+  </cps-tree-autocomplete>
+</form>`,
+    ts: `
+private readonly _formBuilder = inject(UntypedFormBuilder);
+
+${treeOptionsTs.trim()}
+
+form!: UntypedFormGroup;
+
+ngOnInit(): void {
+  this.form = this._formBuilder.group({
+    requiredTreeAutocomplete: [
+      this.options[1].children[0],
+      [Validators.required]
+    ]
+  });
+}`
+  },
+
+  loadingTreeAutocomplete: {
+    html: `
+<cps-tree-autocomplete
+  label="Loading tree autocomplete"
+  [loading]="true"
+  [options]="options"
+  [initialExpandAll]="true"
+  hint="This tree autocomplete is currently in a loading state">
+</cps-tree-autocomplete>`,
+    ts: treeOptionsTs
+  },
+
+  disabledTreeAutocomplete: {
+    html: `
+<cps-tree-autocomplete
+  label="Disabled tree autocomplete"
+  [disabled]="true"
+  hint="This tree autocomplete is disabled">
+</cps-tree-autocomplete>`
+  },
+
+  multipleTreeAutocomplete: {
+    html: `
+<cps-tree-autocomplete
+  label="Multiple tree autocomplete"
+  [options]="options"
+  optionLabel="label"
+  optionInfo="attrType"
+  [clearable]="false"
+  [value]="selectedItems"
+  [chips]="false"
+  hint="This tree autocomplete is not clearable"
+  [multiple]="true">
+</cps-tree-autocomplete>`,
+    ts: `
+${treeOptionsTs.trim()}
+
+selectedItems = [
+  {
+    label: 'AttrB',
+    info: 'AttrB',
+    attrType: 'number'
+  }
+];`
+  },
+
+  virtualScrollTreeAutocomplete: {
+    html: `
+<cps-tree-autocomplete
+  label="Multiple tree autocomplete with virtual scroll, chips and persistent clear icon"
+  [options]="options"
+  optionLabel="label"
+  hint="This tree autocomplete can handle large amounts of data due to virtual scroll"
+  optionInfo="attrType"
+  [value]="[options[1].children[0], options[2].children[0]]"
+  [clearable]="true"
+  [persistentClear]="true"
+  [virtualScroll]="true"
+  [multiple]="true">
+</cps-tree-autocomplete>`,
+    ts: treeOptionsTs
+  },
+
+  nonClosableChipsTreeAutocomplete: {
+    html: `
+<cps-tree-autocomplete
+  label="Multiple tree autocomplete with non-closable chips"
+  [options]="options"
+  optionInfo="attrType"
+  hint="This tree autocomplete doesn't have a chevron icon"
+  [showChevron]="false"
+  [clearable]="true"
+  [multiple]="true"
+  [value]="[options[1].children[0], options[2].children[0]]"
+  [closableChips]="false"></cps-tree-autocomplete>`,
+    ts: treeOptionsTs
+  },
+
+  prefixIconTreeAutocomplete: {
+    html: `
+<cps-tree-autocomplete
+  label="Multiple tree autocomplete with prefix icon"
+  [options]="options"
+  optionInfo="attrType"
+  [clearable]="true"
+  [multiple]="true"
+  [chips]="false"
+  prefixIcon="search"
+  [value]="[options[2].children[0]]">
+</cps-tree-autocomplete>`,
+    ts: treeOptionsTs
+  },
+
+  twoWayBindingTreeAutocomplete: {
+    html: `
+<div class="sync-val-example">
+  <cps-tree-autocomplete
+    [initialExpandDirectories]="true"
+    width="31.25rem"
+    label="Single tree autocomplete with two-way binding, enter something"
+    hint="This tree autocomplete has a fixed width of 31.25rem"
+    [options]="options"
+    optionInfo="attrType"
+    optionLabel="label"
+    [clearable]="true"
+    [(ngModel)]="syncVal"
+    [ngModelOptions]="{ standalone: true }">
+  </cps-tree-autocomplete>
+  <span class="sync-val">{{ syncVal?.label }}</span>
+</div>`,
+    ts: `
+${treeOptionsTs.trim()}
+
+syncVal: any = null;`
+  },
+
+  underlinedTreeAutocomplete: {
+    html: `
+<cps-tree-autocomplete
+  label="Underlined tree autocomplete"
+  [options]="options"
+  optionInfo="attrType"
+  [clearable]="true"
+  [multiple]="true"
+  [chips]="false"
+  appearance="underlined"
+  prefixIcon="search">
+</cps-tree-autocomplete>`,
+    ts: treeOptionsTs
+  },
+
+  borderlessTreeAutocomplete: {
+    html: `
+<cps-tree-autocomplete
+  label="Borderless tree autocomplete"
+  [options]="options"
+  optionInfo="attrType"
+  [clearable]="true"
+  [multiple]="true"
+  [chips]="false"
+  appearance="borderless"
+  prefixIcon="search">
+</cps-tree-autocomplete>`,
+    ts: treeOptionsTs
+  }
+};
diff --git a/projects/composition/src/app/pages/tree-select-page/tree-select-page.component.html b/projects/composition/src/app/pages/tree-select-page/tree-select-page.component.html
index 1f96f4b6a..6e8dae9b9 100644
--- a/projects/composition/src/app/pages/tree-select-page/tree-select-page.component.html
+++ b/projects/composition/src/app/pages/tree-select-page/tree-select-page.component.html
@@ -1,7 +1,10 @@
 <app-component-docs-viewer [componentData]="componentData">
   <!-- Example of component's usage -->
-  <form [formGroup]="form">
-    <div class="tree-selects-group">
+  <app-code-example
+    label="Required single tree select with a tooltip"
+    [htmlCode]="examples.requiredTreeSelect.html"
+    [tsCode]="examples.requiredTreeSelect.ts">
+    <form [formGroup]="form">
       <cps-tree-select
         label="Required single tree select with a tooltip"
         [options]="options"
@@ -12,102 +15,147 @@
         [clearable]="true"
         formControlName="requiredTreeSelect">
       </cps-tree-select>
-      <cps-tree-select
-        label="Loading tree select"
-        [loading]="true"
-        [options]="options"
-        [initialExpandAll]="true"
-        hint="This tree select is currently in a loading state">
-      </cps-tree-select>
+    </form>
+  </app-code-example>
 
-      <cps-tree-select
-        label="Disabled tree select"
-        [disabled]="true"
-        hint="This tree select is disabled">
-      </cps-tree-select>
+  <app-code-example
+    label="Loading tree select"
+    [htmlCode]="examples.loadingTreeSelect.html"
+    [tsCode]="examples.loadingTreeSelect.ts">
+    <cps-tree-select
+      label="Loading tree select"
+      [loading]="true"
+      [options]="options"
+      [initialExpandAll]="true"
+      hint="This tree select is currently in a loading state">
+    </cps-tree-select>
+  </app-code-example>
 
-      <cps-tree-select
-        label="Multiple tree select"
-        [options]="options"
-        optionLabel="label"
-        optionInfo="attrType"
-        [clearable]="false"
-        [value]="selectedItems"
-        [chips]="false"
-        hint="This tree select is not clearable"
-        [multiple]="true">
-      </cps-tree-select>
-
-      <cps-tree-select
-        label="Multiple tree select with virtual scroll, chips and persistent clear icon"
-        [options]="options"
-        optionLabel="label"
-        hint="This tree select can handle large amounts of data due to virtual scroll"
-        optionInfo="attrType"
-        [value]="[options[1].children[0], options[2].children[0]]"
-        [clearable]="true"
-        [persistentClear]="true"
-        [virtualScroll]="true"
-        [multiple]="true">
-      </cps-tree-select>
+  <app-code-example
+    label="Disabled tree select"
+    [htmlCode]="examples.disabledTreeSelect.html">
+    <cps-tree-select
+      label="Disabled tree select"
+      [disabled]="true"
+      hint="This tree select is disabled">
+    </cps-tree-select>
+  </app-code-example>
 
-      <cps-tree-select
-        label="Multiple tree select with non-closable chips"
-        [options]="options"
-        optionInfo="attrType"
-        hint="This tree select doesn't have a chevron icon"
-        [showChevron]="false"
-        [clearable]="true"
-        [multiple]="true"
-        [value]="[options[1].children[0], options[2].children[0]]"
-        [closableChips]="false"></cps-tree-select>
+  <app-code-example
+    label="Multiple tree select"
+    [htmlCode]="examples.multipleTreeSelect.html"
+    [tsCode]="examples.multipleTreeSelect.ts">
+    <cps-tree-select
+      label="Multiple tree select"
+      [options]="options"
+      optionLabel="label"
+      optionInfo="attrType"
+      [clearable]="false"
+      [value]="selectedItems"
+      [chips]="false"
+      hint="This tree select is not clearable"
+      [multiple]="true">
+    </cps-tree-select>
+  </app-code-example>
 
-      <cps-tree-select
-        label="Multiple tree select with prefix icon"
-        [options]="options"
-        optionInfo="attrType"
-        [clearable]="true"
-        [multiple]="true"
-        [chips]="false"
-        prefixIcon="plus"
-        [value]="[options[2].children[0]]">
-      </cps-tree-select>
+  <app-code-example
+    label="Multiple tree select with virtual scroll, chips and persistent clear icon"
+    [htmlCode]="examples.virtualScrollTreeSelect.html"
+    [tsCode]="examples.virtualScrollTreeSelect.ts">
+    <cps-tree-select
+      label="Multiple tree select with virtual scroll, chips and persistent clear icon"
+      [options]="options"
+      optionLabel="label"
+      hint="This tree select can handle large amounts of data due to virtual scroll"
+      optionInfo="attrType"
+      [value]="[options[1].children[0], options[2].children[0]]"
+      [clearable]="true"
+      [persistentClear]="true"
+      [virtualScroll]="true"
+      [multiple]="true">
+    </cps-tree-select>
+  </app-code-example>
 
-      <div class="sync-val-example">
-        <cps-tree-select
-          [initialExpandDirectories]="true"
-          width="31.25rem"
-          label="Single tree select with two-way binding, select something"
-          hint="This tree select has a fixed width of 31.25rem"
-          [options]="options"
-          optionInfo="attrType"
-          optionLabel="label"
-          [clearable]="true"
-          [(ngModel)]="syncVal"
-          [ngModelOptions]="{ standalone: true }">
-        </cps-tree-select>
-        <span class="sync-val">{{ syncVal?.label }}</span>
-      </div>
+  <app-code-example
+    label="Multiple tree select with non-closable chips"
+    [htmlCode]="examples.nonClosableChipsTreeSelect.html"
+    [tsCode]="examples.nonClosableChipsTreeSelect.ts">
+    <cps-tree-select
+      label="Multiple tree select with non-closable chips"
+      [options]="options"
+      optionInfo="attrType"
+      hint="This tree select doesn't have a chevron icon"
+      [showChevron]="false"
+      [clearable]="true"
+      [multiple]="true"
+      [value]="[options[1].children[0], options[2].children[0]]"
+      [closableChips]="false"></cps-tree-select>
+  </app-code-example>
 
-      <cps-tree-select
-        label="Underlined tree select"
-        appearance="underlined"
-        [options]="options"
-        optionInfo="attrType"
-        [clearable]="true"
-        [multiple]="true"
-        [chips]="false">
-      </cps-tree-select>
+  <app-code-example
+    label="Multiple tree select with prefix icon"
+    [htmlCode]="examples.prefixIconTreeSelect.html"
+    [tsCode]="examples.prefixIconTreeSelect.ts">
+    <cps-tree-select
+      label="Multiple tree select with prefix icon"
+      [options]="options"
+      optionInfo="attrType"
+      [clearable]="true"
+      [multiple]="true"
+      [chips]="false"
+      prefixIcon="plus"
+      [value]="[options[2].children[0]]">
+    </cps-tree-select>
+  </app-code-example>
 
+  <app-code-example
+    label="Two-way binding"
+    [htmlCode]="examples.twoWayBindingTreeSelect.html"
+    [tsCode]="examples.twoWayBindingTreeSelect.ts">
+    <div class="sync-val-example">
       <cps-tree-select
-        label="Borderless tree select"
-        appearance="borderless"
+        [initialExpandDirectories]="true"
+        width="31.25rem"
+        label="Single tree select with two-way binding, select something"
+        hint="This tree select has a fixed width of 31.25rem"
         [options]="options"
         optionInfo="attrType"
+        optionLabel="label"
         [clearable]="true"
-        [multiple]="true"
-        [chips]="false">
+        [(ngModel)]="syncVal"
+        [ngModelOptions]="{ standalone: true }">
       </cps-tree-select>
+      <span class="sync-val">{{ syncVal?.label }}</span>
     </div>
-  </form>
+  </app-code-example>
+
+  <app-code-example
+    label="Underlined tree select"
+    [htmlCode]="examples.underlinedTreeSelect.html"
+    [tsCode]="examples.underlinedTreeSelect.ts">
+    <cps-tree-select
+      label="Underlined tree select"
+      appearance="underlined"
+      [options]="options"
+      optionInfo="attrType"
+      [clearable]="true"
+      [multiple]="true"
+      [chips]="false">
+    </cps-tree-select>
+  </app-code-example>
+
+  <app-code-example
+    label="Borderless tree select"
+    [htmlCode]="examples.borderlessTreeSelect.html"
+    [tsCode]="examples.borderlessTreeSelect.ts">
+    <cps-tree-select
+      label="Borderless tree select"
+      appearance="borderless"
+      [options]="options"
+      optionInfo="attrType"
+      [clearable]="true"
+      [multiple]="true"
+      [chips]="false">
+    </cps-tree-select>
+  </app-code-example>
 </app-component-docs-viewer>
diff --git a/projects/composition/src/app/pages/tree-select-page/tree-select-page.component.scss b/projects/composition/src/app/pages/tree-select-page/tree-select-page.component.scss
index cc0971412..fe6f52680 100644
--- a/projects/composition/src/app/pages/tree-select-page/tree-select-page.component.scss
+++ b/projects/composition/src/app/pages/tree-select-page/tree-select-page.component.scss
@@ -1,9 +1,3 @@
-.tree-selects-group {
-  gap: 1.5rem;
-  display: flex;
-  flex-direction: column;
-}
-
 .sync-val-example {
   display: flex;
   align-items: center;
diff --git a/projects/composition/src/app/pages/tree-select-page/tree-select-page.component.ts b/projects/composition/src/app/pages/tree-select-page/tree-select-page.component.ts
index 53bc0cfdd..89953b611 100644
--- a/projects/composition/src/app/pages/tree-select-page/tree-select-page.component.ts
+++ b/projects/composition/src/app/pages/tree-select-page/tree-select-page.component.ts
@@ -7,16 +7,18 @@ import {
   Validators
 } from '@angular/forms';
 import { CpsTreeSelectComponent } from 'cps-ui-kit';
-
 import ComponentData from '../../api-data/cps-tree-select.json';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
+import { CodeExampleComponent } from '../../components/code-example/code-example.component';
+import { treeSelectExamples } from './tree-select-page.examples';
 
 @Component({
   imports: [
     CpsTreeSelectComponent,
     FormsModule,
     ReactiveFormsModule,
-    ComponentDocsViewerComponent
+    ComponentDocsViewerComponent,
+    CodeExampleComponent
   ],
   selector: 'app-tree-select-page',
   templateUrl: './tree-select-page.component.html',
@@ -24,6 +26,7 @@ import { ComponentDocsViewerComponent } from '../../components/component-docs-vi
   host: { class: 'composition-page' }
 })
 export class TreeSelectPageComponent implements OnInit {
+  readonly examples = treeSelectExamples;
   selectedItems = [
     {
       label: 'AttrB',
diff --git a/projects/composition/src/app/pages/tree-select-page/tree-select-page.examples.ts b/projects/composition/src/app/pages/tree-select-page/tree-select-page.examples.ts
new file mode 100644
index 000000000..53950476c
--- /dev/null
+++ b/projects/composition/src/app/pages/tree-select-page/tree-select-page.examples.ts
@@ -0,0 +1,262 @@
+const treeOptionsTs = `
+options = [
+  {
+    isDirectory: true, // RESERVED KEY
+    label: 'Dataset 1',
+    children: [
+      {
+        label: 'Attr1_1',
+        data: 'This is attribute 1 1',
+        attrType: 'struct',
+        children: [
+          {
+            label: 'AttrA',
+            desc: 'Attribute A'
+          },
+          {
+            label: 'AttrB',
+            info: 'AttrB',
+            attrType: 'number'
+          }
+        ]
+      },
+      {
+        label: 'Attr2_1',
+        data: 'This is attribute 2 1',
+        attrType: 'struct',
+        children: [
+          {
+            label: 'AttrC',
+            desc: 'C'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    isDirectory: true, // RESERVED KEY
+    label: 'Dataset 2',
+    children: [
+      {
+        label: 'Attr1_2',
+        data: 'attr1 data'
+      },
+      {
+        label: 'Attr2_2',
+        desc: 'attr2 desc'
+      },
+      {
+        label: 'Attr3_2',
+        data: 'attr3 data'
+      }
+    ]
+  },
+  {
+    isDirectory: true, // RESERVED KEY
+    label: 'Dataset 3',
+    children: [
+      {
+        label: 'Attr1_3',
+        data: 'attr1 data',
+        children: [
+          {
+            label: 'Attr1 A',
+            data: 'attr 1 a data',
+            attrType: 'decimal'
+          },
+          {
+            label: 'Attr1 B',
+            desc: 'Attr1 b desc'
+          }
+        ]
+      },
+      {
+        label: 'Attr2_3',
+        data: 'De Niro Movies',
+        attrType: 'struct',
+        children: [
+          {
+            label: 'Attr2 A',
+            data: 'attr2 a data',
+            description: 'attr2 a description'
+          }
+        ]
+      }
+    ]
+  }
+];`;
+
+export const treeSelectExamples: Record<string, { html: string; ts?: string }> =
+  {
+    requiredTreeSelect: {
+      html: `
+<form [formGroup]="form">
+  <cps-tree-select
+    label="Required single tree select with a tooltip"
+    [options]="options"
+    optionLabel="label"
+    optionInfo="attrType"
+    placeholder="Select element"
+    infoTooltip="Provide any information here"
+    [clearable]="true"
+    formControlName="requiredTreeSelect">
+  </cps-tree-select>
+</form>`,
+      ts: `
+private readonly _formBuilder = inject(UntypedFormBuilder);
+
+${treeOptionsTs.trim()}
+
+form!: UntypedFormGroup;
+
+ngOnInit(): void {
+  this.form = this._formBuilder.group({
+    requiredTreeSelect: [this.options[1].children[0], [Validators.required]]
+  });
+}`
+    },
+
+    loadingTreeSelect: {
+      html: `
+<cps-tree-select
+  label="Loading tree select"
+  [loading]="true"
+  [options]="options"
+  [initialExpandAll]="true"
+  hint="This tree select is currently in a loading state">
+</cps-tree-select>`,
+      ts: treeOptionsTs
+    },
+
+    disabledTreeSelect: {
+      html: `
+<cps-tree-select
+  label="Disabled tree select"
+  [disabled]="true"
+  hint="This tree select is disabled">
+</cps-tree-select>`
+    },
+
+    multipleTreeSelect: {
+      html: `
+<cps-tree-select
+  label="Multiple tree select"
+  [options]="options"
+  optionLabel="label"
+  optionInfo="attrType"
+  [clearable]="false"
+  [value]="selectedItems"
+  [chips]="false"
+  hint="This tree select is not clearable"
+  [multiple]="true">
+</cps-tree-select>`,
+      ts: `
+${treeOptionsTs.trim()}
+
+selectedItems = [
+  {
+    label: 'AttrB',
+    info: 'AttrB',
+    attrType: 'number'
+  }
+];`
+    },
+
+    virtualScrollTreeSelect: {
+      html: `
+<cps-tree-select
+  label="Multiple tree select with virtual scroll, chips and persistent clear icon"
+  [options]="options"
+  optionLabel="label"
+  hint="This tree select can handle large amounts of data due to virtual scroll"
+  optionInfo="attrType"
+  [value]="[options[1].children[0], options[2].children[0]]"
+  [clearable]="true"
+  [persistentClear]="true"
+  [virtualScroll]="true"
+  [multiple]="true">
+</cps-tree-select>`,
+      ts: treeOptionsTs
+    },
+
+    nonClosableChipsTreeSelect: {
+      html: `
+<cps-tree-select
+  label="Multiple tree select with non-closable chips"
+  [options]="options"
+  optionInfo="attrType"
+  hint="This tree select doesn't have a chevron icon"
+  [showChevron]="false"
+  [clearable]="true"
+  [multiple]="true"
+  [value]="[options[1].children[0], options[2].children[0]]"
+  [closableChips]="false"></cps-tree-select>`,
+      ts: treeOptionsTs
+    },
+
+    prefixIconTreeSelect: {
+      html: `
+<cps-tree-select
+  label="Multiple tree select with prefix icon"
+  [options]="options"
+  optionInfo="attrType"
+  [clearable]="true"
+  [multiple]="true"
+  [chips]="false"
+  prefixIcon="plus"
+  [value]="[options[2].children[0]]">
+</cps-tree-select>`,
+      ts: treeOptionsTs
+    },
+
+    twoWayBindingTreeSelect: {
+      html: `
+<div class="sync-val-example">
+  <cps-tree-select
+    [initialExpandDirectories]="true"
+    width="31.25rem"
+    label="Single tree select with two-way binding, select something"
+    hint="This tree select has a fixed width of 31.25rem"
+    [options]="options"
+    optionInfo="attrType"
+    optionLabel="label"
+    [clearable]="true"
+    [(ngModel)]="syncVal"
+    [ngModelOptions]="{ standalone: true }">
+  </cps-tree-select>
+  <span class="sync-val">{{ syncVal?.label }}</span>
+</div>`,
+      ts: `
+${treeOptionsTs.trim()}
+
+syncVal: any = null;`
+    },
+
+    underlinedTreeSelect: {
+      html: `
+<cps-tree-select
+  label="Underlined tree select"
+  appearance="underlined"
+  [options]="options"
+  optionInfo="attrType"
+  [clearable]="true"
+  [multiple]="true"
+  [chips]="false">
+</cps-tree-select>`,
+      ts: treeOptionsTs
+    },
+
+    borderlessTreeSelect: {
+      html: `
+<cps-tree-select
+  label="Borderless tree select"
+  appearance="borderless"
+  [options]="options"
+  optionInfo="attrType"
+  [clearable]="true"
+  [multiple]="true"
+  [chips]="false">
+</cps-tree-select>`,
+      ts: treeOptionsTs
+    }
+  };