fix: color input should open on click on color

fix: color input popup open position

Author: kai-melchior

projects/mantic-ui/src/lib/components/input/input-base.component.ts

@@ -14,6 +14,7 @@ import { InputIconPosition } from './text/input.component';
     providers: InputBaseComponent.providers
 })
 export abstract class InputBaseComponent extends LabeledBaseComponent implements OnDestroy {
+    protected readonly colorForId = Date.now().toString() + Math.random();
     public static readonly defaults = {
         inverted: false,
         invertedChange: new ReplaySubject<boolean>(1)

projects/mantic-ui/src/lib/components/input/text/input.component.html

@@ -1,33 +1,33 @@
 @if (!isRight) {
-  <ng-container [ngTemplateOutlet]="labelTemplate" />
+    <ng-container [ngTemplateOutlet]="labelTemplate" />
 }
 @if (buttonPosition === 'left') {
-  <ng-container [ngTemplateOutlet]="contentTemplate" />
+    <ng-container [ngTemplateOutlet]="contentTemplate" />
 }
 <ng-content />
 @if (type === 'color') {
-  <input type="text" [(ngModel)]="value" [attr.readOnly]="readonly || undefined" [attr.disabled]="disabled || undefined" (ngModelChange)="onChange()">
-  <label class="ui label" [style.background-color]="value" [for]="for">
-    <input type="color" [(ngModel)]="value" [attr.name]="name" [attr.readOnly]="readonly || undefined" [attr.disabled]="disabled || undefined" (ngModelChange)="onChange()">
-  </label>
+    <input type="text" [(ngModel)]="value" [attr.readOnly]="readonly || undefined" [attr.disabled]="disabled || undefined" (ngModelChange)="onChange()">
+    <label class="ui label color-label" [style.background-color]="value" [for]="colorForId">
+        <input type="color" [id]="colorForId" [(ngModel)]="value" [attr.name]="name" [attr.readOnly]="readonly || undefined" [attr.disabled]="disabled || undefined" (ngModelChange)="onChange()" #colorInput>
+    </label>
 }
 <input *m-fallback-for="'input'" [type]="type || 'text'" [placeholder]="placeholder || ''" [(ngModel)]="value" [attr.name]="name" [attr.maxlength]="maxlength" [attr.readOnly]="readonly || undefined" [attr.disabled]="disabled || undefined" (ngModelChange)="onChange()" #input>
 @if (icon) {
-  <m-icon [icon]="icon" [size]="iconSize" class="link icon" />
+    <m-icon [icon]="icon" [size]="iconSize" class="link icon" />
 }
 @if (isRight) {
-  <ng-container [ngTemplateOutlet]="labelTemplate" />
+    <ng-container [ngTemplateOutlet]="labelTemplate" />
 }
 @if (buttonPosition === 'right') {
-  <ng-container [ngTemplateOutlet]="contentTemplate" />
+    <ng-container [ngTemplateOutlet]="contentTemplate" />
 }
 
 <ng-template #labelTemplate>
-  <ng-content select="m-label" />
-  <ng-content select="m-label-dropdown" />
+    <ng-content select="m-label" />
+    <ng-content select="m-label-dropdown" />
 </ng-template>
 
 <ng-template #contentTemplate>
-  <ng-content select="m-button" />
-  <ng-content select="m-icon-button" />
+    <ng-content select="m-button" />
+    <ng-content select="m-icon-button" />
 </ng-template>

projects/mantic-ui/src/lib/components/input/text/input.component.scss

@@ -0,0 +1,10 @@
+.color-label {
+    position: relative;
+    min-width: 4.75rem;
+
+    input {
+        position: absolute;
+        left: -1px;
+        bottom: 0;
+    }
+}