From ebf626d57baaca6c0607a0a22041b63f88712d1f Mon Sep 17 00:00:00 2001
From: Marin Bratanov <m.bratanov@gmail.com>
Date: Thu, 11 Mar 2021 20:42:37 +0200
Subject: [PATCH 01/10] chore(colorPalette): skeleton

---
 _config.yml                              |  4 +-
 components/colorpalette/custom-colors.md | 23 +++++++
 components/colorpalette/events.md        | 23 +++++++
 components/colorpalette/overview.md      | 87 ++++++++++++++++++++++++
 components/colorpalette/predefined.md    | 23 +++++++
 5 files changed, 159 insertions(+), 1 deletion(-)
 create mode 100644 components/colorpalette/custom-colors.md
 create mode 100644 components/colorpalette/events.md
 create mode 100644 components/colorpalette/overview.md
 create mode 100644 components/colorpalette/predefined.md

diff --git a/_config.yml b/_config.yml
index be82a353a0..1e6e61f0ac 100644
--- a/_config.yml
+++ b/_config.yml
@@ -219,7 +219,8 @@ navigation:
      "*chunkprogressbar":
         title: "ChunkProgressBar"
      "*colorpalette":
-        title: "ColorPalette"
+        title: "Color Palette"
+        isNew: true
      "*colorpicker":
         title: "ColorPicker"
      "*/multicolumncombobox":
@@ -405,6 +406,7 @@ intro_columns:
       "HTML Editor": "editor-overview"
       "Slider": "slider-overview"
       "RangeSlider": "rangeslider-overview"
+      "Color Palette": "colorpalette-overview"
 
 -
   categories:
diff --git a/components/colorpalette/custom-colors.md b/components/colorpalette/custom-colors.md
new file mode 100644
index 0000000000..b0c9597abe
--- /dev/null
+++ b/components/colorpalette/custom-colors.md
@@ -0,0 +1,23 @@
+---
+title: Custom Colors
+page_title: Color Palette - Custom Colors
+description: Custom Colors in the Color Palette for Blazor.
+slug: colorpalette-custom-colors
+tags: telerik,blazor,Color,Palette,Custom,Colors
+published: true
+position: 15
+---
+
+# Custom Colors
+
+This article shows how to create your own sets of colors for the Telerik Color Palette for Blazor:
+
+
+
+
+
+
+## See Also
+
+* [ValueChanged and Validation]({%slug value-changed-validation-model%})
+* [Fire OnChange Only Once]({%slug ddl-kb-onchange-fires-twice%})
diff --git a/components/colorpalette/events.md b/components/colorpalette/events.md
new file mode 100644
index 0000000000..98d18c3484
--- /dev/null
+++ b/components/colorpalette/events.md
@@ -0,0 +1,23 @@
+---
+title: Events
+page_title: Color Palette - Events
+description: Events in the Color Palette for Blazor.
+slug: colorpalette-events
+tags: telerik,blazor,Color,Palette,events
+published: true
+position: 50
+---
+
+# Events
+
+This article explains the events available in the Telerik Color Palette for Blazor:
+
+
+* [ValueChanged](#valuechanged)
+
+
+
+## See Also
+
+* [ValueChanged and Validation]({%slug value-changed-validation-model%})
+* [Fire OnChange Only Once]({%slug ddl-kb-onchange-fires-twice%})
diff --git a/components/colorpalette/overview.md b/components/colorpalette/overview.md
new file mode 100644
index 0000000000..0b3bd8addb
--- /dev/null
+++ b/components/colorpalette/overview.md
@@ -0,0 +1,87 @@
+---
+title: Overview
+page_title: Color Palette Overview
+description: Overview of the Color Palette for Blazor.
+slug: colorpalette-overview
+tags: telerik,blazor,masked,Color,Palette,overview
+published: True
+position: 0
+---
+
+# Color Palette Overview
+
+The <a href = "https://www.telerik.com/blazor-ui/colorpalette" target="_blank">Blazor Color Palette component</a> provides a list of color tiles for the user to pick a color from by clicking or tapping. You can choose a predefined list of colors, or create your own. Two-way binding and events let you react to the user choice.
+
+## Basics
+
+To use a Telerik Color Palette for Blazor:
+
+1. Add the `<TelerikColorPalette>` tag.
+1. Bind its `Value` to the `string` you want to get out of it.
+1. Choose a set of colors (the example below uses one of the predefined options).
+
+>caption Basic color palette with two-way value binding and a predefined palette
+
+````CSHTML
+@MyColor
+<br />
+
+<TelerikColorPalette Palette="@PalettePresets.Austin" @bind-Value="@MyColor">
+</TelerikColorPalette>
+
+@code {
+    public string MyColor { get; set; }
+}
+````
+
+>caption The result from the code snippet above before you start writing
+
+![Color Palette first look](images/color-palette-first-look.png)
+
+
+## Features
+
+>caption The Masked Textbox provides the following features:
+
+* `Class` - the CSS class that will be rendered on the wrapping element of the component.
+
+* `Enabled` - whether the `input` is enabled.
+
+* `Id` - renders as the `id` attribute on the `<input />` element, so you can attach a `<label for="">` to the input.
+
+* `IncludeLiterals` (defaults to `false`) - whether the literal characters from the mask (those characters that don't carry a special meaning such as brackets or dashes) are included in the `Value`. Read more in the [Mask and Prompt]({%slug maskedtextbox-mask-prompt%}) article.
+
+* `Label` - the `label` element rendered next to the `input` to provide the user with information on its purpose. It covers the input in a fashion similar to a placeholder, and animates up on focus. If you don't want this effect or the height increase it causes, use the `Id` parameter to attach your own `<label>` tag. See also the `MaskOnFocus` parameter.
+
+* `Mask` - the mask (pattern) that the user has to follow. Shown by default. Read more about its features in the [Mask and Prompt]({%slug maskedtextbox-mask-prompt%}) article.
+
+* `MaskOnFocus` (defaults to `false`) - whether the mask will be shown to the user only while the input is focused. When set to `true`, the user will see the `Label` or `Placeholder` instead of the mask in case the textbox is empty. When there is some value in the input, the mask and input will be shown.
+
+* `Name` - the `name` attribute of the HTML element.
+
+* `PlaceHolder` - a `string` that maps to the `placeholder` attribute of the HTML element. If a `Label` is defined, it will be shown instead of the placeholder when the input is not focused. See also the `MaskOnFocus` parameter.
+
+* `Prompt` - (`char`) - the prompt character the user will see in the mask where there is no user value already. Defaults to an underscore `_`. Read more in the [Mask and Prompt]({%slug maskedtextbox-mask-prompt%}) article.
+
+* `PromptPlaceholder` (`char?`) - the character that is added to the raw `Value` for places where there is no user input yet. Defaults to an empty space ` ` so the string length matches the mask length. Read more in the [Mask and Prompt]({%slug maskedtextbox-mask-prompt%}) article.
+
+* `TabIndex` - maps to the `tabindex` attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the `Tab` key.
+
+* `Title` - maps to the `title` attribute of the HTML element. You can use it to add a [tooltip]({%slug tooltip-overview%}).
+
+* `Value` - get/set the value of the input, can be used for binding.
+
+* `Width` - the width of the `input`. See the [Dimensions]({%slug common-features/dimensions%}) article.
+
+* Validation - see the [Input Validation]({%slug common-features/input-validation%}) article.
+
+
+
+
+
+## See Also
+
+  * [Live Demo: MaskedTextbox](https://demos.telerik.com/blazor-ui/maskedtextbox/overview)
+  * [Live Demo: MaskedTextbox Validation](https://demos.telerik.com/blazor-ui/maskedtextbox/validation)
+  * [Input Validation]({%slug common-features/input-validation%})
+  * [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikMaskedTextBox)
diff --git a/components/colorpalette/predefined.md b/components/colorpalette/predefined.md
new file mode 100644
index 0000000000..58bdf13fe3
--- /dev/null
+++ b/components/colorpalette/predefined.md
@@ -0,0 +1,23 @@
+---
+title: Predefined Colors
+page_title: Color Palette - Predefined Colors
+description: Predefined Colors in the Color Palette for Blazor.
+slug: colorpalette-predefined
+tags: telerik,blazor,Color,Palette,Predefined,Colors
+published: true
+position: 14
+---
+
+# Predefined Colors
+
+This article lists the built-in color sets of colors available in the Telerik Color Palette for Blazor:
+
+
+
+
+
+
+## See Also
+
+* [ValueChanged and Validation]({%slug value-changed-validation-model%})
+* [Fire OnChange Only Once]({%slug ddl-kb-onchange-fires-twice%})

From c1fcfd31486ecfa1c33cc5d888a8a32a00e3be25 Mon Sep 17 00:00:00 2001
From: Marin Bratanov <m.bratanov@gmail.com>
Date: Thu, 11 Mar 2021 21:04:21 +0200
Subject: [PATCH 02/10] chore: cross link, fix article name

---
 components/colorpalette/overview.md           | 24 ++++---------------
 .../{predefined.md => presets.md}             | 10 ++++----
 2 files changed, 9 insertions(+), 25 deletions(-)
 rename components/colorpalette/{predefined.md => presets.md} (59%)

diff --git a/components/colorpalette/overview.md b/components/colorpalette/overview.md
index 0b3bd8addb..8d626fb55b 100644
--- a/components/colorpalette/overview.md
+++ b/components/colorpalette/overview.md
@@ -10,7 +10,7 @@ position: 0
 
 # Color Palette Overview
 
-The <a href = "https://www.telerik.com/blazor-ui/colorpalette" target="_blank">Blazor Color Palette component</a> provides a list of color tiles for the user to pick a color from by clicking or tapping. You can choose a predefined list of colors, or create your own. Two-way binding and events let you react to the user choice.
+The <a href = "https://www.telerik.com/blazor-ui/colorpalette" target="_blank">Blazor Color Palette component</a> provides a list of color tiles for the user to pick a color from by clicking or tapping. You can choose a [predefined list of colors]({%slug colorpalette-presets%}), or [create your own]({%slug colorpalette-custom-colors%}). Two-way binding and [events]({%slug colorpalette-events%}) let you react to the user choice.
 
 ## Basics
 
@@ -49,22 +49,6 @@ To use a Telerik Color Palette for Blazor:
 
 * `Id` - renders as the `id` attribute on the `<input />` element, so you can attach a `<label for="">` to the input.
 
-* `IncludeLiterals` (defaults to `false`) - whether the literal characters from the mask (those characters that don't carry a special meaning such as brackets or dashes) are included in the `Value`. Read more in the [Mask and Prompt]({%slug maskedtextbox-mask-prompt%}) article.
-
-* `Label` - the `label` element rendered next to the `input` to provide the user with information on its purpose. It covers the input in a fashion similar to a placeholder, and animates up on focus. If you don't want this effect or the height increase it causes, use the `Id` parameter to attach your own `<label>` tag. See also the `MaskOnFocus` parameter.
-
-* `Mask` - the mask (pattern) that the user has to follow. Shown by default. Read more about its features in the [Mask and Prompt]({%slug maskedtextbox-mask-prompt%}) article.
-
-* `MaskOnFocus` (defaults to `false`) - whether the mask will be shown to the user only while the input is focused. When set to `true`, the user will see the `Label` or `Placeholder` instead of the mask in case the textbox is empty. When there is some value in the input, the mask and input will be shown.
-
-* `Name` - the `name` attribute of the HTML element.
-
-* `PlaceHolder` - a `string` that maps to the `placeholder` attribute of the HTML element. If a `Label` is defined, it will be shown instead of the placeholder when the input is not focused. See also the `MaskOnFocus` parameter.
-
-* `Prompt` - (`char`) - the prompt character the user will see in the mask where there is no user value already. Defaults to an underscore `_`. Read more in the [Mask and Prompt]({%slug maskedtextbox-mask-prompt%}) article.
-
-* `PromptPlaceholder` (`char?`) - the character that is added to the raw `Value` for places where there is no user input yet. Defaults to an empty space ` ` so the string length matches the mask length. Read more in the [Mask and Prompt]({%slug maskedtextbox-mask-prompt%}) article.
-
 * `TabIndex` - maps to the `tabindex` attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the `Tab` key.
 
 * `Title` - maps to the `title` attribute of the HTML element. You can use it to add a [tooltip]({%slug tooltip-overview%}).
@@ -81,7 +65,7 @@ To use a Telerik Color Palette for Blazor:
 
 ## See Also
 
-  * [Live Demo: MaskedTextbox](https://demos.telerik.com/blazor-ui/maskedtextbox/overview)
-  * [Live Demo: MaskedTextbox Validation](https://demos.telerik.com/blazor-ui/maskedtextbox/validation)
+  * [Live Demo: Color Palette](https://demos.telerik.com/blazor-ui/colorpalette/overview)
+  * [Live Demo: MaskedTextbox Validation](https://demos.telerik.com/blazor-ui/colorpalette/validation)
   * [Input Validation]({%slug common-features/input-validation%})
-  * [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikMaskedTextBox)
+  * [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikColorPalette)
diff --git a/components/colorpalette/predefined.md b/components/colorpalette/presets.md
similarity index 59%
rename from components/colorpalette/predefined.md
rename to components/colorpalette/presets.md
index 58bdf13fe3..dad657629b 100644
--- a/components/colorpalette/predefined.md
+++ b/components/colorpalette/presets.md
@@ -1,9 +1,9 @@
 ---
-title: Predefined Colors
-page_title: Color Palette - Predefined Colors
-description: Predefined Colors in the Color Palette for Blazor.
-slug: colorpalette-predefined
-tags: telerik,blazor,Color,Palette,Predefined,Colors
+title: Presets
+page_title: Color Palette - Presets
+description: Predefined Color Presets in the Color Palette for Blazor.
+slug: colorpalette-presets
+tags: telerik,blazor,Color,Palette,Predefined,Colors,Presets
 published: true
 position: 14
 ---

From f24a5a9c0453a5786a9f96dac76a77c1e1edacc5 Mon Sep 17 00:00:00 2001
From: Marin Bratanov <m.bratanov@gmail.com>
Date: Sat, 13 Mar 2021 11:28:09 +0200
Subject: [PATCH 03/10] docs(colorPalette): meat in the overview article

---
 components/colorpalette/overview.md | 39 ++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 12 deletions(-)

diff --git a/components/colorpalette/overview.md b/components/colorpalette/overview.md
index 8d626fb55b..f43b3d75c0 100644
--- a/components/colorpalette/overview.md
+++ b/components/colorpalette/overview.md
@@ -18,15 +18,15 @@ To use a Telerik Color Palette for Blazor:
 
 1. Add the `<TelerikColorPalette>` tag.
 1. Bind its `Value` to the `string` you want to get out of it.
-1. Choose a set of colors (the example below uses one of the predefined options).
+1. Optionally, choose a set of colors to show the user (one of the [presets we provide]({%slug colorpalette-presets%}), or a set of [custom colors]({%slug colorpalette-custom-colors%})).
 
->caption Basic color palette with two-way value binding and a predefined palette
+>caption Basic color palette with two-way value binding and a default predefined palette
 
 ````CSHTML
 @MyColor
 <br />
 
-<TelerikColorPalette Palette="@PalettePresets.Austin" @bind-Value="@MyColor">
+<TelerikColorPalette @bind-Value="@MyColor">
 </TelerikColorPalette>
 
 @code {
@@ -38,24 +38,39 @@ To use a Telerik Color Palette for Blazor:
 
 ![Color Palette first look](images/color-palette-first-look.png)
 
+>caption Component reference
+
+````CSHTML
+<TelerikColorPalette @ref="@TheColorPaletteRef"></TelerikColorPalette>
+
+@code{
+    Telerik.Blazor.Components.TelerikColorPalette TheColorPaletteRef { get; set; }
+}
+````
 
 ## Features
 
->caption The Masked Textbox provides the following features:
+>caption The Color Palette provides the following features:
 
 * `Class` - the CSS class that will be rendered on the wrapping element of the component.
 
-* `Enabled` - whether the `input` is enabled.
+* `Colors` - the collection of colors the user can choose from. Can be one of the [presets that come with the component]({%slug colorpalette-presets%}), or [a custom list]({%slug colorpalette-custom-colors%}).
+
+* `Columns` - the number of columns to use when rendering the Colors list. Determines the size of the component together with the `TileHeight` and `TileWidth`.
+
+* `Enabled` - whether the component is enabled.
+
+* `Id` - renders as the `id` attribute on the wrapping element of the component.
 
-* `Id` - renders as the `id` attribute on the `<input />` element, so you can attach a `<label for="">` to the input.
+* `TabIndex` - maps to the `tabindex` attribute of the main HTML element. You can use it to customize the order in which the elements in your page focus with the `Tab` key.
 
-* `TabIndex` - maps to the `tabindex` attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the `Tab` key.
+* `TileHeight` - the height of each individual color item. Determines the size of the component together with the `Columns` and `TileWidth`. Can take CSS [dimensions]({%slug common-features/dimensions%}) strings 
 
-* `Title` - maps to the `title` attribute of the HTML element. You can use it to add a [tooltip]({%slug tooltip-overview%}).
+* `TileWidth`- the width of each individual color item. Determines the size of the component together with the `Columns` and `TileHeight`. Can take CSS [dimensions]({%slug common-features/dimensions%}) strings 
 
-* `Value` - get/set the value of the input, can be used for binding.
+* `Value` - get/set the value of the input, can be used for binding. Can take any string that can be a [CSS background-color string](https://css-tricks.com/almanac/properties/b/background-color/). The presets we provide use hex format (`#123abc`).
 
-* `Width` - the width of the `input`. See the [Dimensions]({%slug common-features/dimensions%}) article.
+* [Events]({%slug colorpalette-events%}) to let you react to the user actions.
 
 * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article.
 
@@ -66,6 +81,6 @@ To use a Telerik Color Palette for Blazor:
 ## See Also
 
   * [Live Demo: Color Palette](https://demos.telerik.com/blazor-ui/colorpalette/overview)
-  * [Live Demo: MaskedTextbox Validation](https://demos.telerik.com/blazor-ui/colorpalette/validation)
-  * [Input Validation]({%slug common-features/input-validation%})
+  * [Color Presets]({%slug colorpalette-presets%})
+  * [Custom Color Collections]({%slug colorpalette-custom-colors%})
   * [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikColorPalette)

From 3a932aa407ef87b13b6daf773be6b0975c93e772 Mon Sep 17 00:00:00 2001
From: Marin Bratanov <m.bratanov@gmail.com>
Date: Sat, 13 Mar 2021 11:52:12 +0200
Subject: [PATCH 04/10] docs(colorPalette): presets

---
 .../images/colorpalette-presets.png           | Bin 0 -> 35541 bytes
 components/colorpalette/presets.md            |  32 ++++++++++++++++--
 2 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 components/colorpalette/images/colorpalette-presets.png

diff --git a/components/colorpalette/images/colorpalette-presets.png b/components/colorpalette/images/colorpalette-presets.png
new file mode 100644
index 0000000000000000000000000000000000000000..44b5033dca4ce7f2c345b9f1a5d7c35ddb76f49d
GIT binary patch
literal 35541
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%0A&iVR>35UJRN@E~p
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
aU$t=-Qn&qA&Pm|EKdeezdE)o4@A-d(<iCsn

literal 0
HcmV?d00001

diff --git a/components/colorpalette/presets.md b/components/colorpalette/presets.md
index dad657629b..337ee6e748 100644
--- a/components/colorpalette/presets.md
+++ b/components/colorpalette/presets.md
@@ -10,14 +10,40 @@ position: 14
 
 # Predefined Colors
 
-This article lists the built-in color sets of colors available in the Telerik Color Palette for Blazor:
+The Telerik Blazor Color Palette component comes with a set of predefined color sets that you can show your users. To use them, set its `Colors` parameter to one of the members of the `Telerik.Blazor.Components.ColorPalettePresets` static class.
 
+>caption Example of using a predefined color list
 
+````CSHTML
+@SelectedColor
+<TelerikColorPalette Colors="@ColorPalettePresets.Basic" @bind-Value="@SelectedColor" />
+@code{
+    string SelectedColor { get; set; }
+}
+````
 
+>caption List of the built-in color presets in the Telerik Color Palette
 
+![Color Palette component Presets](images/colorpalette-presets.png)
+
+>caption Explore the predefined color presets - generates the images above
+
+````CSHTML
+<div style="display:flex;flex-direction: row; flex-flow:wrap;">
+    @foreach (System.Reflection.FieldInfo item in typeof(ColorPalettePresets).GetFields())
+    {
+        List<string> currPreset = (List<string>)item.GetValue(null);
+        string presetName = item.Name;
+        <div style="padding: 20px;">
+            <h6>@presetName</h6>
+            <TelerikColorPalette Colors="@currPreset" TileHeight="16px" TileWidth="16px" />
+        </div>
+    }
+</div>
+````
 
 
 ## See Also
 
-* [ValueChanged and Validation]({%slug value-changed-validation-model%})
-* [Fire OnChange Only Once]({%slug ddl-kb-onchange-fires-twice%})
+* [Color Paletter Overview]({%slug colorpalette-overview%})
+* [Custom Color Lists]({%slug colorpalette-custom-colors%})

From ff9040cd3bbb6a24e878cd1099098bc417d293cf Mon Sep 17 00:00:00 2001
From: Marin Bratanov <m.bratanov@gmail.com>
Date: Sat, 13 Mar 2021 12:07:29 +0200
Subject: [PATCH 05/10] docs(colorPalette): more meat on overview

---
 .../images/color-palette-first-look.png       | Bin 0 -> 4364 bytes
 .../images/large-size-few-columns.png         | Bin 0 -> 3524 bytes
 components/colorpalette/overview.md           |  29 ++++++++++++++++--
 components/colorpalette/presets.md            |   2 +-
 4 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 components/colorpalette/images/color-palette-first-look.png
 create mode 100644 components/colorpalette/images/large-size-few-columns.png

diff --git a/components/colorpalette/images/color-palette-first-look.png b/components/colorpalette/images/color-palette-first-look.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f38a2f594681637c248426cac228a0b43a1ab94
GIT binary patch
literal 4364
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
F@)szU&KCdx

literal 0
HcmV?d00001

diff --git a/components/colorpalette/images/large-size-few-columns.png b/components/colorpalette/images/large-size-few-columns.png
new file mode 100644
index 0000000000000000000000000000000000000000..4529c106d7387ec854551fd6d1413503c36df7a3
GIT binary patch
literal 3524
zcmeAS@N?(olHy`uVBq!ia0y~yV3Y&0A9Jt)$>2@ZOMw()age(c!@6@aFM%AEbVpxD
z28NCO+<y{Tfqc#akH}&M2EM}}%y>M1MG8<*sKhm*Bsf2<q&%@GmBGCzH8rm|Bflgr
zlmn=R*V@y?F{C2y?UjY63^GJrAO7dcG1FD5kPKtpy*+W8kLm3-Sz^3w-EEqD5$+qh
zyA+yIA3c}m<-U_DAF;vQ=I4@9yV|c;!{v>Qr`!Ggd0O8-ElscX*Nttt*7xMjZ_9mt
z`|-_fZ)>V;Zf~2L-=BVa+vm3*b8eUIvz?cF``q^9n{#jf{8j-}e4lj1)|EE%?P`O5
zzuA2LO5LZIue1LDI=20)o!#%g=)`Ip#;%(!NoEUY_!^{5KJ=}ENn|tU(Htkk*$HRV
zTHk(T(MS^pD>yjAm+SUp&VVy&U<FNvvqiQY7hW*K7p#CK*-SI1U){lQHblX(oS++W
z{taMrfeLzVF4<r^j{$5hP=Ul|&ryp<gPMwoYx42WALp05y@}rcv+>sQ`Tw2Y?!Nzf
z@-6*+|Gl>!i;HA$hNe?UN|&lmmF0n@O>pYYd^5GwpaYr_z$tpk#_($g6`+Y9m^(Dm
zCXX648b+h(2$63<S>)UQZ$F>UU;X#par=<pKdy@B#n+r&3oPpsV6_CWxCd1ui@^cc
z1Il5bib4Wb#fX5bf`hP11eno4wTv6M9+3dmM4)=a09FG5Ga;~wY6=8bLdQV06sQvF
zfmUC@iV9TCj9NV!;8ag$WuGek{k<N)`tP^=`ysz?#{XOSZSnknac}$Uf9#G*MruWY
z>ItN(9hm%kky=r}^eu(diUKBJ6QouY(AAm9t*E0pmylagz~sFVsTBpxI-?ek1~sA;
rMRDSq4C-cl+fUt|$VWT7f82)s>#l2r*j@*AvKTyF{an^LB{Ts5gVq$o

literal 0
HcmV?d00001

diff --git a/components/colorpalette/overview.md b/components/colorpalette/overview.md
index f43b3d75c0..27fa81269a 100644
--- a/components/colorpalette/overview.md
+++ b/components/colorpalette/overview.md
@@ -18,7 +18,8 @@ To use a Telerik Color Palette for Blazor:
 
 1. Add the `<TelerikColorPalette>` tag.
 1. Bind its `Value` to the `string` you want to get out of it.
-1. Optionally, choose a set of colors to show the user (one of the [presets we provide]({%slug colorpalette-presets%}), or a set of [custom colors]({%slug colorpalette-custom-colors%})).
+1. Optionally, choose a list of `Colors` to show the user (one of the [presets we provide]({%slug colorpalette-presets%}), or a set of [custom colors]({%slug colorpalette-custom-colors%})).
+    * If you do not provide a value for the `Colors`, it will default to the `Office` [preset]({%slug colorpalette-presets%}).
 
 >caption Basic color palette with two-way value binding and a default predefined palette
 
@@ -34,11 +35,33 @@ To use a Telerik Color Palette for Blazor:
 }
 ````
 
->caption The result from the code snippet above before you start writing
+>caption The result from the code snippet above after selecting a color
 
 ![Color Palette first look](images/color-palette-first-look.png)
 
->caption Component reference
+## Appearance
+
+You can control the appearane of the component not only through the lists of `Colors` you provide to it, but also its size through the `Columns`, `TileWidth` and `TileHeight` parameters.
+
+>caption Make a large color palette with few columns
+
+````CSHTML
+@SelectedColor
+<TelerikColorPalette Colors="@ColorPalettePresets.Basic" @bind-Value="@SelectedColor"
+                     Columns="5" TileHeight="3em" TileWidth="3em">
+</TelerikColorPalette>
+@code{
+    string SelectedColor { get; set; }
+}
+````
+
+>caption Theresult from the code snippet above
+
+![color palette appearance and size customization](images/large-size-few-columns.png)
+
+
+
+## Component Reference
 
 ````CSHTML
 <TelerikColorPalette @ref="@TheColorPaletteRef"></TelerikColorPalette>
diff --git a/components/colorpalette/presets.md b/components/colorpalette/presets.md
index 337ee6e748..a0be4a226b 100644
--- a/components/colorpalette/presets.md
+++ b/components/colorpalette/presets.md
@@ -26,7 +26,7 @@ The Telerik Blazor Color Palette component comes with a set of predefined color
 
 ![Color Palette component Presets](images/colorpalette-presets.png)
 
->caption Explore the predefined color presets - generates the images above
+>caption Explore the predefined color presets - generates the image above
 
 ````CSHTML
 <div style="display:flex;flex-direction: row; flex-flow:wrap;">

From 8c1f027a8afb2c657c677b8d62c9d7b2bb44fc54 Mon Sep 17 00:00:00 2001
From: Marin Bratanov <m.bratanov@gmail.com>
Date: Sat, 13 Mar 2021 14:58:30 +0200
Subject: [PATCH 06/10] docs(colorPalette): custom color lists

---
 components/colorpalette/custom-colors.md      |  23 +++++++++++++++---
 .../images/custom-color-palette.png           | Bin 0 -> 512 bytes
 components/colorpalette/overview.md           |   2 +-
 3 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 components/colorpalette/images/custom-color-palette.png

diff --git a/components/colorpalette/custom-colors.md b/components/colorpalette/custom-colors.md
index b0c9597abe..3ef2a50151 100644
--- a/components/colorpalette/custom-colors.md
+++ b/components/colorpalette/custom-colors.md
@@ -10,14 +10,31 @@ position: 15
 
 # Custom Colors
 
-This article shows how to create your own sets of colors for the Telerik Color Palette for Blazor:
+You can provide your own set of colors to the Blazor Color Palette component. You can use a <a href="https://css-tricks.com/almanac/properties/b/background-color/" target="_blank">valid CSS color</a>, and pass a `IEnumerable<string>` to the `Colors` parameter.
 
+>caption Custom collection of colors in the Color Palette component
 
+````CSHTML
+@MyColor
+<br />
+
+<TelerikColorPalette Colors="@MyCustomColorList" @bind-Value="@MyColor">
+</TelerikColorPalette>
+
+@code {
+    string MyColor { get; set; }
+    List<string> MyCustomColorList { get; set; } = new List<string> { "red", "#0f0", "#0000ff" };
+}
+````
+
+>caption The result from the code snippet above
+
+![custom color collections](images/custom-color-palette.png)
 
 
 
 
 ## See Also
 
-* [ValueChanged and Validation]({%slug value-changed-validation-model%})
-* [Fire OnChange Only Once]({%slug ddl-kb-onchange-fires-twice%})
+* [Color Paletter Overview]({%slug colorpalette-overview%})
+* [Predefined Color Lists]({%slug colorpalette-presets%})
diff --git a/components/colorpalette/images/custom-color-palette.png b/components/colorpalette/images/custom-color-palette.png
new file mode 100644
index 0000000000000000000000000000000000000000..85a070e9a08250106b7e05d456738f2f5a4933b6
GIT binary patch
literal 512
zcmeAS@N?(olHy`uVBq!ia0vp^WkBq}!3HGHw=^#VQjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1`ISV`@iy0XB4ude`@%$AjKtZ7r*NBqf{Irtt#G+IN_oCF)yyA@flDJR~
zpcck*PZ!6KinzBE4{|a%3LM(@f7$nS4K}>oNo_S#4;H(tN^hIO8-1!xH}&weO^Mz&
zH!RJ$5oDI5iBnjl{Kn_w-LH;sHT1nx@k?z*U5xbQBfZP>n}(B+OP~Du8w7&_cfg(8
aD}Q~e?9A=C@9cpQ#Ng@b=d#Wzp$P!8Rq22L

literal 0
HcmV?d00001

diff --git a/components/colorpalette/overview.md b/components/colorpalette/overview.md
index 27fa81269a..50c1ec1a71 100644
--- a/components/colorpalette/overview.md
+++ b/components/colorpalette/overview.md
@@ -24,7 +24,7 @@ To use a Telerik Color Palette for Blazor:
 >caption Basic color palette with two-way value binding and a default predefined palette
 
 ````CSHTML
-@MyColor
+<span style="color: @MyColor">@MyColor</span>
 <br />
 
 <TelerikColorPalette @bind-Value="@MyColor">

From 6a265571281298d57e94521cbd7e374f740a2f80 Mon Sep 17 00:00:00 2001
From: Marin Bratanov <m.bratanov@gmail.com>
Date: Sat, 13 Mar 2021 15:08:03 +0200
Subject: [PATCH 07/10] docs(colorPalete): events

---
 components/colorpalette/events.md | 85 +++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)

diff --git a/components/colorpalette/events.md b/components/colorpalette/events.md
index 98d18c3484..c7d57fd38c 100644
--- a/components/colorpalette/events.md
+++ b/components/colorpalette/events.md
@@ -13,9 +13,94 @@ position: 50
 This article explains the events available in the Telerik Color Palette for Blazor:
 
 
+* [OnChange](#onchange)
 * [ValueChanged](#valuechanged)
+* [OnBlur](#onblur)
 
+## OnChange
 
+The `OnChange` event represents a user action - confirmation of the current value. It fires when the user presses `Enter` to select a color, or when the component loses focus. It does not prevent you from using two-way binding for the `Value`.
+
+>caption Handle OnChange and use two-way binding for the Value
+
+````CSHTML
+@MyColor
+<br />
+
+<TelerikColorPalette @bind-Value="@MyColor" OnChange="@OnChangeHandler">
+</TelerikColorPalette>
+
+@code {
+    string MyColor { get; set; }
+    
+    async Task OnChangeHandler(object color)
+    {
+        string selectedColor = (string)color;
+        Console.WriteLine($"two-way binding: {MyColor}, event argument: {selectedColor}");
+    }
+}
+````
+
+@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
+
+>tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms.
+
+
+## ValueChanged
+
+The `ValueChanged` event fires upon every change (selection of color) in the component. Its main purpose is to provide two-way biding of the `Value`.
+
+>caption Handle ValueChanged
+
+````CSHTML
+@MyColor
+<br />
+
+<TelerikColorPalette Value="@MyColor" ValueChanged="@ValueChangedHandler">
+</TelerikColorPalette>
+
+@code {
+    string MyColor { get; set; }
+    
+    async Task ValueChangedHandler(string color)
+    {
+        // make sure to update the view-model. If you don't, you will effectively cancel the event
+        MyColor = color;
+
+        Console.WriteLine($"The user selected the color {MyColor}");
+    }
+}
+````
+
+@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
+
+
+
+
+## OnBlur
+
+The `OnBlur` event fires when the component loses focus.
+
+>caption Handle the OnBlur event
+
+````CSHTML
+@* You do not have to use OnChange to react to loss of focus *@
+
+@MyColor
+<br />
+
+<TelerikColorPalette @bind-Value="@MyColor" OnBlur="@OnBlurHandler">
+</TelerikColorPalette>
+
+@code {
+    string MyColor { get; set; }
+    
+    async Task OnBlurHandler()
+    {
+        Console.WriteLine($"Lost focus. The color is {MyColor}");
+    }
+}
+````
 
 ## See Also
 

From e2ff25f8821fd0006a413feb8fc54f60bd3a4787 Mon Sep 17 00:00:00 2001
From: Marin Bratanov <m.bratanov@gmail.com>
Date: Sat, 13 Mar 2021 15:12:05 +0200
Subject: [PATCH 08/10] chore(colorPalete): link from kbd nav

---
 accessibility/keyboard-navigation.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/accessibility/keyboard-navigation.md b/accessibility/keyboard-navigation.md
index 2417045671..c4adbc7f93 100644
--- a/accessibility/keyboard-navigation.md
+++ b/accessibility/keyboard-navigation.md
@@ -32,6 +32,8 @@ The following list shows the Telerik components that support specific keyboard c
 
 * ChunkProgressBar - not applicable, it is merely a visualization component the user cannot interact with.
 
+* [Color Palette](https://demos.telerik.com/blazor-ui/colorpalette/keyboard-navigation)
+
 * [Context Menu](https://demos.telerik.com/blazor-ui/contextmenu/keyboard-navigation)
 
 * [ComboBox](https://demos.telerik.com/blazor-ui/combobox/keyboard-navigation)

From 9f7b3b3ee6fdc140203f66e456f03e73121ad0a8 Mon Sep 17 00:00:00 2001
From: Marin Bratanov <m.bratanov@gmail.com>
Date: Sat, 13 Mar 2021 18:44:24 +0200
Subject: [PATCH 09/10] docs(colorPalette): validation example

---
 common-features/input-validation.md | 36 +++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/common-features/input-validation.md b/common-features/input-validation.md
index eade14bb80..ae4bdfeee3 100644
--- a/common-features/input-validation.md
+++ b/common-features/input-validation.md
@@ -30,6 +30,7 @@ This article provides examples of validating the Telerik Blazor components. The
 * [Editor](#editor)
 * [MaskedTextbox](#maskedtextbox)
 * [Sliders](#sliders)
+* [Color Palette](#color-palette)
 
 >tip Telerik offers the [Form Component]({%slug form-overview%}) that lets you generate and manage forms with predefined layouts and less code.
 
@@ -712,6 +713,41 @@ The sliders are, effectively, numeric inputs in terms of behavior and what data
 ````
 
 
+## Color Palette
+
+The Color Palette component, while not an input, can work with validation so you can, for example, require that the user picks a color. Since it is not an input, it does not have an invalid state, but you can add validation messages around it.
+
+````CSHTML
+@using System.ComponentModel.DataAnnotations @* This Using is for the model class attributes only *@
+
+<EditForm Model="@validationModel" OnValidSubmit="@HandleValidSubmit">
+    <DataAnnotationsValidator />
+    <ValidationSummary />
+
+    <TelerikColorPalette @bind-Value="@validationModel.FavoriteColor" />
+
+    <ValidationMessage For="@(() => validationModel.FavoriteColor)" />
+
+    <TelerikButton ButtonType="@ButtonType.Submit">Submit</TelerikButton>
+
+</EditForm>
+
+@code {
+    ColorValidationModel validationModel { get; set; } = new ColorValidationModel();
+
+    class ColorValidationModel
+    {
+        [Required]
+        public string FavoriteColor { get; set; }
+    }
+
+    async void HandleValidSubmit()
+    {
+        Console.WriteLine("valid submit");
+    }
+}
+````
+
 
 ## See Also
 

From 5b4d06b3c0f496f77327f7ba6d1eb5a22dcb3186 Mon Sep 17 00:00:00 2001
From: Marin Bratanov <m.bratanov@gmail.com>
Date: Tue, 16 Mar 2021 18:44:07 +0200
Subject: [PATCH 10/10] chore(colorPalette): update screenshots

---
 components/colorpalette/events.md             |   2 +-
 .../images/color-palette-first-look.png       | Bin 4364 -> 5244 bytes
 .../images/large-size-few-columns.png         | Bin 3524 -> 950 bytes
 3 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/colorpalette/events.md b/components/colorpalette/events.md
index c7d57fd38c..09208c94be 100644
--- a/components/colorpalette/events.md
+++ b/components/colorpalette/events.md
@@ -19,7 +19,7 @@ This article explains the events available in the Telerik Color Palette for Blaz
 
 ## OnChange
 
-The `OnChange` event represents a user action - confirmation of the current value. It fires when the user presses `Enter` to select a color, or when the component loses focus. It does not prevent you from using two-way binding for the `Value`.
+The `OnChange` event represents a user action - confirmation of the current value. It fires when the user clicks, taps or presses `Enter` to select a color, or when the component loses focus. It does not prevent you from using two-way binding for the `Value`.
 
 >caption Handle OnChange and use two-way binding for the Value
 
diff --git a/components/colorpalette/images/color-palette-first-look.png b/components/colorpalette/images/color-palette-first-look.png
index 6f38a2f594681637c248426cac228a0b43a1ab94..c3b53444f93892af77240eeeadb2b8f079a97da1 100644
GIT binary patch
literal 5244
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
Cub038

literal 4364
zcmeI0X;4#F6vx9v1hFP!ZLt#aigskw3btB_g+L)vTt<m&L?v;fL1`00ScELkikeYq
zBeerok(g0xT!yGoqXrX49a0MdBSFLvA_Q3iNeCe;S^7eS(wWZmgCF6;JMZ2%_x<O*
zdwz57Iqw91L*k5pxdAX3Y{r_^t2V)4K7P<x<UbX%M>#DS(9MUwDKQ>aS%>O{CR509
z>*HXso80NnJ-*O<TE^;RIt+$*;=O$2RKb4e;jFBL?OB_t-(}_Q$xMYMW~Qc6=xNj}
z;#Pm?m6-)=R>f^OMAWsc7rf;p%Z<tR(jzGkK76`2D10_Ebbn}I>%G9w6uTv}u1?Q=
z9v=rs*j}7Z3p&{l9$ftG^uUTw<9A)!T{va)^}ACG6M{pR2W*u5LS&E@(7Wn#iRDI9
z&~JI{f#lYe)^di(7GrHa9ZZ&}C_zfi4W%xVfy$AjP`FPh;u;<8l`iK#79mlEi{*R7
z%C{Cwe~zRT%~4TGhe;@oxQ@tfpHGgEWt-bu(#Zg*-$y1@IeM5RXXkKzdA`1+u^t;W
zTuqM69DJ1>R&RQFxxSoRZ@2XkxTJn3c_qtP$J6W;g8iLFDx<xTtiG4uqe}4*c}$)5
zN0t7W@*==7o!S7GSd6Jo@%)EQTOFL%T-m{Ni^6zWf!R;p`bxx;XI5$S+AtD5dkzKo
zRU+#eymy{$sNq__=`UAc9W)G5zr2hJGO^dA=E(vE>%gcKUq<$pN|!REMnki^s38S~
z`)Js~Yq+dFdL<w##11Ug<!}vXJElyYHP?}MI9IBWNxz;GCh<4w2_JXYGYkcp+yUTV
zF8b6CbdgFwtz`hS>!Cu*V>nA>U>ZR<SAVifrZ&eS>$vi_CbgrC<L^Mrdo1XT+8l|T
z$+i929$nT56N1cJh5iv2A9}7Gw=H4!&3K#+N?YBnO1Wm}z9GN9z0%BES}Mu!@5lo>
z{^-x)_M&wd#kpc6^8hF$_z}KP8(7EEB`!Nb-i{Vx^w~w>TsgcAg;m2zDbR8Qw7e{l
zKC9Dg1@!lebneh*iswY8P{?`|n&0!r;EI;0G*XYqiVEK*Z-4Fi>d+Zg45HK+(@#4S
za@+)kAA6s1iGb)XR@r}l^Td}&T}wn2F`Peu+){H;G0B%<EXxhKBq42#?peAk+C8&g
zq{J>{9Mxo?YY)^m$4XmMi^4qY?4^~Qmo)Y3CaV6lJOWvJptBh+b(}qIU|E}=c63Yn
zWP8MnBP(JN-GS$;nK~DzF{L_tr>nO?b~7n=v1R9?!E_#7Zc0IOl_c<T)Xz;#KOV9g
zhuym%?;j>IaG7Ey*7E=Gy44|^;7AHe`#e$|t>AiwB2ayH0@7>|y5I1LPDLTd@p7@6
zCP0E6>p1!DWwA8DGYe+-C%0$Et^4TqmNB!u1?~5FLCL(dD@RHejhO{X&EeFBO;eU^
zZP?^HYF_MTpl*Dy<K%^kfE`!I%-Qd`@RGQ7f#WnG_0u}qqc77Ij@Mk2cHkBkv3=^2
zgmIdX`ue+apPCC5{^K+u^+{)Uy#LOwh(Q>tOaSLWo~esZ1a)_CtX{xl$9o3uc%l^`
z=%OOcO=5M7q9qDs34~Jfa~w;jmSv8hGM<tVUc9JW|93<oXuPP5r(}ee5md%gGQx}Z
zgSL&4H_D(Fm4C>4HyS}@jJ#0>y{KFpBX5*JFDjGHzUR(DsDPfg5rCE)GsMTSx++Q$
zW;y6ShI93HyUlpD^Dz*j{VB2yqiB&i-F$b4!L7sdhA+piRCv?EWUMC=n85&tK(yE3
zu%_B&97hG0J%pFpB@jGfQoaW7F%Jp>tqC;Sajd?@v7jKS%3;R2+SSgN{K;(b_bE7m
zQkxA^W$OS?S~y^9!(m-RjT{Fb7`}pIdHg^FUdXmZA<d7cLx&E5-CfORzX|g6;{oR#
zU^211D~=}6i3cT?bCFcE7HeP`_-$6HHAKsh8aPO^D#_K#XKNDGbOD*ivfv{@OEq8G
z7Y5q#Nm#2JH(41pOthNI=<Vl|s>gNl|J^m+6p1`OD_qF3M+dJ8pq~}6H3=J5RmSf=
F@)szU&KCdx

diff --git a/components/colorpalette/images/large-size-few-columns.png b/components/colorpalette/images/large-size-few-columns.png
index 4529c106d7387ec854551fd6d1413503c36df7a3..344b2e1319cce514a5ab8547c1e736b55c6cf28e 100644
GIT binary patch
literal 950
zcmeAS@N?(olHy`uVBq!ia0vp^|AF`d2OE$)@oBpzkYX$ja(7}_cTVOdki(Mh=<CS9
zu(6-}Pa-Rj&spFRS<Jw|cLanPr)u*_0|kXjTq8<?^V3So6N^$A+>26E^NKU_OX5N~
zfLfS!JzX3_D&pSWP+WgLQKJ3hXJt>blWvn)&UT1Q5>HsHsCDnaL)#fDuel~qG4|bT
z>1k!Pd1d|og6YCJuO9!ZIrX`g`TD!JH_NKo9nQ_HY?S!uJmrU?*B=4Zx{hDV@Bhoa
zowoMnhYtnUW}VwxVVdphuQz}G)@9uN=gvi4`TSUN`A)D(A$ylj`9(+g10S_(AQ?bE
z;Vav2&;DD!f170Xu1_EDtud|r{j=)Yth~LJGq)}~e*5DZQ`?&F3D+|92HKsFu-*Fh
zTiXBaeSLkvu>Jmf`sQmT-+yh6?A}$9er!?RpE-rIP7hp2!ebv8dAYmy-mL%n`1kF|
z>|Z6%Uam2n`{$QUwr{+B4KP@LUtf1F>hjs!;^}jreL^G}`o%f2OChQ6c3!@jz$2WF
dxpeTLyqvm4vj(%bGca2*c)I$ztaD0e0sxAWsIUM4

literal 3524
zcmeAS@N?(olHy`uVBq!ia0y~yV3Y&0A9Jt)$>2@ZOMw()age(c!@6@aFM%AEbVpxD
z28NCO+<y{Tfqc#akH}&M2EM}}%y>M1MG8<*sKhm*Bsf2<q&%@GmBGCzH8rm|Bflgr
zlmn=R*V@y?F{C2y?UjY63^GJrAO7dcG1FD5kPKtpy*+W8kLm3-Sz^3w-EEqD5$+qh
zyA+yIA3c}m<-U_DAF;vQ=I4@9yV|c;!{v>Qr`!Ggd0O8-ElscX*Nttt*7xMjZ_9mt
z`|-_fZ)>V;Zf~2L-=BVa+vm3*b8eUIvz?cF``q^9n{#jf{8j-}e4lj1)|EE%?P`O5
zzuA2LO5LZIue1LDI=20)o!#%g=)`Ip#;%(!NoEUY_!^{5KJ=}ENn|tU(Htkk*$HRV
zTHk(T(MS^pD>yjAm+SUp&VVy&U<FNvvqiQY7hW*K7p#CK*-SI1U){lQHblX(oS++W
z{taMrfeLzVF4<r^j{$5hP=Ul|&ryp<gPMwoYx42WALp05y@}rcv+>sQ`Tw2Y?!Nzf
z@-6*+|Gl>!i;HA$hNe?UN|&lmmF0n@O>pYYd^5GwpaYr_z$tpk#_($g6`+Y9m^(Dm
zCXX648b+h(2$63<S>)UQZ$F>UU;X#par=<pKdy@B#n+r&3oPpsV6_CWxCd1ui@^cc
z1Il5bib4Wb#fX5bf`hP11eno4wTv6M9+3dmM4)=a09FG5Ga;~wY6=8bLdQV06sQvF
zfmUC@iV9TCj9NV!;8ag$WuGek{k<N)`tP^=`ysz?#{XOSZSnknac}$Uf9#G*MruWY
z>ItN(9hm%kky=r}^eu(diUKBJ6QouY(AAm9t*E0pmylagz~sFVsTBpxI-?ek1~sA;
rMRDSq4C-cl+fUt|$VWT7f82)s>#l2r*j@*AvKTyF{an^LB{Ts5gVq$o