Enhance how we append/remove Prefix/PostFix/primamry addons to element and enhance how we append multiple childs

[vegegoku]

Now Prefix/Postfix and primary addon have dedicated elements wrappers and allowing us to directly append elements to them without the need to wrap those elements as PostFixAddon/PrefixAddOns/PrimaryAddOn . and now all components can append addons and in-case one does not have any specific treatment for them they will just be appended as any other normal element.

a custom component will only need to define the wrapper element for the postfix and prefix addons by overriding tge getPrefixElement and getPostfixElement methods.

example :

NavBar.create("Title here")
                .withPostfixElement((parent, self) -> {
                    self.appendChild(Icons.menu(), 
                    Icons.cogs(), 
                    span().textContent("will be appended as postfix too"));
                })
                .withPrefixElement((parent, self) -> {
                    self.appendChild(Icons.arrow_left(), 
                    Icons.theater(), span().textContent("will be appended as prefix too"));
                });

Also Prefix/Postfix can now be cleared independently by obtaining the PrefixElement/PostfixElement and call clearElement

component.getPrefixElement().clearElement() will clear all prefix addons on that element

Appending multiple child components to a parent component have been also improved and now can do that without using appendChild for each.

for example

old :

Tree<String> hardwareTree = Tree.<String>create("HARDWARE")
                .addSelectionListener((treeItem, selection) -> DomGlobal.console.info(treeItem.get().getValue()))
                .appendChild(TreeItem.create(Icons.laptop(), "Computer")
                        .addClickListener(evt -> Notification.create("Computer").show()))
                .appendChild(TreeItem.create(Icons.headset(), "Headset")
                        .addClickListener(evt -> Notification.create("Headset").show()))
                .appendChild(TreeItem.create(Icons.keyboard(), "Keyboard")
                        .addClickListener(evt -> Notification.create("Keyboard").show()))
                .appendChild(TreeItem.create(Icons.mouse(), "Mouse")
                        .addClickListener(evt -> Notification.create("Mouse").show()))
                .addSeparator()
                .appendChild(TreeItem.create(Icons.laptop(), "Laptop")
                        .addClickListener(evt -> Notification.create("Laptop").show()))
                .appendChild(TreeItem.create(Icons.cellphone(), "Smart phone")
                        .addClickListener(evt -> Notification.create("Smart phone").show()))
                .appendChild(TreeItem.create(Icons.tablet(), "Tablet")
                        .addClickListener(evt -> Notification.create("Tablet").show()))
                .appendChild(TreeItem.create(Icons.speaker(), "Speaker")
                        .addClickListener(evt -> Notification.create("Speaker").show()));

New :

Tree<String> hardwareTree = Tree.<String>create("HARDWARE")
                .addSelectionListener((treeItem, selection) -> DomGlobal.console.info(treeItem.get().getValue()))
                .appendChild(
                        TreeItem.create(Icons.laptop(), "Computer")
                                .addClickListener(evt -> Notification.create("Computer").show()),
                        TreeItem.create(Icons.headset(), "Headset")
                                .addClickListener(evt -> Notification.create("Headset").show()),
                        TreeItem.create(Icons.keyboard(), "Keyboard")
                                .addClickListener(evt -> Notification.create("Keyboard").show()),
                        TreeItem.create(Icons.mouse(), "Mouse")
                                .addClickListener(evt -> Notification.create("Mouse").show()),
                        TreeItem.create(Icons.laptop(), "Laptop")
                                .addClickListener(evt -> Notification.create("Laptop").show()),
                        TreeItem.create(Icons.cellphone(), "Smart phone")
                                .addClickListener(evt -> Notification.create("Smart phone").show()),
                        TreeItem.create(Icons.tablet(), "Tablet")
                                .addClickListener(evt -> Notification.create("Tablet").show()),
                        TreeItem.create(Icons.speaker(), "Speaker")
                                .addClickListener(evt -> Notification.create("Speaker").show())
                );