feat(qr-code): add samples

src/app/data-display/data-display-routes-data.ts

@@ -43,5 +43,12 @@ 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-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" }
 };

src/app/data-display/data-display.routes.ts

@@ -49,8 +49,15 @@ 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';
+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 = [
     {
@@ -282,5 +289,41 @@ 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: 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'],
+        path: 'qr-code-tailwind-styling'
     }
 ];

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>

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;
+    }
+}

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 {
+}

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>

src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.scss

@@ -0,0 +1,4 @@
+:host {
+    display: flex;
+    justify-content: center;
+}

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';
+}

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>

src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.scss

@@ -0,0 +1,33 @@
+@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;
+    height: 100%;
+}
+
+.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;
+    width: fit-content;
+    gap: 0.25rem;
+}

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';
+}

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>

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;
+    }
+}

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 {
+}

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>

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;
+    }
+}

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';
+}

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>

src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.scss

@@ -0,0 +1,37 @@
+:host {
+    display: flex;
+    align-items: flex-start;
+    gap: 3.75rem;
+    justify-content: center;
+    flex-direction: row;
+    overflow-y: auto;
+    height: 100%;
+}
+
+.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;
+    }
+}