From 4ea38cb4e1048652f5a876eb7002fb835fb32aa0 Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Wed, 16 Sep 2026 02:05:27 +0300
Subject: [PATCH 1/5] feat(qr-code): add samples

---
 .../data-display/data-display-routes-data.ts  |  5 ++-
 src/app/data-display/data-display.routes.ts   | 18 ++++++++
 .../qr-code-overview.component.html           | 26 +++++++++++
 .../qr-code-overview.component.scss           | 31 +++++++++++++
 .../qr-code-overview.component.ts             | 23 ++++++++++
 .../qr-code-styling.component.html            |  8 ++++
 .../qr-code-styling.component.scss            | 36 +++++++++++++++
 .../qr-code-styling.component.ts              | 14 ++++++
 .../qr-code-tailwind-styling.component.html   | 44 +++++++++++++++++++
 .../qr-code-tailwind-styling.component.scss   | 16 +++++++
 .../qr-code-tailwind-styling.component.ts     | 13 ++++++
 11 files changed, 233 insertions(+), 1 deletion(-)
 create mode 100644 src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.html
 create mode 100644 src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.scss
 create mode 100644 src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.ts
 create mode 100644 src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.html
 create mode 100644 src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.scss
 create mode 100644 src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.ts
 create mode 100644 src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.html
 create mode 100644 src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.scss
 create mode 100644 src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.ts

diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts
index 39ceef1ea..f87d7bf80 100644
--- a/src/app/data-display/data-display-routes-data.ts
+++ b/src/app/data-display/data-display-routes-data.ts
@@ -43,5 +43,8 @@ export const dataDisplayRoutesData = {
     "mask-sample-5": { displayName: "Placeholder", parentName: "Mask" },
     "text-highlight-1": { displayName: "Search within a single container", parentName: "Text Highlight" },
     "text-highlight-2": { displayName: "Search within multiple containers", parentName: "Text Highlight" },
-    "text-highlight-style": { displayName: "Text Highlight Style", parentName: "Text Highlight" }
+    "text-highlight-style": { displayName: "Text Highlight Style", parentName: "Text Highlight" },
+    "qr-code-overview": { displayName: "Overview", parentName: "QR Code" },
+    "qr-code-styling": { displayName: "QR Code Styling", parentName: "QR Code" },
+    "qr-code-tailwind-styling": { displayName: "QR Code Tailwind Styling", parentName: "QR Code" }
 };
diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts
index de1538d48..4416a7e95 100644
--- a/src/app/data-display/data-display.routes.ts
+++ b/src/app/data-display/data-display.routes.ts
@@ -49,6 +49,9 @@ import { TextHighlightStyleComponent } from './text-highlight/text-highlight-sty
 import {
     MaterialIconsExtendedComponent} from './icon/material-icons-extended/material-icons-extended.component';
 import { MaterialSymbolsComponent } from './icon/material-symbols/material-symbols.component';
+import { QrCodeOverviewComponent } from './qr-code/qr-code-overview/qr-code-overview.component';
+import { QrCodeStylingComponent } from './qr-code/qr-code-styling/qr-code-styling.component';
+import { QrCodeTailwindStylingComponent } from './qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component';
 import { dataDisplayRoutesData } from './data-display-routes-data';
 import { Routes } from '@angular/router';
 
@@ -282,5 +285,20 @@ export const DataDisplayRoutes: Routes = [
         component: MaterialIconsExtendedComponent,
         data: dataDisplayRoutesData['material-icons-extended'],
         path: 'material-icons-extended'
+    },
+    {
+        component: QrCodeOverviewComponent,
+        data: dataDisplayRoutesData['qr-code-overview'],
+        path: 'qr-code-overview'
+    },
+    {
+        component: QrCodeStylingComponent,
+        data: dataDisplayRoutesData['qr-code-styling'],
+        path: 'qr-code-styling'
+    },
+    {
+        component: QrCodeTailwindStylingComponent,
+        data: dataDisplayRoutesData['qr-code-tailwind-styling'],
+        path: 'qr-code-tailwind-styling'
     }
 ];
diff --git a/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.html b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.html
new file mode 100644
index 000000000..dafeba766
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.html
@@ -0,0 +1,26 @@
+<div class="qr-controls">
+    <igx-radio-group [(ngModel)]="shape" name="shape">
+        <igx-radio value="square" checked>Square</igx-radio>
+        <igx-radio value="circle">Circle</igx-radio>
+        <igx-radio value="rounded">Rounded</igx-radio>
+    </igx-radio-group>
+
+    <igx-radio-group [(ngModel)]="size" name="size">
+        <igx-radio [value]="120" checked>Small</igx-radio>
+        <igx-radio [value]="180">Medium</igx-radio>
+        <igx-radio [value]="240">Large</igx-radio>
+        <igx-radio [value]="300">Extra large</igx-radio>
+    </igx-radio-group>
+
+    <igx-switch [(ngModel)]="showLogo" labelPosition="before">Logo</igx-switch>
+</div>
+
+<igc-qr-code
+    [value]="value"
+    [attr.size]="size"
+    [attr.dot-style]="shape"
+    [attr.square-style]="shape"
+    error-level="H"
+    [attr.logo-src]="showLogo ? logoSrc : null"
+    logo-size="1"
+></igc-qr-code>
diff --git a/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.scss b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.scss
new file mode 100644
index 000000000..5794a7e78
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.scss
@@ -0,0 +1,31 @@
+@use 'igniteui-angular/theming' as *;
+
+@include core();
+
+:host::ng-deep {
+    @include theme($palette: $light-bootstrap-palette,
+        $schema: $light-bootstrap-schema);
+}
+
+:host {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2.5rem;
+    overflow-y: auto;
+}
+
+.qr-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 2.5rem;
+}
+
+igx-radio-group {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+}
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.ts b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.ts
new file mode 100644
index 000000000..c5f3729bd
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.ts
@@ -0,0 +1,23 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { defineComponents, IgcQrCodeComponent } from 'igniteui-webcomponents';
+import { IgxRadioGroupDirective, IgxRadioComponent } from 'igniteui-angular/radio';
+import { IgxSwitchComponent } from 'igniteui-angular/switch';
+
+defineComponents(IgcQrCodeComponent);
+
+@Component({
+    selector: 'app-qr-code-overview',
+    templateUrl: './qr-code-overview.component.html',
+    styleUrls: ['./qr-code-overview.component.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    imports: [FormsModule, IgxRadioGroupDirective, IgxRadioComponent, IgxSwitchComponent],
+})
+export class QrCodeOverviewComponent {
+    public shape: 'square' | 'circle' | 'rounded' = 'square';
+    public size = 120;
+    public showLogo = true;
+
+    public readonly value = 'https://www.infragistics.com/products/ignite-ui-web-components';
+    public readonly logoSrc = 'https://static.infragistics.com/marketing/Website/products/ignite-ui/shared/ignite-ui-logo-light-background-horizontal.svg';
+}
diff --git a/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.html b/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.html
new file mode 100644
index 000000000..6b00fc2b6
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.html
@@ -0,0 +1,8 @@
+<igc-qr-code class="qr-blue" [value]="value" size="150" dot-style="rounded" square-style="rounded"
+    error-level="H"></igc-qr-code>
+<igc-qr-code class="qr-orange" [value]="value" size="150" dot-style="rounded" square-style="rounded"
+    error-level="H"></igc-qr-code>
+<igc-qr-code class="qr-green" [value]="value" size="150" dot-style="rounded" square-style="rounded"
+    error-level="H"></igc-qr-code>
+<igc-qr-code class="qr-dark" [value]="value" size="150" dot-style="rounded" square-style="rounded"
+    error-level="H"></igc-qr-code>
diff --git a/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.scss b/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.scss
new file mode 100644
index 000000000..8db4d5910
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.scss
@@ -0,0 +1,36 @@
+:host {
+    display: flex;
+    align-items: flex-start;
+    gap: 3.75rem;
+    justify-content: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.qr-blue {
+    --ig-qr-code-background: #e3edfb;
+    --ig-qr-code-dark-color: #1361e0;
+}
+
+.qr-orange {
+    --ig-qr-code-background: #fbe6e1;
+    --ig-qr-code-dark-color: #f0562b;
+}
+
+.qr-green {
+    --ig-qr-code-background: #e5f7e6;
+    --ig-qr-code-dark-color: #3fa845;
+}
+
+.qr-dark {
+    --ig-qr-code-background: #0b1b3a;
+    --ig-qr-code-dark-color: #ffffff;
+}
+
+@media (width < 850px) {
+    :host {
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+    }
+}
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.ts b/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.ts
new file mode 100644
index 000000000..c2165eaee
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.ts
@@ -0,0 +1,14 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcQrCodeComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcQrCodeComponent);
+
+@Component({
+    selector: 'app-qr-code-styling',
+    templateUrl: './qr-code-styling.component.html',
+    styleUrls: ['./qr-code-styling.component.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class QrCodeStylingComponent {
+    public readonly value = 'https://www.infragistics.com/products/ignite-ui-web-components';
+}
diff --git a/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.html b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.html
new file mode 100644
index 000000000..64d2c3273
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.html
@@ -0,0 +1,44 @@
+<igc-qr-code
+    value="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
+    size="150"
+    error-level="H"
+    dot-style="circle"
+    square-style="rounded"
+    logo-src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png"
+    logo-size="0.75"
+    logo-margin="6"
+    class="[--ig-qr-code-dark-color:#1a1a1a] [--ig-qr-code-background:#f7df1e] [--ig-qr-code-corner-square-color:#1a1a1a] [--ig-qr-code-corner-dot-color:#1a1a1a]"
+></igc-qr-code>
+<igc-qr-code
+    value="https://developer.mozilla.org/en-US/docs/Web/HTML"
+    size="150"
+    error-level="H"
+    dot-style="circle"
+    square-style="rounded"
+    logo-src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg"
+    logo-size="0.75"
+    logo-margin="6"
+    class="[--ig-qr-code-dark-color:#ffffff] [--ig-qr-code-background:#e44d26] [--ig-qr-code-corner-square-color:#ffffff] [--ig-qr-code-corner-dot-color:#ffffff]"
+></igc-qr-code>
+<igc-qr-code
+    value="https://developer.mozilla.org/en-US/docs/Web/CSS"
+    size="150"
+    error-level="H"
+    dot-style="circle"
+    square-style="rounded"
+    logo-src="https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg"
+    logo-size="0.75"
+    logo-margin="6"
+    class="[--ig-qr-code-dark-color:#ffffff] [--ig-qr-code-background:#1572b6] [--ig-qr-code-corner-square-color:#ffffff] [--ig-qr-code-corner-dot-color:#ffffff]"
+></igc-qr-code>
+<igc-qr-code
+    value="https://www.infragistics.com/products/ignite-ui-web-components"
+    size="150"
+    error-level="H"
+    dot-style="circle"
+    square-style="rounded"
+    logo-src="https://static.infragistics.com/marketing/Website/products/ignite-ui/shared/ignite-ui-logo-light-background-horizontal.svg"
+    logo-size="0.75"
+    logo-margin="6"
+    class="[--ig-qr-code-dark-color:#0f172a] [--ig-qr-code-background:#ffffff] [--ig-qr-code-corner-square-color:#0f172a] [--ig-qr-code-corner-dot-color:#0f172a]"
+></igc-qr-code>
diff --git a/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.scss b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.scss
new file mode 100644
index 000000000..a1cde3ae4
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.scss
@@ -0,0 +1,16 @@
+:host {
+    display: flex;
+    gap: 1.5rem;
+    padding: 1rem;
+    background: #111;
+    width: fit-content;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-inline: auto;
+}
+
+@media (width < 800px) {
+    :host {
+        flex-direction: column;
+    }
+}
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.ts b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.ts
new file mode 100644
index 000000000..171cb8654
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.ts
@@ -0,0 +1,13 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcQrCodeComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcQrCodeComponent);
+
+@Component({
+    selector: 'app-qr-code-tailwind-styling',
+    templateUrl: './qr-code-tailwind-styling.component.html',
+    styleUrls: ['./qr-code-tailwind-styling.component.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    imports: []
+})
+export class QrCodeTailwindStylingComponent { }

From 32329406a9826034e74539cffceed9fbada6675d Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Thu, 17 Sep 2026 19:11:42 +0300
Subject: [PATCH 2/5] feat(qr-code): additional samples and fixes

---
 .../data-display/data-display-routes-data.ts  |  4 ++
 src/app/data-display/data-display.routes.ts   | 25 ++++++++
 .../qr-code-error-correction.component.html   | 12 ++++
 .../qr-code-error-correction.component.scss   | 23 +++++++
 .../qr-code-error-correction.component.ts     | 13 ++++
 .../qr-code-logo/qr-code-logo.component.html  |  1 +
 .../qr-code-logo/qr-code-logo.component.scss  |  4 ++
 .../qr-code-logo/qr-code-logo.component.ts    | 14 +++++
 .../qr-code-overview.component.scss           |  2 +
 .../qr-code-shapes.component.html             | 12 ++++
 .../qr-code-shapes.component.scss             | 23 +++++++
 .../qr-code-shapes.component.ts               | 13 ++++
 .../qr-code-size/qr-code-size.component.html  | 12 ++++
 .../qr-code-size/qr-code-size.component.scss  | 23 +++++++
 .../qr-code-size/qr-code-size.component.ts    | 14 +++++
 .../qr-code-styling.component.scss            |  3 +-
 .../qr-code-tailwind-styling.component.html   | 63 ++++++-------------
 .../qr-code-tailwind-styling.component.scss   |  8 ++-
 18 files changed, 223 insertions(+), 46 deletions(-)
 create mode 100644 src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.html
 create mode 100644 src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.scss
 create mode 100644 src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.ts
 create mode 100644 src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.html
 create mode 100644 src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.scss
 create mode 100644 src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.ts
 create mode 100644 src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.html
 create mode 100644 src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.scss
 create mode 100644 src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.ts
 create mode 100644 src/app/data-display/qr-code/qr-code-size/qr-code-size.component.html
 create mode 100644 src/app/data-display/qr-code/qr-code-size/qr-code-size.component.scss
 create mode 100644 src/app/data-display/qr-code/qr-code-size/qr-code-size.component.ts

diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts
index f87d7bf80..6dce452ba 100644
--- a/src/app/data-display/data-display-routes-data.ts
+++ b/src/app/data-display/data-display-routes-data.ts
@@ -45,6 +45,10 @@ export const dataDisplayRoutesData = {
     "text-highlight-2": { displayName: "Search within multiple containers", parentName: "Text Highlight" },
     "text-highlight-style": { displayName: "Text Highlight Style", parentName: "Text Highlight" },
     "qr-code-overview": { displayName: "Overview", parentName: "QR Code" },
+    "qr-code-error-correction": { displayName: "QR Code Error Correction", parentName: "QR Code" },
+    "qr-code-size": { displayName: "QR Code Size", parentName: "QR Code" },
+    "qr-code-shapes": { displayName: "QR Code Shapes", parentName: "QR Code" },
+    "qr-code-logo": { displayName: "QR Code Logo", parentName: "QR Code" },
     "qr-code-styling": { displayName: "QR Code Styling", parentName: "QR Code" },
     "qr-code-tailwind-styling": { displayName: "QR Code Tailwind Styling", parentName: "QR Code" }
 };
diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts
index 4416a7e95..16ede5720 100644
--- a/src/app/data-display/data-display.routes.ts
+++ b/src/app/data-display/data-display.routes.ts
@@ -54,6 +54,10 @@ import { QrCodeStylingComponent } from './qr-code/qr-code-styling/qr-code-stylin
 import { QrCodeTailwindStylingComponent } from './qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component';
 import { dataDisplayRoutesData } from './data-display-routes-data';
 import { Routes } from '@angular/router';
+import { QrCodeErrorCorrectionComponent } from './qr-code/qr-code-error-correction/qr-code-error-correction.component';
+import { QrCodeSizeComponent } from './qr-code/qr-code-size/qr-code-size.component';
+import { QrCodeShapesComponent } from './qr-code/qr-code-shapes/qr-code-shapes.component';
+import { QrCodeLogoComponent } from './qr-code/qr-code-logo/qr-code-logo.component';
 
 export const DataDisplayRoutes: Routes = [
     {
@@ -291,11 +295,32 @@ export const DataDisplayRoutes: Routes = [
         data: dataDisplayRoutesData['qr-code-overview'],
         path: 'qr-code-overview'
     },
+    {
+        component: QrCodeErrorCorrectionComponent,
+        data: dataDisplayRoutesData['qr-code-error-correction'],
+        path: 'qr-code-error-correction'
+    },
+    {
+        component: QrCodeSizeComponent,
+        data: dataDisplayRoutesData['qr-code-size'],
+        path: 'qr-code-size'
+    },
     {
         component: QrCodeStylingComponent,
         data: dataDisplayRoutesData['qr-code-styling'],
         path: 'qr-code-styling'
     },
+    {
+        component: QrCodeShapesComponent,
+        data: dataDisplayRoutesData['qr-code-shapes'],
+        path: 'qr-code-shapes'
+    },
+    {
+        component: QrCodeLogoComponent,
+        data: dataDisplayRoutesData['qr-code-logo'],
+        path: 'qr-code-logo'
+    },
+
     {
         component: QrCodeTailwindStylingComponent,
         data: dataDisplayRoutesData['qr-code-tailwind-styling'],
diff --git a/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.html b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.html
new file mode 100644
index 000000000..faa3fa0f9
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.html
@@ -0,0 +1,12 @@
+<div>
+    <igc-qr-code value="https://www.infragistics.com" error-level="L">></igc-qr-code>
+    <span>error-level: <strong>L</strong></span>
+</div>
+<div>
+    <igc-qr-code value="https://www.infragistics.com" error-level="M">></igc-qr-code>
+    <span>error-level: <strong>M</strong></span>
+</div>
+<div>
+    <igc-qr-code value="https://www.infragistics.com" error-level="Q">></igc-qr-code>
+    <span>error-level: <strong>Q</strong></span>
+</div>
diff --git a/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.scss b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.scss
new file mode 100644
index 000000000..49f1e101c
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.scss
@@ -0,0 +1,23 @@
+:host {
+    display: flex;
+    align-items: flex-start;
+    gap: 3.75rem;
+    justify-content: center;
+    flex-direction: row;
+    overflow-y: auto;
+    height: 100%;
+}
+
+div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+@media (width < 850px) {
+    :host {
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+    }
+}
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.ts b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.ts
new file mode 100644
index 000000000..f6a9e2d59
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.ts
@@ -0,0 +1,13 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcQrCodeComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcQrCodeComponent);
+
+@Component({
+    selector: 'app-qr-code-error-correction',
+    templateUrl: './qr-code-error-correction.component.html',
+    styleUrls: ['./qr-code-error-correction.component.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class QrCodeErrorCorrectionComponent {
+}
diff --git a/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.html b/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.html
new file mode 100644
index 000000000..6cbe31921
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.html
@@ -0,0 +1 @@
+<igc-qr-code value="https://www.infragistics.com/" logo-size="1" error-level="H" [attr.logo-src]="logoSrc"></igc-qr-code>
diff --git a/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.scss b/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.scss
new file mode 100644
index 000000000..f21bc9f9b
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.scss
@@ -0,0 +1,4 @@
+:host {
+    display: flex;
+    justify-content: center;
+}
diff --git a/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.ts b/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.ts
new file mode 100644
index 000000000..63ad259ef
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.ts
@@ -0,0 +1,14 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcQrCodeComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcQrCodeComponent);
+
+@Component({
+    selector: 'app-qr-code-logo',
+    templateUrl: './qr-code-logo.component.html',
+    styleUrls: ['./qr-code-logo.component.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class QrCodeLogoComponent {
+    public readonly logoSrc = 'https://static.infragistics.com/marketing/Website/products/ignite-ui/shared/ignite-ui-logo-light-background-horizontal.svg';
+}
diff --git a/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.scss b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.scss
index 5794a7e78..67e4e7915 100644
--- a/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.scss
+++ b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.scss
@@ -13,6 +13,7 @@
     align-items: center;
     gap: 2.5rem;
     overflow-y: auto;
+    height: 100%;
 }
 
 .qr-controls {
@@ -27,5 +28,6 @@ igx-radio-group {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
+    width: fit-content;
     gap: 0.25rem;
 }
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.html b/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.html
new file mode 100644
index 000000000..bf7afd061
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.html
@@ -0,0 +1,12 @@
+<div>
+    <igc-qr-code value="https://www.infragistics.com" dot-style="square" square-style="square"></igc-qr-code>
+    <span>dot and square style: <strong>square</strong></span>
+</div>
+<div>
+    <igc-qr-code value="https://www.infragistics.com" dot-style="circle" square-style="circle">></igc-qr-code>
+    <span>dot and square style: <strong>circle</strong></span>
+</div>
+<div>
+    <igc-qr-code value="https://www.infragistics.com" dot-style="rounded" square-style="rounded">></igc-qr-code>
+    <span>dot and square style: <strong>rounded</strong></span>
+</div>
diff --git a/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.scss b/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.scss
new file mode 100644
index 000000000..49f1e101c
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.scss
@@ -0,0 +1,23 @@
+:host {
+    display: flex;
+    align-items: flex-start;
+    gap: 3.75rem;
+    justify-content: center;
+    flex-direction: row;
+    overflow-y: auto;
+    height: 100%;
+}
+
+div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+@media (width < 850px) {
+    :host {
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+    }
+}
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.ts b/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.ts
new file mode 100644
index 000000000..42ac4674c
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.ts
@@ -0,0 +1,13 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcQrCodeComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcQrCodeComponent);
+
+@Component({
+    selector: 'app-qr-code-shapes',
+    templateUrl: './qr-code-shapes.component.html',
+    styleUrls: ['./qr-code-shapes.component.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class QrCodeShapesComponent {
+}
diff --git a/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.html b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.html
new file mode 100644
index 000000000..ec38f6605
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.html
@@ -0,0 +1,12 @@
+<div>
+    <igc-qr-code value="https://www.infragistics.com" size="128">></igc-qr-code>
+    <span>size: <strong>128px</strong></span>
+</div>
+<div>
+    <igc-qr-code value="https://www.infragistics.com" size="192">></igc-qr-code>
+    <span>size: <strong>192px</strong></span>
+</div>
+<div>
+    <igc-qr-code value="https://www.infragistics.com" size="256">></igc-qr-code>
+    <span>size: <strong>256px</strong></span>
+</div>
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.scss b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.scss
new file mode 100644
index 000000000..561d30de2
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.scss
@@ -0,0 +1,23 @@
+:host {
+    display: flex;
+    align-items: baseline;
+    gap: 3.75rem;
+    justify-content: center;
+    flex-direction: row;
+    overflow-y: auto;
+    height: 100%;
+}
+
+div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+@media (width < 850px) {
+    :host {
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+    }
+}
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.ts b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.ts
new file mode 100644
index 000000000..693fbe969
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.ts
@@ -0,0 +1,14 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcQrCodeComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcQrCodeComponent);
+
+@Component({
+    selector: 'app-qr-code-size',
+    templateUrl: './qr-code-size.component.html',
+    styleUrls: ['./qr-code-size.component.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class QrCodeSizeComponent {
+    public readonly value = 'https://www.infragistics.com/products/ignite-ui-web-components';
+}
diff --git a/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.scss b/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.scss
index 8db4d5910..b748a9283 100644
--- a/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.scss
+++ b/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.scss
@@ -4,7 +4,8 @@
     gap: 3.75rem;
     justify-content: center;
     flex-direction: row;
-    flex-wrap: wrap;
+    overflow-y: auto;
+    height: 100%;
 }
 
 .qr-blue {
diff --git a/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.html b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.html
index 64d2c3273..7e1017750 100644
--- a/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.html
+++ b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.html
@@ -1,44 +1,19 @@
-<igc-qr-code
-    value="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
-    size="150"
-    error-level="H"
-    dot-style="circle"
-    square-style="rounded"
-    logo-src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png"
-    logo-size="0.75"
-    logo-margin="6"
-    class="[--ig-qr-code-dark-color:#1a1a1a] [--ig-qr-code-background:#f7df1e] [--ig-qr-code-corner-square-color:#1a1a1a] [--ig-qr-code-corner-dot-color:#1a1a1a]"
-></igc-qr-code>
-<igc-qr-code
-    value="https://developer.mozilla.org/en-US/docs/Web/HTML"
-    size="150"
-    error-level="H"
-    dot-style="circle"
-    square-style="rounded"
-    logo-src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg"
-    logo-size="0.75"
-    logo-margin="6"
-    class="[--ig-qr-code-dark-color:#ffffff] [--ig-qr-code-background:#e44d26] [--ig-qr-code-corner-square-color:#ffffff] [--ig-qr-code-corner-dot-color:#ffffff]"
-></igc-qr-code>
-<igc-qr-code
-    value="https://developer.mozilla.org/en-US/docs/Web/CSS"
-    size="150"
-    error-level="H"
-    dot-style="circle"
-    square-style="rounded"
-    logo-src="https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg"
-    logo-size="0.75"
-    logo-margin="6"
-    class="[--ig-qr-code-dark-color:#ffffff] [--ig-qr-code-background:#1572b6] [--ig-qr-code-corner-square-color:#ffffff] [--ig-qr-code-corner-dot-color:#ffffff]"
-></igc-qr-code>
-<igc-qr-code
-    value="https://www.infragistics.com/products/ignite-ui-web-components"
-    size="150"
-    error-level="H"
-    dot-style="circle"
-    square-style="rounded"
-    logo-src="https://static.infragistics.com/marketing/Website/products/ignite-ui/shared/ignite-ui-logo-light-background-horizontal.svg"
-    logo-size="0.75"
-    logo-margin="6"
-    class="[--ig-qr-code-dark-color:#0f172a] [--ig-qr-code-background:#ffffff] [--ig-qr-code-corner-square-color:#0f172a] [--ig-qr-code-corner-dot-color:#0f172a]"
-></igc-qr-code>
+<div class="container">
+    <igc-qr-code value="https://developer.mozilla.org/en-US/docs/Web/JavaScript" size="150" error-level="H"
+        dot-style="circle" square-style="rounded"
+        logo-src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" logo-size="0.75"
+        class="[--ig-qr-code-dark-color:#1a1a1a] [--ig-qr-code-background:#f7df1e] [--ig-qr-code-corner-square-color:#1a1a1a] [--ig-qr-code-corner-dot-color:#1a1a1a]"></igc-qr-code>
+    <igc-qr-code value="https://developer.mozilla.org/en-US/docs/Web/HTML" size="150" error-level="H" dot-style="circle"
+        square-style="rounded"
+        logo-src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg" logo-size="0.75"
+        class="[--ig-qr-code-dark-color:#ffffff] [--ig-qr-code-background:#e44d26] [--ig-qr-code-corner-square-color:#ffffff] [--ig-qr-code-corner-dot-color:#ffffff]"></igc-qr-code>
+    <igc-qr-code value="https://developer.mozilla.org/en-US/docs/Web/CSS" size="150" error-level="H" dot-style="circle"
+        square-style="rounded" logo-src="https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg"
+        logo-size="0.75"
+        class="[--ig-qr-code-dark-color:#ffffff] [--ig-qr-code-background:#1572b6] [--ig-qr-code-corner-square-color:#ffffff] [--ig-qr-code-corner-dot-color:#ffffff]"></igc-qr-code>
+    <igc-qr-code value="https://www.infragistics.com/products/ignite-ui-web-components" size="150" error-level="H"
+        dot-style="circle" square-style="rounded"
+        logo-src="https://static.infragistics.com/marketing/Website/products/ignite-ui/shared/ignite-ui-logo-light-background-horizontal.svg"
+        logo-size="0.75"
+        class="[--ig-qr-code-dark-color:#0f172a] [--ig-qr-code-background:#ffffff] [--ig-qr-code-corner-square-color:#0f172a] [--ig-qr-code-corner-dot-color:#0f172a]"></igc-qr-code>
+</div>
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.scss b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.scss
index a1cde3ae4..53ba8128a 100644
--- a/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.scss
+++ b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.scss
@@ -1,4 +1,10 @@
 :host {
+    display: block;
+    height: 100%;
+    overflow-y: auto;
+}
+
+.container {
     display: flex;
     gap: 1.5rem;
     padding: 1rem;
@@ -10,7 +16,7 @@
 }
 
 @media (width < 800px) {
-    :host {
+    .container {
         flex-direction: column;
     }
 }
\ No newline at end of file

From 11b35227b0750c13f7d6239a965a3e31c7b51a58 Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Wed, 23 Sep 2026 13:41:23 +0300
Subject: [PATCH 3/5] feat(qr-code): split sample in two

---
 .../data-display/data-display-routes-data.ts  |  3 ++-
 src/app/data-display/data-display.routes.ts   | 14 +++++++----
 .../qr-code-corner-shapes.component.html      | 12 ++++++++++
 .../qr-code-corner-shapes.component.scss}     |  1 +
 .../qr-code-corner-shapes.component.ts        | 13 ++++++++++
 .../qr-code-dot-shapes.component.html         | 12 ++++++++++
 .../qr-code-dot-shapes.component.scss         | 24 +++++++++++++++++++
 .../qr-code-dot-shapes.component.ts}          |  8 +++----
 .../qr-code-error-correction.component.scss   |  1 +
 .../qr-code-shapes.component.html             | 12 ----------
 .../qr-code-size/qr-code-size.component.scss  |  1 +
 11 files changed, 80 insertions(+), 21 deletions(-)
 create mode 100644 src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.html
 rename src/app/data-display/qr-code/{qr-code-shapes/qr-code-shapes.component.scss => qr-code-corner-shapes/qr-code-corner-shapes.component.scss} (89%)
 create mode 100644 src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.ts
 create mode 100644 src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.html
 create mode 100644 src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.scss
 rename src/app/data-display/qr-code/{qr-code-shapes/qr-code-shapes.component.ts => qr-code-dot-shapes/qr-code-dot-shapes.component.ts} (55%)
 delete mode 100644 src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.html

diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts
index 6dce452ba..75e1bc761 100644
--- a/src/app/data-display/data-display-routes-data.ts
+++ b/src/app/data-display/data-display-routes-data.ts
@@ -47,7 +47,8 @@ export const dataDisplayRoutesData = {
     "qr-code-overview": { displayName: "Overview", parentName: "QR Code" },
     "qr-code-error-correction": { displayName: "QR Code Error Correction", parentName: "QR Code" },
     "qr-code-size": { displayName: "QR Code Size", parentName: "QR Code" },
-    "qr-code-shapes": { displayName: "QR Code Shapes", parentName: "QR Code" },
+    "qr-code-dot-shapes": { displayName: "QR Code Dot Shapes", parentName: "QR Code" },
+    "qr-code-corner-shapes": { displayName: "QR Code Corner Shapes", parentName: "QR Code" },
     "qr-code-logo": { displayName: "QR Code Logo", parentName: "QR Code" },
     "qr-code-styling": { displayName: "QR Code Styling", parentName: "QR Code" },
     "qr-code-tailwind-styling": { displayName: "QR Code Tailwind Styling", parentName: "QR Code" }
diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts
index 16ede5720..c5bc2f358 100644
--- a/src/app/data-display/data-display.routes.ts
+++ b/src/app/data-display/data-display.routes.ts
@@ -56,7 +56,8 @@ import { dataDisplayRoutesData } from './data-display-routes-data';
 import { Routes } from '@angular/router';
 import { QrCodeErrorCorrectionComponent } from './qr-code/qr-code-error-correction/qr-code-error-correction.component';
 import { QrCodeSizeComponent } from './qr-code/qr-code-size/qr-code-size.component';
-import { QrCodeShapesComponent } from './qr-code/qr-code-shapes/qr-code-shapes.component';
+import { QrCodeDotShapesComponent } from './qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component';
+import { QrCodeCornerShapesComponent } from './qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component';
 import { QrCodeLogoComponent } from './qr-code/qr-code-logo/qr-code-logo.component';
 
 export const DataDisplayRoutes: Routes = [
@@ -311,9 +312,14 @@ export const DataDisplayRoutes: Routes = [
         path: 'qr-code-styling'
     },
     {
-        component: QrCodeShapesComponent,
-        data: dataDisplayRoutesData['qr-code-shapes'],
-        path: 'qr-code-shapes'
+        component: QrCodeDotShapesComponent,
+        data: dataDisplayRoutesData['qr-code-dot-shapes'],
+        path: 'qr-code-dot-shapes'
+    },
+    {
+        component: QrCodeCornerShapesComponent,
+        data: dataDisplayRoutesData['qr-code-corner-shapes'],
+        path: 'qr-code-corner-shapes'
     },
     {
         component: QrCodeLogoComponent,
diff --git a/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.html b/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.html
new file mode 100644
index 000000000..3727a0191
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.html
@@ -0,0 +1,12 @@
+<div>
+    <igc-qr-code value="https://www.infragistics.com" square-style="square"></igc-qr-code>
+    <span>square style: <strong>square</strong></span>
+</div>
+<div>
+    <igc-qr-code value="https://www.infragistics.com" square-style="circle"></igc-qr-code>
+    <span>square style: <strong>circle</strong></span>
+</div>
+<div>
+    <igc-qr-code value="https://www.infragistics.com" square-style="rounded"></igc-qr-code>
+    <span>square style: <strong>rounded</strong></span>
+</div>
diff --git a/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.scss b/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.scss
similarity index 89%
rename from src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.scss
rename to src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.scss
index 49f1e101c..a289e861f 100644
--- a/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.scss
+++ b/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.scss
@@ -6,6 +6,7 @@
     flex-direction: row;
     overflow-y: auto;
     height: 100%;
+    font-family: "Aktiv Grotesk", sans-serif;
 }
 
 div {
diff --git a/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.ts b/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.ts
new file mode 100644
index 000000000..a8c806359
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.ts
@@ -0,0 +1,13 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcQrCodeComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcQrCodeComponent);
+
+@Component({
+    selector: 'app-qr-code-corner-shapes',
+    templateUrl: './qr-code-corner-shapes.component.html',
+    styleUrls: ['./qr-code-corner-shapes.component.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class QrCodeCornerShapesComponent {
+}
diff --git a/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.html b/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.html
new file mode 100644
index 000000000..154b5ffe6
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.html
@@ -0,0 +1,12 @@
+<div>
+    <igc-qr-code value="https://www.infragistics.com" dot-style="square"></igc-qr-code>
+    <span>dot style: <strong>square</strong></span>
+</div>
+<div>
+    <igc-qr-code value="https://www.infragistics.com" dot-style="circle"></igc-qr-code>
+    <span>dot style: <strong>circle</strong></span>
+</div>
+<div>
+    <igc-qr-code value="https://www.infragistics.com" dot-style="rounded"></igc-qr-code>
+    <span>dot style: <strong>rounded</strong></span>
+</div>
diff --git a/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.scss b/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.scss
new file mode 100644
index 000000000..a289e861f
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.scss
@@ -0,0 +1,24 @@
+:host {
+    display: flex;
+    align-items: flex-start;
+    gap: 3.75rem;
+    justify-content: center;
+    flex-direction: row;
+    overflow-y: auto;
+    height: 100%;
+    font-family: "Aktiv Grotesk", sans-serif;
+}
+
+div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+@media (width < 850px) {
+    :host {
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+    }
+}
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.ts b/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.ts
similarity index 55%
rename from src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.ts
rename to src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.ts
index 42ac4674c..a41518855 100644
--- a/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.ts
+++ b/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.ts
@@ -4,10 +4,10 @@ import { defineComponents, IgcQrCodeComponent } from 'igniteui-webcomponents';
 defineComponents(IgcQrCodeComponent);
 
 @Component({
-    selector: 'app-qr-code-shapes',
-    templateUrl: './qr-code-shapes.component.html',
-    styleUrls: ['./qr-code-shapes.component.scss'],
+    selector: 'app-qr-code-dot-shapes',
+    templateUrl: './qr-code-dot-shapes.component.html',
+    styleUrls: ['./qr-code-dot-shapes.component.scss'],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
-export class QrCodeShapesComponent {
+export class QrCodeDotShapesComponent {
 }
diff --git a/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.scss b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.scss
index 49f1e101c..a289e861f 100644
--- a/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.scss
+++ b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.scss
@@ -6,6 +6,7 @@
     flex-direction: row;
     overflow-y: auto;
     height: 100%;
+    font-family: "Aktiv Grotesk", sans-serif;
 }
 
 div {
diff --git a/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.html b/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.html
deleted file mode 100644
index bf7afd061..000000000
--- a/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<div>
-    <igc-qr-code value="https://www.infragistics.com" dot-style="square" square-style="square"></igc-qr-code>
-    <span>dot and square style: <strong>square</strong></span>
-</div>
-<div>
-    <igc-qr-code value="https://www.infragistics.com" dot-style="circle" square-style="circle">></igc-qr-code>
-    <span>dot and square style: <strong>circle</strong></span>
-</div>
-<div>
-    <igc-qr-code value="https://www.infragistics.com" dot-style="rounded" square-style="rounded">></igc-qr-code>
-    <span>dot and square style: <strong>rounded</strong></span>
-</div>
diff --git a/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.scss b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.scss
index 561d30de2..05177afe3 100644
--- a/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.scss
+++ b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.scss
@@ -6,6 +6,7 @@
     flex-direction: row;
     overflow-y: auto;
     height: 100%;
+    font-family: "Aktiv Grotesk", sans-serif;
 }
 
 div {

From 0278c37719d4413dac0b2a077fb20d8b086cd205 Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Wed, 23 Sep 2026 15:17:26 +0300
Subject: [PATCH 4/5] fix(): lint errors + change font color on some samples

---
 .../qr-code-corner-shapes.component.html                  | 6 +++---
 .../qr-code-corner-shapes.component.scss                  | 5 +++++
 .../qr-code-corner-shapes.component.ts                    | 2 +-
 .../qr-code-dot-shapes/qr-code-dot-shapes.component.html  | 6 +++---
 .../qr-code-dot-shapes/qr-code-dot-shapes.component.scss  | 5 +++++
 .../qr-code-dot-shapes/qr-code-dot-shapes.component.ts    | 2 +-
 .../qr-code-error-correction.component.html               | 6 +++---
 .../qr-code-error-correction.component.scss               | 5 +++++
 .../qr-code-error-correction.component.ts                 | 2 +-
 .../qr-code/qr-code-logo/qr-code-logo.component.ts        | 2 +-
 .../qr-code-overview/qr-code-overview.component.ts        | 2 +-
 .../qr-code/qr-code-size/qr-code-size.component.html      | 6 +++---
 .../qr-code/qr-code-size/qr-code-size.component.scss      | 5 +++++
 .../qr-code/qr-code-size/qr-code-size.component.ts        | 2 +-
 .../qr-code/qr-code-styling/qr-code-styling.component.ts  | 2 +-
 .../qr-code-tailwind-styling.component.html               | 8 ++++----
 .../qr-code-tailwind-styling.component.ts                 | 3 +--
 17 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.html b/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.html
index 3727a0191..9d4298ed7 100644
--- a/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.html
+++ b/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.html
@@ -1,12 +1,12 @@
 <div>
     <igc-qr-code value="https://www.infragistics.com" square-style="square"></igc-qr-code>
-    <span>square style: <strong>square</strong></span>
+    <span>Square style: <strong>square</strong></span>
 </div>
 <div>
     <igc-qr-code value="https://www.infragistics.com" square-style="circle"></igc-qr-code>
-    <span>square style: <strong>circle</strong></span>
+    <span>Square style: <strong>circle</strong></span>
 </div>
 <div>
     <igc-qr-code value="https://www.infragistics.com" square-style="rounded"></igc-qr-code>
-    <span>square style: <strong>rounded</strong></span>
+    <span>Square style: <strong>rounded</strong></span>
 </div>
diff --git a/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.scss b/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.scss
index a289e861f..29dc35306 100644
--- a/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.scss
+++ b/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.scss
@@ -15,6 +15,11 @@ div {
     align-items: center;
 }
 
+span {
+    margin-block-start: 1rem;
+    color: var(--ig-gray-600);
+}
+
 @media (width < 850px) {
     :host {
         flex-direction: column;
diff --git a/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.ts b/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.ts
index a8c806359..882bfce59 100644
--- a/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.ts
+++ b/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.ts
@@ -7,7 +7,7 @@ defineComponents(IgcQrCodeComponent);
     selector: 'app-qr-code-corner-shapes',
     templateUrl: './qr-code-corner-shapes.component.html',
     styleUrls: ['./qr-code-corner-shapes.component.scss'],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class QrCodeCornerShapesComponent {
 }
diff --git a/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.html b/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.html
index 154b5ffe6..af3cf80ce 100644
--- a/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.html
+++ b/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.html
@@ -1,12 +1,12 @@
 <div>
     <igc-qr-code value="https://www.infragistics.com" dot-style="square"></igc-qr-code>
-    <span>dot style: <strong>square</strong></span>
+    <span>Dot style: <strong>square</strong></span>
 </div>
 <div>
     <igc-qr-code value="https://www.infragistics.com" dot-style="circle"></igc-qr-code>
-    <span>dot style: <strong>circle</strong></span>
+    <span>Dot style: <strong>circle</strong></span>
 </div>
 <div>
     <igc-qr-code value="https://www.infragistics.com" dot-style="rounded"></igc-qr-code>
-    <span>dot style: <strong>rounded</strong></span>
+    <span>Dot style: <strong>rounded</strong></span>
 </div>
diff --git a/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.scss b/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.scss
index a289e861f..29dc35306 100644
--- a/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.scss
+++ b/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.scss
@@ -15,6 +15,11 @@ div {
     align-items: center;
 }
 
+span {
+    margin-block-start: 1rem;
+    color: var(--ig-gray-600);
+}
+
 @media (width < 850px) {
     :host {
         flex-direction: column;
diff --git a/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.ts b/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.ts
index a41518855..8ad0cc61e 100644
--- a/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.ts
+++ b/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.ts
@@ -7,7 +7,7 @@ defineComponents(IgcQrCodeComponent);
     selector: 'app-qr-code-dot-shapes',
     templateUrl: './qr-code-dot-shapes.component.html',
     styleUrls: ['./qr-code-dot-shapes.component.scss'],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class QrCodeDotShapesComponent {
 }
diff --git a/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.html b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.html
index faa3fa0f9..be9ca34e2 100644
--- a/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.html
+++ b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.html
@@ -1,12 +1,12 @@
 <div>
     <igc-qr-code value="https://www.infragistics.com" error-level="L">></igc-qr-code>
-    <span>error-level: <strong>L</strong></span>
+    <span>Error level: <strong>L</strong></span>
 </div>
 <div>
     <igc-qr-code value="https://www.infragistics.com" error-level="M">></igc-qr-code>
-    <span>error-level: <strong>M</strong></span>
+    <span>Error level: <strong>M</strong></span>
 </div>
 <div>
     <igc-qr-code value="https://www.infragistics.com" error-level="Q">></igc-qr-code>
-    <span>error-level: <strong>Q</strong></span>
+    <span>Error level: <strong>Q</strong></span>
 </div>
diff --git a/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.scss b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.scss
index a289e861f..29dc35306 100644
--- a/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.scss
+++ b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.scss
@@ -15,6 +15,11 @@ div {
     align-items: center;
 }
 
+span {
+    margin-block-start: 1rem;
+    color: var(--ig-gray-600);
+}
+
 @media (width < 850px) {
     :host {
         flex-direction: column;
diff --git a/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.ts b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.ts
index f6a9e2d59..3790218fc 100644
--- a/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.ts
+++ b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.ts
@@ -7,7 +7,7 @@ defineComponents(IgcQrCodeComponent);
     selector: 'app-qr-code-error-correction',
     templateUrl: './qr-code-error-correction.component.html',
     styleUrls: ['./qr-code-error-correction.component.scss'],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class QrCodeErrorCorrectionComponent {
 }
diff --git a/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.ts b/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.ts
index 63ad259ef..03601dda0 100644
--- a/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.ts
+++ b/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.ts
@@ -7,7 +7,7 @@ defineComponents(IgcQrCodeComponent);
     selector: 'app-qr-code-logo',
     templateUrl: './qr-code-logo.component.html',
     styleUrls: ['./qr-code-logo.component.scss'],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class QrCodeLogoComponent {
     public readonly logoSrc = 'https://static.infragistics.com/marketing/Website/products/ignite-ui/shared/ignite-ui-logo-light-background-horizontal.svg';
diff --git a/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.ts b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.ts
index c5f3729bd..90bdb4718 100644
--- a/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.ts
+++ b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.ts
@@ -11,7 +11,7 @@ defineComponents(IgcQrCodeComponent);
     templateUrl: './qr-code-overview.component.html',
     styleUrls: ['./qr-code-overview.component.scss'],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    imports: [FormsModule, IgxRadioGroupDirective, IgxRadioComponent, IgxSwitchComponent],
+    imports: [FormsModule, IgxRadioGroupDirective, IgxRadioComponent, IgxSwitchComponent]
 })
 export class QrCodeOverviewComponent {
     public shape: 'square' | 'circle' | 'rounded' = 'square';
diff --git a/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.html b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.html
index ec38f6605..dc437fda3 100644
--- a/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.html
+++ b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.html
@@ -1,12 +1,12 @@
 <div>
     <igc-qr-code value="https://www.infragistics.com" size="128">></igc-qr-code>
-    <span>size: <strong>128px</strong></span>
+    <span>Size: <strong>128px</strong></span>
 </div>
 <div>
     <igc-qr-code value="https://www.infragistics.com" size="192">></igc-qr-code>
-    <span>size: <strong>192px</strong></span>
+    <span>Size: <strong>192px</strong></span>
 </div>
 <div>
     <igc-qr-code value="https://www.infragistics.com" size="256">></igc-qr-code>
-    <span>size: <strong>256px</strong></span>
+    <span>Size: <strong>256px</strong></span>
 </div>
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.scss b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.scss
index 05177afe3..0219154c6 100644
--- a/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.scss
+++ b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.scss
@@ -15,6 +15,11 @@ div {
     align-items: center;
 }
 
+span {
+    margin-block-start: 1rem;
+    color: var(--ig-gray-600);
+}
+
 @media (width < 850px) {
     :host {
         flex-direction: column;
diff --git a/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.ts b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.ts
index 693fbe969..173efa4b8 100644
--- a/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.ts
+++ b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.ts
@@ -7,7 +7,7 @@ defineComponents(IgcQrCodeComponent);
     selector: 'app-qr-code-size',
     templateUrl: './qr-code-size.component.html',
     styleUrls: ['./qr-code-size.component.scss'],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class QrCodeSizeComponent {
     public readonly value = 'https://www.infragistics.com/products/ignite-ui-web-components';
diff --git a/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.ts b/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.ts
index c2165eaee..7fa845603 100644
--- a/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.ts
+++ b/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.ts
@@ -7,7 +7,7 @@ defineComponents(IgcQrCodeComponent);
     selector: 'app-qr-code-styling',
     templateUrl: './qr-code-styling.component.html',
     styleUrls: ['./qr-code-styling.component.scss'],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class QrCodeStylingComponent {
     public readonly value = 'https://www.infragistics.com/products/ignite-ui-web-components';
diff --git a/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.html b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.html
index 7e1017750..22a1bb3e2 100644
--- a/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.html
+++ b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.html
@@ -2,18 +2,18 @@
     <igc-qr-code value="https://developer.mozilla.org/en-US/docs/Web/JavaScript" size="150" error-level="H"
         dot-style="circle" square-style="rounded"
         logo-src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" logo-size="0.75"
-        class="[--ig-qr-code-dark-color:#1a1a1a] [--ig-qr-code-background:#f7df1e] [--ig-qr-code-corner-square-color:#1a1a1a] [--ig-qr-code-corner-dot-color:#1a1a1a]"></igc-qr-code>
+        class="!light-qr-code [--ig-qr-code-dark-color:#1a1a1a] [--ig-qr-code-background:#f7df1e] [--ig-qr-code-corner-square-color:#1a1a1a] [--ig-qr-code-corner-dot-color:#1a1a1a]"></igc-qr-code>
     <igc-qr-code value="https://developer.mozilla.org/en-US/docs/Web/HTML" size="150" error-level="H" dot-style="circle"
         square-style="rounded"
         logo-src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg" logo-size="0.75"
-        class="[--ig-qr-code-dark-color:#ffffff] [--ig-qr-code-background:#e44d26] [--ig-qr-code-corner-square-color:#ffffff] [--ig-qr-code-corner-dot-color:#ffffff]"></igc-qr-code>
+        class="!light-qr-code [--ig-qr-code-dark-color:#ffffff] [--ig-qr-code-background:#e44d26] [--ig-qr-code-corner-square-color:#ffffff] [--ig-qr-code-corner-dot-color:#ffffff]"></igc-qr-code>
     <igc-qr-code value="https://developer.mozilla.org/en-US/docs/Web/CSS" size="150" error-level="H" dot-style="circle"
         square-style="rounded" logo-src="https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg"
         logo-size="0.75"
-        class="[--ig-qr-code-dark-color:#ffffff] [--ig-qr-code-background:#1572b6] [--ig-qr-code-corner-square-color:#ffffff] [--ig-qr-code-corner-dot-color:#ffffff]"></igc-qr-code>
+        class="!light-qr-code [--ig-qr-code-dark-color:#ffffff] [--ig-qr-code-background:#1572b6] [--ig-qr-code-corner-square-color:#ffffff] [--ig-qr-code-corner-dot-color:#ffffff]"></igc-qr-code>
     <igc-qr-code value="https://www.infragistics.com/products/ignite-ui-web-components" size="150" error-level="H"
         dot-style="circle" square-style="rounded"
         logo-src="https://static.infragistics.com/marketing/Website/products/ignite-ui/shared/ignite-ui-logo-light-background-horizontal.svg"
         logo-size="0.75"
-        class="[--ig-qr-code-dark-color:#0f172a] [--ig-qr-code-background:#ffffff] [--ig-qr-code-corner-square-color:#0f172a] [--ig-qr-code-corner-dot-color:#0f172a]"></igc-qr-code>
+        class="!light-qr-code [--ig-qr-code-dark-color:#0f172a] [--ig-qr-code-background:#ffffff] [--ig-qr-code-corner-square-color:#0f172a] [--ig-qr-code-corner-dot-color:#0f172a]"></igc-qr-code>
 </div>
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.ts b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.ts
index 171cb8654..16a0739ba 100644
--- a/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.ts
+++ b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.ts
@@ -7,7 +7,6 @@ defineComponents(IgcQrCodeComponent);
     selector: 'app-qr-code-tailwind-styling',
     templateUrl: './qr-code-tailwind-styling.component.html',
     styleUrls: ['./qr-code-tailwind-styling.component.scss'],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    imports: []
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class QrCodeTailwindStylingComponent { }

From 387837d8f694c5474502f5f93c77d27b67f7fc93 Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Thu, 24 Sep 2026 10:27:10 +0300
Subject: [PATCH 5/5] fix(): add logo-margin

---
 .../qr-code/qr-code-logo/qr-code-logo.component.html           | 3 ++-
 .../qr-code/qr-code-overview/qr-code-overview.component.html   | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.html b/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.html
index 6cbe31921..69175e421 100644
--- a/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.html
+++ b/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.html
@@ -1 +1,2 @@
-<igc-qr-code value="https://www.infragistics.com/" logo-size="1" error-level="H" [attr.logo-src]="logoSrc"></igc-qr-code>
+<igc-qr-code value="https://www.infragistics.com/" logo-size="1" logo-margin="2" error-level="H"
+    [attr.logo-src]="logoSrc"></igc-qr-code>
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.html b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.html
index dafeba766..cb914d862 100644
--- a/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.html
+++ b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.html
@@ -23,4 +23,5 @@
     error-level="H"
     [attr.logo-src]="showLogo ? logoSrc : null"
     logo-size="1"
+    logo-margin="3"
 ></igc-qr-code>