cedro 0.1.3 → 0.1.5

package/src/ui/menu.ui.ts

@@ -3,13 +3,16 @@ import { IWidget } from "../interfaces/widget.interface";
 import { IconButton } from "./IconButton.ui";
 import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
 
+const MENU_OPTION_HEIGHT = 40;
+
 export class Menu extends Widget {
     background: Widget;
     options: Map<string, IconButton>;
+    optionsWidth: Array<number>;
     triggeredById: string | null;
     triggeredBy: IWidget | null;
     triggeredBySearchCode: any;
-    withCalculation: boolean;
+
     constructor(id: string, trigeredById: string | null, parent: IWidget | null = null) {
         super(id, "div", parent);
 
@@ -20,16 +23,17 @@ export class Menu extends Widget {
 
         this.triggeredById = trigeredById;
         this.setType(WidgetTypes.CUSTOM);
+        this.setAlign(WidgetAlignTypes.VERTICAL);
+        this.setPadding(4);
 
         this.triggeredBy = null;
 
         this.options = new Map<string, IconButton>();
+        this.optionsWidth = new Array<number>();
 
         this.addClass("WUIMenu");
         this.addClass("WUIMenuTransparent");
 
-        this.withCalculation = false;
-
         this.triggeredBySearchCode = setInterval(() => {
             if (!this.triggeredById) {
                 clearInterval(this.triggeredBySearchCode);
@@ -64,44 +68,26 @@ export class Menu extends Widget {
         this.background.setVisible(false);
     }
 
-    private setFreeOptionWidth(): void {
-        for (const [, dataOption] of this.options) {
-            const option = dataOption as IconButton;
-            option.deleteClass("WUIMenuOptions100w");
-        }
-    }
-
     private getMaxWidth(): number {
-        this.setFreeOptionWidth();
-        this.deleteClass("WUIMenuHidden");
-        this.addClass("WUIMenuTransparent");
-        let maxWidth = 0;
-        for (const [, dataOption] of this.options) {
-            const option = dataOption as IconButton;
-            const optionWidth = option.getBody().clientWidth;
-
-            if (optionWidth > maxWidth) {
-                maxWidth = optionWidth;
-            }
-        }
-        return maxWidth;
+        return Math.max(...this.optionsWidth) * 1.1;
     }
 
     wakeUp(): void {
-        if (!this.withCalculation) {
-            let maxWidth = this.getMaxWidth();
-
-            for (const [, dataOption] of this.options) {
-                const option = dataOption as IconButton;
-                option.addClass("WUIMenuOptions100w");
-                option.render();
+        const maxWidth = this.getMaxWidth();
+        let menuWidth = 0;
+        if (this.triggeredBy) {
+            const triggerWidth = this.triggeredBy.getBody().clientWidth;
+            if (triggerWidth > maxWidth) {
+                menuWidth = triggerWidth;
+            } else {
+                menuWidth = maxWidth;
             }
-            this.deleteClass("WUIMenuTransparent");
-            this.addClass("WUIMenuHidden");
-            this.setW(maxWidth);
-            this.withCalculation = true;
+        } else {
+            menuWidth = maxWidth;
         }
 
+        this.setW(menuWidth);
+
         this.background.setVisible(true);
         this.background.raisteTop();
 
@@ -110,6 +96,8 @@ export class Menu extends Widget {
         this.deleteClass("WUIMenuHidden");
         this.addClass("WUIMenuVisible");
 
+        this.render();
+
         if (this.triggeredBy) {
             const position = this.triggeredBy.getPosition(false);
 
@@ -118,7 +106,7 @@ export class Menu extends Widget {
 
             const screenW = window.innerWidth;
             const screenH = window.innerHeight;
-            const menuW = this.getBody().clientWidth;
+            const menuW = menuWidth;
             const menuH = this.getBody().clientHeight;
             let positionX = position.x;
             let positionY = position.y;
@@ -126,8 +114,8 @@ export class Menu extends Widget {
             let openRight = true;
             let openBottom = true;
 
-            if (position.x + menuW + triggerW > screenW) {
-                positionX = screenW - menuW - triggerW;
+            if (position.x + menuW > screenW) {
+                positionX = screenW - menuW;
                 openRight = false;
             }
 
@@ -140,18 +128,16 @@ export class Menu extends Widget {
                 this.setX(positionX);
                 this.setY(positionY + triggerH);
             } else if (openRight && !openBottom) {
-                this.setX(positionX + triggerW);
+                this.setX(positionX);
                 this.setY(positionY);
             } else if (!openRight && openBottom) {
                 /*abajo izq: Works!*/
-                this.setX(positionX + triggerW);
+                this.setX(positionX);
                 this.setY(positionY + triggerH);
             } else if (!openRight && !openBottom) {
-                this.setX(positionX + triggerW);
+                this.setX(positionX);
                 this.setY(positionY - triggerH);
             }
-
-            //this.setY(positionY);
         }
     }
 
@@ -165,17 +151,19 @@ export class Menu extends Widget {
     }
 
     public clearOptions(): void {
+        this.optionsWidth = new Array<number>();
         this.options.clear();
         this.removeAllChilds();
-        this.withCalculation = false;
     }
 
     addOption(id: string, icon: string, label: string) {
-        const newOption = new IconButton(id, icon, this);
-        newOption.setType(WidgetTypes.FREE);
-        newOption.setAlign(WidgetAlignTypes.HORIZONTAL);
+        const newOption = new IconButton(id, icon, null);
+        newOption.setType(WidgetTypes.FILL);
+        newOption.setAlign(WidgetAlignTypes.VERTICAL);
         newOption.setText(label);
-        newOption.addClass("WUIMenuOptions");
+        newOption.setFixedSize(MENU_OPTION_HEIGHT);
+        //newOption.addClass("WUIMenuOptions");
+        //newOption.setH(MENU_OPTION_HEIGHT);
 
         newOption.subscribe({
             event: "click",
@@ -187,5 +175,11 @@ export class Menu extends Widget {
         });
 
         this.options.set(id, newOption);
+
+        const width = newOption.getBody().clientWidth;
+        this.optionsWidth.push(width);
+        const height = this.options.size * MENU_OPTION_HEIGHT;
+        this.addChild(newOption);
+        this.setH(height);
     }
 }

package/src/ui/progressbar.ui.ts

@@ -0,0 +1,74 @@
+import { Label } from "./label.ui";
+import "./styles/progressbar.css";
+import { Widget } from "./widget.ui";
+
+const PROGRESS_BAR_HEIGHT = 40;
+
+//icono para el progress bar interactivo humidity_high
+
+export class ProgressBar extends Widget {
+    private value: number;
+    private paddingBar: number;
+
+    private bar: Widget;
+    private lblValue: Label;
+
+    public constructor(id: string, parent: Widget | null = null) {
+        super(id, "div", parent);
+
+        this.setH(PROGRESS_BAR_HEIGHT);
+
+        this.paddingBar = 0;
+
+        this.bar = new Widget(id + ".bar", "div", this);
+        this.bar.addClass("WUIProgressBarBar");
+
+        this.value = 0;
+        this.addClass("WUIProgressBarContainer");
+
+        this.lblValue = new Label(id + ".value", "span", this);
+        this.lblValue.setText(this.value + "%");
+
+        this.lblValue.addClass("WUIProgressBarLabel");
+    }
+
+    public setPaddingBar(p: number): void {
+        this.paddingBar = p;
+    }
+
+    public hideLabel(): void {
+        this.lblValue.setVisible(false);
+    }
+
+    public displayLabel(): void {
+        this.lblValue.setVisible(true);
+    }
+
+    public render(): void {
+        super.render();
+
+        const padding = this.paddingBar;
+        const width = this.getW() - padding;
+        const height = this.getH();
+        const widthBar = width * (this.value / 100);
+
+        this.lblValue.setX(width / 2 - this.lblValue.getW() / 2);
+        this.lblValue.setY(height / 2 - this.lblValue.getH() / 2);
+        this.lblValue.raisteTop();
+
+        this.bar.setX(padding);
+        this.bar.setY(padding);
+        this.bar.setW(widthBar);
+        this.bar.setH(height - padding * 2);
+    }
+
+    public setValue(value: number): void {
+        this.value = value;
+        this.lblValue.setText(this.value + "%");
+        this.render();
+    }
+
+    public getValue(): number {
+        return this.value;
+    }
+}

package/src/ui/radiobutton.ts

@@ -0,0 +1,8 @@
+import { ToggleButton } from "./toggle.ui";
+import { Widget } from "./widget.ui";
+
+export class RadioButton extends ToggleButton {
+    constructor(id: string, text: string = "", parent: Widget | null = null) {
+        super(id, text, "radio_button_unchecked", "radio_button_checked", parent);
+    }
+}

package/src/ui/scroll.ui.ts

@@ -0,0 +1,184 @@
+import { OrientationTypes } from "src/types/orientation.type";
+import "./styles/scroll.css";
+import { Widget, WidgetTypes } from "./widget.ui";
+import { Draggable } from "./draggable.ui";
+
+const SCROLL_SIZE = 10;
+
+type ScrollData = {
+    scrollHeight: number;
+    areaHeight: number;
+    scrollBarHeight: number;
+    scrollWidth: number;
+    areaWidth: number;
+    scrollBarWidth: number;
+    scrollWidt: number;
+    availablePositionSize: number;
+    ratioScroll: number;
+    position: number;
+    scrollPositionY: number;
+};
+
+export class Scroll extends Widget {
+    contentArea: Widget;
+    orientation: OrientationTypes;
+    drag: Draggable;
+
+    constructor(id: string, contentArea: Widget, orientation: OrientationTypes = "vertical") {
+        super(id, "div", contentArea.getParent());
+
+        this.contentArea = contentArea;
+        this.orientation = orientation;
+
+        this.setType(WidgetTypes.CUSTOM);
+
+        this.getBody().style.overflow = "hidden";
+        this.getBody().style.position = "absolute";
+
+        this.addClass("WUIScrollbar");
+
+        this.drag = new Draggable(this, orientation);
+
+        this.contentArea.subscribe({
+            event: "wheel",
+            then: (e, _w) => {
+                const wheel = e as WheelEvent;
+                this.contentArea.getBody().scrollBy(0, wheel.deltaY);
+                this.render();
+            },
+        });
+
+        this.subscribe({
+            event: "drag",
+            then: (_e, _w) => {
+                this.updateScrollPositionByScrollbar();
+            },
+        });
+    }
+
+    private getScrollData(): ScrollData {
+        let returnData: ScrollData = {
+            scrollHeight: 0,
+            areaHeight: 0,
+            scrollBarHeight: 0,
+            scrollWidth: 0,
+            areaWidth: 0,
+            scrollBarWidth: 0,
+            scrollWidt: 0,
+            availablePositionSize: 0,
+            ratioScroll: 0,
+            position: 0,
+            scrollPositionY: 0,
+        };
+
+        if (this.orientation === "vertical") {
+            returnData.scrollHeight = this.contentArea.getBody().scrollHeight;
+            returnData.areaHeight = this.contentArea.getH();
+            returnData.scrollBarHeight =
+                returnData.areaHeight * (returnData.areaHeight / returnData.scrollHeight);
+            returnData.availablePositionSize =
+                returnData.areaHeight - returnData.scrollBarHeight - 1;
+            returnData.ratioScroll =
+                this.contentArea.getBody().scrollTop /
+                (returnData.areaHeight - returnData.scrollBarHeight);
+            returnData.position = returnData.availablePositionSize * returnData.ratioScroll;
+
+            if (returnData.scrollBarHeight >= returnData.areaHeight) {
+                returnData.scrollBarHeight = returnData.areaHeight;
+            }
+        } else if (this.orientation === "horizontal") {
+            returnData.scrollWidth = this.contentArea.getBody().scrollWidth;
+            returnData.areaWidth = this.contentArea.getW();
+            returnData.scrollBarWidth =
+                returnData.areaWidth * (returnData.areaWidth / returnData.scrollWidth);
+            returnData.availablePositionSize = returnData.areaWidth - returnData.scrollBarWidth - 1;
+            returnData.ratioScroll =
+                this.contentArea.getBody().scrollLeft /
+                (returnData.areaWidth - returnData.scrollBarWidth);
+            returnData.position = returnData.availablePositionSize * returnData.ratioScroll;
+            returnData.scrollPositionY = this.contentArea.getH() + this.contentArea.getY();
+            if (returnData.scrollBarWidth >= returnData.areaWidth) {
+                returnData.scrollBarWidth = returnData.areaWidth;
+            }
+        }
+        return returnData;
+    }
+
+    private updateScrollPositionByScrollbar(): void {
+        const scrollData = this.getScrollData();
+
+        if (this.orientation === "vertical") {
+            const recorrido = scrollData.scrollHeight - scrollData.areaHeight;
+            const maxY = this.drag.maxY ? this.drag.maxY : 1;
+            const ratio = (this.getY() - this.contentArea.getY()) / maxY;
+            this.contentArea.getBody().scrollTop = recorrido * ratio;
+        } else if (this.orientation === "horizontal") {
+            const recorrido = scrollData.scrollWidth - scrollData.areaWidth;
+            const maxX = this.drag.maxX ? this.drag.maxX : 1;
+            const ratio = (this.getX() - this.contentArea.getX()) / maxX;
+            this.contentArea.getBody().scrollLeft = recorrido * ratio;
+        }
+    }
+
+    public render(): void {
+        super.render();
+
+        const scrollData = this.getScrollData();
+
+        if (this.orientation === "vertical") {
+            if (scrollData.areaHeight < scrollData.scrollHeight) {
+                this.setVisible(true);
+            } else {
+                this.setVisible(false);
+                return;
+            }
+
+            this.setX(this.contentArea.getX() + this.contentArea.getW() - SCROLL_SIZE - 1);
+            this.setY(1 + this.contentArea.getY() + scrollData.position);
+            this.setH(scrollData.scrollBarHeight);
+            this.setW(SCROLL_SIZE);
+            this.raisteTop();
+
+            const minY = 1 + this.contentArea.getY();
+            const maxY = this.contentArea.getY() + scrollData.availablePositionSize;
+
+            this.drag.setMinY(minY);
+            this.drag.setMaxY(maxY);
+
+            if (this.getY() > maxY) {
+                this.setY(maxY);
+            }
+
+            if (this.getY() < minY) {
+                this.setY(minY);
+            }
+        } else if (this.orientation === "horizontal") {
+            if (scrollData.areaWidth < scrollData.scrollWidth) {
+                this.setVisible(true);
+            } else {
+                this.setVisible(false);
+                return;
+            }
+
+            this.setX(1 + this.contentArea.getX() + scrollData.position);
+            this.setY(scrollData.scrollPositionY - SCROLL_SIZE - 1);
+            this.setW(scrollData.scrollBarWidth);
+            this.setH(SCROLL_SIZE);
+            this.raisteTop();
+
+            const minX = 1 + this.contentArea.getX();
+            const maxX = this.contentArea.getX() + scrollData.availablePositionSize;
+
+            this.drag.setMinX(minX);
+            this.drag.setMaxX(maxX);
+
+            if (this.getX() > maxX) {
+                this.setX(maxX);
+            }
+
+            if (this.getX() < minX) {
+                this.setX(minX);
+            }
+        }
+    }
+}

package/src/ui/select.ui.ts

@@ -37,8 +37,11 @@ export class Select extends Textbox {
 
                 this.menu.wakeUp();
 
+                console.log(this.getBody().clientWidth, this.menu.getBody().clientWidth);
+
                 if (this.getBody().clientWidth > this.menu.getBody().clientWidth) {
                     this.menu.setW(this.getBody().clientWidth);
+                    this.menu.resize();
                 }
             },
         });

package/src/ui/styles/accordion.css

@@ -0,0 +1,9 @@
+.WUIAccordion {
+    background-color: transparent;
+    border-left: solid 0.13rem;
+    border-top: solid 0.13rem;
+    border-bottom: solid 0.13rem;
+    border-right: solid 0.13rem;
+    border-radius: 0.25rem;
+    border-color: var(--palette-divider);
+}

package/src/ui/styles/button.css

@@ -12,7 +12,6 @@
     border-radius: 0.25rem;
     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
         border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    text-transform: uppercase;
 }
 
 .WUIButton-text-color-primary {
@@ -89,7 +88,6 @@
     border-radius: 0.25rem;
     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
         border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    text-transform: uppercase;
 }
 
 .WUIButton-outlined-color-primary {
@@ -173,7 +171,6 @@
     border-radius: 0.25rem;
     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
         border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    text-transform: uppercase;
 }
 
 .WUIButton-contained-color-primary {

package/src/ui/styles/buttoncolor.css

@@ -0,0 +1,8 @@
+.WUIButtonColorInput {
+    width: 100%;
+    border: none;
+    background-color: transparent;
+    height: 100%;
+    padding: 5px;
+    margin: auto;
+}

package/src/ui/styles/datagrid.css

@@ -0,0 +1,36 @@
+.WUIDataGrid {
+    background-color: transparent;
+    border-left: solid 0.13rem;
+    border-top: solid 0.13rem;
+    border-bottom: solid 0.13rem;
+    border-right: solid 0.13rem;
+    border-radius: 0.25rem;
+    border-color: var(--palette-divider);
+}
+
+.WUIDataGrid-Header {
+    border-bottom: solid 1px var(--palette-divider);
+}
+
+.WUIDataGrid-HeaderLabel:hover {
+    border-bottom: solid 1px var(--palette-divider);
+    background-color: var(--palette-action-hover) !important;
+    cursor: default;
+}
+
+.WUIDataGrid-HeaderLabel {
+    border-right: solid 1px var(--palette-divider);
+    /*border-bottom: solid 1px var(--palette-primary-text-light);*/
+    padding-left: 5px;
+    font-weight: bold;
+}
+
+.WUIDataGrid-Row {
+    border-bottom: solid 1px var(--palette-divider);
+    background-color: transparent;
+}
+
+.WUIDataGrid-Row:hover {
+    border-bottom: solid 1px var(--palette-divider);
+    background-color: var(--palette-action-hover) !important;
+}

package/src/ui/styles/draggable.css

@@ -0,0 +1,9 @@
+.WUIDraggableBackground {
+    background-color: rgba(0, 0, 0, 0.01);
+    opacity: 0.1;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+}

package/src/ui/styles/hpanel.css

@@ -0,0 +1,12 @@
+.WUIHPanelHandler {
+    position: absolute;
+    overflow: hidden;
+    cursor: col-resize;
+    background-color: var(--palette-divider);
+    opacity: 0.1;
+}
+
+.WUIHPanelDragging {
+    background-color: var(--palette-divider) !important;
+    opacity: 1;
+}

package/src/ui/styles/loading.css

@@ -0,0 +1,12 @@
+.WUILoading {
+    background-color: var(--palette-background-default);
+    background-image: url("loading.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+    position: absolute !important;
+    left: 0px;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    opacity: 0.8;
+}

package/src/ui/styles/loading.svg

@@ -0,0 +1,49 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="256" height="256" style="shape-rendering: auto; display: block; background: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g transform="rotate(0 50 50)">
+  <rect fill="#878787" height="12" width="6" ry="6" rx="3" y="24" x="47">
+    <animate repeatCount="indefinite" begin="-1.5027322404371584s" dur="1.639344262295082s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
+  </rect>
+</g><g transform="rotate(30 50 50)">
+  <rect fill="#878787" height="12" width="6" ry="6" rx="3" y="24" x="47">
+    <animate repeatCount="indefinite" begin="-1.366120218579235s" dur="1.639344262295082s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
+  </rect>
+</g><g transform="rotate(60 50 50)">
+  <rect fill="#878787" height="12" width="6" ry="6" rx="3" y="24" x="47">
+    <animate repeatCount="indefinite" begin="-1.2295081967213115s" dur="1.639344262295082s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
+  </rect>
+</g><g transform="rotate(90 50 50)">
+  <rect fill="#878787" height="12" width="6" ry="6" rx="3" y="24" x="47">
+    <animate repeatCount="indefinite" begin="-1.0928961748633879s" dur="1.639344262295082s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
+  </rect>
+</g><g transform="rotate(120 50 50)">
+  <rect fill="#878787" height="12" width="6" ry="6" rx="3" y="24" x="47">
+    <animate repeatCount="indefinite" begin="-0.9562841530054644s" dur="1.639344262295082s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
+  </rect>
+</g><g transform="rotate(150 50 50)">
+  <rect fill="#878787" height="12" width="6" ry="6" rx="3" y="24" x="47">
+    <animate repeatCount="indefinite" begin="-0.819672131147541s" dur="1.639344262295082s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
+  </rect>
+</g><g transform="rotate(180 50 50)">
+  <rect fill="#878787" height="12" width="6" ry="6" rx="3" y="24" x="47">
+    <animate repeatCount="indefinite" begin="-0.6830601092896175s" dur="1.639344262295082s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
+  </rect>
+</g><g transform="rotate(210 50 50)">
+  <rect fill="#878787" height="12" width="6" ry="6" rx="3" y="24" x="47">
+    <animate repeatCount="indefinite" begin="-0.5464480874316939s" dur="1.639344262295082s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
+  </rect>
+</g><g transform="rotate(240 50 50)">
+  <rect fill="#878787" height="12" width="6" ry="6" rx="3" y="24" x="47">
+    <animate repeatCount="indefinite" begin="-0.4098360655737705s" dur="1.639344262295082s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
+  </rect>
+</g><g transform="rotate(270 50 50)">
+  <rect fill="#878787" height="12" width="6" ry="6" rx="3" y="24" x="47">
+    <animate repeatCount="indefinite" begin="-0.27322404371584696s" dur="1.639344262295082s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
+  </rect>
+</g><g transform="rotate(300 50 50)">
+  <rect fill="#878787" height="12" width="6" ry="6" rx="3" y="24" x="47">
+    <animate repeatCount="indefinite" begin="-0.13661202185792348s" dur="1.639344262295082s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
+  </rect>
+</g><g transform="rotate(330 50 50)">
+  <rect fill="#878787" height="12" width="6" ry="6" rx="3" y="24" x="47">
+    <animate repeatCount="indefinite" begin="0s" dur="1.639344262295082s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate>
+  </rect>
+</g><g></g></g><!-- [ldio] generated by https://loading.io --></svg>

package/src/ui/styles/main.css

@@ -1,7 +1,14 @@
+* {
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+}
+
 body {
     font-family: "Roboto", sans-serif;
     background-color: var(--palette-background-default);
     color: var(--palette-text-secondary);
+    overflow: hidden;
 }
 
 h1,

package/src/ui/styles/menu.css

@@ -38,7 +38,6 @@
     display: flex;
     align-items: center;
     width: auto;
-    height: 40px;
 }
 
 .WUIMenuOptions100w {

package/src/ui/styles/progressbar.css

@@ -0,0 +1,19 @@
+.WUIProgressBarContainer {
+    overflow: hidden;
+    border: solid 2px var(--palette-divider);
+    border-radius: 7px;
+    background-color: var(--palette-background-default);
+}
+
+.WUIProgressBarBar {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    border-radius: 6px;
+    background-color: var(--palette-primary-dark);
+}
+
+.WUIProgressBarLabel {
+    position: absolute;
+    color: var(--palette-primary-light);
+}