cedro 0.1.9 → 0.1.11

package/src/core/themes.core.ts

@@ -16,12 +16,15 @@ export class Theme implements ITheme {
 
 export const LightTheme = new Theme("light");
 export const DarkTheme = new Theme("dark");
+export const CedroDarkTheme = new Theme("cedro-dark");
+export const CedroLightTheme = new Theme("cedro");
 
 LightTheme.add("--palette-text-primary", "rgba(0, 0, 0, 0.87)")
     .add("--palette-text-secondary", "rgba(0, 0, 0, 0.6)")
     .add("--palette-text-disabled", "rgba(0, 0, 0, 0.38)")
     .add("--palette-background-default", "#ffffff")
     .add("--palette-background-paper", "#ffffff")
+    .add("--palette-background-light", "#f5f5f5")
     .add("--palette-action-active", "rgba(0, 0, 0, 0.54)")
     .add("--palette-action-disabled", "rgba(0, 0, 0, 0.26)")
     .add("--palette-action-hover", "#f5f5f5")
@@ -37,7 +40,7 @@ LightTheme.add("--palette-text-primary", "rgba(0, 0, 0, 0.87)")
 
     .add("--palette-primary-main", "#90caf9")
     .add("--palette-primary-dark", "#42a5f5")
-    .add("--palette-primary-light", "#e3f2fd")
+    .add("--palette-primary-light", "#90caf9")
 
     .add("--palette-primary-text-main", "#2a3b49")
     .add("--palette-primary-text-dark", "#133048")
@@ -99,6 +102,7 @@ DarkTheme.add("--palette-text-primary", "#cdd0d3")
 
     .add("--palette-background-default", "#121212")
     .add("--palette-background-paper", "#121212")
+    .add("--palette-background-light", "rgba(255, 255, 255, 0.02)")
 
     .add("--palette-action-active", "#ffffff")
     .add("--palette-action-disabled", "rgba(255, 255, 255, 0.3)")
@@ -170,6 +174,161 @@ DarkTheme.add("--palette-text-primary", "#cdd0d3")
     .add("--palette-success-text-dark", "#263b27")
     .add("--palette-success-text-light", "#c3ddc5");
 
+CedroDarkTheme.add("--palette-text-primary", "#d3d0c8")
+    .add("--palette-text-secondary", "#a6a29a")
+    .add("--palette-text-disabled", "rgba(80, 81, 82, 0.5)")
+
+    .add("--palette-background-default", "#655349")
+    .add("--palette-background-paper", "#56473e")
+    .add("--palette-background-light", "#6d5a4e")
+
+    .add("--palette-action-active", "#655447")
+    .add("--palette-action-disabled", "rgba(39, 32, 27, 0.3)")
+    .add("--palette-action-hover", "#56473e")
+    .add("--palette-action-selected", "rgba(255, 255, 255, 0.16)")
+    .add("--palette-action-disabled-bg", "rgba(255, 255, 255, 0.12)")
+
+    .add("--palette-divider", "rgba(255, 255, 255, 0.12)")
+
+    .add("--palette-link", "#ffa500")
+    .add("--palette-link-hover", "#c07e06")
+
+    /*PRIMARY*/
+    .add("--palette-primary-main", "#f9ca90")
+    .add("--palette-primary-dark", "#da9f56")
+    .add("--palette-primary-light", "#fcd09a")
+
+    .add("--palette-primary-text-main", "#2a3b49")
+    .add("--palette-primary-text-dark", "#133048")
+    .add("--palette-primary-text-light", "#43474b")
+
+    /*SECONDARY*/
+
+    .add("--palette-secondary-main", "#ce93d8")
+    .add("--palette-secondary-dark", "#ab47bc")
+    .add("--palette-secondary-light", "#f3e5f5")
+
+    .add("--palette-secondary-text-main", "#3d2b40")
+    .add("--palette-secondary-text-dark", "#e6c8eb")
+    .add("--palette-secondary-text-light", "#484348")
+
+    /*ERROR*/
+
+    .add("--palette-error-main", "#9e5656")
+    .add("--palette-error-dark", "#d32f2f")
+    .add("--palette-error-light", "#e57373")
+
+    .add("--palette-error-text-main", "#fbc7c3")
+    .add("--palette-error-text-dark", "#f1c1c1")
+    .add("--palette-error-text-light", "#432222")
+
+    /*WARNING*/
+
+    .add("--palette-warning-main", "#ffa726")
+    .add("--palette-warning-dark", "#ffb74d")
+    .add("--palette-warning-light", "#f57c00")
+
+    .add("--palette-warning-text-main", "#4b310b")
+    .add("--palette-warning-text-dark", "#4b3616")
+    .add("--palette-warning-text-light", "#482400")
+
+    /*INFO*/
+
+    .add("--palette-info-main", "#29b6f6")
+    .add("--palette-info-dark", "#4fc3f7")
+    .add("--palette-info-light", "#0288d1")
+
+    .add("--palette-info-text-main", "#0c3649")
+    .add("--palette-info-text-dark", "#173949")
+    .add("--palette-info-text-light", "#b3dbf1")
+
+    /*SUCCESS*/
+
+    .add("--palette-success-main", "#599062")
+    .add("--palette-success-dark", "#81c784")
+    .add("--palette-success-light", "#388e3c")
+
+    .add("--palette-success-text-main", "#1e371f")
+    .add("--palette-success-text-dark", "#263b27")
+    .add("--palette-success-text-light", "#c3ddc5");
+
+CedroLightTheme.add("--palette-text-primary", "#4f3e2e")
+    .add("--palette-text-secondary", "rgba(0, 0, 0, 0.6)")
+    .add("--palette-text-disabled", "rgba(0, 0, 0, 0.38)")
+    .add("--palette-background-default", "#ffffff")
+    .add("--palette-background-paper", "#ffffff")
+    .add("--palette-background-light", "rgba(250, 243, 235, 0.5)")
+    .add("--palette-action-active", "rgba(0, 0, 0, 0.54)")
+    .add("--palette-action-disabled", "#ffe2ba")
+    .add("--palette-action-hover", "#f5f5f5")
+    .add("--palette-action-selected", "rgba(0, 0, 0, 0.08)")
+    .add("--palette-action-disabled-bg", "rgba(0, 0, 0, 0.12)")
+
+    .add("--palette-divider", "#ffe2ba")
+
+    .add("--palette-link", "#1d79ee")
+    .add("--palette-link-hover", "#3393f2")
+
+    /*PRIMARY*/
+
+    .add("--palette-primary-main", "#baf990")
+    .add("--palette-primary-dark", "#9bce79")
+    .add("--palette-primary-light", "#d1ffb2")
+
+    .add("--palette-primary-text-main", "#2a3b49")
+    .add("--palette-primary-text-dark", "#133048")
+    .add("--palette-primary-text-light", "#43474b")
+
+    /*SECONDARY*/
+
+    .add("--palette-secondary-main", "#ce93d8")
+    .add("--palette-secondary-dark", "#ab47bc")
+    .add("--palette-secondary-light", "#f3e5f5")
+
+    .add("--palette-secondary-text-main", "#3d2b40")
+    .add("--palette-secondary-text-dark", "#e6c8eb")
+    .add("--palette-secondary-text-light", "#484348")
+
+    /*ERROR*/
+
+    .add("--palette-error-main", "#f44336")
+    .add("--palette-error-dark", "#d32f2f")
+    .add("--palette-error-light", "#e57373")
+
+    .add("--palette-error-text-main", "#fbc7c3")
+    .add("--palette-error-text-dark", "#f1c1c1")
+    .add("--palette-error-text-light", "#432222")
+
+    /*WARNING*/
+
+    .add("--palette-warning-main", "#ffa726")
+    .add("--palette-warning-dark", "#ffb74d")
+    .add("--palette-warning-light", "#f57c00")
+
+    .add("--palette-warning-text-main", "#4b310b")
+    .add("--palette-warning-text-dark", "#4b3616")
+    .add("--palette-warning-text-light", "#482400")
+
+    /*INFO*/
+
+    .add("--palette-info-main", "#29b6f6")
+    .add("--palette-info-dark", "#4fc3f7")
+    .add("--palette-info-light", "#0288d1")
+
+    .add("--palette-info-text-main", "#0c3649")
+    .add("--palette-info-text-dark", "#173949")
+    .add("--palette-info-text-light", "#b3dbf1")
+
+    /*SUCCESS*/
+
+    .add("--palette-success-main", "#66bb6a")
+    .add("--palette-success-dark", "#81c784")
+    .add("--palette-success-light", "#388e3c")
+
+    .add("--palette-success-text-main", "#1e371f")
+    .add("--palette-success-text-dark", "#263b27")
+    .add("--palette-success-text-light", "#c3ddc5");
+
 export class ThemeManager implements IThemeManager {
     themes: ITheme[];
     current: ITheme | null;

package/src/core/uid.ts

@@ -1,3 +1,3 @@
-export function UID(): string {
-    return "w-uid-" + Date.now().toString(36) + "-" + Math.random().toString(36);
-}
+export function UID(): string {
+    return "w-uid-" + Date.now().toString(36) + "-" + Math.random().toString(36);
+}

package/src/interfaces/application.interface.ts

@@ -4,7 +4,6 @@ import { IWidget, WUICallback, WUIEvent } from "./widget.interface";
 import { Dialog } from "../ui/dialog";
 import { Seo } from "../core/seo";
 import { ThemeManager } from "../core/themes.core";
-import { Vector2D } from "src/types/vector2d.type";
 
 export interface IScreenSize {
     minWidth: number;
@@ -30,6 +29,8 @@ export interface IApplication {
 
     theme: ThemeManager;
 
+    loadedModule: any;
+
     attachWidget(guest: IWidget, host: IWidget): void;
 
     subscribe: (cb: WUICallback) => void;
@@ -48,7 +49,7 @@ export interface IApplication {
     getRoot(): IWidget;
 
     confirm(msg: string): void;
-    alert(msg: string): void;
+    alert(title: string, msg: string): void;
 
     showLoading(): void;
     hideLoading(): void;

package/src/interfaces/widget.interface.ts

@@ -13,6 +13,8 @@ export type WUIEvent =
     | "mouseleave"
     | "option-clicked"
     | "wheel"
+    | "render"
+    | "scroll"
     | "drag";
 
 export type WUICallback = {
@@ -111,6 +113,7 @@ export interface IWidget {
     getOverflow(): boolean;
 
     addChild(child: IWidget | null): void;
+    populate(): void;
     disableSelection(): void;
     display(): void;
     enableSelection(): void;

package/src/types/select.item.type.ts

@@ -0,0 +1,11 @@
+export class SelectItem {
+    id: string;
+    label: string;
+    icon: string;
+
+    constructor(id: string, label: string, icon: string) {
+        this.id = id;
+        this.label = label;
+        this.icon = icon;
+    }
+}

package/src/ui/Icon.ui.tsx

@@ -0,0 +1,158 @@
+import "./styles/icon.css";
+import { Colors } from "./colors.ui";
+import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { connectWidgetCallback, getOnlyEventProps, Widget } from "./widget.ui";
+import { UID } from "../core/uid";
+
+export type IconVariants = "Filled" | "Outlined" | "Round" | "Sharp" | "Two Tone";
+export type IconSizes = "small" | "medium" | "large" | "xlarge";
+
+const iconSizesMap = {
+    small: "md-18",
+    medium: "md-24",
+    large: "md-36",
+    xlarge: "md-48",
+};
+
+const iconPixelSizesMap = {
+    small: "18px",
+    medium: "24px",
+    large: "36px",
+    xlarge: "48px",
+};
+
+export class Icon extends Widget {
+    variant: IconVariants;
+    color: Colors | null = null;
+    iconSize: IconSizes = "medium";
+    icon: string;
+
+    constructor(
+        id: string,
+        icon: string,
+        variant: IconVariants = "Filled",
+        parent: Widget | null = null
+    ) {
+        super(id, "span", parent);
+
+        this.variant = variant;
+        this.setColor("primary");
+        this.icon = icon;
+
+        this.setIconSize("medium");
+
+        if (this.variant === "Filled") {
+            this.addClass("material-icons");
+        } else {
+            this.addClass(
+                "material-icons-" + this.variant.toString().replace(" ", "-").toLowerCase()
+            );
+        }
+
+        this.setIcon(icon);
+
+        this.init();
+    }
+
+    public init(): void {
+        super.init();
+    }
+
+    public setIconSize(size: IconSizes = "medium"): void {
+        if (this.iconSize !== size) {
+            this.deleteClass(iconSizesMap[this.iconSize]);
+        }
+
+        this.iconSize = size;
+        this.addClass(iconSizesMap[size]);
+
+        this.body.style.fontSize = iconPixelSizesMap[size];
+    }
+
+    public setIcon(icon: string): void {
+        this.icon = icon;
+        this.body.innerHTML = icon;
+    }
+
+    public setVariant(variant: IconVariants = "Filled"): void {
+        this.variant = variant;
+    }
+
+    public setColor(color: Colors = "primary"): void {
+        if (this.color !== color) {
+            this.deleteClass("WUI-icon-color-" + this.color);
+        }
+
+        this.addClass("WUI-icon-color-" + color);
+
+        this.color = color;
+    }
+
+    public getVariant(): IconVariants {
+        return this.variant;
+    }
+
+    public getColor(): Colors {
+        return this.color || "primary";
+    }
+
+    public getIcon(): string {
+        return this.icon;
+    }
+
+    public getIconSize(): IconSizes {
+        return this.iconSize;
+    }
+
+    public getRequiredWidth(): number {
+        const sizeString = iconPixelSizesMap[this.iconSize];
+        const size = parseInt(sizeString.split("px")[0]);
+        return size;
+    }
+}
+
+export type wIconProps = WidgetProps & {
+    icon: string;
+    variant?: IconVariants | null;
+    color?: Colors | null;
+    size?: IconSizes | null;
+};
+
+export const WIcon = (props: wIconProps) => {
+    if (!props.id) {
+        props.id = "Icon." + UID();
+    }
+
+    connectWidgetCallback(props.id, getOnlyEventProps(props));
+
+    return normalizeWidget(
+        <div
+            id={props.id}
+            w-icon
+            w-icon-name={props.icon}
+            w-variant={props.variant}
+            w-color={props.color}
+            w-size={props.size}
+        ></div>,
+        props
+    );
+};
+
+export function createIcon(id: string, content: any, parent: Widget | null = null): Icon {
+    const dataIcon = content.getAttribute("w-icon-name");
+    const dataVariant = content.getAttribute("w-variant") || "Filled";
+    const dataColor = content.getAttribute("w-color") || "primary";
+    const dataSize = content.getAttribute("w-size") || "medium";
+
+    let newIcon = new Icon(id, dataIcon, dataVariant, parent);
+
+    if (dataColor) {
+        newIcon.setColor(dataColor);
+    }
+
+    if (dataSize) {
+        newIcon.setIconSize(dataSize);
+    }
+
+    return newIcon;
+}

package/src/ui/IconButton.ui.tsx

@@ -9,6 +9,8 @@ import {
 import { Button, wButtonProps } from "./button.ui";
 import { Icon } from "./Icon.ui";
 import { Label } from "./label.ui";
+import { normalizeWidget } from "./widget.builder";
+import { UID } from "../core/uid";
 
 export class IconButton extends Button {
     icon: Icon;
@@ -16,10 +18,13 @@ export class IconButton extends Button {
 
     showIcon: boolean;
     showText: boolean;
+    centerX: boolean;
 
     constructor(id: string, icon: string = "dark_mode", parent: Widget | null = null) {
         super(id, parent);
 
+        this.centerX = false;
+
         this.setAlign(WidgetAlignTypes.HORIZONTAL);
         this.icon = new Icon(id + ".icon", icon, undefined, this);
         this.label = new Label(id + ".label", undefined, this);
@@ -30,6 +35,16 @@ export class IconButton extends Button {
         this.init();
     }
 
+    protected updateRequiredWidth(): void {
+        if (!this.label) return;
+        if (!this.icon) return;
+
+        const labelWidth = this.label.getRequiredWidth();
+        const iconWith = this.icon.getRequiredWidth();
+
+        this.requiredWidth = labelWidth + iconWith + 70;
+    }
+
     public displayIcon(): void {
         this.showIcon = true;
         this.icon.setVisible(true);
@@ -66,7 +81,8 @@ export class IconButton extends Button {
     public render(): void {
         super.render();
 
-        const iconWidth = 24;
+        const labelWidth = this.label.getRequiredWidth();
+        const iconWidth = this.icon.getRequiredWidth();
         const padding = 5;
 
         if (this.onlyIcon()) {
@@ -81,10 +97,23 @@ export class IconButton extends Button {
             this.label.getBody().style.position = "absolute";
             this.icon.getBody().style.position = "absolute";
 
+            const availableWidth = this.getW() - padding * 5; //Doble padding a la derecha e izquierda y uno de separacion entre label y icon.
+            const requiredWidth = labelWidth + iconWidth + padding * 5;
+
             const labelHeight = this.label.getBody().clientHeight;
 
-            const startX = padding; //this.getBody().clientWidth / 2 - (iconWidth + labelWidth) / 2;
+            let startX = availableWidth / 2 - (iconWidth + padding + labelWidth) / 2;
+
+            if (availableWidth < requiredWidth) {
+                startX = padding * 2;
+            }
+
+            if (!this.centerX) {
+                startX = padding * 2;
+            }
+
             const startLabelX = startX + iconWidth + padding;
+
             let startY = this.getH() / 2 - iconWidth / 2;
             let startLabelY = this.getH() / 2 - labelHeight / 2;
 
@@ -112,10 +141,16 @@ export class IconButton extends Button {
     public setText(text: string): void {
         //super.setText(text);
         this.label.setText(text);
+        this.updateRequiredWidth();
     }
 
     public setIcon(icon: string): void {
         this.icon.setIcon(icon);
+        this.updateRequiredWidth();
+    }
+
+    public setCenterX(centerX: boolean): void {
+        this.centerX = centerX;
     }
 }
 
@@ -123,12 +158,17 @@ export type wIconButtonProps = Omit<wButtonProps, "text"> & {
     icon?: string | null;
     text?: string | null;
     onlyIcon?: boolean | null;
+    centerX?: boolean | null;
 };
 
 export const WIconButton = (props: wIconButtonProps) => {
+    if (!props.id) {
+        props.id = "IconButton." + UID();
+    }
+
     connectWidgetCallback(props.id, getOnlyEventProps(props));
 
-    return (
+    return normalizeWidget(
         <button
             id={props.id}
             w-icon-button
@@ -139,12 +179,9 @@ export const WIconButton = (props: wIconButtonProps) => {
             w-color={props.color}
             w-width={props.width}
             w-height={props.height}
-            w-class={props.classNames}
-            w-orientation={props.orientation}
-            w-fixed-size={props.fixedSize}
-            w-padding={props.padding}
-            w-type={props.type}
-        />
+            w-center-x={props.centerX}
+        />,
+        props
     );
 };
 
@@ -160,6 +197,7 @@ export function createIconButton(
     const dataWidth = content.getAttribute("w-width");
     const dataHeight = content.getAttribute("w-height");
     const dataOnlyIcon = content.getAttribute("w-only-icon");
+    const dataCenterX = content.getAttribute("w-center-x");
 
     let newIconButton = new IconButton(id, dataIcon, parent);
 
@@ -187,5 +225,9 @@ export function createIconButton(
         newIconButton.onlyIcon();
     }
 
+    if (dataCenterX) {
+        newIconButton.setCenterX(true);
+    }
+
     return newIconButton;
 }

package/src/ui/{textbox.ui.tsx → Textbox.ui.tsx}

@@ -1,6 +1,7 @@
-import { WidgetProps } from "./widget.builder";
+import { normalizeWidget, WidgetProps } from "./widget.builder";
 import "./styles/textbox.css";
 import { Widget, WidgetTypes, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
+import { UID } from "../core/uid";
 
 export type InputTypes =
     | "text"
@@ -53,7 +54,7 @@ export class Textbox extends Widget {
         this.getBody().style.overflow = "";
     }
 
-    getValue(): string {
+    public getValue(): string {
         const value = (this.input.getBody() as HTMLInputElement).value;
 
         if (value) return value;
@@ -61,7 +62,7 @@ export class Textbox extends Widget {
         return "";
     }
 
-    setValue(value: string): void {
+    public setValue(value: string): void {
         (this.input.getBody() as HTMLInputElement).value = value;
         this.positionLabel();
     }
@@ -114,17 +115,17 @@ export class Textbox extends Widget {
         super.render();
     }
 
-    setTitle(title: string): void {
+    public setTitle(title: string): void {
         this.title = title;
         this.label.getBody().innerHTML = this.title;
     }
 
-    setInputType(type: InputTypes): void {
+    public setInputType(type: InputTypes): void {
         this.inputType = type;
         this.input.getBody().setAttribute("type", this.inputType);
     }
 
-    getTitle(): string {
+    public getTitle(): string {
         return this.title;
     }
 
@@ -132,11 +133,11 @@ export class Textbox extends Widget {
         return this.label;
     }*/
 
-    getInput(): Widget {
+    public getInput(): Widget {
         return this.input;
     }
 
-    getInputType(): string {
+    public getInputType(): string {
         return this.inputType;
     }
 }
@@ -146,25 +147,27 @@ export type wTextBoxProps = WidgetProps & {
     inputType?: InputTypes | null;
     width?: number | null;
     height?: number | null;
+    value?: string | null;
 };
 
 export const WTextbox = (props: wTextBoxProps) => {
+    if (!props.id) {
+        props.id = "Textbox." + UID();
+    }
+
     connectWidgetCallback(props.id, getOnlyEventProps(props));
 
-    return (
+    return normalizeWidget(
         <input
             id={props.id}
             w-textbox
             w-title={props.title}
+            w-value={props.value}
             w-input-type={props.inputType}
             w-width={props.width}
             w-height={props.height}
-            w-class={props.classNames}
-            w-orientation={props.orientation}
-            w-fixed-size={props.fixedSize}
-            w-padding={props.padding}
-            w-type={props.type}
-        />
+        />,
+        props
     );
 };
 
@@ -172,6 +175,7 @@ export function createTextbox(id: string, content: any, parent: Widget | null =
     let newTextbox = new Textbox(id, parent);
 
     const dataTitle = content.getAttribute("w-title");
+    const dataValue = content.getAttribute("w-value");
     const dataInputType = content.getAttribute("w-input-type");
     const dataWidth = content.getAttribute("w-width");
     const dataHeight = content.getAttribute("w-height");
@@ -188,6 +192,10 @@ export function createTextbox(id: string, content: any, parent: Widget | null =
         newTextbox.setInitialH(dataHeight);
     }
 
+    if (dataValue) {
+        newTextbox.setValue(dataValue);
+    }
+
     newTextbox.setTitle(dataTitle);
 
     return newTextbox;