New PropertyPane PalettePicker

docs/documentation/docs/controls/PropertyPanePalettePicker.md

@@ -0,0 +1,132 @@
+# PropertyPanePalettePicker control
+
+This control generates a palette picker that allows users to select a color palette from a predefined list. Each palette contains a name and an array of colors that can be displayed visually in the property pane.
+
+**PropertyPanePalettePicker example usage**
+
+![PropertyPanePalettePicker example](../assets/PropertyPanelPalettePicker.png)
+![PropertyPanePalettePicker2](../assets/PropertyPanelPalettePicker2.png)
+
+## How to use this control in your solutions
+
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+
+2. Import the following modules to your component:
+
+```TypeScript
+import { PropertyPanePalettePickerField } from '@pnp/spfx-property-controls/lib/PropertyPanePalettePicker';
+```
+
+3. Create new properties for your web part:
+
+```TypeScript
+export interface IPropertyControlsTestWebPartProps {
+  selectedPalette: string;
+  selectedPaletteColors: string[];
+}
+```
+
+4. Define the palettes as a `Record<string, string[]>`:
+
+```TypeScript
+const palettes: Record<string, string[]> = {
+  "Palette 1": ["#FF5733", "#33FF57", "#3357FF", "#F3FF33"],
+  "Palette 2": ["#8E44AD", "#3498DB", "#1ABC9C", "#F39C12"],
+  "Palette 3": ["#E74C3C", "#9B59B6", "#2ECC71", "#F1C40F"],
+  "Palette 4": ["#1A1A2E", "#16213E", "#0F3460", "#E94560"]
+};
+```
+
+5. Add the custom property control to the `groupFields` of the web part property pane configuration:
+
+```TypeScript
+PropertyPanePalettePickerField("selectedPalette", {
+  key: "palettePicker",
+  label: "Select a Palette",
+  selectedPalette: this.properties.selectedPalette || "Palette 1",
+  palettes: palettes,
+  onPropertyChange: (propertyPath: string, newValue: string) => {
+    this.properties.selectedPalette = newValue;
+  },
+  onSelectedPalette: (palette: Record<string, string[]>) => {
+    console.log("Selected palette:", palette);
+    // palette is a Record<string, string[]> containing the palette name as key and colors array as value
+    const paletteName = Object.keys(palette)[0];
+    const paletteColors = palette[paletteName];
+    this.properties.selectedPalette = paletteName;
+    this.properties.selectedPaletteColors = paletteColors;
+    this.render();
+  }
+})
+```
+
+## Implementation
+
+The `PropertyPanePalettePickerField` control can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| key | string | yes | An unique key that indicates the identity of this control. |
+| label | string | yes | Property field label displayed on top. |
+| selectedPalette | string | yes | The name of the currently selected palette. |
+| palettes | Record<string, string[]> | yes | The collection of palettes to display. Keys are palette names, values are arrays of color hex strings. |
+| onPropertyChange | function | yes | Callback function triggered when a palette is selected. Receives the property path and the new palette name. |
+| onSelectedPalette | function | no | Callback function that returns the selected palette as a `Record<string, string[]>` object. |
+| disabled | boolean | no | Specify if the control needs to be disabled. |
+| theme | Theme | no | Fluent UI theme to apply to the control. |
+
+## Palette Data Structure
+
+Palettes are defined using a `Record<string, string[]>` where:
+- **Key**: The palette name/identifier (e.g., "Palette 1", "Ocean Theme", "Brand Colors")
+- **Value**: An array of CSS-compatible color strings (hex values)
+
+```TypeScript
+const palettes: Record<string, string[]> = {
+  "Ocean": ["#006994", "#40E0D0", "#0077BE", "#00CED1"],
+  "Sunset": ["#FF6B6B", "#FFA07A", "#FFD700", "#FF4500"],
+  "Forest": ["#228B22", "#32CD32", "#90EE90", "#006400"]
+};
+```
+
+## Example: Displaying Selected Palette Colors
+
+You can use the `onSelectedPalette` callback to get the full palette information and display the colors in your web part:
+
+```TypeScript
+onSelectedPalette: (palette: Record<string, string[]>) => {
+  // Get the palette name (first key)
+  const paletteName = Object.keys(palette)[0];
+
+  // Get the colors array
+  const colors = palette[paletteName];
+
+  console.log("Palette name:", paletteName);
+  console.log("Colors:", colors);
+
+  // Store for rendering
+  this.properties.selectedPaletteColors = colors;
+  this.render();
+}
+```
+
+Then in your component, render the colors:
+
+```tsx
+<div style={{ display: 'flex', gap: '8px' }}>
+  {this.props.selectedPaletteColors.map((color, index) => (
+    <div 
+      key={index}
+      style={{ 
+        width: '40px', 
+        height: '40px', 
+        backgroundColor: color,
+        borderRadius: '4px'
+      }} 
+    />
+  ))}
+</div>
+```
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-property-controls/wiki/PropertyPanePalettePicker)
+

src/PropertyPanePalettePicker.ts

@@ -0,0 +1 @@
+export * from './propertyFields/PalettePicker/index';

src/loc/ar-sa.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "طبق",
     "ImportButtonLabel": "حمل",
     "ExportButtonLabel": "صدر",

src/loc/bg-bg.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Прилагат",
     "ImportButtonLabel": "Внос",
     "ExportButtonLabel": "Износ",

src/loc/ca-es.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Aplicar",
     "ImportButtonLabel": "Importació",
     "ExportButtonLabel": "Exportació",

src/loc/cs-cz.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Použít",
     "ImportButtonLabel": "Dovoz",
     "ExportButtonLabel": "Vývoz",

src/loc/da-dk.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Anvende",
     "ImportButtonLabel": "Importere",
     "ExportButtonLabel": "Eksport",

src/loc/de-de.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Anwenden",
     "ImportButtonLabel": "Importieren",
     "ExportButtonLabel": "Exportieren",

src/loc/el-gr.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Εφαρμόσετε",
     "ImportButtonLabel": "Εισαγωγή",
     "ExportButtonLabel": "Εξαγωγή",

src/loc/en-gb.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Apply",
     "ImportButtonLabel": "Import",
     "ExportButtonLabel": "Export",

src/loc/en-us.js

@@ -267,5 +267,6 @@ define([], function () {
     },
     gridControlColumn1Label: "Title",
     gridControlColumn2Label: "Description",
+  PropertyFieldPalettePickerTitle: "Select a palette",
   }
 });

src/loc/es-es.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Aplicar",
     "ImportButtonLabel": "Importación",
     "ExportButtonLabel": "exportar",

src/loc/et-ee.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Kohaldata",
     "ImportButtonLabel": "Impordi",
     "ExportButtonLabel": "Ekspordi",

src/loc/fi-fi.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Soveltaa",
     "ImportButtonLabel": "Tuoda",
     "ExportButtonLabel": "Vienti",

src/loc/fr-fr.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Appliquer",
     "ImportButtonLabel": "Importation",
     "ExportButtonLabel": "Exportation",

src/loc/it-it.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Applicare",
     "ImportButtonLabel": "Importazione",
     "ExportButtonLabel": "Esportazione",

src/loc/ja-jp.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "適用",
     "ImportButtonLabel": "インポート",
     "ExportButtonLabel": "エクスポート",

src/loc/lt-lt.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Taikyti",
     "ImportButtonLabel": "Importo",
     "ExportButtonLabel": "Eksporto",

src/loc/lv-lv.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Lietot",
     "ImportButtonLabel": "Importa",
     "ExportButtonLabel": "Eksporta",

src/loc/mystrings.d.ts

@@ -1,4 +1,5 @@
 declare interface IPropertyControlStrings {
+    PropertyFieldPalettePickerTitle: string;  
   DescriptionLabel: string;
   MoreInfoLabel: string;
 
@@ -267,6 +268,7 @@ declare interface IDateTimeStrings {
   L_RelativeDateTime_XDaysFutureIntervals: string;
   L_RelativeDateTime_XDaysIntervals: string;
   L_RelativeDateTime_Today: string;
+
 
 }
 

src/loc/nb-no.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Bruke",
     "ImportButtonLabel": "Importere",
     "ExportButtonLabel": "Eksportere",

src/loc/nl-nl.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Bevestig",
     "ImportButtonLabel": "Importeer",
     "ExportButtonLabel": "Exporteer",

src/loc/no.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Anvende",
     "ImportButtonLabel": "Importere",
     "ExportButtonLabel": "Eksportere",

src/loc/pl-pl.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Zastosować",
     "ImportButtonLabel": "Importu",
     "ExportButtonLabel": "Eksportu",

src/loc/pt-pt.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Aplicar",
     "ImportButtonLabel": "Importação",
     "ExportButtonLabel": "Exportação",

src/loc/ro-ro.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Aplica",
     "ImportButtonLabel": "Importa",
     "ExportButtonLabel": "Export",

src/loc/ru-ru.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Применить",
     "ImportButtonLabel": "Импорт",
     "ExportButtonLabel": "Экспорт",

src/loc/sk-sk.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Použiť",
     "ImportButtonLabel": "Dovozné",
     "ExportButtonLabel": "Vývoz",

src/loc/sr-latn-rs.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Primenite",
     "ImportButtonLabel": "Uvoz",
     "ExportButtonLabel": "Izvoz",

src/loc/sv-se.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Tillämpa",
     "ImportButtonLabel": "Importera",
     "ExportButtonLabel": "Exportera",

src/loc/tr-tr.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Uygulamak",
     "ImportButtonLabel": "Ithalat",
     "ExportButtonLabel": "Ihracat",

src/loc/vi-vn.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "Áp dụng",
     "ImportButtonLabel": "Nhập khẩu",
     "ExportButtonLabel": "Xuất khẩu",

src/loc/zh-cn.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+    PropertyFieldPalettePickerTitle: "Select a palette",
     "ApplyButtonLabel": "应用",
     "ImportButtonLabel": "导入",
     "ExportButtonLabel": "导出",

src/loc/zh-tw.js

@@ -1,5 +1,6 @@
 define([], () => {
   return {
+  PropertyFieldPalettePickerTitle: "Select a palette",
   "ApplyButtonLabel": "應用。",
   "ImportButtonLabel": "進口。",
   "ExportButtonLabel": "出口。",

src/propertyFields/PalettePicker/IPalette.ts

@@ -0,0 +1,4 @@
+export interface IPalette {
+  name: string;
+  colors:  Record<string, string[]>;
+}

src/propertyFields/PalettePicker/IPalettePickerProps.tsx

@@ -0,0 +1,13 @@
+import { Theme } from "@fluentui/react-components";
+
+
+export interface IPalettePickerProps {
+  label: string;
+  selectedPalette: string;
+  onPropertyChange: (propertyPath: string, newValue: string) => void;
+  onSelectedPalette?: (palette: Record<string, string[]>) => void;
+  disabled?: boolean;
+  targetProperty: string;
+  theme?: Theme;
+  palettes: Record<string, string[]>;
+}

src/propertyFields/PalettePicker/IPalettePickerState.tsx

@@ -0,0 +1,4 @@
+
+export interface IPalettePickerState {
+  selectedPalette: string;
+}