diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts index 39ceef1ea..6dce452ba 100644 --- a/src/app/data-display/data-display-routes-data.ts +++ b/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" } }; diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts index de1538d48..16ede5720 100644 --- a/src/app/data-display/data-display.routes.ts +++ b/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' } ]; 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 @@ +
+ > + error-level: L +
+
+ > + error-level: M +
+
+ > + error-level: Q +
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 @@ + 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.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 @@ +
+ + Square + Circle + Rounded + + + + Small + Medium + Large + Extra large + + + Logo +
+ + 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..67e4e7915 --- /dev/null +++ b/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; +} \ 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-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 @@ +
+ + dot and square style: square +
+
+ > + dot and square style: circle +
+
+ > + dot and square style: rounded +
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 @@ +
+ > + size: 128px +
+
+ > + size: 192px +
+
+ > + size: 256px +
\ 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.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 @@ + + + + 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..b748a9283 --- /dev/null +++ b/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; + } +} \ 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..7e1017750 --- /dev/null +++ b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.html @@ -0,0 +1,19 @@ +
+ + + + +
\ 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 new file mode 100644 index 000000000..53ba8128a --- /dev/null +++ b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.scss @@ -0,0 +1,22 @@ +:host { + display: block; + height: 100%; + overflow-y: auto; +} + +.container { + display: flex; + gap: 1.5rem; + padding: 1rem; + background: #111; + width: fit-content; + flex-direction: row; + flex-wrap: wrap; + margin-inline: auto; +} + +@media (width < 800px) { + .container { + 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 { }