Merged PR 12280: Fix validation error and add small features

Apply several changes:

- Fix validation inside blocklist
- Add titles to icons for tooltips
- Add a button to remove the icon
- Update frontend dependencies

src/Infocaster.Umbraco.IcomoonPicker/App_plugins/Infocaster.Umbraco.IcomoonPicker/editor/editor.html

@@ -1 +1,4 @@
 <ng-icomoonpicker-editor></ng-icomoonpicker-editor>
+<ng-form name="icomoonEditorForm">
+    <input type="hidden" name="modelValue" ng-model="model.value" ng-required="model.validation.mandatory" />
+</ng-form>

src/Infocaster.Umbraco.IcomoonPicker/frontend/public/editor/editor.html

@@ -1 +1,4 @@
 <ng-icomoonpicker-editor></ng-icomoonpicker-editor>
+<ng-form name="icomoonEditorForm">
+    <input type="hidden" name="modelValue" ng-model="model.value" ng-required="model.validation.mandatory" />
+</ng-form>

src/Infocaster.Umbraco.IcomoonPicker/frontend/src/util/bridge/angularbridge.mixin.ts

@@ -30,7 +30,7 @@ export function AngularBridgeMixin<TBase extends LitElementConstructor>(
 
     protected render(): unknown {
       return html`
-        <angular-icon-registry> ${contentTemplate} </angular-icon-registry>
+        <ic-icomoonpicker-angular-icon-registry> ${contentTemplate} </ic-icomoonpicker-angular-icon-registry>
       `;
     }
   };

src/Infocaster.Umbraco.IcomoonPicker/frontend/src/util/bridge/angulariconregistry.lit.ts

@@ -26,7 +26,7 @@ class AngularIconRegistry extends UUIIconRegistry {
   }
 }
 
-export const AngularIconRegistryElementTag = "angular-icon-registry";
+export const AngularIconRegistryElementTag = "ic-icomoonpicker-angular-icon-registry";
 
 @customElement(AngularIconRegistryElementTag)
 export class AngularIconRegistryElement extends LitElement {

src/Infocaster.Umbraco.IcomoonPicker/frontend/src/views/editor/components/content.lit.ts

@@ -9,7 +9,7 @@ import { IScope } from "@/models/scope.model";
 import { IcomoonService } from "@/services/icomoon.service";
 import { cloneSvgNode } from "@/util/clonesvgnode.util";
 import { consume } from "@lit/context";
-import { LitElement, css, html, svg } from "lit";
+import { LitElement, css, html, nothing, svg } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
 export const ContentElementTag = "ic-icomoonpicker-editor-content";
@@ -66,15 +66,19 @@ export class IcomoonPickerContent extends LitElement {
   }
 
   submitPanel = (value: string) => {
-      this.model = value;
-      this.$scope.model.value = this.model;
+    this.setValue(value);
     this.closePanel();
   };
 
   closePanel = () => {
     this.editorService!.close();
   };
 
+  setValue = (value: string) => {
+    this.model = value;
+    this.$scope.model.value = this.model;
+  }
+
   async getIcons() {
     if (!this.$scope?.$parent.model.config)
       throw new Error("This element requires icomoon config");
@@ -99,9 +103,23 @@ export class IcomoonPickerContent extends LitElement {
     }
   }
 
+  resetButtonOrNothing() {
+
+    if (this.model.length){
+      return html`
+        <uui-button look="secondary"
+                    label="Click here to make this value empty"
+                    @click=${() => this.setValue('')}>
+            <span><uui-icon name="icon-trash"></uui-icon>Remove</span>
+        </uui-button>`
+    }
+
+    return nothing;
+  }
+
   loadedContent() {
     return html` ${!this.model
-        ? html`<p>no icon selected</p>`
+        ? html`<p>No icon selected</p>`
         : svg`<svg class=${`icomoon-icon ${this.model}`}>
         <use href=${`#${this.model}`}></use>
       </svg>`}
@@ -111,8 +129,9 @@ export class IcomoonPickerContent extends LitElement {
         @click=${() => this.edit()}
         ?disabled=${this.loading}
       >
-        <span><uui-icon name="icon-edit"></uui-icon>edit</span>
-      </uui-button>`;
+        <span><uui-icon name="icon-edit"></uui-icon>Edit</span>
+      </uui-button>
+      ${this.resetButtonOrNothing()}`;
   }
 
   protected render() {

src/Infocaster.Umbraco.IcomoonPicker/frontend/src/views/panel/components/content.lit.ts

@@ -57,21 +57,38 @@ export class IcomoonPickerContent extends LitElement {
     this.$scope!.model.submit(icon);
   }
 
+  getName(icon: string) {
+    if (icon.startsWith('icon-')) {
+      icon = icon.substring(5);
+    }
+
+    icon = icon.replaceAll('-', ' ');
+    return icon;
+  }
+
+  renderSvg(icon: string): unknown {
+
+    return svg`
+    <svg
+      class="icomoon-icon ${icon}"
+      @click=${() => this.select(icon)}
+    >
+      <use href=${`#${icon}`}></use>
+    </svg>`
+  }
+
   protected render() {
     return html`
       <uui-box
         headline=${ifDefined(this.$scope?.model.title)}
         headline-variant="h1"
       >
         <div class="umb-iconpicker">
-          ${this.icons.map(
-            (icon) => svg`<svg
-                class=${`icomoon-icon ${icon}`}
-                @click=${() => this.select(icon)}
-              >
-                <use href=${`#${icon}`}></use>
-              </svg>`
-          )}
+          ${this.icons.map((icon) => html`
+          <div title=${this.getName(icon)}>
+            ${this.renderSvg(icon)}
+          </div>`
+        )}
         </div>
       </uui-box>
     `;