Merge branch 'dintecom-feat/github-picker-columns'

pIvan · Sep 11, 2022 · 62df222 · 62df222
2 parents fe30942 + 1bb64f6
commit 62df222
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/projects/iplab/ngx-color-picker/src/lib/components/github-picker/github-picker.component.ts b/projects/iplab/ngx-color-picker/src/lib/components/github-picker/github-picker.component.ts
@@ -34,19 +34,29 @@ export class GithubPickerComponent implements OnInit, OnChanges, OnDestroy {
     public control: ColorPickerControl;
 
     @Input()
-    public columns: number | 'auto' = 8;
+    public get columns() {
+        return this.columnsValue;
+    }
+
+    public set columns(value: string | number | null | undefined) {
+        this.columnsValue = !isNaN(parseFloat(value as any)) && !isNaN(Number(value))
+            ? Number(value)
+            : 'auto';
+    }
 
     @Output()
     public colorChange: EventEmitter<ColorString> = new EventEmitter(false);
 
     @HostBinding('style.width')
-    public get widht() {
-        return this.columns === 'auto' ? `auto` : `${25 * this.columns + 12}px`;
+    public get width() {
+        return this.columnsValue === 'auto' ? `auto` : `${25 * this.columnsValue + 12}px`;
     }
 
     public get columnsCount() {
-        return this.columns === 'auto' ? this.control.presets.length : this.columns;
+        return this.columnsValue === 'auto' ? this.control.presets.length : this.columnsValue;
     }
+
+    private columnsValue: 'auto' | number = 8;
 
     private subscriptions: Array<Subscription> = [];
 
@@ -93,4 +103,4 @@ export class GithubPickerComponent implements OnInit, OnChanges, OnDestroy {
             this.control.setValueFrom(this.color);
         }
     }
-}
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -370,7 +370,8 @@ <h6>attributes explanation</h6>
     &#125;
 &#125;</pre>
                     <p>Template code</p>
-                    <pre class="prettify">&lt;github-picker [control]="githubControl"&gt;&lt;/github-picker&gt;
+                    <pre class="prettify">
+&lt;github-picker [control]="githubControl"&gt;&lt;/github-picker&gt;
 &lt;github-picker [control]="githubControl" columns="auto"&gt;&lt;/github-picker&gt;
 &lt;github-picker [control]="githubControl" [columns]="16"&gt;&lt;/github-picker&gt;</pre>
                 </div>