WIP Taglist:

- fix dropdown menu not positioned correctly
- fix more styling

api/js/etemplate/Et2Taglist/EgwOption.ts

@@ -10,6 +10,8 @@
 
 import {LionOption} from '@lion/listbox';
 import {css, html} from "@lion/core";
+import {taglistStyles} from "./TaglistStyles";
+import {colorsDefStyles} from "../Styles/colorsDefStyles";
 
 export class EgwOption extends LionOption
 {
@@ -34,9 +36,17 @@ export class EgwOption extends LionOption
 	{
 		return [
 			...super.styles,
+			colorsDefStyles,
 			css`
 			:host([checked]) {
-				visibility: hidden;
+				display: none;
+			}
+			:host {
+				line-height: 20px;
+    			padding: 8px;
+			}
+			:host(:hover) {
+				background-color: var(--row_hover);
 			}
       	`,
 		];

api/js/etemplate/Et2Taglist/Et2Taglist.ts

@@ -15,6 +15,7 @@ import {LionCombobox} from "@lion/combobox";
 import {SelectOption} from "../Et2Select/FindSelectOptions";
 import {EgwOption} from "./EgwOption";
 import {TaglistSelection} from "./TaglistSelection";
+import {taglistStyles} from "./TaglistStyles";
 
 // Force the include, we really need this and without it the file will be skipped
 const really_import_me = EgwOption;
@@ -29,10 +30,25 @@ export class Et2Taglist extends Et2widgetWithSelectMixin(LionCombobox)
 	{
 		return [
 			...super.styles,
+			taglistStyles,
 			css`
 			  :host {
 				display: block;
+				border: 1px solid var(--taglist-combobox__container-boder-color);
+    			border-radius: 3px;
+    			min-height: 24px;
 			  }
+			  * > ::slotted([slot="input"]){min-height:24px;}
+			  .input-group__container{border:none;}
+			  * > ::slotted([role="listbox"]) {
+			  	border: 1px solid;
+			  	border-color: var(--taglist-combobox__container-boder-color);
+			  	border-bottom-left-radius: 3px;
+			  	border-bottom-right-radius: 3px;
+			  	border-top: none;
+			  	margin-top: 1px;
+			  }
+			  
 			`
 		];
 	}

api/js/etemplate/Et2Taglist/TaglistSelection.ts

@@ -30,12 +30,15 @@ export class TaglistSelection extends LitElement {
 			css`
 			:host {
 				display: flex;
+				padding: 2px;
+    			padding-top: 0px;
 			}
 			
 			.taglist-selection__tags {
 				flex: 0 0 auto;
 				display: flex;
 				flex-direction: row;
+				gap:5px;
 			}
 			
 			.combobox__input {
@@ -43,7 +46,7 @@ export class TaglistSelection extends LitElement {
 			}
 			
 			.taglist-selection__tag {
-				margin: 0px 5px 3px 0px;
+				margin: 2px 0px 0px 0px;
 				padding: 3px 5px;
 				border: 1px solid var(--taglist-selection__tag-boder-color);
 				border-radius: 3px;

api/js/etemplate/Et2Taglist/TaglistStyles.ts

@@ -12,7 +12,7 @@ export const taglistStyles = css`
 		--taglist-selection__tag-bg-img : linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);
 		
 		/****** colors ************/
-		--taglist-combobox__container-boder-color : silver;
+		--taglist-combobox__container-boder-color : #c0c0c0;
 		--taglist-selection__tag-boder-color : #aaa;
 		--taglist-selection__tag-bg-color : #e4e4e4;
 		--taglist-selection__tag-color : #333;

api/js/etemplate/Styles/colorsDefStyles.ts

@@ -36,5 +36,7 @@ export const colorsDefStyles = css`
 		--bg_color_30_gray : #B3B3B3;
 		--bg_color_40_gray : #999999;
 		--bg_color_50_gray : #808080;
+		
+		--row_hover : rgba(153,204,255,.4);
 	}
 `;