@web-atoms/core 2.6.13 → 2.6.17

package/src/web/styles/AtomTabbedPageStyle.ts

@@ -1,125 +0,0 @@
-import CloseButtonDataUrl from "@web-atoms/core/src/web/images/close-button-hover.svg";
-import CloseButtonHoverDataUrl from "@web-atoms/core/src/web/images/close-button.svg";
-import { AtomStyle } from "./AtomStyle.js";
-import { AtomTheme } from "./AtomTheme.js";
-import { IStyleDeclaration } from "./IStyleDeclaration.js";
-
-export class AtomTabbedPageStyle extends AtomStyle {
-
-    public padding: number;
-
-    public get theme(): AtomTheme {
-        return this.styleSheet as AtomTheme;
-    }
-
-    public get root(): IStyleDeclaration {
-        return {
-            position: "absolute",
-            left: 0,
-            right: 0,
-            top: 0,
-            bottom: 0,
-            subclasses: {
-                " .page-host": {
-                    position: "absolute",
-                    left: 0,
-                    right: 0,
-                    top: "30px",
-                    bottom: 0,
-                    overflow: "auto",
-                    subclasses: {
-                        " > *": {
-                            position: "absolute",
-                            left: 0,
-                            right: 0,
-                            top: 0,
-                            bottom: 0,
-                            overflow: "auto",
-                        }
-                    }
-                },
-                " .tabs": {
-                    position: "absolute",
-                    left: 0,
-                    top: 0,
-                    right: 0,
-                    overflow: "hidden",
-                    height: "30px",
-                    subclasses: {
-                        " .tab-item": this.tabItem,
-                        " .close-button": this.closeButton,
-                        " .selected-tab-item": this.selectedTabItem,
-                    }
-                },
-            }
-        };
-    }
-
-    public get tabItem(): IStyleDeclaration {
-        return {
-            display: "inline-block",
-            borderTopLeftRadius: (this.padding || this.theme.padding) + "px",
-            borderTopRightRadius: (this.padding || this.theme.padding) + "px",
-            marginLeft: "2px",
-            padding: 0,
-            borderStyle: "solid",
-            borderWidth: "1px",
-            borderColor: "lightgray",
-            backgroundColor: this.theme.bgColor,
-            minWidth: "90px",
-            minHeight: "30px",
-            cursor: "default",
-            position: "relative",
-            subclasses: {
-                ":hover": {
-                    backgroundColor: this.theme.hoverColor
-                },
-                "> div": {
-                    display: "inline-block",
-                    padding: (this.padding || this.theme.padding) + "px",
-                    paddingRight: ((this.padding || this.theme.padding) + 23) + "px",
-                    right: "22px"
-                }
-            }
-        };
-    }
-
-    public get selectedTabItem(): IStyleDeclaration {
-        return {
-            ... this.tabItem,
-            borderColor: this.theme.activeColor,
-            backgroundColor: this.theme.selectedBgColor,
-            color: this.theme.selectedColor,
-            subclasses: {
-                ":hover": {
-                    backgroundColor: this.theme.selectedBgColor,
-                    color: this.theme.hoverColor
-                },
-                "> div": {
-                    display: "inline-block",
-                    padding: (this.padding || this.theme.padding) + "px",
-                    paddingRight: ((this.padding || this.theme.padding) + 23) + "px",
-                    right: "22px"
-                }
-            }
-        };
-    }
-
-    public get closeButton(): IStyleDeclaration {
-        return {
-            position: "absolute",
-            right: "5px",
-            top: "5px",
-            width: "0",
-            height: "0",
-            padding: "8px",
-            backgroundImage: CloseButtonDataUrl,
-            subclasses: {
-                ":hover": {
-                    backgroundImage: CloseButtonHoverDataUrl
-                }
-            }
-        };
-    }
-
-}

package/src/web/styles/AtomTheme.ts

@@ -1,61 +0,0 @@
-import { AtomWindowStyle } from "./AtomWindowStyle.js";
-
-import { AtomPopupStyle } from "./AtomPopupStyle.js";
-
-import { App } from "../../App.js";
-import { BindableProperty } from "../../core/BindableProperty.js";
-import Color from "../../core/Color.js";
-import Colors, { ColorItem } from "../../core/Colors.js";
-import { IDisposable, INotifyPropertyChanging } from "../../core/types.js";
-import { Inject } from "../../di/Inject.js";
-import { RegisterSingleton } from "../../di/RegisterSingleton.js";
-import { NavigationService } from "../../services/NavigationService.js";
-import { AtomListBox } from "../controls/AtomListBox.js";
-import { AtomWindow } from "../controls/AtomWindow.js";
-import { AtomStyleSheet } from "../styles/AtomStyleSheet.js";
-import { AtomListBoxStyle } from "./AtomListBoxStyle.js";
-
-@RegisterSingleton
-export class AtomTheme extends AtomStyleSheet
-    implements
-        INotifyPropertyChanging,
-        IDisposable {
-
-    public bgColor: ColorItem = Colors.white;
-
-    public color: ColorItem = Colors.gray;
-
-    public hoverColor: ColorItem = Colors.lightGray;
-
-    public activeColor: ColorItem = Colors.lightBlue;
-
-    public selectedBgColor: ColorItem = Colors.blue;
-
-    public selectedColor: ColorItem = Colors.white;
-
-    public padding: number = 5;
-
-    // public readonly window = this.createStyle(AtomWindow, AtomWindowStyle, "window");
-
-    // public readonly popup = this.createNamedStyle(AtomPopupStyle, "popup");
-
-    constructor(
-        @Inject app: App,
-        @Inject private navigationService: NavigationService) {
-        super(app, "atom-theme");
-
-        setTimeout(() => {
-            window.addEventListener("resize", () => {
-                setTimeout(() => {
-                    this.pushUpdate();
-                }, 10);
-            });
-            document.body.addEventListener("resize", () => {
-                setTimeout(() => {
-                    this.pushUpdate();
-                }, 10);
-            });
-        }, 1000);
-    }
-
-}

package/src/web/styles/AtomToggleButtonBarStyle.ts

@@ -1,76 +0,0 @@
-import { BindableProperty } from "../../core/BindableProperty.js";
-import { AtomListBoxStyle } from "./AtomListBoxStyle.js";
-import { AtomStyleSheet } from "./AtomStyleSheet.js";
-import { AtomTheme } from "./AtomTheme.js";
-import { IStyleDeclaration } from "./IStyleDeclaration.js";
-
-export class AtomToggleButtonBarStyle extends AtomListBoxStyle {
-
-    public toggleColor: string = "blue";
-
-    public get root(): IStyleDeclaration {
-        return {
-            // tslint:disable-next-line: no-string-literal
-            ... this.getBaseProperty(AtomToggleButtonBarStyle , "root"),
-            display: "inline-block",
-            paddingInlineStart: 0,
-            margin: 0
-        };
-    }
-
-    public get item(): IStyleDeclaration {
-        return {
-            // tslint:disable-next-line:no-string-literal
-            ... this.getBaseProperty(AtomToggleButtonBarStyle , "item"),
-            borderRadius: 0,
-            display: "inline-block",
-            border: "1px solid",
-            borderLeft: "none",
-            color: this.toggleColor,
-            borderColor: this.toggleColor,
-            cursor: "pointer",
-            subclasses: {
-                ":first-child": {
-                    borderTopLeftRadius: `${this.padding || this.theme.padding}px`,
-                    borderBottomLeftRadius: `${this.padding || this.theme.padding}px`,
-                    borderTopRightRadius: 0,
-                    borderBottomRightRadius: 0,
-                    borderLeft: "1px solid"
-                },
-                ":last-child": {
-                    borderTopLeftRadius: 0,
-                    borderBottomLeftRadius: 0,
-                    borderTopRightRadius: `${this.padding || this.theme.padding}px`,
-                    borderBottomRightRadius: `${this.padding || this.theme.padding}px`
-                }
-            }
-        };
-    }
-
-    public get selectedItem(): IStyleDeclaration {
-        return {
-            ... this.getBaseProperty(AtomToggleButtonBarStyle, "selectedItem"),
-            borderRadius: 0,
-            display: "inline-block",
-            border: "1px solid",
-            borderLeft: "none",
-            borderColor: this.toggleColor,
-            cursor: "pointer",
-            subclasses: {
-                ":first-child": {
-                    borderTopLeftRadius: `${this.padding || this.theme.padding}px`,
-                    borderBottomLeftRadius: `${this.padding || this.theme.padding}px`,
-                    borderTopRightRadius: 0,
-                    borderBottomRightRadius: 0
-                },
-                ":last-child": {
-                    borderTopLeftRadius: 0,
-                    borderBottomLeftRadius: 0,
-                    borderTopRightRadius: `${this.padding || this.theme.padding}px`,
-                    borderBottomRightRadius: `${this.padding || this.theme.padding}px`
-                }
-            }
-        };
-    }
-
-}

package/src/web/styles/CSS.ts

@@ -1,77 +0,0 @@
-import { AtomStyleRules } from "../../style/StyleRule.js";
-import { IStyleDeclaration } from "./IStyleDeclaration.js";
-
-let styleId = 1;
-
-function fromCamelToHyphen(input: string): string {
-    return input.replace( /([a-z])([A-Z])/g, "$1-$2" ).toLowerCase();
-}
-
-function createStyleText(name: string, styles: IStyleDeclaration): string[] {
-    const styleList: any[] = [];
-    const subclasses = [];
-    for (const key in styles) {
-        if (styles.hasOwnProperty(key)) {
-            if (/^(\_\$\_|className$|toString$)/i.test(key)) {
-                continue;
-            }
-            const element = styles[key];
-            if (element === undefined || element === null) {
-                continue;
-            }
-            const keyName = fromCamelToHyphen(key);
-            if (key === "subclasses") {
-                const n = name;
-                for (const subclassKey in element) {
-                    if (element.hasOwnProperty(subclassKey)) {
-                        const ve = element[subclassKey];
-                        subclasses.push( ... createStyleText(`${n}${subclassKey}`, ve));
-                    }
-                }
-            } else {
-                if (element.url) {
-                    styleList.push(`${keyName}: url(${element})`);
-                } else {
-                    styleList.push(`${keyName}: ${element}`);
-                }
-            }
-        }
-    }
-    const cname = fromCamelToHyphen(name);
-
-    const styleClassName = `${cname}`;
-
-    if (styleList.length) {
-        return [`${styleClassName} {\r\n${styleList.join(";\r\n")}; }`, ... subclasses];
-    }
-    return subclasses;
-}
-
-/**
- * It will add custom stylesheet to the document and
- * it will create a new unique scope class if selectorName was not provided
- * @param style AtomStyleRules | IStyleDeclaration
- * @param selectorName name of the selector (only use for CustomElement, do not use for components)
- * @returns string
- */
-export default function CSS(style: IStyleDeclaration | AtomStyleRules, selectorName?: string): string {
-    let styleName = "";
-    if (style instanceof AtomStyleRules) {
-        styleName = style.name || "";
-        if (styleName) {
-            styleName = "-" + styleName;
-        }
-        style = style.style;
-    }
-    let className = selectorName;
-    if (!selectorName) {
-        className = `wa-style-${styleId++}${styleName}`;
-        selectorName = `.${className}`;
-    }
-    const s = document.createElement("style");
-    s.id = selectorName;
-    const list = createStyleText(selectorName, style);
-    s.textContent = list.join("\r\n");
-    document.head.appendChild(s);
-    return className;
-}