docs(barcode):added qrcode documentation (#529)

* docs(barcode):added qrcode documentation

* Update components/barcode/qrcode/overview.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

* Update components/barcode/qrcode/overview.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

* docs(barcode):fixes as per comments

* docs(qrcode):added final fixes as per comments

* docs(qrcode):added fix per last comment

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

Author: xristianstefanov

_config.yml

@@ -240,6 +240,8 @@ navigation:
         title: "Arc"
      "*autocomplete":
         title: "AutoComplete"
+     "*barcodes":
+        title: "Barcodes"
      "*barcode":
         title: "Barcode"
      "*togglebutton":

components/barcode/encoding.md components/barcodes/barcode/encoding.mdcomponents/barcode/encoding.md renamed to components/barcodes/barcode/encoding.md

@@ -2,7 +2,7 @@
 title: Encoding
 page_title: Barcode Encoding
 description: Types of Encoding supported by the Barcode for Blazor.
-slug: components/barcode/encoding
+slug: barcode-encoding
 tags: telerik,blazor,barcode,encoding
 published: True
 position: 3
@@ -16,28 +16,6 @@ You can choose which supported encoding to use by setting the `Type` paramater o
 
 >important If the value of a particular encoding does not meet the expected length or character set, the barcode will **not** be shown.
 
-| SYMBOLOGY | CHARACTER SET | LENGTH | CHECK DIGITS |
-| --------- | ------------- | ------ | ------------ |
-| **Code 39** (default) | [A-Z]; [0-9]; [ - . $ / + % ] | variable (avg. up to 20 chars) | optional (Mod. 43) |
-| **Code39Extended** | ASCII (128 characters) | variable | optional (Mod. 43) |
-| **Code 93** | [0-9];[A-Z];[SPACE . + - / % $] | variable | 2 check digits |
-| **Code93Extended** | ASCII(128 characters) | variable | 2 check digits |
-| **EAN-13** | numeric [0..9] | 12 usable digits | 1 check digit |
-| **EAN-8** | numeric [0..9] | 7 usable digits | 1 check digit |
-| **UPC-A** | numeric [0..9] | 11 usable digits (first is always 0) | 1 check digit |
-| **UPC-E** | numeric [0..9] | 6 usable digits (first is always 0) | 1 check digit |
-| **POSTNET** | numeric [0..9] | variable | 1 check digit |
-| **Code 11** | [0-9]; [-] | variable | 1 or 2 based on length |
-| **Code128** | LATIN-1 (ISO-8859-1) | variable | 1 check digit |
-| **Code128A** | ASCII 00 to 95 (0-9, A-Z and control codes), special characters | variable | 1 check digit |
-| **Code128B** | ASCII 32 to 127 (0-9, A-Z, a-z), special characters | variable | 1 check digit |
-| **Code128C** | ASCII 00-99 (encodes each two digits with one code) | variable | 1 check digit |
-| **GS1-128** | depending on Application Identifier | variable | 1 check digit |
-| **MSImod10** | numeric [0..9] | variable | 1 check digit |
-| **MSImod11** | numeric [0..9] | variable | 1 check digit |
-| **MSImod1010** | numeric [0..9] | variable | 1 check digit |
-| **MSImod1110** | numeric [0..9] | variable | 1 check digit |
-
 >caption Explore the Barcode Type options
 
 ````CSHTML
@@ -66,6 +44,28 @@ You can choose which supported encoding to use by setting the `Type` paramater o
 }
 ````
 
+| SYMBOLOGY | CHARACTER SET | LENGTH | CHECK DIGITS |
+| --------- | ------------- | ------ | ------------ |
+| **Code 39** (default) | [A-Z]; [0-9]; [ - . $ / + % ] | variable (avg. up to 20 chars) | optional (Mod. 43) |
+| **Code39Extended** | ASCII (128 characters) | variable | optional (Mod. 43) |
+| **Code 93** | [0-9];[A-Z];[SPACE . + - / % $] | variable | 2 check digits |
+| **Code93Extended** | ASCII(128 characters) | variable | 2 check digits |
+| **EAN-13** | numeric [0..9] | 12 usable digits | 1 check digit |
+| **EAN-8** | numeric [0..9] | 7 usable digits | 1 check digit |
+| **UPC-A** | numeric [0..9] | 11 usable digits (first is always 0) | 1 check digit |
+| **UPC-E** | numeric [0..9] | 6 usable digits (first is always 0) | 1 check digit |
+| **POSTNET** | numeric [0..9] | variable | 1 check digit |
+| **Code 11** | [0-9]; [-] | variable | 1 or 2 based on length |
+| **Code128** | LATIN-1 (ISO-8859-1) | variable | 1 check digit |
+| **Code128A** | ASCII 00 to 95 (0-9, A-Z and control codes), special characters | variable | 1 check digit |
+| **Code128B** | ASCII 32 to 127 (0-9, A-Z, a-z), special characters | variable | 1 check digit |
+| **Code128C** | ASCII 00-99 (encodes each two digits with one code) | variable | 1 check digit |
+| **GS1-128** | depending on Application Identifier | variable | 1 check digit |
+| **MSImod10** | numeric [0..9] | variable | 1 check digit |
+| **MSImod11** | numeric [0..9] | variable | 1 check digit |
+| **MSImod1010** | numeric [0..9] | variable | 1 check digit |
+| **MSImod1110** | numeric [0..9] | variable | 1 check digit |
+
 ## See Also
 
   * [Live Demo: Barcode](https://demos.telerik.com/blazor-ui/barcode/overview)

…e/images/barcode-basic-configuration.PNG …e/images/barcode-basic-configuration.PNGcomponents/barcode/images/barcode-basic-configuration.PNG renamed to components/barcodes/barcode/images/barcode-basic-configuration.PNG components/barcode/images/barcode-basic-configuration.PNG renamed to components/barcodes/barcode/images/barcode-basic-configuration.PNG

@@ -2,7 +2,7 @@
 title: Overview
 page_title: Barcode Overview
 description: Overview of the Barcode for Blazor.
-slug: components/barcode/overview
+slug: barcode-overview
 tags: telerik,blazor,barcode,overview
 published: True
 position: 0
@@ -21,10 +21,10 @@ To add a Telerik Barcode to your Blazor app:
 1. Add the `TelerikBarcode` tag.
 1. Provide `Value` property
 1. Set its `Height` and `Width`
-1. Optionally, choose a `Type` (one of the [encodings we support]({%slug  components/barcode/encoding%})).
+1. Optionally, choose a `Type` (one of the [encodings we support]({%slug  barcode-encoding%})).
     * Its default encoding is `Code39`.
 
-The following example demonstrates how to initialize the Barcode with its default configuration.
+The following example demonstrates how to set up the Barcode with its default configuration.
 
 >caption A basic configuration of the Telerik Barcode
 
@@ -39,19 +39,19 @@ The following example demonstrates how to initialize the Barcode with its defaul
 
 ![](images/barcode-basic-configuration.png)
 
-For more information, refer to the [article on encoding]({%slug  components/barcode/encoding%}) regarding the set of types supported by the Barcode.
+For more information, refer to the [article on encoding]({%slug  barcode-encoding%}) regarding the set of types supported by the Barcode.
 
 ## Features
 
 >caption The Barcode provides the following features:
 
 ### General Properties
 
-* `RenderAs` - `enum` - defines the preferred rendering engine - svg/canvas.
+* `RenderAs` - `enum` - defines the preferred rendering mode - svg/canvas.
 
 * `Checksum` - `bool` - by setting it to true, the Barcode will display the checksum digit next to the value in the text area.
 
-* `Type` - `enum` - defines the symbology (encoding) the Barcode will use - ([full list of supported encodings]({%slug  components/barcode/encoding%}))
+* `Type` - `enum` - defines the symbology (encoding) the Barcode will use - ([full list of supported encodings]({%slug  barcode-encoding%}))
 
 * `Value` - `string` - defines the initial value of the Barcode.
 

components/barcode/overview.md components/barcodes/barcode/overview.mdcomponents/barcode/overview.md renamed to components/barcodes/barcode/overview.md

@@ -0,0 +1,32 @@
+---
+title: Encoding
+page_title: QRCode Encoding
+description: Types of Encoding supported by the QRCode for Blazor.
+slug: qrcode-encoding
+tags: telerik,blazor,barcode,qrcode,encoding
+published: True
+position: 3
+---
+
+# QRCode Encoding
+The different types of QRCode values support different **conventions** and **formatting** accordingly.
+
+In many cases, the value of the QRCode is processed by the device in a special way. For example, geolocations are displayed in the Global Positioning System (GPS) or Map application on the device, URLs are opened by the browser, and so on.
+
+# URL
+To encode the text of a URL, for example, https://docs.telerik.com/blazor-ui/introduction, encode the `https://docs.telerik.com/blazor-ui/introduction` URL text in the QRCode. Include the `http://` protocol to ensure it is recognized as a URL.
+
+# Email Addresses
+To encode an email address, for example, `blazor@telerik.com`, encode `blazor@telerik.com`. To ensure the value is recognized as an email address, create a proper `mailto` Uniform Resource Identifier (URI) from the address (`mailto:blazor@telerik.com`). As a result, readers can open a blank email message to the specified email destination.
+
+# Telephone Numbers
+To encode a telephone number, use a telephone URI to ensure that the digits are recognized as a telephone number and include prefixes which make the number internationally accessible. For example, to encode the `212-555-1212` US telephone number, encode `tel:+1-212-555-1212`. This telephone URI contains a `+1` prefix that makes it usable outside the United States. As a result, even though readers cannot automatically initiate a call, they can invoke the device dialer (if applicable) and pre-fill it with the specified number.
+
+# Contact Information
+To encode contact information as text, use the [vCard](https://en.wikipedia.org/wiki/VCard) format. This format is too verbose to use in 2D QRCodes whose information capacity is limited. It is not clear whether vCard is or has to be used to encode contact information. As a result, readers can open a new address book entry that is populated with the provided data and prompt the user to add a new contact.
+
+# SMS
+Similar to email addresses, to encode an SMS short code or number, create an SMS URI. For example, to create a link to the `12345` number, encode `sms:12345`. You may use other URI forms, such as `sms:number:subject`, and other prefixes, such as `smsto:`. As a result, readers can open a new SMS message that is ready for users to compose and send it.
+
+# Geolocations
+To encode a point on the earth, including altitude, use a geo URI. For example, to encode the Progress office in Bulgaria, encode `geo:42.65049,23.37925,100`. As a result, readers can either open a local mapping application to this location, such as [Google Maps](https://www.google.bg/maps/), and zoom accordingly, or a link to this location on a mapping website such as Google Maps in the web browser of the device.

components/barcodes/qrcode/encoding.md

@@ -0,0 +1,111 @@
+---
+title: Overview
+page_title: QRCode Overview
+description: Overview of the QRCode for Blazor.
+slug: qrcode-overview
+tags: telerik,blazor,barcode,qrcode,overview
+published: True
+position: 0
+---
+
+# QRCode Overview
+
+The QRCode generates **Canvas** and **SVG** images that represent Quick Response (QR) codes.
+
+The generated image from the component is a machine-readable label that contains information about data for a locator, identifier, or tracker that points to a website or application.
+
+## Basics
+
+To add a Telerik QRCode to your Blazor app:
+
+1. Add the `TelerikQRCode` tag.
+1. Provide `Value` property
+1. Set its `Size`
+1. Optionally, choose a `QRCode Type` (one of the [types we support]({%slug  qrcode-qr-code-types%})).
+
+The following example demonstrates how to set up the QRCode with its default configuration.
+
+>caption A basic configuration of the Telerik QRCode
+
+````CSHTML
+@* This code snippet showcases an example of basic a QRCode configuration. *@
+
+<TelerikQRCode Size="200px"
+               Value="https://docs.telerik.com/blazor-ui/introduction">
+</TelerikQRCode>
+````
+
+>caption The result from the above code snippet
+
+![](images/qrcode-basic-configuration.png)
+
+For more information, refer to the [article on types]({%slug  qrcode-qr-code-types%}) regarding the set of QRCode types.
+
+## Features
+
+>caption The QRCode provides the following features:
+
+### General Properties
+
+* `RenderAs` - `enum` - `RenderingMode` - defines the preferred rendering mode:
+    * `SVG`
+    * `Canvas`
+
+* `Encoding` - `enum` - `QRCodeEncoding` - the encoding mode used to encode the value. The possible members are:
+    * `ISO_8859_1` - supports all characters from the ISO/IEC 8859-1 character set.
+    * `UTF_8` - supports all Unicode characters. The UTF-8 encoding is not included in the specifications and is not supported by all readers.
+
+* `ErrorCorrection` - `enum` - `QRCodeErrorCorrection` - the error correction level used to encode the value. The possible values are:
+    * `L` - approximately 7% of the codewords can be restored.
+    * `M` - approximately 15% of the codewords can be restored.
+    * `Q` - approximately 25% of the codewords can be restored.
+    * `H` - approximately 30% of the codewords can be restored.
+
+* `Value` - `string` - defines the initial value of the QRCode.
+
+* `Size` - `string` - specifies the size (`Width` and `Height`) of a QR code in pixels (i.e. "200px") as the QRCode is a square. You can read more details for the dimension properties in the [Dimensions article](https://docs.telerik.com/blazor-ui/common-features/dimensions#dimensions). Setting both `Size` and `Width` and/or `Height` will throw an error. Setting different values to `Width` and `Height` will also cause an issue.
+
+* `Width` - `string` - sets the width of the QRCode. If `Height` is set and the `Size` property is not set, the same value as `Width` should be set to `Height`.
+
+* `Height` - `string` - sets the height of the QRCode. If `Height` is set and the `Size` property is not set, the same value as `Height` should be set to `Width`.
+
+* `Class` - `string` - the CSS class that will be rendered on the main wrapping element of the QRCode component.
+
+* `Background` - `string` - the background color of the QRCode. Accepts a valid CSS color string, including HEX and RGB.
+
+* `Color` - `string` - defines the color of the QRCode elements. The default color is black.
+
+* `Padding` - `double` - defines the minimum distance in pixels that should be left between the border and the QR modules.
+
+### Properties for the QRCode Overlay
+
+* `QRCodeOverlay` - `object` - the overlay configuration which allows you to choose from predefined layouts or insert a custom image.
+
+* `QRCodeOverlay.Type` - `enum` - `QRCodeOverlayType` - available options are `Image` and `Swiss`. When set to image, you have to specify the url source of the image. If set to swiss, a [Swiss QR Code](https://blog.xsuite.com/en/swiss-qr-code#:~:text=This%20QR%20code%20is%20called,(e.g.%20in%20PDF%20format).) is created.
+
+* `QRCodeOverlay.ImageUrl` - `string` - the URL of the displayed overlay image.
+
+* `QRCodeOverlay.Width` - `double` - the width of the overlay in pixels.
+
+* `QRCodeOverlay.Height` - `double` - the height of the overlay in pixels.
+
+### Properties for the QRCode Border
+
+* `QRCodeBorder` - `object` - the border of the QR code.
+
+* `QRCodeBorder.Color` - `string` - the color of the border. Accepts a valid CSS color string, including HEX and RGB.
+
+* `QRCodeBorder.Width` - `double` - The width of the border in pixels. By default the border width is set to zero which means that the border will not be visible.
+
+## Methods
+
+The QRCode methods are accessible through its reference.
+
+* `Refresh` - redraws the component.
+
+You can see the [example with the Barcode](https://docs.telerik.com/blazor-ui/components/barcode/overview#methods) and use the `Refresh()` method in the same way with QRCode.
+
+## See Also
+
+  * [Live Demo: QRCode](https://demos.telerik.com/blazor-ui/qrcode/overview)
+  * [Live Demo: QRCode Encoding](https://demos.telerik.com/blazor-ui/barcode/qrcode/encoding)

components/barcodes/qrcode/images/qrcode-basic-configuration.PNG

@@ -0,0 +1,70 @@
+---
+title: QR Code Types
+page_title: QR Code Types
+description: Overview of the QR Code Types for Blazor.
+slug: qrcode-qr-code-types
+tags: telerik,blazor,barcode,qrcode,types,overview
+published: True
+position: 5
+---
+
+# QRCode Types
+
+The component exposes the following QRCode types:
+
+* [Swiss Type](#swiss-qrcode-type)
+* [Image Type](#image-qrcode-type)
+
+## Swiss QRCode Type
+The QRCode component supports the [Swiss QR Code format](https://blog.xsuite.com/en/swiss-qr-code). Enabling the `Swiss` type of the overlay will add a Swiss cross in the QR Code.
+
+The following implementation demonstrates the code needed for the Swiss Type:
+
+>caption An example of a Swiss QR Type implementation
+
+````CSHTML
+@* This code snippet showcases an example of Swiss type QR code. *@
+
+<TelerikQRCode Size="200px"
+               Value="@value">
+    <QRCodeOverlay Type="@QRCodeOverlayType.Swiss" />
+</TelerikQRCode>
+
+@code {
+    string value = "SPC  0200  1  CH4431999123000889012  S  " +
+            "Robert Schneider AG  Rue du Lac  1268  2501  Biel  CH  1949.75  CHF  " +
+            "S  Pia-Maria Rutschmann-Schnyder  Grosse Marktgasse  28  9400  Rorschach  CH  " +
+            "QRR  210000000003139471430009017 Order of 15 June 2020  EPD  " +
+            "//S1/10/10201409/11/200701/20/140.000-53/30/102673831/31/200615/32/7.7/33/7.7:139.40/40/0:30" +
+            "  Name AV1: UV;UltraPay005;12345  Name AV2: XY;XYService;54321";
+}
+````
+
+>caption The result from the above code snippet
+
+![](images/qrcode-swiss-type.png)
+
+## Image QRCode Type
+The image type of the overlay is adding an image in the QR Code.
+
+The following implementation demonstrates the code needed for the Image Type:
+
+>caption An example of a QRCode Image Type implementation
+
+````CSHTML
+@* This code snippet showcases an example of image type QR code. *@
+
+<TelerikQRCode Size="200px"
+               Value="https://demos.telerik.com/blazor-ui">
+    <QRCodeOverlay Type="@QRCodeOverlayType.Image" ImageUrl="https://demos.telerik.com/kendo-ui/content/shared/images/site/kendoka-cta.svg" />
+</TelerikQRCode>
+````
+
+>caption The result from the above code snippet
+
+![](images/qrcode-image-type.png)
+
+## See Also
+
+  * [Live Demo: QRCode](https://demos.telerik.com/blazor-ui/qrcode/overview)
+  * [Live Demo: QRCode Encoding](https://demos.telerik.com/blazor-ui/barcode/qrcode/encoding)