Color Input and Icon Input:

 - Adds two new input types, one for icons and another for colors, both are dynamically updated for show the actual value.

See #74630

Author: novaxpro

src/elements/Input/ColorInput.coffee

@@ -0,0 +1,37 @@
+###
+ * coffeescript-ui - Coffeescript User Interface System (CUI)
+ * Copyright (c) 2013 - 2025 Programmfabrik GmbH
+ * MIT Licence
+ * https://github.com/programmfabrik/coffeescript-ui, http://www.coffeescript-ui.org
+###
+
+class CUI.ColorInput extends CUI.Input
+
+    initOpts: ->
+        super()
+
+    readOpts: ->
+        @opts.leftControlElement = new CUI.Button
+            onClick: (ev, btn) =>
+                @__input.focus()
+        super()
+
+    onDataChanged: (ev, info) ->
+        super(ev, info)
+        @__toggleColor()
+
+    initValue: ->
+        super()
+        if not @__data[@_name] or @__data[@_name].length == 0
+            @_leftControlElement.hide(true)
+        else
+            @_leftControlElement.DOM.style.backgroundColor = @__data[@_name]
+            @_leftControlElement.show(true)
+
+    __toggleColor: ->
+        if @__input.value.length > 0 and @__checkInputInternal()
+            # Set the background color of the @_leftControlElement to the value of the input
+            @_leftControlElement.DOM.style.backgroundColor = @__input.value
+            @_leftControlElement.show(true)
+        else
+            @_leftControlElement.hide(true)

src/elements/Input/IconInput.coffee

@@ -0,0 +1,37 @@
+###
+ * coffeescript-ui - Coffeescript User Interface System (CUI)
+ * Copyright (c) 2013 - 2025 Programmfabrik GmbH
+ * MIT Licence
+ * https://github.com/programmfabrik/coffeescript-ui, http://www.coffeescript-ui.org
+###
+
+class CUI.IconInput extends CUI.Input
+
+    initOpts: ->
+        super()
+
+    readOpts: ->
+        @opts.leftControlElement = new CUI.Button
+            icon: "fa-star"
+            onClick: (ev, btn) =>
+                @__input.focus()
+        super()
+
+    onDataChanged: (ev, info) ->
+        super(ev, info)
+        @__toggleIcon()
+
+    initValue: ->
+        super()
+        if not @__data[@_name] or @__data[@_name].length == 0
+            @_leftControlElement.hide(true)
+        else
+            @_leftControlElement.setIcon(@__data[@_name])
+
+    __toggleIcon: ->
+        if @__input.value.length > 0
+            @_leftControlElement.setIcon(@__input.value)
+            @_leftControlElement.show(true)
+        else
+            @_leftControlElement.setIcon("")
+            @_leftControlElement.hide(true)

src/elements/Input/Input.coffee

@@ -153,6 +153,8 @@ class CUI.Input extends CUI.DataFieldInput
 				check: ["code"]
 			controlElement:
 				check: (v) -> v instanceof CUI.DOMElement
+			leftControlElement:
+				check: (v) -> v instanceof CUI.DOMElement
 
 	readOpts: ->
 
@@ -951,6 +953,10 @@ class CUI.Input extends CUI.DataFieldInput
 			CUI.dom.addClass(@_controlElement, 'cui-input-control-element')
 			@append(@_controlElement, @getTemplateKeyForRender())
 
+		if @_leftControlElement
+			CUI.dom.addClass(@_leftControlElement, 'cui-input-control-element')
+			@prepend(@_leftControlElement, @getTemplateKeyForRender())
+
 		# @append(@getChangedMarker(), @getTemplateKeyForRender())
 
 		for k in ["empty", "invalid", "valid"]

src/index.coffee

@@ -100,6 +100,8 @@ require('./elements/Input/InputBlock.coffee')
 require('./elements/Input/NumberInputBlock.coffee')
 require('./elements/Input/NumberInput.coffee')
 require('./elements/Input/EmailInput.coffee')
+require('./elements/Input/IconInput.coffee')
+require('./elements/Input/ColorInput.coffee')
 require('./elements/Input/CodeInput.coffee')
 require('./elements/DateTime/DateTime.coffee')
 require('./elements/DateTime/Timezone.coffee')