Update Label, Button and ListView

- Label and Button now can set icon on both left and right side of the text
- Fix ListView dropdown bug, and allow the dropdown list to positioned correctly based on its nearest anchored element

d.ts/antos.d.ts

@@ -4422,6 +4422,14 @@ declare namespace OS {
                  * @memberof ListViewTag
                  */
                 private _selectedItems;
+                /**
+                 * The anchor element that the list view positioned on
+                 * This is helpful when rendering dropdown list
+                 * @private
+                 * @type{HTMLElement}
+                 * @memberof ListViewTag
+                 */
+                private _anchor;
                 /**
                  * Data placeholder of the list
                  *
@@ -5540,6 +5548,12 @@ declare namespace OS {
                  * @memberof LabelTag
                  */
                 set iconclass(v: string);
+                /**
+                 * Set the CSS class of the label icon on the right side
+                 *
+                 * @memberof LabelTag
+                 */
+                set iconclass$(v: string);
                 /**
                  * Setter: Set the text of the label
                  *
@@ -6623,6 +6637,13 @@ declare namespace OS {
                  * @memberof ButtonTag
                  */
                 set iconclass(v: string);
+                /**
+                 * Set the icon class on the right side of the button, this property
+                 * allows to style the button icon using CSS
+                 *
+                 * @memberof ButtonTag
+                 */
+                set iconclass$(v: string);
                 /**
                  * Setter: Set the text of the button
                  *

src/core/tags/ButtonTag.ts

@@ -79,6 +79,18 @@ namespace OS {
                     $(this).attr("iconclass", v);
                     (this.refs.label as LabelTag).iconclass = v;
                 }
+                
+
+                /**
+                 * Set the icon class on the right side of the button, this property
+                 * allows to style the button icon using CSS
+                 *
+                 * @memberof ButtonTag
+                 */
+                set iconclass$(v: string) {
+                    $(this).attr("iconclass_end", v);
+                    (this.refs.label as LabelTag).iconclass$ = v;
+                }
 
                 /**
                  * Setter: Set the text of the button

src/core/tags/LabelTag.ts

@@ -38,6 +38,8 @@ namespace OS {
                         .css("display", "flex");
                     $(this.refs.iclass)
                         .css("flex-shrink",0);
+                    $(this.refs.iclass_end)
+                        .css("flex-shrink",0);
                     $(this.refs.i)
                         .css("flex-shrink",0);
                     $(this.refs.text)
@@ -66,6 +68,7 @@ namespace OS {
                     this.iconclass = undefined;
                     this.text = undefined;
                     this.selectable = false;
+                    this.iconclass$ = undefined;
                 }
 
                 /**
@@ -154,6 +157,22 @@ namespace OS {
                     }
                 }
 
+                /**
+                 * Set the CSS class of the label icon on the right side
+                 *
+                 * @memberof LabelTag
+                 */
+                set iconclass$(v: string) {
+                    $(this).attr("iconclass_end", v);
+                    $(this.refs.iclass_end).removeClass();
+                    if (v) {
+                        $(this.refs.iclass_end).addClass(v);
+                        $(this.refs.iclass_end).show();
+                    } else {
+                        $(this.refs.iclass_end).hide();
+                    }
+                }
+
                 /**
                  * Setter: Set the text of the label
                  * 
@@ -163,7 +182,7 @@ namespace OS {
                  */
                 set text(v: string | FormattedString) {
                     this._text = v;
-                    if (v && v !== "") {
+                    if (v) {
                         $(this.refs.text).show();
                         $(this.refs.text).html(v.__());
                     } else {
@@ -217,6 +236,7 @@ namespace OS {
                                 { el: "i", ref: "iclass" },
                                 { el: "i", ref: "i", class: "icon-style" },
                                 { el: "i", ref: "text", class: "label-text" },
+                                { el: "i", ref: "iclass_end" },
                             ],
                         },
                     ];

src/core/tags/ListViewTag.ts

@@ -526,7 +526,15 @@ namespace OS {
                  * @memberof ListViewTag
                  */
                 private _selectedItems: ListViewItemTag[];
-
+                
+                /**
+                 * The anchor element that the list view positioned on
+                 * This is helpful when rendering dropdown list
+                 * @private
+                 * @type{HTMLElement}
+                 * @memberof ListViewTag
+                 */
+                private _anchor: HTMLElement;
                 /**
                  * Data placeholder of the list
                  *
@@ -579,6 +587,7 @@ namespace OS {
                     this.dropdown = false;
                     this.selected = -1;
                     this.dragndrop = false;
+                    this._anchor = undefined;
                     this.itemtag = "afx-list-item";
                     $(this).addClass("afx-list-view");
                 }
@@ -1241,9 +1250,20 @@ namespace OS {
                             .css("top", top + "px")
                             .css("left", left + "px");
                     };
+                    const label = (this.refs.drlabel as LabelTag);
+                    label.iconclass$ = "bi bi-chevron-down";
+                    label.text = "";
                     $(this.refs.drlabel).css("display", "inline-block");
                     $(this.refs.btlist).hide();
                     this.observable.on("resize", (e) => this.calibrate());
+                    let anchor = $(this).parent();
+                    while (anchor && anchor.css('position') === 'static') {
+                        anchor = anchor.parent();
+                    }
+                    if(anchor && anchor[0])
+                    {
+                        this._anchor = anchor[0];
+                    }
                     return this.calibrate();
                 }
 
@@ -1287,17 +1307,26 @@ namespace OS {
                         $(this.refs.mlist).hide();
                         return;
                     }
-
+                    
                     const desktoph = $(Ant.OS.GUI.workspace).outerHeight();
-                    const offset =
+                    const wheight = $(this).offset().top + $(this.refs.mlist).outerHeight()*1.5;
-                        $(this).offset().top + $(this.refs.mlist).outerHeight()*1.5;
+                    const position = $(this).position();
-                    if (offset > desktoph) {
+                    let offset = 0;
-                        $(this.refs.mlist).css(
+                    if(this._anchor)
-                            "top",
+                    {
-                            `-${$(this.refs.mlist).outerHeight()}px`
+                        offset = $(this._anchor).scrollTop();
-                        );
+                    }
+                    if (wheight > desktoph) {
+                        
+                        const ypos = offset + position.top - $(this.refs.mlist).outerHeight();
+                        $(this.refs.mlist)
+                            .css("top",`${ypos}px`)
+                            .css("left", `${position.left}px`);
                     } else {
-                        $(this.refs.mlist).css("top", "98%");
+                        const ypos = offset + $(this).position().top + $(this.refs.container).outerHeight();
+                        $(this.refs.mlist)
+                            .css("top", `${ypos}px`)
+                            .css("left", `${position.left}px`);
                     }
                     $(this.refs.mlist).show();
                 }
@@ -1328,11 +1357,12 @@ namespace OS {
                     if (!this.dropdown) {
                         return;
                     }
-                    const w = `${$(this).width()}px`;
+                    const w = `${$(this).innerWidth()}px`;
                     const h = `${$(this).outerHeight()}px`;
-                    $(this.refs.container).css("width", w);
+                    $(this.refs.container).css("width", "100%");
                     $(this.refs.container).css("height", h);
-                    $(this.refs.current).css("width", w);
+                    
+                    $(this.refs.current).css("width", "100%");
                     $(this.refs.mlist).css("width", w);
                 }
 

src/themes/system/afx-list-view.css

@@ -67,7 +67,7 @@ afx-list-view.dropdown {
 }
 afx-list-view.dropdown > div.list-container{
     overflow: visible;
-    position: absolute;
+    /*position: absolute;*/
 }
 afx-list-view.dropdown > div.list-container > div
 {
@@ -91,17 +91,9 @@ afx-list-view.dropdown > div.list-container > ul  li{
     width:100%;
 }
 
-afx-list-view.dropdown div.list-container div:before {
-    content: "\f107"; 
-    font-family: "FontAwesome";
-    font-size: 16px;
-    font-style: normal;
-    position: absolute;
-    right: 5px;
-}
 afx-list-view.dropdown div.list-container > div > afx-label{
     padding-left:3px;
-    padding-right: 25px;
+    padding-right: 5px;
     height: 100%;
 }
 afx-list-view.dropdown div.list-container > div > afx-label span