feat: allow custom preset label

Liquid-JS · Jul 29, 2021 · 86e355f · 86e355f
1 parent 1209fd4
commit 86e355f
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -77,7 +77,7 @@ import { ColorPickerModule } from 'nxt-color-picker';
 [cpPositionOffset]           // Dialog offset percentage relative to the directive element (0%).
 [cpPositionRelativeToArrow]  // Dialog position is calculated relative to dialog arrow (false).
 
-[cpPresetLabel]              // Show label for preset colors (true).
+[cpPresetLabel]              // Show label for preset colors (true). If string is given, it overrides the default label.
 [cpPresetColors]             // Array of preset colors to show in the color picker dialog ([]).
 
 [cpDisableInput]             // Disables / hides the color input field from the dialog (false).

diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html
@@ -524,7 +524,7 @@ <h4><b>based on <a href="https://github.com/Alberplz/angular2-color-picker">angu
                         <td>cpPresetLabel</td>
                         <td>
                             <b>true</b><br>
-                            Show label for preset colors.
+                            Show label for preset colors. If string is given, it overrides the default label.
                         </td>
                     </tr>
                     <tr>

diff --git a/projects/nxt-color-picker/README.md b/projects/nxt-color-picker/README.md
@@ -77,7 +77,7 @@ import { ColorPickerModule } from 'nxt-color-picker';
 [cpPositionOffset]           // Dialog offset percentage relative to the directive element (0%).
 [cpPositionRelativeToArrow]  // Dialog position is calculated relative to dialog arrow (false).
 
-[cpPresetLabel]              // Show label for (true).
+[cpPresetLabel]              // Show label for preset colors (true). If string is given, it overrides the default label.
 [cpPresetColors]             // Array of preset colors to show in the color picker dialog ([]).
 
 [cpDisableInput]             // Disables / hides the color input field from the dialog (false).

diff --git a/projects/nxt-color-picker/src/lib/color-picker.directive.ts b/projects/nxt-color-picker/src/lib/color-picker.directive.ts
@@ -76,7 +76,7 @@ export class ColorPickerDirective implements OnChanges, OnDestroy {
     @Input() cpPositionOffset: string = '0%'
     @Input() cpPositionRelativeToArrow: boolean = false
 
-    @Input() cpPresetLabel: boolean = true
+    @Input() cpPresetLabel: boolean | string = true
     @Input() cpPresetColors: string[]
 
     @Input() cpDisableInput: boolean = false

diff --git a/projects/nxt-color-picker/src/lib/color-picker/color-picker.component.html b/projects/nxt-color-picker/src/lib/color-picker/color-picker.component.html
@@ -279,8 +279,11 @@
         <div class="color-picker__separator"></div>
         <div class="color-picker__preset">
             <div *ngIf="cpPresetLabel"
-                class="color-picker__preset-label"
-                i18n="@@nxt-color-picker.preset-colors">Preset colors</div>
+                class="color-picker__preset-label">
+                <ng-container *ngIf="cpPresetLabel === true; else stringLabel"
+                    i18n="@@nxt-color-picker.preset-colors">Preset colors</ng-container>
+                <ng-template #stringLabel>{{ cpPresetLabel }}</ng-template>
+            </div>
             <div *ngIf="cpPresetColors?.length"
                 class="color-picker__preset-items">
                 <div *ngFor="let color of cpPresetColors"

diff --git a/projects/nxt-color-picker/src/lib/color-picker/color-picker.component.ts b/projects/nxt-color-picker/src/lib/color-picker/color-picker.component.ts
@@ -94,7 +94,7 @@ export class ColorPickerComponent implements OnInit, OnDestroy, AfterViewChecked
 
     cpCancelButton: boolean
 
-    cpPresetLabel: boolean
+    cpPresetLabel: boolean | string
     cpPresetColors: string[]
     cpMaxPresetColors: number
 
@@ -298,7 +298,7 @@ export class ColorPickerComponent implements OnInit, OnDestroy, AfterViewChecked
         this.setColorFromString(this.initialColor, false, true)
     }
 
-    setPresetConfig(cpPresetLabel: boolean, cpPresetColors: string[]) {
+    setPresetConfig(cpPresetLabel: boolean | string, cpPresetColors: string[]) {
         this.cpPresetLabel = cpPresetLabel
         this.cpPresetColors = cpPresetColors
     }

diff --git a/projects/nxt-color-picker/src/util/helpers.ts b/projects/nxt-color-picker/src/util/helpers.ts
@@ -93,7 +93,7 @@ export interface DialogConfig {
     cpPosition: DialogPosition,
     cpPositionOffset: string,
     cpPositionRelativeToArrow: boolean,
-    cpPresetLabel: boolean,
+    cpPresetLabel: boolean | string,
     cpPresetColors: string[],
     cpMaxPresetColors: number,
     cpOKButton: boolean,