ILIAS-eLearning · klees · Sep 18, 2025
diff --git a/components/ILIAS/UI/resources/js/Input/Field/tagInput.js b/components/ILIAS/UI/resources/js/Input/Field/tagInput.js
@@ -18,70 +18,87 @@
  *
  * @author Fabian Schmid <fs@studer-raimann.ch>
  * @author Nils Haagen <nils.haagen@concepts-and-training.de>
+ * @author Richard Klees <richard.klees@concepts-and-training.de>
  */
 var il = il || {};
 il.UI = il.UI || {};
 il.UI.Input = il.UI.Input || {};
-(function ($) {
-  il.UI.Input.tagInput = (function ($) {
+(function () {
+  il.UI.Input.tagInput = (function () {
     const instances = [];
-    const init = function (raw_id, config, value) {
-      let _CONFIG = {};
-      const _getSettings = function () {
-        return {
-          whitelist: _CONFIG.options,
-          enforceWhitelist: !_CONFIG.userInput,
-          duplicates: _CONFIG.allowDuplicates,
-          maxTags: _CONFIG.maxItems,
-          originalInputValueFormat: (valuesArr) => valuesArr.map((item) => item.value),
+    const init = function (id, config) {
+      let options = [];
+      if (Array.isArray(config.tags)) {
+        options = config.tags.map((tag) => ({
+          value: encodeURIComponent(tag.trim()),
+          display: tag,
+          searchBy: tag
+        }));
+      }
+      else if (typeof config.tags === 'object' && config.tags === null) {
+        for (let prop in config.tags) {
+          if (config.tags.hasOwnProperty(prop)) {
+            options.push({
+              value: encodeURIComponent(prop.trim()),
+              display: config.tags[prop],
+              searchBy: config.tag[prop]
+            });
+          }
+        }
+      }
+      else {
+        throw new Error("config.tags needs to be an Array or an object");
+      }
+
+      let elem = document.querySelector("#" + id + " .c-field-tag");
+      let tagify = new Tagify(elem,
+        {
+          whitelist: options,
+          enforceWhitelist: !config.user_created_tags_allowed,
           dropdown: {
-            enabled: _CONFIG.dropdownSuggestionsStartAfter,
-            maxItems: _CONFIG.dropdownMaxItems,
-            closeOnSelect: _CONFIG.dropdownCloseOnSelect,
-            highlightFirst: _CONFIG.highlight,
+            enabled: config.suggestion_starts_after,
+            maxItems: 200,
+            closeOnSelect: false,
+            highlightFirst: true,
+          },
+          duplicates: false,
+          delimiters: null,
+          maxTags: config.max_tags === -1 ? Infinity : config.max_tags,
+          templates: {
+            tag: (tagData) =>
+                (`<tag contenteditable='false'
+                      spellcheck="false"
+                      class='tagify__tag'
+                      value="${tagData.value}"
+                      tabindex="0">
+                    <x title='remove tag' class='tagify__tag__removeBtn'></x>
+                    <div>
+                        <span class='tagify__tag-text'>${tagData.display}</span>
+                    </div>
+                </tag>`),
+            dropdownItem: (tagData) =>
+                (`<div class='tagify__dropdown__item'
+                      tagifySuggestionIdx="${tagData.tagifySuggestionIdx}"
+                      value="${tagData.value}">
+                   <span>${tagData.display}</span>
+                 </div>`)
           },
+          originalInputValueFormat: (values) => values.map((item) => item.value),
           transformTag(tagData) {
             if (!tagData.display) {
               tagData.display = tagData.value;
-              tagData.value = encodeURI(tagData.value);
+              tagData.value = encodeURIComponent(tagData.value);
             }
             tagData.display = tagData.display
               .replace(/</g, '&lt;')
               .replace(/>/g, '&gt;');
           },
-        };
-      };
-
-      // Initialize ID and Configuration
-      _CONFIG = $.extend(_CONFIG, config);
-      _CONFIG.id = document.querySelector(`#${raw_id} .c-input__field .c-field-tag__wrapper input`)?.id;
-
-      const settings = _getSettings();
-      settings.delimiters = null;
-      settings.templates = {};
-      settings.templates.tag = function (tagData) {
-        return `<tag contenteditable='false'
-                            spellcheck="false" class='tagify__tag'
-                            value="${tagData.value}"
-                            tabindex="0">
-                            <x title='remove tag' class='tagify__tag__removeBtn'></x>
-                            <div>
-                                <span class='tagify__tag-text'>${tagData.display}</span>
-                            </div>
-                    </tag>`;
-      };
-      settings.templates.dropdownItem = function (tagData) {
-        return `<div class='tagify__dropdown__item' tagifySuggestionIdx="${tagData.tagifySuggestionIdx}" value="${tagData.value}">
-                            <span>${tagData.display}</span>
-                        </div>`;
-      };
-
-      const input = document.getElementById(_CONFIG.id);
-      const tagify = new Tagify(input, settings);
-
-      tagify.addTags(value);
+        }
+      );
+      console.log(config.value);
+      tagify.addTags(config.value);
 
-      instances[raw_id] = tagify;
+      instances[id] = tagify;
     };
 
     const getTagifyInstance = function (raw_id) {
@@ -92,5 +109,5 @@ il.UI.Input = il.UI.Input || {};
       init,
       getTagifyInstance,
     };
-  }($));
-}($, il.UI.Input));
+  }());
+}(il.UI.Input));
diff --git a/components/ILIAS/UI/src/Component/Input/Field/Rating.php b/components/ILIAS/UI/src/Component/Input/Field/Rating.php
@@ -27,12 +27,6 @@
  */
 interface Rating extends FormInput
 {
-    /**
-     * This text is diplayed over the actual input/stars to describe the issue
-     * to be rated (as opposed to the input's label, where there is less space).
-     */
-    public function withAdditionalText(string $text): static;
-
     /**
      * You may indicated an avarage value, e.g from former ratings.
      * Give a value between 0 and 5.

diff --git a/components/ILIAS/UI/src/Implementation/Component/Input/Container/Form/Renderer.php b/components/ILIAS/UI/src/Implementation/Component/Input/Container/Form/Renderer.php
@@ -57,7 +57,7 @@ protected function renderStandard(Form\Standard $component, RendererInterface $d
 
         $tpl->setVariable("BUTTONS_TOP", $default_renderer->render($submit_button));
         $tpl->setVariable("BUTTONS_BOTTOM", $default_renderer->render($submit_button));
-        $tpl->setVariable("INPUTS", $default_renderer->render($component->getInputGroup()));
+        $tpl->setVariable("INPUTS", $default_renderer->render($component->getInputGroup()->getInputs()));
 
         return $tpl->get();
     }

diff --git a/components/ILIAS/UI/src/Implementation/Component/Input/Field/DateTime.php b/components/ILIAS/UI/src/Implementation/Component/Input/Field/DateTime.php
@@ -211,26 +211,6 @@ protected function getConstraintForRequirement(): ?Constraint
 
     }
 
-    /**
-     * Get config to be passed to the bootstrap picker.
-     * @return array <string => mixed>
-     */
-    public function getAdditionalPickerconfig(): array
-    {
-        return $this->additional_picker_config;
-    }
-
-    /**
-     * The bootstrap picker can be configured, e.g. with a minimum date.
-     * @param array <string => mixed> $config
-     */
-    public function withAdditionalPickerconfig(array $config): self
-    {
-        $clone = clone $this;
-        $clone->additional_picker_config = array_merge($clone->additional_picker_config, $config);
-        return $clone;
-    }
-
     public function getUpdateOnLoadCode(): Closure
     {
         return fn($id) => "$('#$id').on('input', function(event) {

diff --git a/components/ILIAS/UI/src/Implementation/Component/Input/Field/Rating.php b/components/ILIAS/UI/src/Implementation/Component/Input/Field/Rating.php
@@ -45,29 +45,17 @@ protected function getFiveStarRatingScaleTransformation(): Transformation
     {
         return $this->refinery->custom()->transformation(
             static function ($v): ?FiveStarRatingScale {
-                if(is_null($v) || $v instanceof FiveStarRatingScale) {
+                if (is_null($v) || $v instanceof FiveStarRatingScale) {
                     return $v;
                 }
-                return FiveStarRatingScale::from((int)$v);
+                return FiveStarRatingScale::from((int) $v);
             }
         );
     }
 
-    public function withAdditionalText(?string $text): static
-    {
-        $clone = clone $this;
-        $clone->text = $text;
-        return $clone;
-    }
-
-    public function getAdditionalText(): ?string
-    {
-        return $this->text;
-    }
-
     public function withValue($value): self
     {
-        if(!$value instanceof FiveStarRatingScale) {
+        if (!$value instanceof FiveStarRatingScale) {
             $value = $this->getFiveStarRatingScaleTransformation()->transform($value);
         }
         return parent::withValue($value);
@@ -100,7 +88,7 @@ public function getUpdateOnLoadCode(): \Closure
     public function withCurrentAverage(?float $current_average): static
     {
         $max = count(FiveStarRatingScale::cases()) - 1;
-        if($current_average < 0 || $current_average > $max) {
+        if ($current_average < 0 || $current_average > $max) {
             throw new \InvalidArgumentException('current_average must be between 0 and ' . $max);
         }
         $clone = clone $this;